Add the primitive dropdown styling for the skills

This commit is contained in:
Oliver-Akins 2023-11-26 13:11:02 -07:00
parent 31b2ccedc8
commit 6381b51990
14 changed files with 179 additions and 67 deletions

View file

@ -1,33 +1,53 @@
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
.dotdungeon > .window-content h2, .dotdungeon > .window-content h3, .dotdungeon > .window-content h4, .dotdungeon > .window-content h5, .dotdungeon > .window-content h6 {
all: initial;
display: block;
font-family: "Pixelify Sans", sans-serif;
margin: 0;
}
.dotdungeon > .window-content button, .dotdungeon > .window-content button:hover {
all: initial;
font-family: inherit;
cursor: pointer;
}
.dotdungeon > .window-content select, .dotdungeon > .window-content select:hover {
cursor: pointer;
}
.dotdungeon {
--breakpoint-medium: 700px;
--breakpoint-small: 550px;
--breakpoint-extra-small: 400px;
container-type: size;
}
.dotdungeon > .window-content {
padding: 0;
background: #f2f2f2;
}
.dotdungeon h2, .dotdungeon h3, .dotdungeon h4, .dotdungeon h5, .dotdungeon h6 {
all: initial;
font-family: "Pixelify Sans", sans-serif;
margin: 0;
}
.dotdungeon button, .dotdungeon button:hover {
all: initial;
font-family: inherit;
cursor: pointer;
}
.dotdungeon select, .dotdungeon select:hover {
cursor: pointer;
}
.dotdungeon .stat {
display: flex;
flex-direction: column;
align-items: center;
}
.dotdungeon .skill {
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
}
.dotdungeon .skill-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 8px;
gap: 4px;
}
.dotdungeon .skill-group h3 {
margin-top: 8px;
font-size: 1.2em;
width: 100%;
text-align: center;
}
.dotdungeon .actor--pc {
display: grid;
grid-template-areas: "avatar stats stats" "avatar skills skills" "backpack skills skills" "backpack sync aspect" "backpack weapons aspect" "backpack weapons spells" "backpack roles spells" "summons roles mounts" "summons roles storage";
@ -52,6 +72,11 @@
.dotdungeon .actor--pc .panel--skills {
grid-area: skills;
}
.dotdungeon .actor--pc .panel--skills .panel__content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, min-content));
}
.dotdungeon .actor--pc .panel--backpack {
grid-area: backpack;
}
@ -129,4 +154,4 @@
}
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/root.scss%22,%22../styles/vars.scss%22,%22../styles/mixins/_foundry.scss%22,%22../styles/sheets/partials/stat.scss%22,%22../styles/sheets/actor/mvp.scss%22,%22../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAGQ;AAER;EACC;EACA;EACA;EAGA;;AAEA;EACC;EACA,YCdW;;ADiBZ;EEjBA;EFmBC,aCpBW;EDqBX;;AAGD;EEvBA;EFyBC;EACA;;AAGD;EACC;;;AG/BF;EACC;EACA;EACA;;ACCA;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aHtFS;EGuFT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;ACvFH;EDgGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;ACpHJ;ED6HC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22root.css%22%7D */
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/root.scss%22,%22../styles/mixins/_foundry.scss%22,%22../styles/vars.scss%22,%22../styles/sheets/partials/stat.scss%22,%22../styles/sheets/partials/skill.scss%22,%22../styles/sheets/actor/mvp.scss%22,%22../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAGQ;AAIP;ECNA;EDQC;EACA,aEVW;EFWX;;AAGD;ECbA;EDeC;EACA;;AAGD;EACC;;;AAKF;EACC;;AAEA;EACC;EACA,YE9BW;;;ACDb;EACC;EACA;EACA;;ACHD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;ACdF;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aH5FS;EG6FT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AC7FH;EDsGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AC1HJ;EDmIC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22root.css%22%7D */

View file

