Begin working on HUD interactivity
This commit is contained in:
parent
c9ed4142e6
commit
507913139f
5 changed files with 65 additions and 19 deletions
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,20 @@
|
||||||
|
<div>
|
||||||
|
{{!-- This is here to prevent height collapsing --}}
|
||||||
|
​
|
||||||
|
|
||||||
|
{{#if meta.editable}}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="icon"
|
class="icon"
|
||||||
data-action="tourDelta"
|
data-action="tourDelta"
|
||||||
|
data-tooltip="Next Delve Tour"
|
||||||
>
|
>
|
||||||
>
|
<rc-icon
|
||||||
|
name="icons/arrow-right"
|
||||||
|
var:size="0.75rem"
|
||||||
|
var:fill="currentColor"
|
||||||
|
></rc-icon>
|
||||||
</button>
|
</button>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,20 @@
|
||||||
|
<div>
|
||||||
|
{{!-- This is here to prevent height collapsing --}}
|
||||||
|
​
|
||||||
|
|
||||||
|
{{#if meta.editable}}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="icon"
|
class="icon"
|
||||||
data-action="tourDelta"
|
data-action="tourDelta"
|
||||||
|
data-tooltip="Previous Delve Tour"
|
||||||
>
|
>
|
||||||
<
|
<rc-icon
|
||||||
|
name="icons/arrow-left"
|
||||||
|
var:size="0.75rem"
|
||||||
|
var:fill="currentColor"
|
||||||
|
></rc-icon>
|
||||||
</button>
|
</button>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue