diff --git a/.css/mixins/sr-only.css b/.css/mixins/sr-only.css new file mode 100644 index 0000000..f91df16 --- /dev/null +++ b/.css/mixins/sr-only.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=sr-only.css.map */ diff --git a/.css/mixins/sr-only.css.map b/.css/mixins/sr-only.css.map new file mode 100644 index 0000000..24d1672 --- /dev/null +++ b/.css/mixins/sr-only.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"sr-only.css"} \ No newline at end of file diff --git a/.css/root.css b/.css/root.css new file mode 100644 index 0000000..146cb35 --- /dev/null +++ b/.css/root.css @@ -0,0 +1,71 @@ +.dotdungeon { + container-type: size; +} +.dotdungeon.actor--pc { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); +} +.dotdungeon.actor--pc .panel--avatar { + grid-row: 1/span 2; +} +.dotdungeon.actor--pc .panel--stats { + grid-column: 2/span 2; +} +.dotdungeon.actor--pc .panel--skills { + grid-column: 2/span 2; +} +.dotdungeon.actor--pc .panel--backpack { + grid-row: 3/span 5; +} +.dotdungeon.actor--pc .panel--aspect { + grid-row: span 2; +} +.dotdungeon.actor--pc .panel--weapons { + grid-row: span 2; +} +.dotdungeon.actor--pc .panel--roles { + grid-row: span 3; +} +.dotdungeon.actor--pc .panel--spells { + grid-row: span 2; +} +.dotdungeon .panel { + background: white; + border: 2px solid black; +} +.dotdungeon .panel__header { + background: black; + color: white; + display: flex; + flex-direction: row; +} +.dotdungeon .panel__header h2 { + flex-grow: 1; +} +.dotdungeon .panel__header .icon { + height: 32px; + width: 32px; + aspect-ratio: 1; +} + +@container (max-width: $breakpoint-medium) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} +@container (max-width: $breakpoint-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} +@container (max-width: $breakpoint-extra-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} + +/*# sourceMappingURL=root.css.map */ diff --git a/.css/root.css.map b/.css/root.css.map new file mode 100644 index 0000000..b99acc9 --- /dev/null +++ b/.css/root.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../styles/root.scss"],"names":[],"mappings":"AAEA;EACC;;AAGC;EACC;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAUJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA","file":"root.css"} \ No newline at end of file diff --git a/langs/en-ca.json b/langs/en-ca.json index b99e8a3..b482e13 100644 --- a/langs/en-ca.json +++ b/langs/en-ca.json @@ -1,5 +1,19 @@ { "dotdungeon.CharacterSheet": "PC Sheet", + + "dotdungeon.panel.avatar": "Avatar", + "dotdungeon.panel.statistics": "Statistics", + "dotdungeon.panel.skills": "Skills", + "dotdungeon.panel.backpack": "Backpack", + "dotdungeon.panel.sync": "Sync", + "dotdungeon.panel.aspect": "Aspect", + "dotdungeon.panel.weapons": "Weapons", + "dotdungeon.panel.roles": "Roles", + "dotdungeon.panel.spells": "Spells", + "dotdungeon.panel.mounts": "Mounts", + "dotdungeon.panel.summons": "Summons", + "dotdungeon.panel.storage": "Storage", + "stat.title": "Stats", "stat.build": "Build", "stat.meta": "Meta", diff --git a/module/handlebars.js b/module/handlebars.js index 13d09d6..81af235 100644 --- a/module/handlebars.js +++ b/module/handlebars.js @@ -11,6 +11,7 @@ export async function preloadHandlebarsTemplates() { "actors/char-sheet-mvp/partials/dice_choice.hbs", "actors/char-sheet-mvp/partials/stat.hbs", "actors/char-sheet-mvp/partials/skill.hbs", + "actors/char-sheet-mvp/partials/panel.hbs", ]; const paths = {}; diff --git a/styles/root.scss b/styles/root.scss index dc390df..fc2011f 100644 --- a/styles/root.scss +++ b/styles/root.scss @@ -1,9 +1,101 @@ @use "./vars/_colours.scss" as *; -@use "./mixins/sr-only.scss" as *; -.screenreader { - background-color: $background; - color: $background; +.dotdungeon { + container-type: size; - @include sr-only; + &.actor { + &--pc { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + + .panel { + &--avatar { + grid-row: 1 / span 2; + } + &--stats { + grid-column: 2 / span 2; + } + &--skills { + grid-column: 2 / span 2; + } + &--backpack { + grid-row: 3 / span 5; + } + &--sync {} + &--aspect { + grid-row: span 2; + } + &--weapons { + grid-row: span 2; + } + &--roles { + grid-row: span 3; + } + &--spells { + grid-row: span 2; + } + &--mounts {} + &--summons {} + &--notes {} + &--storage {} + } + } + } + + .panel { + background: white; + border: 2px solid black; + + &__header { + background: black; + color: white; + display: flex; + flex-direction: row; + + h2 { + flex-grow: 1; + } + + .icon { + $size: 32px; + height: $size; + width: $size; + aspect-ratio: 1; + } + } + } +} + +@container (max-width: $breakpoint-medium) { + .dotdungeon { + &.actor { + &--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } + } + } +} + +@container (max-width: $breakpoint-small) { + .dotdungeon { + &.actor { + &--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } + } + } +} + +@container (max-width: $breakpoint-extra-small) { + .dotdungeon { + &.actor { + &--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } + } + } } \ No newline at end of file diff --git a/styles/vars/_breakpoints.scss b/styles/vars/_breakpoints.scss new file mode 100644 index 0000000..d594e8a --- /dev/null +++ b/styles/vars/_breakpoints.scss @@ -0,0 +1,3 @@ +$breakpoint-medium: 700px; +$breakpoint-small: 550px; +$breakpoint-extra-small: 400px \ No newline at end of file diff --git a/templates/actors/char-sheet-mvp/partials/panel.hbs b/templates/actors/char-sheet-mvp/partials/panel.hbs new file mode 100644 index 0000000..04b41fb --- /dev/null +++ b/templates/actors/char-sheet-mvp/partials/panel.hbs @@ -0,0 +1,13 @@ +
+
+

