From 8884fb57b967a1082cb709589a0dcdd0766a825e Mon Sep 17 00:00:00 2001 From: Andreas Johansson Date: Mon, 7 Jun 2021 20:20:04 +0300 Subject: [PATCH] improve styling, code cleanup --- Barbaric/barbaric.css | 36 +++++++++--- Barbaric/barbaric.html | 82 ++++++---------------------- Barbaric/barbaric.pug | 8 ++- Barbaric/src/js/sheetworker.js | 47 ---------------- Barbaric/src/pug/core.pug | 60 +++++--------------- Barbaric/src/pug/data.pug | 1 - Barbaric/src/pug/mixins.pug | 22 ++++++++ Barbaric/src/pug/variables.pug | 5 ++ Barbaric/src/scss/_core.scss | 76 ++++++++++++++------------ Barbaric/src/scss/_rolltemplate.scss | 10 +--- Barbaric/translation.json | 2 +- 11 files changed, 136 insertions(+), 213 deletions(-) delete mode 100644 Barbaric/src/js/sheetworker.js create mode 100644 Barbaric/src/pug/mixins.pug create mode 100644 Barbaric/src/pug/variables.pug diff --git a/Barbaric/barbaric.css b/Barbaric/barbaric.css index 8d3d352464..bae70cf9e5 100755 --- a/Barbaric/barbaric.css +++ b/Barbaric/barbaric.css @@ -10,14 +10,23 @@ .charsheet div, .charsheet span, .charsheet label { flex-shrink: 1; } -.charsheet textarea.iflex, .charsheet input[type=number].iflex, .charsheet input[type=text].iflex { +.charsheet h3 { + margin: 0.4em; +} +.charsheet textarea, .charsheet input[type=number], .charsheet input[type=text] { + display: flex; flex-grow: 6; flex-shrink: 1; align-self: center; } .charsheet label { padding-left: 15px; + padding-top: 5px; text-align: center; + font-size: 1.6em; +} +.charsheet input[type=text] { + font-size: 1.1em; } .charsheet input[type=text], .charsheet input[type=number] { @@ -82,8 +91,7 @@ border-radius: 10px; text-shadow: none; } -.charsheet #SECTIONS \*----------------------------------------------------------------- section, -.charsheet .section { +.charsheet section, .charsheet .section { display: flex; flex-flow: column nowrap; align-items: center; @@ -126,6 +134,9 @@ height: auto; transform: scale(1.1); } +.charsheet main section.name input[type=text], .charsheet main section.name input[type=number], .charsheet main section.name span { + font-size: 1.3em; +} .charsheet main section.name .pad { padding: 8px; } @@ -165,22 +176,28 @@ } .charsheet main section.combat div.grid-weapon { display: grid; - grid-template-columns: 30px 180px 42px 42px auto; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 30px 165px 52px 42px auto; + grid-template-rows: 25px 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; - grid-row-gap: 10px; + grid-row-gap: 7px; flex-grow: 1; width: 560px; } +.charsheet main section.combat div.grid-weapon * { + font-size: 1.3em; +} .charsheet main section.combat div.grid-weapon span { width: 70px; + font-size: 1.5em; + text-align: center; + justify-self: center; } .charsheet main section.combat div.grid-weapon button { width: 18px; margin-left: 5px; } .charsheet main section.combat div.grid-weapon input[type=text].weapon-name { - width: 170px; + width: 157px; } .charsheet main section.combat div.grid-weapon input[type=text].weapon-notes { width: 235px; @@ -189,6 +206,10 @@ width: 40px; text-align: center; } +.charsheet main section.combat div.grid-weapon input[type=text].range { + width: 52px; + text-align: center; +} .charsheet main section.equip { grid-area: equip; } @@ -207,6 +228,7 @@ .charsheet main section.xp span { width: 80px; text-align: center; + font-size: 1.7em; } .charsheet .lang-es div.grid-weapon span.damage { padding-left: 17px; diff --git a/Barbaric/barbaric.html b/Barbaric/barbaric.html index e0c6d56e31..692a37d556 100644 --- a/Barbaric/barbaric.html +++ b/Barbaric/barbaric.html @@ -1,4 +1,6 @@ + +
Name @@ -6,7 +8,7 @@ endurance lifeblood Fatigued? - hero points + hero points Player
@@ -47,36 +49,37 @@
-
- - +
+

armor

+ +
weaponsrangedamagenotes - + - + - + - + - +
@@ -90,35 +93,35 @@
- experienced + Experienced
-
expert + Expert
-
master + Master
-
grandmster + Grandmaster
-
legend + Legend
@@ -168,53 +171,4 @@
- - \ No newline at end of file + \ No newline at end of file diff --git a/Barbaric/barbaric.pug b/Barbaric/barbaric.pug index 984792997b..875d7d32c2 100644 --- a/Barbaric/barbaric.pug +++ b/Barbaric/barbaric.pug @@ -1,3 +1,8 @@ +// variables +include src/pug/variables.pug + +// mixins +include src/pug/mixins.pug // main sheet code include src/pug/core.pug @@ -9,5 +14,4 @@ include src/pug/data.pug include src/pug/rolltemplate.pug //sheetworkers -script(type="sheet/worker") - include src/js/sheetworker.js +//- script(type="sheet/worker") diff --git a/Barbaric/src/js/sheetworker.js b/Barbaric/src/js/sheetworker.js deleted file mode 100644 index a9a2538ad9..0000000000 --- a/Barbaric/src/js/sheetworker.js +++ /dev/null @@ -1,47 +0,0 @@ - - -const int = score => parseInt(score, 10) || 0; - -// tabs - -const buttonlist = ["character", "notes", "settings"]; - -buttonlist.forEach(button => { - on(`clicked:${button}`, function() { - console.log(button + " was pressed"); - setAttrs({ - sheetTab: button - }); - }); -}); - -// game system - -/* -on("change:gametype", function(game) { - - getAttrs("gametype", values => { - - let gametype = values["gametype"]; - console.log("Game System set to: " + gametype); - - let gamedice = "2d10cf0cs0"; - - if (gametype === "godsend"){ - gamedice = "2d10cf0cs0"; - } - else if (gametype === "hellas") { - gamedice = "1d20"; - } - else if (gametype === "atlantis") { - gamedice = "1d20"; - } - else if (gametype === "talislanta") { - gamedice = "1d20"; - } - setAttrs({ - dice: gamedice - }); - }); -}); */ - diff --git a/Barbaric/src/pug/core.pug b/Barbaric/src/pug/core.pug index db61e0008c..143dea32e7 100644 --- a/Barbaric/src/pug/core.pug +++ b/Barbaric/src/pug/core.pug @@ -1,10 +1,3 @@ -//- functions -- var N = number => [...Array(number+1).keys()].slice(1) -//- {{title=${key.charAt(0).toUpperCase()}${key.slice(1)} Check}} -- var cap = word => word.charAt(0).toUpperCase() + word.slice(1) -//- variables -- var skills = ["combat", "craft", "lore", "physical", "social", "sorcery", "stealth"]; -//- mixin //- sheet start main //- name @@ -24,7 +17,7 @@ main span.border.flex-col.pad span(data-i18n="fatigued-") Fatigued? input(name="attr_fatigue", type="checkbox", value="1") - span.border.pad + span.border.flex-col span(data-i18n="hero-points") hero points input(name="attr_heropoints", type="number") span.border.flex-col @@ -33,62 +26,35 @@ main //- skills section.skills.flex-col label(data-i18n="skills") skills - each skill in skills - .section.flex-row - input.txtfield.warn-missing(type="number", name=`attr_${skill}`, placeholder="0") - button.blank(name=`roll_${skill}`, type="roll", value=`&{template:rolls} {{title=${cap(skill)}}} {{subtitle=@{character_name} }} {{color=black}} {{^{roll-i18n}=[[ [[2d6]]+@{${skill}} ]]}} {{baseroll=$[[0]]}}`) - span(data-i18n=`${skill}`)= skill + +skillblock(skill,skills) section.border.traits label(for, data-i18n="traits") traits - textarea.iflex(name="attr_traits", value) + textarea(name="attr_traits", value).iflex //- combat section.combat .flex-row.section - button.d6(name="roll_", type="roll", value="&{template:rolls} {{title=^{initiative} }} {{subtitle=@{character_name} }} {{color=black}} {{^{roll-i18n}[[2d6+(@{combat} &{tracker}]]}}") + button(name="roll_", type="roll", value="&{template:rolls} {{title=^{initiative} }} {{subtitle=@{character_name} }} {{color=black}} {{^{roll-i18n}[[2d6+(@{combat} &{tracker}]]}}").d6 span(data-i18n="initative") Initiative - .armor.border - label(for, data-i18n="armor") armor - input(name="attr_armorname", type="text") + .armor.border.flex-row + h3(data-i18n="armor") armor + input(name="attr_armorname", type="text").name input(name="attr_armor", type="number") + input(name="attr_armorinfo", type="text") .border.grid-weapon span span(data-i18n="weapons") weapons span(data-i18n="range") range - span.damage(data-i18n="damage") damage + span(data-i18n="damage").damage damage span(data-i18n="notes") notes //- 5 weapons - each n in N(5) - button.d6(name=`roll_weapon${n}`, type="roll", value=`&{template:rolls} {{title=^{weapon}: @{wpn${n}name} }} {{color=black}} {{subtitle=@{character_name} }} {{color=black}} {{^{range}= @{wpn${n}range} }} {{^{roll-i18n}=[[ [[2d6]]+@{combat} ]]}} {{baseroll=$[[0]]}} {{^{damage}= [[@{wpn${n}dmg}6]] }}`) - input.weapon-name(name=`attr_wpn${n}name`, type="text") - input.dmg(name=`attr_wpn${n}range`, type="text") - input.dmg(name=`attr_wpn${n}dmg`, placeholder="2d", type="text") - input.weapon-notes(name=`attr_wpn${n}notes`, type="text") + +weaponblock(num) section.border.equip label(for, data-i18n="equipment") equipment - textarea.iflex(name="attr_equipment", value) + textarea(name="attr_equipment", value).iflex section.border.sorcery label(for, data-i18n="sorcery-notes") sorcery/notes - textarea.iflex(name="attr_sorcery", value) + textarea(name="attr_sorcery", value).iflex //- xp section.xp.flex-col label(data-i18n="xp") XP - span(data-i18n="experienced") experienced - div - each n in N(5) - input(type="checkbox", name=`attr_experienced${n}`, value="1") - span(data-i18n="expert") expert - div - each n in N(5) - input(type="checkbox", name=`attr_expert${n}`, value="1") - span(data-i18n="master") master - div - each n in N(5) - input(type="checkbox", name=`attr_master${n}`, value="1") - span(data-i18n="grandmster") grandmster - div - each n in N(5) - input(type="checkbox", name=`attr_grandmaster${n}`, value="1") - span(data-i18n="legend") legend - div - each n in N(5) - input(type="checkbox", name=`attr_legend${n}`, value="1") \ No newline at end of file + +xpblock \ No newline at end of file diff --git a/Barbaric/src/pug/data.pug b/Barbaric/src/pug/data.pug index 2e4b63dd9d..c31dad849a 100644 --- a/Barbaric/src/pug/data.pug +++ b/Barbaric/src/pug/data.pug @@ -1,5 +1,4 @@ - - var heritage = ["human","anunaki","apefolk","dwarf","elf","geckofolk","lizardfolk"]; datalist#heritage diff --git a/Barbaric/src/pug/mixins.pug b/Barbaric/src/pug/mixins.pug new file mode 100644 index 0000000000..f022c61b73 --- /dev/null +++ b/Barbaric/src/pug/mixins.pug @@ -0,0 +1,22 @@ +//- mixin +mixin skillblock(skill, skills) + each skill in skills + .section.flex-row + input(type="number", name=`attr_${skill}`, placeholder="0").txtfield.warn-missing + button(name=`roll_${skill}`, type="roll", value=`&{template:rolls} {{title=${cap(skill)}}} {{subtitle=@{character_name} }} {{color=black}} {{^{roll-i18n}=[[ [[2d6]]+@{${skill}} ]]}} {{baseroll=$[[0]]}}`).blank + span(data-i18n=`${skill}`)= skill + +mixin weaponblock(num) + each n in N(5) + button(name=`roll_weapon${n}`, type="roll", value=`&{template:rolls} {{title=^{weapon}: @{wpn${n}name} }} {{color=black}} {{subtitle=@{character_name} }} {{color=black}} {{^{range}= @{wpn${n}range} }} {{^{roll-i18n}=[[ [[2d6]]+@{combat} ]]}} {{baseroll=$[[0]]}} {{^{damage}= [[@{wpn${n}dmg}6]] }}`).d6 + input(name=`attr_wpn${n}name`, type="text").weapon-name + input(name=`attr_wpn${n}range`, type="text").range + input(name=`attr_wpn${n}dmg`, placeholder="2d", type="text").dmg + input(name=`attr_wpn${n}notes`, type="text").weapon-notes + +mixin xpblock + each name in ["experienced", "expert", "master", "grandmaster", "legend"] + span(data-i18n=`${name}`)= cap(name) + div + each n in N(5) + input(type="checkbox", name=`attr_${name}${n}`, value="1") diff --git a/Barbaric/src/pug/variables.pug b/Barbaric/src/pug/variables.pug new file mode 100644 index 0000000000..3eb588580f --- /dev/null +++ b/Barbaric/src/pug/variables.pug @@ -0,0 +1,5 @@ +//- functions +- var N = number => [...Array(number+1).keys()].slice(1) +- var cap = word => word.charAt(0).toUpperCase() + word.slice(1) +//- variables +- var skills = ["combat", "craft", "lore", "physical", "social", "sorcery", "stealth"]; \ No newline at end of file diff --git a/Barbaric/src/scss/_core.scss b/Barbaric/src/scss/_core.scss index 6bdb97ea24..bc1d2683af 100644 --- a/Barbaric/src/scss/_core.scss +++ b/Barbaric/src/scss/_core.scss @@ -1,4 +1,4 @@ -// ------------------------------------------------*\ +// ------------------------------------------------ // #GENERAL // ------------------------------------------------ @@ -9,18 +9,20 @@ *{ font-family: "Yanone Kaffeesatz"; } - // --------- Text ------------- +// --------- Text ------------- label, div, span, button[type="roll"] { text-transform: capitalize; flex-grow: 0; align-self: center; } - div, span, label{ flex-shrink: 1; - } - textarea.iflex, input[type="number"].iflex, input[type="text"].iflex { + } + h3{ + margin: 0.4em; + } + textarea, input[type="number"], input[type="text"] { display: flex; flex-grow: 6; flex-shrink: 1; @@ -29,12 +31,17 @@ label{ padding-left: 15px; + padding-top: 5px; text-align: center; + font-size: 1.6em; } - // --------- Inputs ------------- +// --------- Inputs ------------- + input[type="text"]{ + font-size: 1.1em; + } input[type="text"], input[type="number"]{ background-color: transparent; @@ -76,7 +83,7 @@ background-color: #EAC9D1; } - // -----Hides up/down buttons on numberfields that don't need them --- +// -----Hides up/down buttons on numberfields that don't need them --- input[type=number].txtfield::-webkit-inner-spin-button, input[type=number].txtfield::-webkit-outer-spin-button { @@ -88,25 +95,22 @@ -moz-appearance: textfield; } - // ------- Buttons ---------- +// ------- Buttons ---------- button[type=roll], button[type=roll].d6, button[type=roll].blank { text-shadow: none; background-position: 0 -40px; background-color: #d9d9d9; border: 2px; } - button[type=roll].blank::before { content: ''; height: min-content; text-align: center; } - - button[type=roll].d6::before { //new die changes die roller to d6 + button[type=roll].d6::before { font-family: 'dicefontd6'; content: 'F '; } - button[type=roll].d6:hover, button[type=roll].blank:hover, button[type=roll]:hover{ border: 2px solid black; background-color: #7e7d7d; @@ -114,12 +118,12 @@ text-shadow: none; } - //-----------------------------------------------------------------*\ - #SECTIONS - \*----------------------------------------------------------------- +//----------------------------------------------------------------- +// #SECTIONS +// ----------------------------------------------------------------- - // --------- General Section Styling ------------- +// --------- General Section Styling ------------- section, .section{ display: flex; flex-flow: column nowrap; @@ -127,7 +131,6 @@ justify-content: space-around; align-content: space-around; } - .border{ border: solid 2px black; } @@ -136,23 +139,19 @@ display: flex; align-items: center; } - .flex-middle { display: flex; justify-content: center; } - .flex-col { display: flex; flex-flow: column nowrap; } - .flex-row { display: flex; flex-flow: row nowrap; } - main { display: grid; grid-template-columns: 2fr 4fr 4fr 100px; @@ -161,12 +160,10 @@ "skills traits combat xp " "equip equip sorcery sorcery"; grid-gap: 4px; - width: 1200px;// Defines the width and height of the sheet + width: 1200px; height: 800px; background-color: whitesmoke; - // NAME SECTION - section.name{ grid-area: name; @@ -174,11 +171,13 @@ height: auto; transform: scale(1.1); } + input[type="text"],input[type="number"],span{ + font-size: 1.3em; + } .pad{ padding: 8px; } } - section.skills{ grid-area: skills; @@ -193,14 +192,12 @@ font-size: 1.4em; padding: 6px; } - button{ width: 55%; font-size: 1.4em; } } } - section.traits{ grid-area: traits; } @@ -210,7 +207,6 @@ .flex-row.section{ width: 90%; height: 90%; - button{ height: 35%; } @@ -219,26 +215,30 @@ div.armor{ flex-grow: 1; } - div.grid-weapon{ display: grid; - grid-template-columns: 30px 180px 42px 42px auto; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 30px 165px 52px 42px auto; + grid-template-rows: 25px 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; - grid-row-gap: 10px; + grid-row-gap: 7px; flex-grow: 1; width: 560px; + * { + font-size: 1.3em; + } span{ width: 70px; - + font-size: 1.5em; + text-align: center; + justify-self: center; } button{ width: 18px; margin-left: 5px; } input[type="text"].weapon-name{ - width: 170px; + width: 157px; } input[type="text"].weapon-notes{ width: 235px; @@ -247,6 +247,10 @@ width: 40px; text-align: center; } + input[type="text"].range{ + width: 52px; + text-align: center; + } } } section.equip{ @@ -266,11 +270,11 @@ span{ width: 80px; text-align: center; + font-size: 1.7em; } } - } - +// i18n-fixes .lang-es div.grid-weapon span.damage{ padding-left: 17px; } diff --git a/Barbaric/src/scss/_rolltemplate.scss b/Barbaric/src/scss/_rolltemplate.scss index f5f8668846..debf89822f 100644 --- a/Barbaric/src/scss/_rolltemplate.scss +++ b/Barbaric/src/scss/_rolltemplate.scss @@ -7,7 +7,6 @@ .withoutavatars .sheet-rolltemplate-rolls { margin-left: -7px; } - .sheet-rolltemplate-rolls { margin-left: -37px; font-family: "Yanone Kaffeesatz"; @@ -16,7 +15,6 @@ border: 3px solid black; border-radius: 3px; } - // Header formatting - title and subtitle .sheet-header { background-color: var(--header-bg-color, #a83521); @@ -39,7 +37,6 @@ --header-bg-color: #c87d00; --header-text-color: #FFF; } - // alt template colors .sheet-container.sheet-color-green { --header-bg-color: #008000; @@ -61,7 +58,6 @@ --header-bg-color: #FFF; --header-text-color: #000; } - // Allprops part .sheet-content { display: grid; @@ -72,25 +68,23 @@ .sheet-content > div { padding: 5px; } - .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; } - // Make even-numbered rows grey .sheet-content :nth-child(4n+3), .sheet-content :nth-child(4n) { background:#EEE; } - - // Description field + // Description field wide .sheet-desc, .sheet-crit, .sheet-fail { grid-column: span 2; padding: 5px; text-align: center; } + .sheet-crit, .sheet-fail{ font-weight: bold; font-size: 1.3em; diff --git a/Barbaric/translation.json b/Barbaric/translation.json index e97d0799ee..ec9863b34e 100644 --- a/Barbaric/translation.json +++ b/Barbaric/translation.json @@ -28,7 +28,7 @@ "experienced":"experienced", "expert":"expert", "master":"master", - "grandmster":"grandmster", + "grandmaster":"grandmaster", "legend":"legend", "critical-fumble":"Critical Fumble!", "critical-success":"Critical Success!",