diff --git a/assets/_credit.txt b/assets/_credit.txt index d2a13c1..b58b8a5 100644 --- a/assets/_credit.txt +++ b/assets/_credit.txt @@ -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: - icons/roll.svg (https://thenounproject.com/icon/dice-5195278/) : Rights Purchased. diff --git a/assets/hero-silhouette.svg b/assets/hero-silhouette.svg new file mode 100644 index 0000000..12e2bb5 --- /dev/null +++ b/assets/hero-silhouette.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/module/Apps/elements/Icon.mjs b/module/Apps/elements/Icon.mjs index 722ee36..4738c23 100644 --- a/module/Apps/elements/Icon.mjs +++ b/module/Apps/elements/Icon.mjs @@ -123,4 +123,4 @@ export class RipCryptIcon extends StyledShadowElement(HTMLElement) { temp.innerHTML = content; return temp.querySelector(`svg`); }; -}; \ No newline at end of file +}; diff --git a/module/Apps/elements/_index.mjs b/module/Apps/elements/_index.mjs index baaef94..4bde4f2 100644 --- a/module/Apps/elements/_index.mjs +++ b/module/Apps/elements/_index.mjs @@ -1,8 +1,10 @@ import { Logger } from "../../utils/Logger.mjs"; import { RipCryptIcon } from "./Icon.mjs"; +import { RipCryptSVGLoader } from "./svgLoader.mjs"; const components = [ RipCryptIcon, + RipCryptSVGLoader, ]; export function registerCustomComponents() { diff --git a/module/Apps/elements/mixins/StyledShadowElement.mjs b/module/Apps/elements/mixins/StyledShadowElement.mjs index c645111..5eb6894 100644 --- a/module/Apps/elements/mixins/StyledShadowElement.mjs +++ b/module/Apps/elements/mixins/StyledShadowElement.mjs @@ -69,4 +69,4 @@ export function StyledShadowElement(Base) { } }; }; -}; \ No newline at end of file +}; diff --git a/module/Apps/elements/svgLoader.mjs b/module/Apps/elements/svgLoader.mjs new file mode 100644 index 0000000..d9bf622 --- /dev/null +++ b/module/Apps/elements/svgLoader.mjs @@ -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`; +}; diff --git a/templates/Apps/HeroSummaryCardV1/content.hbs b/templates/Apps/HeroSummaryCardV1/content.hbs index 36414fb..66058a4 100644 --- a/templates/Apps/HeroSummaryCardV1/content.hbs +++ b/templates/Apps/HeroSummaryCardV1/content.hbs @@ -23,6 +23,14 @@ {{ rc-i18n "RipCrypt.common.armour" }}
+
0
{{ rc-i18n "RipCrypt.common.anatomy.head" }} diff --git a/templates/Apps/HeroSummaryCardV1/style.css b/templates/Apps/HeroSummaryCardV1/style.css index 57cabbe..a08d0d4 100644 --- a/templates/Apps/HeroSummaryCardV1/style.css +++ b/templates/Apps/HeroSummaryCardV1/style.css @@ -145,6 +145,7 @@ border-radius: 50%; font-size: 1.5rem; position: relative; + background: var(--base-background); > .value { background: none; @@ -162,8 +163,8 @@ } &.small { - --size: 30px; - font-size: 1.15rem; + --size: 35px; + font-size: 1.1rem; } &.dual { @@ -216,12 +217,21 @@ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); justify-items: center; align-items: center; + position: relative; > div { display: flex; flex-direction: column; justify-content: center; align-items: center; + z-index: 1; + } + + > rc-svg { + position: absolute; + bottom: 0; + left: 0; + width: 58%; } } diff --git a/templates/css/components/svg-loader.css b/templates/css/components/svg-loader.css new file mode 100644 index 0000000..b843bc5 --- /dev/null +++ b/templates/css/components/svg-loader.css @@ -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); +}