Skip to content

Commit d265880

Browse files
CarlosFdezCarlosFdez
committed
Fix bugs with players without permissions interacting with clocks
1 parent e4a131f commit d265880

File tree

3 files changed

+106
-93
lines changed

3 files changed

+106
-93
lines changed

‎module/clock-panel.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ClockDatabase } from "./database.js";
12
import { ClockAddDialog } from "./dialog.js";
23
import { MODULE_ID } from "./settings.js";
34
import SortableJS from "./sortable.complete.esm.js";
@@ -9,6 +10,11 @@ export class ClockPanel extends fapi.HandlebarsApplicationMixin(fapi.Application
910
lastRendered = [];
1011
#sortable = null;
1112

13+
/**
14+
*
15+
* @param {ClockDatabase} db
16+
* @param {*} options
17+
*/
1218
constructor(db, options) {
1319
super(options);
1420
this.db = db;
@@ -71,6 +77,8 @@ export class ClockPanel extends fapi.HandlebarsApplicationMixin(fapi.Application
7177
backgroundColor,
7278
color: clockColors.find((c) => c.id === data.colorId)?.color ?? defaultColor,
7379
spokes: data.max > maxSpokes ? [] : Array(data.max).keys(),
80+
editable: game.user.isGM,
81+
visible: !data.private || game.user.isGM,
7482
}));
7583
}
7684

