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

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

View file

@ -1,7 +1,20 @@
<button
type="button"
class="icon"
data-action="tourDelta"
>
&gt;
</button>
<div>
{{!-- This is here to prevent height collapsing --}}
&ZeroWidthSpace;
{{#if meta.editable}}
<button
type="button"
class="icon"
data-action="tourDelta"
data-tooltip="Next Delve Tour"
>
<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
type="button"
class="icon"
data-action="tourDelta"
>
&lt;
</button>
<div>
{{!-- This is here to prevent height collapsing --}}
&ZeroWidthSpace;
{{#if meta.editable}}
<button
type="button"
class="icon"
data-action="tourDelta"
data-tooltip="Previous Delve Tour"
>
<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;
border: none;
padding: 2px 4px;
font-family: inherit;
font-size: inherit;
background: var(--button-background);
color: var(--button-text);
@ -23,4 +25,10 @@
width: 20px;
height: 20px;
}
&.transparent {
background: inherit;
color: inherit;
padding: 0;
}
}