@ -22,6 +22,11 @@
.dotdungeon .actor--pc .panel--skills {
grid-area: skills;
}
.dotdungeon .actor--pc .panel--skills .panel__content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, min-content));
}
.dotdungeon .actor--pc .panel--backpack {
grid-area: backpack;
}
@ -99,4 +104,4 @@
}
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/actor/mvp.scss%22,%22../../../styles/vars.scss%22,%22../../../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIC;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aCtFS;EDuFT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AEvFH;EFgGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AEpHJ;EF6HC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22mvp.css%22%7D */
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/actor/mvp.scss%22,%22../../../styles/vars.scss%22,%22../../../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIC;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aC5FS;ED6FT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AE7FH;EFsGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AE1HJ;EFmIC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22mvp.css%22%7D */

View file

@ -0,0 +1,22 @@
.dotdungeon .skill {
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
}
.dotdungeon .skill-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 8px;
gap: 4px;
}
.dotdungeon .skill-group h3 {
margin-top: 8px;
font-size: 1.2em;
width: 100%;
text-align: center;
}
/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/partials/skill.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA%22,%22file%22:%22skill.css%22%7D */

View file

@ -21,32 +21,34 @@
"dotdungeon.stat.tilt": "Tilt",
"dotdungeon.stat.rng": "RNG",
"skills.header": "Skills",
"skills.build": "Build",
"skill.defense": "Defense",
"skill.magic": "Magic",
"skill.melee": "Melee",
"skill.platforming": "Platforming",
"skill.strength": "Strength",
"dotdungeon.skills.build": "Build",
"dotdungeon.skill.defense": "Defense",
"dotdungeon.skill.magic": "Magic",
"dotdungeon.skill.melee": "Melee",
"dotdungeon.skill.platforming": "Platforming",
"dotdungeon.skill.strength": "Strength",
"skills.meta": "Meta",
"skill.alchemy": "Alchemy",
"skill.arcanum": "Arcanum",
"skill.dreams": "Dreams",
"skill.lore": "Lore",
"skill.navigation": "Navigation",
"dotdungeon.skills.meta": "Meta",
"dotdungeon.skill.alchemy": "Alchemy",
"dotdungeon.skill.arcanum": "Arcanum",
"dotdungeon.skill.dreams": "Dreams",
"dotdungeon.skill.lore": "Lore",
"dotdungeon.skill.navigation": "Navigation",
"skills.presence": "Presence",
"skill.animal_handling": "Animal Handling",
"skill.perception": "Perception",
"skill.sneak": "Sneak",
"skill.speech": "Speech",
"skill.vibes": "Vibes",
"dotdungeon.skills.presence": "Presence",
"dotdungeon.skill.animal_handling": "Animal Handling",
"dotdungeon.skill.perception": "Perception",
"dotdungeon.skill.sneak": "Sneak",
"dotdungeon.skill.speech": "Speech",
"dotdungeon.skill.vibes": "Vibes",
"skills.hands": "Hands",
"skill.accuracy": "Accuracy",
"skill.crafting": "Crafting",
"skill.engineering": "Engineering",
"skill.explosives": "Explosives",
"skill.piloting": "Piloting"
"dotdungeon.skills.hands": "Hands",
"dotdungeon.skill.accuracy": "Accuracy",
"dotdungeon.skill.crafting": "Crafting",
"dotdungeon.skill.engineering": "Engineering",
"dotdungeon.skill.explosives": "Explosives",
"dotdungeon.skill.piloting": "Piloting",
"dotdungeon.aria.skill-dropdown": "Your expertise level in the {skill} skill"
}

View file