@@ -104,7 +112,7 @@ export class ClockPanel extends fapi.HandlebarsApplicationMixin(fapi.Application
104112
// Update the last rendered list (to get ready for next cycle)
105113
this.lastRendered = rendered;
106114

107-
for (const clock of html.querySelectorAll(".clock, .points")) {
115+
for (const clock of html.querySelectorAll(".clock-entry.editable :where(.clock, .points)")) {
108116
clock.addEventListener("click", (event) => {
109117
const clockId = event.target.closest("[data-id]").dataset.id;
110118
const clock = this.db.get(clockId);
@@ -132,7 +140,7 @@ export class ClockPanel extends fapi.HandlebarsApplicationMixin(fapi.Application
132140
this.#sortable = new SortableJS(clockList, {
133141
animation: 200,
134142
direction: "vertical",
135-
draggable: ".clock-entry",
143+
draggable: ".clock-entry.editable",
136144
dragClass: "drag-preview",
137145
ghostClass: "drag-gap",
138146
onEnd: (event) => {

‎styles/style.css‎

Lines changed: 94 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ body:has(#effects-panel .effect-item) #clock-panel {
9494
}
9595

9696
&.editable {
97-
.clock-list, a {
97+
.clock-list.editable, a {
9898
pointer-events: initial;
9999
}
100100
}
@@ -136,99 +136,88 @@ body:has(#effects-panel .effect-item) #clock-panel {
136136
font-size: var(--font-size-14);
137137
}
138138
}
139-
140-
.clock-entry {
141-
position: relative;
142-
display: flex;
143-
flex-direction: row;
144-
align-items: center;
145-
direction: ltr;
146-
color: var(--control-icon-color);
147-
height: var(--entry-height);
148-
min-width: var(--entry-width);
149-
max-width: var(--max-entry-width);
139+
}
150140

151-
&::before {
152-
content: ' ';
153-
position: absolute;
154-
width: 100%;
155-
height: 100%;
141+
.clock-display .clock-entry {
142+
position: relative;
143+
display: flex;
144+
flex-direction: row;
145+
align-items: center;
146+
direction: ltr;
147+
color: var(--control-icon-color);
148+
height: var(--entry-height);
149+
min-width: var(--entry-width);
150+
max-width: var(--max-entry-width);
151+
152+
&::before {
153+
content: ' ';
154+
position: absolute;
155+
width: 100%;
156+
height: 100%;
157+
158+
border-radius: 4px calc(var(--entry-height) / 2) calc(var(--entry-height) / 2) 4px;
159+
background: var(--control-bg-color);
160+
border: 1px solid var(--control-border-color);
161+
z-index: 0;
162+
}
156163

157-
border-radius: 4px calc(var(--entry-height) / 2) calc(var(--entry-height) / 2) 4px;
158-
background: var(--control-bg-color);
159-
border: 1px solid var(--control-border-color);
160-
z-index: 0;
161-
}
164+
&.private::before {
165+
border-color: var(--private-highlight-color);
166+
box-shadow: 0 0 3px inset var(--private-highlight-color);
167+
}
162168

163-
&.private::before {
164-
border-color: var(--private-highlight-color);
165-
box-shadow: 0 0 3px inset var(--private-highlight-color);
166-
}
167-
168-
&.hidden {
169-
display: none;
170-
}
171-
172-
.name {
173-
align-items: center;
174-
align-self: stretch;
175-
display: flex;
176-
flex: 1;
169+
&.hidden {
170+
display: none;
171+
}
172+
173+
.name {
174+
align-items: center;
175+
align-self: stretch;
176+
display: flex;
177+
flex: 1;
178+
overflow: hidden;
179+
padding: 0 6px;
180+
position: relative;
181+
text-align: right;
182+
white-space: nowrap;
183+
184+
.value {
185+
cursor: initial;
186+
display: inline;
177187
overflow: hidden;
178-
padding: 0 6px;
179-
position: relative;
180-
text-align: right;
181-
white-space: nowrap;
182-
183-
.value {
184-
cursor: initial;
185-
display: inline;
186-
overflow: hidden;
187-
font-size: var(--font-size-16);
188-
text-overflow: ellipsis;
189-
flex: 1;
190-
z-index: 1;
191-
192-
i {
193-
font-size: 0.8em;
194-
margin-right: 0.25rem;
195-
margin-top: -0.2em;
196-
opacity: 0.95;
197-
}
198-
}
199-
}
200-
201-
.controls {
202-
display: none;
203-
font-size: 0.85em;
204-
align-items: center;
188+
font-size: var(--font-size-16);
189+
text-overflow: ellipsis;
190+
flex: 1;
205191
z-index: 1;
206-
flex: 0 0 min-content;
207-
position: absolute;
208-
top: 0;
209-
left: 0;
210-
right: 0;
211-
bottom: 0;
212-
padding: 0 6px;
213-
gap: 1px;
214-
215-
a {
216-
padding-top: 5px;
217-
padding-bottom: 4px;
218-
+ .value {
219-
padding-left: 2px;
220-
}
221-
}
222-
}
223192

224-
/* Show controls, hide real name, when hovering */
225-
&:hover {
226-
.controls {
227-
display: flex;
193+
i {
194+
font-size: 0.8em;
195+
margin-right: 0.25rem;
196+
margin-top: -0.2em;
197+
opacity: 0.95;
228198
}
199+
}
200+
}
229201

230-
.name > .value {
231-
visibility: hidden;
202+
.controls {
203+
display: none;
204+
font-size: 0.85em;
205+
align-items: center;
206+
z-index: 1;
207+
flex: 0 0 min-content;
208+
position: absolute;
209+
top: 0;
210+
left: 0;
211+
right: 0;
212+
bottom: 0;
213+
padding: 0 6px;
214+
gap: 1px;
215+
216+
a {
217+
padding-top: 5px;
218+
padding-bottom: 4px;
219+
+ .value {
220+
padding-left: 2px;
232221
}
233222
}
234223
}
@@ -237,7 +226,6 @@ body:has(#effects-panel .effect-item) #clock-panel {
237226
background: white;
238227
border-radius: 25%;
239228
border: black 2px solid;
240-
cursor: pointer;
241229
color: black;
242230

243231
display: flex;
@@ -256,7 +244,6 @@ body:has(#effects-panel .effect-item) #clock-panel {
256244
}
257245

258246
.clock {
259-
cursor: pointer;
260247
width: var(--entry-height);
261248
height: var(--entry-height);
262249

@@ -288,4 +275,22 @@ body:has(#effects-panel .effect-item) #clock-panel {
288275
transform: rotate(calc((var(--index) * 1turn) / var(--areas)));
289276
}
290277
}
291-
}
278+
279+
/* Show controls, hide real name, when hovering */
280+
&.editable {
281+
&:hover {
282+
.controls {
283+
display: flex;
284+
}
285+
286+
.name > .value {
287+
visibility: hidden;
288+
}
289+
}
290+
291+
.points,
292+
.clock {
293+
cursor: pointer;
294+
}
295+
}
296+
}

‎templates/clock-panel.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
{{#if clocks}}
66
<div class="clock-list" >
77
{{#each clocks as |clock|}}
8-
<div class="clock-entry ui-control {{#if clock.private}}private{{/if}} {{#if (and clock.private (not @root.options.editable))}}hidden{{/if}}" data-id="{{clock.id}}">
8+
<div class="clock-entry ui-control {{#if clock.editable}}editable{{/if}} {{#if clock.private}}private{{/if}} {{#unless clock.visible}}hidden{{/unless}}" data-id="{{clock.id}}">
99
<div class="name">
1010
<span class="value">{{#if clock.private}}<i class="fas fa-eye-slash"></i> {{/if}}{{clock.name}}</span>
11-
{{#if @root.options.editable}}
11+
{{#if clock.editable}}
1212
<div class="controls">
1313
<a data-action="deleteEntry"><i class="fa-solid fa-fw fa-trash"></i></a>
1414
<a data-action="editEntry"><i class="fa-solid fa-fw fa-edit"></i></a>

0 commit comments

Comments
 (0)