+ {{ localize title }} +

+
+
+
+
+
+ {{> @partial-block }} +
+
\ No newline at end of file diff --git a/templates/actors/char-sheet-mvp/sheet.hbs b/templates/actors/char-sheet-mvp/sheet.hbs index beccd0d..8fb4923 100644 --- a/templates/actors/char-sheet-mvp/sheet.hbs +++ b/templates/actors/char-sheet-mvp/sheet.hbs @@ -1,36 +1,38 @@ -
-

{{localize "stat.title"}}

- {{> dotdungeon.stat stat="build" }} - {{> dotdungeon.stat stat="meta" }} - {{> dotdungeon.stat stat="presence" }} - {{> dotdungeon.stat stat="hands" }} - {{> dotdungeon.stat stat="tilt" }} - {{> dotdungeon.stat stat="rng" }} -
- -

{{localize "skills.header"}}

-

{{localize "skills.build"}}

- {{> dotdungeon.skill name="defense" }} - {{> dotdungeon.skill name="magic" }} - {{> dotdungeon.skill name="melee" }} - {{> dotdungeon.skill name="platforming" }} - {{> dotdungeon.skill name="strength" }} -

{{localize "skills.meta"}}

- {{> dotdungeon.skill name="alchemy" }} - {{> dotdungeon.skill name="arcanum" }} - {{> dotdungeon.skill name="dreams" }} - {{> dotdungeon.skill name="lore" }} - {{> dotdungeon.skill name="navigation" }} -

{{localize "skills.presence"}}

- {{> dotdungeon.skill name="animal_handling" }} - {{> dotdungeon.skill name="perception" }} - {{> dotdungeon.skill name="sneak" }} - {{> dotdungeon.skill name="speech" }} - {{> dotdungeon.skill name="vibes" }} -

{{localize "skills.hands"}}

- {{> dotdungeon.skill name="accuracy" }} - {{> dotdungeon.skill name="crafting" }} - {{> dotdungeon.skill name="engineering" }} - {{> dotdungeon.skill name="explosives" }} - {{> dotdungeon.skill name="piloting" }} + + {{#> dotdungeon.panel class="avatar" title="dotdungeon.panel.avatar"}} + Avatar Content + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="stats" title="dotdungeon.panel.statistics"}} + Statistics + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="skills" title="dotdungeon.panel.skills"}} + Skills + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="backpack" title="dotdungeon.panel.backpack"}} + Backpack + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="sync" title="dotdungeon.panel.sync"}} + Sync + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="aspect" title="dotdungeon.panel.aspect"}} + Aspect + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="weapons" title="dotdungeon.panel.weapons"}} + Weapons + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="spells" title="dotdungeon.panel.spells"}} + Spells + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="roles" title="dotdungeon.panel.roles"}} + Roles + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="mounts" title="dotdungeon.panel.mounts"}} + Mounts + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="summons" title="dotdungeon.panel.summons"}} + Summons + {{/ dotdungeon.panel}} + {{#> dotdungeon.panel class="storage" title="dotdungeon.panel.storage"}} + Storage + {{/ dotdungeon.panel}}
\ No newline at end of file