@ -3,6 +3,7 @@ export const partials = [
"actors/char-sheet-mvp/partials/stat.hbs",
"actors/char-sheet-mvp/partials/skill.hbs",
"actors/char-sheet-mvp/partials/panel.hbs",
"actors/char-sheet-mvp/partials/panels/skills.hbs",
]
export async function registerHandlebarsHelpers() {

View file

@ -1,3 +1,5 @@
import * as hbs from "../handlebars.js";
Hooks.on(`hotReload`, async (data) => {
if (data.extension !== 'hbs') {
return true;

View file

@ -4,13 +4,14 @@
*/
export class CharacterSheet extends ActorSheet {
static get defaultOptions() {
return mergeObject(
let opts = mergeObject(
super.defaultOptions,
{
classes: ["dotdungeon"],
template: "systems/dotdungeon/templates/actors/char-sheet-mvp/sheet.hbs"
}
);
opts.classes.push("dotdungeon");
return opts;
};
activateListeners(html) {

View file

@ -3,21 +3,11 @@
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
.dotdungeon {
--breakpoint-medium: 700px;
--breakpoint-small: 550px;
--breakpoint-extra-small: 400px;
container-type: size;
> .window-content {
padding: 0;
background: $background;
}
// Reset the parts of Foundry's styling which gets in the way of what I want
.dotdungeon > .window-content {
h2, h3, h4, h5, h6 {
@include fvtt_reset;
display: block;
font-family: $title-font;
margin: 0;
}
@ -33,5 +23,17 @@
}
}
// Styling that doesn't belong to any particular part of my sheet
.dotdungeon {
container-type: size;
> .window-content {
padding: 0;
background: $background;
}
}
@import "./sheets/partials/stat.scss";
@import "./sheets/partials/skill.scss";
@import "./sheets/actor/mvp.scss";

View file

@ -35,6 +35,12 @@
}
&--skills {
grid-area: skills;
.panel__content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, min-content));
}
}
&--backpack {
grid-area: backpack;

View file

@ -0,0 +1,22 @@
.dotdungeon .skill {
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
&-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 8px;
gap: 4px;
h3 {
margin-top: 8px;
font-size: 1.2em;
width: 100%;
text-align: center;
}
}
}

View file

@ -30,7 +30,7 @@
],
"flags": {
"hotReload": {
"extensions": ["css", "hbs", "json", "mjs"],
"extensions": ["css", "hbs", "json", "js", "mjs"],
"paths": ["templates", "langs", ".css", "module"]
}
}

View file

@ -0,0 +1,24 @@
<div class="skill-group">
<h3 class="skill-group__label">{{localize "dotdungeon.skills.build"}}</h3>
{{#each (dotdungeon-array "defense" "magic" "melee" "platforming" "strength")}}
{{> dotdungeon.skill name=this}}
{{/each}}
</div>
<div class="skill-group">
<h3 class="skill-group__label">{{localize "dotdungeon.skills.meta"}}</h3>
{{#each (dotdungeon-array "alchemy" "arcanum" "dreams" "lore" "navigation")}}
{{> dotdungeon.skill name=this}}
{{/each}}
</div>
<div class="skill-group">
<h3 class="skill-group__label">{{localize "dotdungeon.skills.presence"}}</h3>
{{#each (dotdungeon-array "alchemy" "arcanum" "dreams" "lore" "navigation")}}
{{> dotdungeon.skill name=this}}
{{/each}}
</div>
<div class="skill-group">
<h3 class="skill-group__label">{{localize "dotdungeon.skills.hands"}}</h3>
{{#each (dotdungeon-array "animal_handling" "perception" "sneak" "speech" "vibes")}}
{{> dotdungeon.skill name=this}}
{{/each}}
</div>

View file

@ -1,9 +1,11 @@
<div class="skill">
<label>{{localize (concat "dotdungeon.skill." name)}}</label>
<select>
<option value="">Untrained</option>
<span>
{{localize (concat "dotdungeon.skill." name)}}
</span>
<select aria-label="{{localize "dotdungeon.aria.skill-dropdown" skill=name}}">
<option value="">Novice</option>
<option value="locked">Locked</option>
<option value="+2">Trained (+2)</option>
<option value="+4">Expert (+4)</option>
<option value="+2">Trained</option>
<option value="+4">Expert</option>
</select>
</div>

View file

@ -8,9 +8,7 @@
{{/each}}
{{/ dotdungeon.panel}}
{{#> dotdungeon.panel class="skills" title="dotdungeon.panel.skills"}}
<div class="skill-group">
<h3>{{localize "dotdungeon.skills.build"}}</h3>
</div>
{{> dotdungeon.skills }}
{{/ dotdungeon.panel}}
{{#> dotdungeon.panel class="backpack" title="dotdungeon.panel.backpack"}}
Backpack