Begin working on HUD interactivity

This commit is contained in:
Oliver-Akins 2025-03-01 00:44:49 -07:00
parent c9ed4142e6
commit 507913139f
5 changed files with 65 additions and 19 deletions

View file

@ -83,6 +83,10 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
await this._prepareDifficultyContext(ctx); await this._prepareDifficultyContext(ctx);
break; break;
}; };
case `fateCompass`: {
await this._prepareFateCompassContext(ctx);
break;
};
}; };
Logger.log(`${partId} Context`, ctx); Logger.log(`${partId} Context`, ctx);
@ -95,12 +99,20 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
async _prepareDifficultyContext(ctx) { async _prepareDifficultyContext(ctx) {
ctx.dc = game.settings.get(`ripcrypt`, `dc`); ctx.dc = game.settings.get(`ripcrypt`, `dc`);
};
async _prepareFateCompassContext(ctx) {
ctx.direction = game.settings.get(`ripcrypt`, `currentFate`);
} }
// #endregion // #endregion
// #region Actions // #region Actions
static async #tourDelta() { static async #tourDelta() {
ui.notifications.info(`Button Clicked!`, { console: false }); ui.notifications.info(`Delve Tour Changed`, { console: false });
};
static async #setFate() {
ui.notifications.info(`Fate Set!`, { console: false });
}; };
// #endregion // #endregion
}; };

View file

@ -1,16 +1,16 @@
<div id="fate-compass"> <div id="fate-compass">
<div class="compass-container"> <div class="compass-container">
<div class="compass"> <div class="compass">
<span style="grid-area: N;">N</span> <button type="button" class="transparent" style="grid-area: N;">N</button>
<span style="grid-area: W;">W</span> <button type="button" class="transparent" style="grid-area: W;">W</button>
<rc-icon <rc-icon
class="compass-pointer" class="compass-pointer"
name="icons/arrow-compass" name="icons/arrow-compass"
var:fill="var(--accent-3)" var:fill="var(--accent-3)"
var:size="1rem" var:size="1rem"
></rc-icon> ></rc-icon>
<span style="grid-area: E;">E</span> <button type="button" class="transparent" style="grid-area: E;">E</button>
<span style="grid-area: S;">S</span> <button type="button" class="transparent" style="grid-area: S;">S</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,7 +1,20 @@
<button <div>
{{!-- This is here to prevent height collapsing --}}
&ZeroWidthSpace;
{{#if meta.editable}}
<button
type="button" type="button"
class="icon" class="icon"
data-action="tourDelta" data-action="tourDelta"
> data-tooltip="Next Delve Tour"
&gt; >
</button> <rc-icon
name="icons/arrow-right"
var:size="0.75rem"
var:fill="currentColor"
></rc-icon>
</button>
{{/if}}
</div>

View file

@ -1,7 +1,20 @@
<button <div>
{{!-- This is here to prevent height collapsing --}}
&ZeroWidthSpace;
{{#if meta.editable}}
<button
type="button" type="button"
class="icon" class="icon"
data-action="tourDelta" data-action="tourDelta"
> data-tooltip="Previous Delve Tour"
&lt; >
</button> <rc-icon
name="icons/arrow-left"
var:size="0.75rem"
var:fill="currentColor"
></rc-icon>
</button>
{{/if}}
</div>

View file

@ -3,6 +3,8 @@
outline: none; outline: none;
border: none; border: none;
padding: 2px 4px; padding: 2px 4px;
font-family: inherit;
font-size: inherit;
background: var(--button-background); background: var(--button-background);
color: var(--button-text); color: var(--button-text);
@ -23,4 +25,10 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.transparent {
background: inherit;
color: inherit;
padding: 0;
}
} }