Add the primitive dropdown styling for the skills
This commit is contained in:
parent
31b2ccedc8
commit
6381b51990
14 changed files with 179 additions and 67 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
22
.css/sheets/partials/skill.css
Normal file
22
.css/sheets/partials/skill.css
Normal 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 */
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import * as hbs from "../handlebars.js";
|
||||
|
||||
Hooks.on(`hotReload`, async (data) => {
|
||||
if (data.extension !== 'hbs') {
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
22
styles/sheets/partials/skill.scss
Normal file
22
styles/sheets/partials/skill.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
],
|
||||
"flags": {
|
||||
"hotReload": {
|
||||
"extensions": ["css", "hbs", "json", "mjs"],
|
||||
"extensions": ["css", "hbs", "json", "js", "mjs"],
|
||||
"paths": ["templates", "langs", ".css", "module"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
templates/actors/char-sheet-mvp/partials/panels/skills.hbs
Normal file
24
templates/actors/char-sheet-mvp/partials/panels/skills.hbs
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue