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

RC-105 | Add an rc-svg component for ease of SVG-loading, and add the hero silhouette to the sheet

Browse source
This commit is contained in:
Oliver-Akins 2025-01-15 21:02:17 -07:00
parent c1f0e8d9c5
commit 07f3b24897
9 changed files with 63 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/_credit.txt
View file

@ -1,3 +1,6 @@
Kýnan Antos (Gritsilk Games):
- hero-silhouette.svg : Licensed to Distribute and Modify within the bounds of the "Foundry-RipCrypt" system.
Soetarman Atmodjo: Soetarman Atmodjo:
- icons/roll.svg (https://thenounproject.com/icon/dice-5195278/) : Rights Purchased. - icons/roll.svg (https://thenounproject.com/icon/dice-5195278/) : Rights Purchased.

3
assets/hero-silhouette.svg Normal file
View file

@ -0,0 +1,3 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 144">
<path d="M60.09,49.6c-.29-.54-.81-.99-1.07-1.53-.97-2.08-1.89-4.18-2.78-6.28-.37-.88-1.1-1.83.44-2.51.24-.11.37-.72.29-1.05-.23-.96-.61-1.88-.88-2.83-.52-1.84-1.24-3.66-1.46-5.53-.52-4.34-1.83-8.17-6.3-10.68-1.25-.7-2.31-1.83-3.11-2.97-.97-1.38-1.6-1.83-3.48-1.49-.29-.4-.45-.81-.78-1.02-1.36-.89-1.63-2.09-1.65-3.51-.02-1.32-.36-2.63-.6-3.94-.04-.24-.31-.46-.52-.64-.3-.26-.83-.41-.94-.71-.61-1.69-1.12-3.4-3.49-3.79-.11-.02-.22-.19-.28-.3-.51-1.05-1.37-.9-2.34-.59-3.21,1-5.22,2.99-6.34,5.82-1.37,3.46-2.41,6.97-2.63,10.64-.08,1.31-.71,1.97-2.14,2.43-1.98.64-3.59,1.64-3.97,3.88-.42,2.42-1.38,4.77-2.08,7.15-.12.42-.39,1.06-.18,1.25,1.07.99.2,1.81-.11,2.69-.83,2.34-1.82,4.65-2.45,7.03-.45,1.71-.4,3.53-.62,5.29-.53,4.33-1.81,8.55-1.96,12.97-.14,4.25.08,8.59-1.55,12.74-.19.48.21,1.43.69,1.76,1.49,1.03,3.14,1.87,5.12,3.01-.4,2.52-.71,5.51-1.38,8.44-.94,4.14-2.42,8.2-3.12,12.37-.53,3.14-.17,6.4-.27,9.61-.03,1.05-.28,2.1-.44,3.28.92-.11,1.6-.18,2.58-.3-.48,6.28,2.18,12.34.72,18.67-.52-.28-.84-.46-1.59-.86,0,.98.08,1.65-.01,2.29-.3,2.08-.07,4.41-2.28,5.82-1.65,1.06-3.67,1.66-5.24,2.79-.96.69-1.98,2.04-1.88,3,.14,1.33,1.95.79,3.08.92.05,0,.11-.01.17,0,5.11.57,9.73-1.66,14.66-2.09.87-.08,1.71-.39,2.56-.6,1.03-.26,1.42-.75,1.08-1.76-.56-1.65-.99-3.33-1.42-5.01-.12-.46-.26-1.08-.03-1.41.66-.92.43-1.74.1-2.67-.26-.74-.48-1.56-.4-2.32.32-2.89.65-5.79,1.2-8.64.73-3.72,2.31-7.32,1.8-11.22-.04-.32.81-.95,1.34-1.06,1.61-.32,3.27-.42,4.91-.66,2.23-.32,2.22-.32,2.34,1.77.08,1.43.24,2.86.39,4.55,2.42-2.14,2.42-2.08,4.57-2.2,1.19-.06,1.48.36,1.65,1.32.31,1.69.81,3.35,1.26,5.02.36,1.33.96,2.63,1.08,3.97.28,2.96.34,5.94.47,8.91.02.43.06.93-.15,1.29-.75,1.29-.5,3.23.78,4.32-.65,1.24-1.07,2.71-2.05,3.77-1.38,1.5-1.01,2.91-.47,4.43.4,1.12,1.29,1.47,2.58,1.34,2.89-.28,5.26-1.46,7.18-3.34.48-.47.81-1.17.96-1.8.49-2.05.88-4.11,1.29-6.18.13-.66.52-1.75.23-1.94-1.69-1.09-1.5-2.23-.52-3.56.13-.18.07-.48.07-.73.06-2.74.24-5.49.14-8.22-.1-2.66,1.19-5.27.19-7.98-.42-1.13.1-2.22,1.26-3,.33-.22.53-.61,1.07-1.26-1.18.25-1.84.39-2.49.53,1.97-.86,2.88-2.03,2.75-4.03-.49-8.08-.9-16.17-1.28-24.26-.06-1.35.14-2.71.22-4.06,1.23-.08,2.28-.12,3.33-.22,1.51-.14,2.32-.78,2.44-2.26.25-3.12.71-6.23,1.03-9.35.4-3.78.77-7.57,1.1-11.36.04-.45-.16-.94-.38-1.36ZM20.83,53.69s-.02.07-.04.1c-.09.25-.19.51-.3.76,0,.02-.02.05-.03.07-.11.26-.23.52-.35.78,0,.02-.01.03-.02.05-.13.26-.26.53-.41.79,0,0,0,.02-.01.03-.15.27-.3.54-.46.8,0,0,0,0,0,0-.16.27-.33.54-.5.81,0,0,0,0,0,0-.78,2.16-1.73,4.74-2.02,5.77,0,0,0,0,0,0h0c-.1-.02-.2-.04-.3-.06-.05-.01-.1-.02-.15-.03.41-1.63.81-3.25,1.22-4.88.02,0,.04,0,.06.01.39-1.47.76-2.86.94-3.57.03,0,.09,0,.15,0,.34-1.59.67-3.18,1-4.75.43-2.06.86-4.1,1.29-6.09h0s0,.02,0,.02c.11.29.2.58.29.87.03.12.06.24.09.35.05.18.1.36.14.54.03.15.05.29.08.44.03.15.06.3.08.44.02.17.04.33.06.49.01.13.03.26.04.38.01.18.02.36.03.54,0,.11.01.22.01.33,0,.19,0,.39-.01.58,0,.09,0,.19,0,.28-.01.21-.03.41-.05.62,0,.08-.01.16-.02.24-.03.22-.06.43-.1.65-.01.07-.02.14-.03.2-.04.23-.09.45-.14.68-.01.06-.02.11-.04.17-.06.24-.13.47-.2.71-.01.04-.02.09-.04.13-.08.25-.16.49-.25.73ZM50.47,56.5c-.74-1.25-1.47-2.51-2.22-3.76-.63-1.04-1.17-2.14-1.96-3.08-1.85-2.2-1.27-3.65.9-6.38,2.41,4.15,2.71,8.69,3.65,13.09-.13.04-.25.09-.38.13Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

2
module/Apps/elements/Icon.mjs
View file

@ -123,4 +123,4 @@ export class RipCryptIcon extends StyledShadowElement(HTMLElement) {
temp.innerHTML = content; temp.innerHTML = content;
return temp.querySelector(`svg`); return temp.querySelector(`svg`);
}; };
}; };

2
module/Apps/elements/_index.mjs
View file

@ -1,8 +1,10 @@
import { Logger } from "../../utils/Logger.mjs"; import { Logger } from "../../utils/Logger.mjs";
import { RipCryptIcon } from "./Icon.mjs"; import { RipCryptIcon } from "./Icon.mjs";
import { RipCryptSVGLoader } from "./svgLoader.mjs";
const components = [ const components = [
RipCryptIcon, RipCryptIcon,
RipCryptSVGLoader,
]; ];
export function registerCustomComponents() { export function registerCustomComponents() {

2
module/Apps/elements/mixins/StyledShadowElement.mjs
View file

@ -69,4 +69,4 @@ export function StyledShadowElement(Base) {
} }
}; };
}; };
}; };

11
module/Apps/elements/svgLoader.mjs Normal file
View file

@ -0,0 +1,11 @@
import { RipCryptIcon } from "./Icon.mjs";
/**
Attributes:
@property {string} name - The name of the icon, takes precedence over the path
@property {string} path - The path of the icon file
*/
export class RipCryptSVGLoader extends RipCryptIcon {
static elementName = `rc-svg`;
static _stylePath = `css/components/svg-loader.css`;
};

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

@ -23,6 +23,14 @@
{{ rc-i18n "RipCrypt.common.armour" }} {{ rc-i18n "RipCrypt.common.armour" }}
</div> </div>
<div class="person"> <div class="person">
<rc-svg
var:fill="var(--section-header-background)"
var:stroke="var(--base-background)"
var:stroke-width="2"
var:stroke-linejoin="rounded"
class="silhouette"
name="hero-silhouette"
></rc-svg>
<div class="head"> <div class="head">
<div class="compass small">0</div> <div class="compass small">0</div>
<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span> <span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>

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

@ -145,6 +145,7 @@
border-radius: 50%; border-radius: 50%;
font-size: 1.5rem; font-size: 1.5rem;
position: relative; position: relative;
background: var(--base-background);
> .value { > .value {
background: none; background: none;
@ -162,8 +163,8 @@
} }
&.small { &.small {
--size: 30px; --size: 35px;
font-size: 1.15rem; font-size: 1.1rem;
} }
&.dual { &.dual {
@ -216,12 +217,21 @@
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
justify-items: center; justify-items: center;
align-items: center; align-items: center;
position: relative;
> div { > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1;
}
> rc-svg {
position: absolute;
bottom: 0;
left: 0;
width: 58%;
} }
} }

22
templates/css/components/svg-loader.css Normal file
View file

@ -0,0 +1,22 @@
:host {
display: inline-block;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
svg {
fill: var(--fill);
stroke: var(--stroke);
}
path {
stroke: var(--stroke);
stroke-width: var(--stroke-width);
stroke-linejoin: var(--stroke-linejoin);
}