feat: Add tracker scaling option and display session controls on hover.

This commit is contained in:
CPTN Cosmo 2025-12-21 19:45:41 +01:00
parent 44b80af3d0
commit 690c9d45c9
4 changed files with 49 additions and 10 deletions

View file

@ -12,7 +12,7 @@ Hooks.once("init", () => {
type: Number,
default: 1,
onChange: () => {
if (SessionTrackerApp.instance) SessionTrackerApp.instance.render(true);
if (SessionTrackerApp.instance) SessionTrackerApp.instance.render();
}
});
@ -66,6 +66,24 @@ Hooks.once("init", () => {
}
}
});
// Register scale setting
game.settings.register("fvtt-session-tracker", "scale", {
name: "Tracker Scale",
hint: "Adjust the size of the session tracker.",
scope: "world",
config: true,
type: Number,
default: 1.0,
range: {
min: 0.5,
max: 2.0,
step: 0.1
},
onChange: () => {
if (SessionTrackerApp.instance) SessionTrackerApp.instance.render();
}
});
});
Hooks.once("ready", () => {

View file

@ -41,6 +41,7 @@ export class SessionTrackerApp extends HandlebarsApplicationMixin(ApplicationV2)
async _prepareContext(options) {
return {
sessionNumber: game.settings.get("fvtt-session-tracker", "sessionCount"),
scale: game.settings.get("fvtt-session-tracker", "scale"),
isGM: game.user.isGM
};
}
@ -97,10 +98,17 @@ export class SessionTrackerApp extends HandlebarsApplicationMixin(ApplicationV2)
// Save position
const rect = this.element.getBoundingClientRect();
game.settings.set("fvtt-session-tracker", "position", {
const pos = {
top: rect.top,
left: rect.left
});
};
// Update the application's position state
this.position.top = pos.top;
this.position.left = pos.left;
// Save to settings for persistence across sessions
game.settings.set("fvtt-session-tracker", "position", pos);
});
}
}

View file

@ -20,7 +20,9 @@
flex-direction: column;
align-items: center;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
transition: transform 0.2s ease, box-shadow 0.2s ease;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
transform: scale(var(--scale, 1));
transform-origin: center center;
}
.session-tracker-content:hover {
@ -47,11 +49,22 @@
.session-controls {
display: flex;
gap: 8px;
margin-top: 8px;
margin-top: 0px;
height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 8px;
padding-top: 0;
width: 100%;
justify-content: center;
transition: all 0.3s ease;
}
.session-tracker-content:hover .session-controls {
margin-top: 8px;
height: 36px;
opacity: 1;
padding-top: 8px;
}
.session-controls button {
@ -80,4 +93,4 @@
.session-controls button i {
font-size: 12px;
}
}

View file

@ -1,7 +1,7 @@
<div class="session-tracker-content">
<div class="session-tracker-content" style="--scale: {{scale}}">
<div class="session-label">Session</div>
<div class="session-number">{{sessionNumber}}</div>
{{#if isGM}}
<div class="session-controls">
<button type="button" data-action="decrement" title="Decrease Session Number">
@ -12,4 +12,4 @@
</button>
</div>
{{/if}}
</div>
</div>