From 0a41ee45aebd912b000a7f0b670001531be995f7 Mon Sep 17 00:00:00 2001 From: Andreas Johansson Date: Mon, 7 Jun 2021 17:46:55 +0300 Subject: [PATCH 1/2] Refactor to PUG&SCSS, datalist i18n --- Barbaric/barbaric.css | 47 +-- Barbaric/barbaric.html | 399 +++++++++++++------------- Barbaric/barbaric.pug | 13 + Barbaric/barbaric.scss | 3 + Barbaric/src/js/sheetworker.js | 47 +++ Barbaric/src/pug/core.pug | 94 ++++++ Barbaric/src/pug/data.pug | 7 + Barbaric/src/pug/rolltemplate.pug | 31 ++ Barbaric/src/scss/_core.scss | 278 ++++++++++++++++++ Barbaric/src/scss/_rolltemplate.scss | 104 +++++++ Barbaric/src/{ => scss}/barbaric.scss | 0 Barbaric/translation.json | 9 +- 12 files changed, 788 insertions(+), 244 deletions(-) create mode 100644 Barbaric/barbaric.pug create mode 100644 Barbaric/barbaric.scss create mode 100644 Barbaric/src/js/sheetworker.js create mode 100644 Barbaric/src/pug/core.pug create mode 100644 Barbaric/src/pug/data.pug create mode 100644 Barbaric/src/pug/rolltemplate.pug create mode 100644 Barbaric/src/scss/_core.scss create mode 100644 Barbaric/src/scss/_rolltemplate.scss rename Barbaric/src/{ => scss}/barbaric.scss (100%) diff --git a/Barbaric/barbaric.css b/Barbaric/barbaric.css index bb14048f1f..8d3d352464 100755 --- a/Barbaric/barbaric.css +++ b/Barbaric/barbaric.css @@ -1,22 +1,4 @@ -/*------------------------------------------------*\ - #GENERAL -\*------------------------------------------------*/ @import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Anton&display=swap"); -/* duplicate class to catch import bug */ -.charsheet * { - font-family: "Yanone Kaffeesatz"; -} - -.charsheet { - /* --------- Text ------------- */ - /* --------- Inputs ------------- */ - /* -----Hides up/down buttons on numberfields that don't need them ---*/ - /* ------- Buttons ---------- */ - /*-----------------------------------------------------------------*\ - #SECTIONS - \*-----------------------------------------------------------------*/ - /* --------- General Section Styling ------------- */ -} .charsheet * { font-family: "Yanone Kaffeesatz"; } @@ -28,7 +10,7 @@ .charsheet div, .charsheet span, .charsheet label { flex-shrink: 1; } -.charsheet textarea, .charsheet input[type=number], .charsheet input[type=text] { +.charsheet textarea.iflex, .charsheet input[type=number].iflex, .charsheet input[type=text].iflex { flex-grow: 6; flex-shrink: 1; align-self: center; @@ -91,7 +73,6 @@ text-align: center; } .charsheet button[type=roll].d6::before { - /*new die changes die roller to d6*/ font-family: "dicefontd6"; content: "F "; } @@ -101,7 +82,8 @@ border-radius: 10px; text-shadow: none; } -.charsheet section, .charsheet .section { +.charsheet #SECTIONS \*----------------------------------------------------------------- section, +.charsheet .section { display: flex; flex-flow: column nowrap; align-items: center; @@ -134,10 +116,8 @@ grid-template-areas: "name name name name " "skills traits combat xp " "equip equip sorcery sorcery"; grid-gap: 4px; width: 1200px; - /* Defines the width and height of the sheet */ height: 800px; background-color: whitesmoke; - /* NAME SECTION */ } .charsheet main section.name { grid-area: name; @@ -232,10 +212,6 @@ padding-left: 17px; } -/*------------------------------------*\ - #ROLL TEMPLATES -\*------------------------------------*/ -/* Smaller margins - remove these if you want the huge default left margin */ .withoutavatars .sheet-rolltemplate-rolls { margin-left: -7px; } @@ -243,13 +219,6 @@ .sheet-rolltemplate-rolls { margin-left: -37px; font-family: "Yanone Kaffeesatz"; - /* Header formatting - title and subtitle */ - /* example colors */ - /* alt template colors */ - /* Allprops part */ - /* Left column */ - /* Make even-numbered rows grey */ - /* Description field */ } .sheet-rolltemplate-rolls .sheet-container { border: 3px solid black; @@ -263,7 +232,8 @@ padding: 5px; border-bottom: 2px solid black; } -.sheet-rolltemplate-rolls .sheet-title { +.sheet-rolltemplate-rolls .sheet-title, +.sheet-rolltemplate-rolls .sheet-name { font-size: 1.4em; font-weight: bold; } @@ -271,8 +241,7 @@ font-size: 1em; } .sheet-rolltemplate-rolls .sheet-container { - /* the default colors */ - --header-bg-color: #a83521; + --header-bg-color: #c87d00; --header-text-color: #FFF; } .sheet-rolltemplate-rolls .sheet-container.sheet-color-green { @@ -298,9 +267,7 @@ .sheet-rolltemplate-rolls .sheet-content { display: grid; background: #FFF; - /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; - /* Line height to match default roll template */ line-height: 1.4em; } .sheet-rolltemplate-rolls .sheet-content > div { @@ -330,5 +297,3 @@ .sheet-rolltemplate-rolls .sheet-fail { color: red; } - -/*# sourceMappingURL=barbaric.css.map */ diff --git a/Barbaric/barbaric.html b/Barbaric/barbaric.html index 072b15e5e8..e0c6d56e31 100644 --- a/Barbaric/barbaric.html +++ b/Barbaric/barbaric.html @@ -1,225 +1,220 @@ -
- -
- - - Name - - - - heritage - - - - endurance - - - - lifeblood - - - - Fatigued? - - - - hero points - - - - Player - - -
- -
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- - -
- -
- -
- -
- - - -
-
- -
- - weapons - range - damage - notes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
- - -
- -
- - experienced -
- - - - - -
- expert -
- - - - - -
- master -
- - - - - -
- grandmster -
- - - - - -
- legend -
- - - - - -
-
+ +
+
Name + heritage + endurance + lifeblood + Fatigued? + hero points + Player +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+ + + +
+
+
weaponsrangedamagenotes + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ + +
+
+ experienced +
+ + + + + +
expert +
+ + + + + +
master +
+ + + + + +
grandmster +
+ + + + + +
legend +
+ + + + + +
+
- + - - - - - - - + + + + + + + - - - +
- {{#title}}
{{title}}
{{/title}} - {{#subtitle}}
{{subtitle}}
{{/subtitle}} + + {{#title}} +
{{title}}
+ {{/title}} + {{#subtitle}} +
{{subtitle}}
+ {{/subtitle}}
+ {{#allprops() title subtitle desc color baseroll}}
{{key}}
{{value}}
{{/allprops() title subtitle desc color baseroll}} {{#rollTotal() baseroll 2}} -
Critical Fumble!
+
Critical Fumble!
{{/rollTotal() baseroll 2}} {{#rollTotal() baseroll 12}} -
Critical Success!
+
Critical Success!
{{/rollTotal() baseroll 12}} - {{#desc}}
{{desc}}
{{/desc}} + {{#desc}} +
{{desc}}
+ {{/desc}}
+ + \ No newline at end of file diff --git a/Barbaric/barbaric.pug b/Barbaric/barbaric.pug new file mode 100644 index 0000000000..984792997b --- /dev/null +++ b/Barbaric/barbaric.pug @@ -0,0 +1,13 @@ + +// main sheet code +include src/pug/core.pug + +//hidden inputs & datalists +include src/pug/data.pug + +//roll templates +include src/pug/rolltemplate.pug + +//sheetworkers +script(type="sheet/worker") + include src/js/sheetworker.js diff --git a/Barbaric/barbaric.scss b/Barbaric/barbaric.scss new file mode 100644 index 0000000000..a0afc8c6c6 --- /dev/null +++ b/Barbaric/barbaric.scss @@ -0,0 +1,3 @@ +@use 'src/scss/_core.scss'; + +@use 'src/scss/_rolltemplate.scss'; diff --git a/Barbaric/src/js/sheetworker.js b/Barbaric/src/js/sheetworker.js new file mode 100644 index 0000000000..a9a2538ad9 --- /dev/null +++ b/Barbaric/src/js/sheetworker.js @@ -0,0 +1,47 @@ + + +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 new file mode 100644 index 0000000000..db61e0008c --- /dev/null +++ b/Barbaric/src/pug/core.pug @@ -0,0 +1,94 @@ +//- 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 + section.name.flex-row + span.border.flex-col + span(data-i18n="name") Name + input.bold(type="text", name="attr_character_name") + span.border.flex-col + span(data-i18n="heritage") heritage + input(name="attr_heritage", type="text", list="heritage") + span.border.flex-col + span(data-i18n="endurance") endurance + input(name="attr_endurance", type="number") + span.border.flex-col + span(data-i18n="lifeblood") lifeblood + input(name="attr_lifeblood", type="number") + span.border.flex-col.pad + span(data-i18n="fatigued-") Fatigued? + input(name="attr_fatigue", type="checkbox", value="1") + span.border.pad + span(data-i18n="hero-points") hero points + input(name="attr_heropoints", type="number") + span.border.flex-col + span(data-i18n="player") Player + input(name="attr_player_name", type="text") + //- 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 + section.border.traits + label(for, data-i18n="traits") traits + textarea.iflex(name="attr_traits", value) + //- 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}]]}}") + span(data-i18n="initative") Initiative + .armor.border + label(for, data-i18n="armor") armor + input(name="attr_armorname", type="text") + input(name="attr_armor", type="number") + .border.grid-weapon + span + span(data-i18n="weapons") weapons + span(data-i18n="range") range + span.damage(data-i18n="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") + section.border.equip + label(for, data-i18n="equipment") equipment + textarea.iflex(name="attr_equipment", value) + section.border.sorcery + label(for, data-i18n="sorcery-notes") sorcery/notes + textarea.iflex(name="attr_sorcery", value) + //- 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 diff --git a/Barbaric/src/pug/data.pug b/Barbaric/src/pug/data.pug new file mode 100644 index 0000000000..2e4b63dd9d --- /dev/null +++ b/Barbaric/src/pug/data.pug @@ -0,0 +1,7 @@ + + +- var heritage = ["human","anunaki","apefolk","dwarf","elf","geckofolk","lizardfolk"]; + +datalist#heritage + each item in heritage + option(data-i18n=`${item}`)= cap(item) \ No newline at end of file diff --git a/Barbaric/src/pug/rolltemplate.pug b/Barbaric/src/pug/rolltemplate.pug new file mode 100644 index 0000000000..d0b0b980a3 --- /dev/null +++ b/Barbaric/src/pug/rolltemplate.pug @@ -0,0 +1,31 @@ +rolltemplate.sheet-rolltemplate-rolls + .sheet-container(class="sheet-color-{{color}}") + .sheet-header + | + | {{#title}} + .sheet-title {{title}} + | + | {{/title}} + | {{#subtitle}} + .sheet-subtitle {{subtitle}} + | + | {{/subtitle}} + .sheet-content + | + | {{#allprops() title subtitle desc color baseroll}} + .sheet-key {{key}} + .sheet-value {{value}} + | + | {{/allprops() title subtitle desc color baseroll}} + | {{#rollTotal() baseroll 2}} + .sheet-fail Critical Fumble! + | + | {{/rollTotal() baseroll 2}} + | {{#rollTotal() baseroll 12}} + .sheet-crit Critical Success! + | + | {{/rollTotal() baseroll 12}} + | {{#desc}} + .sheet-desc {{desc}} + | + | {{/desc}} diff --git a/Barbaric/src/scss/_core.scss b/Barbaric/src/scss/_core.scss new file mode 100644 index 0000000000..6bdb97ea24 --- /dev/null +++ b/Barbaric/src/scss/_core.scss @@ -0,0 +1,278 @@ +// ------------------------------------------------*\ +// #GENERAL +// ------------------------------------------------ + +@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Anton&display=swap'); + +.charsheet { + + *{ + font-family: "Yanone Kaffeesatz"; + } + // --------- 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 { + display: flex; + flex-grow: 6; + flex-shrink: 1; + align-self: center; + } + + label{ + padding-left: 15px; + text-align: center; + } + + + // --------- Inputs ------------- + + input[type="text"], + input[type="number"]{ + background-color: transparent; + border-style: none none solid none; + border-color: black; + border-radius: 0px; + width: fit-content; + padding: 0.5em; + margin: auto 5px 5px 5px; + max-height: 50px; + + } + + input[type="number"]{ + text-align: center; + } + + textarea { + background-color: transparent; + width: 95%; + height: max-content; + } + + input[type="checkbox"].checkbox { + border-style: solid black; + border-radius: 0px; + height: auto; + } + + textarea:focus, + input[type="text"]:focus, + input[type="number"]:focus{ + background-color: hsla(0.0, 15.2%, 75.5%, 1.0); + } + + textarea.warn-missing:placeholder-shown, + input[type="text"].warn-missing:placeholder-shown, + input[type="number"].warn-missing:placeholder-shown { + background-color: #EAC9D1; + } + + // -----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 { + -webkit-appearance: none; + margin: 0; + } + + input[type=number].txtfield { + -moz-appearance: textfield; + } + + // ------- 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 + 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; + border-radius: 10px; + text-shadow: none; + } + + //-----------------------------------------------------------------*\ + #SECTIONS + \*----------------------------------------------------------------- + + + // --------- General Section Styling ------------- + section, .section{ + display: flex; + flex-flow: column nowrap; + align-items:center; + justify-content: space-around; + align-content: space-around; + } + + .border{ + border: solid 2px black; + } + + .flex-center { + 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; + grid-template-rows: 1fr 5fr 5fr; + grid-template-areas:"name name name name " + "skills traits combat xp " + "equip equip sorcery sorcery"; + grid-gap: 4px; + width: 1200px;// Defines the width and height of the sheet + height: 800px; + background-color: whitesmoke; + + // NAME SECTION + + section.name{ + grid-area: name; + + input[type="checkbox"]{ + height: auto; + transform: scale(1.1); + } + .pad{ + padding: 8px; + } + } + + section.skills{ + grid-area: skills; + + .flex-row{ + width: 90%; + + input{ + width: 25%; + margin: 0 10px; + border: 4px solid black; + border-radius: 22px; + font-size: 1.4em; + padding: 6px; + } + + button{ + width: 55%; + font-size: 1.4em; + } + } + } + + section.traits{ + grid-area: traits; + } + section.combat{ + grid-area: combat; + + .flex-row.section{ + width: 90%; + height: 90%; + + button{ + height: 35%; + } + } + + 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-gap: 5px; + grid-row-gap: 10px; + flex-grow: 1; + width: 560px; + + span{ + width: 70px; + + } + button{ + width: 18px; + margin-left: 5px; + } + input[type="text"].weapon-name{ + width: 170px; + } + input[type="text"].weapon-notes{ + width: 235px; + } + input[type="text"].dmg{ + width: 40px; + text-align: center; + } + } + } + section.equip{ + grid-area: equip; + } + section.sorcery{ + grid-area: sorcery; + } + section.xp{ + grid-area: xp; + display: flex; + align-content: flex-start; + input[type="checkbox"]{ + height: 23px; + transform: scale(0.8); + } + span{ + width: 80px; + text-align: center; + } + } + + } + + .lang-es div.grid-weapon span.damage{ + padding-left: 17px; + } + +} diff --git a/Barbaric/src/scss/_rolltemplate.scss b/Barbaric/src/scss/_rolltemplate.scss new file mode 100644 index 0000000000..f5f8668846 --- /dev/null +++ b/Barbaric/src/scss/_rolltemplate.scss @@ -0,0 +1,104 @@ +// ------------------------------------ +// #ROLL TEMPLATES +//------------------------------------ + +// Smaller margins - remove these if you want the huge default left margin + +.withoutavatars .sheet-rolltemplate-rolls { + margin-left: -7px; +} + +.sheet-rolltemplate-rolls { + margin-left: -37px; + font-family: "Yanone Kaffeesatz"; + + .sheet-container { + border: 3px solid black; + border-radius: 3px; + } + + // Header formatting - title and subtitle + .sheet-header { + background-color: var(--header-bg-color, #a83521); + color: var(--header-text-color, #FFF); + text-align: left; + text-transform: capitalize; + padding: 5px; + border-bottom: 2px solid black; + } + .sheet-title, + .sheet-name{ + font-size: 1.4em; + font-weight: bold; + } + .sheet-subtitle { + font-size: 1em; + } + + .sheet-container { + --header-bg-color: #c87d00; + --header-text-color: #FFF; + } + + // alt template colors + .sheet-container.sheet-color-green { + --header-bg-color: #008000; + } + .sheet-container.sheet-color-blue { + --header-bg-color: #0000e0; + } + .sheet-container.sheet-color-gold { + --header-bg-color: #ffdd1f; + --header-text-color: #000; + } + .sheet-container.sheet-color-purple { + --header-bg-color: #c200c2; + } + .sheet-container.sheet-color-black { + --header-bg-color: #000; + } + .sheet-container.sheet-color-white { + --header-bg-color: #FFF; + --header-text-color: #000; + } + + // Allprops part + .sheet-content { + display: grid; + background: #FFF; + grid-template-columns: auto auto; + line-height:1.4em; + } + .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 + .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; + } + .sheet-crit { + color: green; + } + .sheet-fail { + color: red; + } +} \ No newline at end of file diff --git a/Barbaric/src/barbaric.scss b/Barbaric/src/scss/barbaric.scss similarity index 100% rename from Barbaric/src/barbaric.scss rename to Barbaric/src/scss/barbaric.scss diff --git a/Barbaric/translation.json b/Barbaric/translation.json index ffb4cc5003..e97d0799ee 100644 --- a/Barbaric/translation.json +++ b/Barbaric/translation.json @@ -33,5 +33,12 @@ "critical-fumble":"Critical Fumble!", "critical-success":"Critical Success!", "roll-i18n":"roll", - "player":"Player" + "player":"Player", + "human":"Human", + "anunaki":"Anunaki", + "apefolk":"Apefolk", + "dwarf":"Dwarf", + "elf":"Elf", + "geckofolk":"Geckofolk", + "lizardfolk":"Lizardfolk" } \ No newline at end of file From 8884fb57b967a1082cb709589a0dcdd0766a825e Mon Sep 17 00:00:00 2001 From: Andreas Johansson Date: Mon, 7 Jun 2021 20:20:04 +0300 Subject: [PATCH 2/2] 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!",