Foundry/ripcrypt
1
0
Fork 0
Code Issues 22 Pull requests Releases Activity Actions

Implement most of shield functionality using the armour implementation as a backbone

Browse source
This commit is contained in:
Oliver-Akins 2025-01-19 16:13:28 -07:00
parent 27d924e336
commit 9d48794b83
9 changed files with 60 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

40
templates/Apps/HeroSummaryCardV1/content.hbs
View file

@ -33,31 +33,26 @@
></rc-svg>
{{#each armours as | slot |}}
<div class="{{@key}}">
<div class="compass small">{{ slot.defense }}</div>
<div class="compass small">
<span class="value">
{{ slot.defense }}
</span>
{{#if slot.shielded}}
<rc-icon
class="shield"
name="icons/shield-solid"
data-tooltip="{{ rc-i18n "RipCrypt.tooltips.shield-bonus" value=@root.shield.bonus }}"
data-tooltip-direction="UP"
var:size="20px"
var:fill="var(--accent-3)"
var:stroke="black"
var:stroke-width="8px"
></rc-icon>
{{/if}}
</div>
<span class="label">{{ rc-i18n (concat "RipCrypt.common.anatomy." @key) }}</span>
</div>
{{/each}}
<!--
<div class="head">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
</div>
<div class="body">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
</div>
<div class="arms">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
</div>
<div class="legs">
<div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
</div>
-->
<div class="shield">
<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
</div>
</div>
<ul class="armour-items">
<li class="row-alt">
@ -78,6 +73,7 @@
</li>
<li class="row-alt">
<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
<span class="value ellipses">{{ shield.name }}</span>
</li>
</ul>
</div>

12
templates/Apps/HeroSummaryCardV1/style.css
View file

@ -237,11 +237,17 @@
/* Positioning */
.head, .body, .legs { grid-column: 1; }
.arms, .shield { grid-column: 2; }
.arms { grid-column: 2; }
.head { grid-row: 1; }
.body, .arms { grid-row: 2; }
.legs, .shield { grid-row: 3; }
.shield { align-self: end; }
.legs { grid-row: 3; }
.shield {
--distance: -7px;
position: absolute;
top: var(--distance);
right: var(--distance);
}
.armour-items {
display: contents;