RC-36 | Abilities | Guts Input

This commit is contained in:
Oliver-Akins 2024-12-28 23:56:48 -07:00
parent 9c967aa354
commit 23cad8fcc3
4 changed files with 72 additions and 7 deletions

View file

@ -71,6 +71,7 @@
class="value"
value="{{ability.value}}"
name="system.ability.{{ability.id}}"
min=0
>
{{else}}
<span>{{ability.value}}</span>
@ -92,7 +93,44 @@
{{/each}}
{{!-- Health --}}
<div></div>
<div class="ability">
<div class="compass dual">
{{#if meta.editable}}
<input
type="number"
id="{{meta.idp}}-guts-value"
class="value"
name="system.guts.value"
value="{{guts.value}}"
min="0"
>
{{else}}
<span
class="value"
aria-describedby="{{meta.idp}}-guts-value-label"
{{!-- TODO: aria-label="{{ rc-i18n "RipCrypt.Apps.a11y.guts-value-readonly" }}" --}}
>
{{ guts.value }}
</span>
{{/if}}
<span
class="max"
aria-hidden="true"
{{!-- TODO: aria-label="{{ rc-i18n "RipCrypt.Apps.a11y.guts-max-readonly" }}" --}}
>
{{ guts.max }}
</span>
</div>
{{#if meta.editable}}
<label class="col-header" for="{{meta.idp}}-guts-value">
{{ rc-i18n "RipCrypt.common.guts" }}
</label>
{{else}}
<div class="col-header label" id="{{meta.idp}}-guts-value-label">
{{ rc-i18n "RipCrypt.common.guts" }}
</div>
{{/if}}
</div>
{{!-- Move & Run --}}
<div class="ability">

View file

@ -115,8 +115,8 @@
&.dual {
position: relative;
font-size: 1rem;
--distance-from-edge: 3px;
font-size: var(--font-size-14);
--distance-from-edge: 4px;
&::after {
display: block;
@ -132,11 +132,13 @@
width: 50%;
position: absolute;
text-align: center;
/* border-bottom: none; */
}
> .value {
top: var(--distance-from-edge);
left: var(--distance-from-edge);
clip-path: polygon(100% 0, 100% 60%, 60% 100%, 0 100%, 0 0);
}
> .max {
bottom: var(--distance-from-edge);