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

Finish the Skills Card redesign (closes #11)

Browse source
This commit is contained in:
Oliver-Akins 2025-04-12 00:09:45 -06:00
parent 1bf1b2cd91
commit 5b74fd6beb
3 changed files with 112 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

3
module/Apps/ActorSheets/HeroSkillsCardV1.mjs
View file

@ -11,6 +11,7 @@ import { PopoverEventManager } from "../../utils/PopoverEventManager.mjs";
const { HandlebarsApplicationMixin } = foundry.applications.api;
const { ActorSheetV2 } = foundry.applications.sheets;
const { ContextMenu } = foundry.applications.ui;
const { deepClone } = foundry.utils;
export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin(ActorSheetV2)) {
@ -99,6 +100,8 @@ export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin
ctx = await HeroSkillsCardV1.prepareAmmo(ctx);
ctx = await HeroSkillsCardV1.prepareSkills(ctx);
ctx.aura = deepClone(ctx.actor.system.aura);
Logger.debug(`Context:`, ctx);
return ctx;
};

101
templates/Apps/HeroSkillsCardV1/content.hbs
View file

@ -104,46 +104,6 @@
{{/each}}
</ol>
<div class="ammo pill with-icon">
<rc-icon
class="ammo-info-icon"
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
></rc-icon>
<div class="label">
{{ rc-i18n "RipCrypt.common.ammo"}}
</div>
<div class="input">
{{ ammo }}
</div>
</div>
{{#each favouriteAmmo as | data |}}
{{#if data}}
<div
class="pill fav-ammo"
data-item-id="{{data.uuid}}"
>
<div>
{{data.name}}
</div>
<input
type="number"
id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
value="{{data.quantity}}"
aria-label="Quantity of {{data.name}}"
data-foreign-update-on="change,blur"
data-foreign-uuid="{{data.uuid}}"
data-foreign-name="system.quantity"
>
</div>
{{else}}
<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
</div>
{{/if}}
{{/each}}
{{!-- * Currencies --}}
<div class="currencies">
<div class="currency pill">
@ -180,4 +140,63 @@
>
</div>
</div>
</div>
{{!-- * Ammo Summary & Stars --}}
<ul class="ammo-list">
<li>
<div class="ammo pill with-icon">
<rc-icon
class="ammo-info-icon"
name="icons/info-circle"
var:size="16px"
var:fill="currentColor"
></rc-icon>
<div class="label">
{{ rc-i18n "RipCrypt.common.ammo"}}
</div>
<div class="input">
{{ ammo }}
</div>
</div>
</li>
{{#each favouriteAmmo as | data |}}
<li>
{{#if data}}
<div
class="pill fav-ammo"
data-item-id="{{data.uuid}}"
>
<div>
{{data.name}}
</div>
<input
type="number"
id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
value="{{data.quantity}}"
aria-label="Quantity of {{data.name}}"
data-foreign-update-on="change,blur"
data-foreign-uuid="{{data.uuid}}"
data-foreign-name="system.quantity"
>
</div>
{{else}}
<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{{!-- * Aura Size --}}
{{#if aura}}
<div class="aura-size dual-pill">
<span class="label" aria-hidden="true">{{rc-i18n "RipCrypt.common.aura"}}</span>
<div class="values">
<span class="value" data-tooltip="RipCrypt.tooltips.auras.normal">{{aura.normal}}</span>
<span class="slash" aria-hidden="true"></span>
<span class="value" data-tooltip="RipCrypt.tooltips.auras.heavy">{{aura.heavy}}</span>
</div>
</div>
{{/if}}
</div>

55
templates/Apps/HeroSkillsCardV1/style.css
View file

@ -6,7 +6,7 @@
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(13, minmax(0, 1fr));
grid-template-rows: repeat(14, minmax(0, 1fr));
column-gap: var(--col-gap);
row-gap: var(--row-gap);
@ -68,20 +68,20 @@
.grip-skills-header {
grid-column: 1 / span 1;
grid-row: 6 / span 1;
grid-row: 7 / span 1;
}
.grip-skills {
grid-column: 1 / span 1;
grid-row: 7 / span 4;
grid-row: 8 / span 4;
}
.glim-skills-header {
grid-column: 2 / span 1;
grid-row: 6 / span 1;
grid-row: 7 / span 1;
}
.glim-skills {
grid-column: 2 / span 1;
grid-row: 7 / span 4;
grid-row: 8 / span 4;
}
.gear-list {
@ -100,14 +100,29 @@
}
}
.ammo-list {
grid-column: 1 / span 2;
grid-row: 13 / span 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
list-style-type: none;
padding: 0;
}
.currencies {
grid-column: 1 / span 2;
grid-row: 13 / span 1;
grid-row: 12 / span 1;
display: grid;
column-gap: var(--col-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aura-size {
grid-column: 3;
grid-row: 14;
}
.pill {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
@ -136,4 +151,32 @@
text-align: center;
}
}
.dual-pill {
border-radius: 999px;
background: var(--accent-1);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.25rem;
align-items: center;
padding-left: 8px;
.values {
border-radius: 999px;
margin: 2px;
background: var(--base-background);
color: var(--base-text);
padding: 0.125rem 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 0.5rem;
--slash-color: var(--accent-1);
}
.value {
flex-grow: 1;
text-align: center;
}
}
}