From 0abccf3f48ff00217e6d825d59a972322ad0bc5f Mon Sep 17 00:00:00 2001 From: Maverick Date: Fri, 30 Sep 2022 15:15:24 +0200 Subject: [PATCH] Added attribute rolls --- components/_abilityBox.css | 5 +- components/_abilityBoxLabels.pug | 3 +- components/_abilityBoxRows.pug | 3 +- components/_attr-rolls.css | 16 ++ components/_attr-rolls.pug | 40 +++++ components/_attr-rollsRow.pug | 3 + components/_healthBox.css | 31 +++- components/_healthBox.pug | 14 ++ components/_healthBoxBox.pug | 12 ++ components/_healthBoxContainer.pug | 5 + main.css | 15 +- main.pug | 2 +- output/main.css | 70 +++++++- output/main.html | 246 +++++++++++++++++++++++++++-- views/_main-sheet.pug | 20 +-- 15 files changed, 440 insertions(+), 45 deletions(-) create mode 100644 components/_attr-rolls.css create mode 100644 components/_attr-rolls.pug create mode 100644 components/_attr-rollsRow.pug create mode 100644 components/_healthBox.pug create mode 100644 components/_healthBoxBox.pug create mode 100644 components/_healthBoxContainer.pug diff --git a/components/_abilityBox.css b/components/_abilityBox.css index 1863bc5..aa4c6f8 100644 --- a/components/_abilityBox.css +++ b/components/_abilityBox.css @@ -1,6 +1,6 @@ .abilityBox { display: grid; - grid-template-columns: repeat(6, auto); + grid-template-columns: repeat(7, auto); grid-auto-flow: row; justify-content: start; gap: 0.7em 4px; @@ -30,6 +30,9 @@ margin-bottom: -0.5em; } } + h2 { + margin-bottom: 40px; + } } diff --git a/components/_abilityBoxLabels.pug b/components/_abilityBoxLabels.pug index fe3d454..01e76d6 100644 --- a/components/_abilityBoxLabels.pug +++ b/components/_abilityBoxLabels.pug @@ -3,4 +3,5 @@ p.abilityLabel Rating p.abilityLabel p.abilityLabel Mod p.abilityLabel -p.abilityLabel Pool \ No newline at end of file +p.abilityLabel Pool +p.abilityLabel Roll \ No newline at end of file diff --git a/components/_abilityBoxRows.pug b/components/_abilityBoxRows.pug index b5c33ff..a94a8cb 100644 --- a/components/_abilityBoxRows.pug +++ b/components/_abilityBoxRows.pug @@ -6,4 +6,5 @@ mixin abilityRow(name) p + input(type="number" name=`attr_abilitymod_${name.substring(0,3)}` value="0") p = - input(type="number" name=`attr_abilitypool_${name.substring(0,3)}` value=`@{abilityrtg_${name.substring(0,3)}}+@{abilitymod_${name.substring(0,3)}}` disabled="true") \ No newline at end of file + input(type="number" name=`attr_abilitypool_${name.substring(0,3)}` value=`@{abilityrtg_${name.substring(0,3)}}+@{abilitymod_${name.substring(0,3)}}` disabled="true") + button(type="roll") \ No newline at end of file diff --git a/components/_attr-rolls.css b/components/_attr-rolls.css new file mode 100644 index 0000000..87d6216 --- /dev/null +++ b/components/_attr-rolls.css @@ -0,0 +1,16 @@ +.attr-rolls { + width: 100%; + + > .attr-rolls-grid { + display: grid; + grid-template-columns: repeat(2, auto); + grid-gap: 4px; + > { + p { + color: #aaaaee; + font-size: 10pt; + margin-right: 30px; + } + } + } +} \ No newline at end of file diff --git a/components/_attr-rolls.pug b/components/_attr-rolls.pug new file mode 100644 index 0000000..6b9d83b --- /dev/null +++ b/components/_attr-rolls.pug @@ -0,0 +1,40 @@ +h2 Attribute Rolls +- + var attr_rolls = [ + { + name: "Surprise", + roll: "", + shorthand: "(R+I)" + }, + { + name: "Composure", + roll: "", + shorthand: "(C+W)" + }, + { + name: "Judge Intentions", + roll: "", + shorthand: "(C+I)" + }, + { + name: "Memory", + roll: "", + shorthand: "(L+W)" + }, + { + name: "Poison/Drug", + roll: "", + shorthand: "(B+W)" + }, + { + name: "Carry/Lift", + roll: "", + shorthand: "(B+S)" + } + ]; + +.attr-rolls-grid + include ./_attr-rollsRow + each val in attr_rolls + +attr-rollsRow(val.name, val.roll, val.shorthand) + diff --git a/components/_attr-rollsRow.pug b/components/_attr-rollsRow.pug new file mode 100644 index 0000000..57af643 --- /dev/null +++ b/components/_attr-rollsRow.pug @@ -0,0 +1,3 @@ +mixin attr-rollsRow(name, roll, shorthand) + p #{name + " " + shorthand} + button(type="roll") \ No newline at end of file diff --git a/components/_healthBox.css b/components/_healthBox.css index 17531b7..162c105 100644 --- a/components/_healthBox.css +++ b/components/_healthBox.css @@ -1,8 +1,13 @@ .healthWrapper { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); gap: 1rem; > { + + h3 { + color: #aaaaee; + } + .healthContainer { display: grid; grid-template-columns: repeat(3, auto); @@ -13,33 +18,36 @@ * { margin: -1px; } - /* TODO: Refactor to use Labels !!!! */ label { &.healthTrackerBox { cursor: pointer; order: 1; - background-color: red; + background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg); + background-color: #444444; + background-size: 90%; + background-position: center; + background-repeat: no-repeat; z-index: 1; position: relative; border: 2px solid #550000; border-radius: 0px; appearance: none; - width: 6rem; - height: 6rem; + width: 3.5rem; + height: 3.5rem; border-radius: 3px; padding: 0px; &.reset { order: 2; - background-color: brown; } - &:after { + > span { position: absolute; content: "-1"; top: 2px; right: 4px; + display: none; } } } @@ -49,11 +57,20 @@ position: absolute; opacity: 0; z-index: 0; + + > span { + display: block; + } } & ~ .healthTrackerBox { order: 3; background-color: #444444; + background-image: none; + + > span { + display: block; + } } } } diff --git a/components/_healthBox.pug b/components/_healthBox.pug new file mode 100644 index 0000000..f2718da --- /dev/null +++ b/components/_healthBox.pug @@ -0,0 +1,14 @@ +.healthWrapper + include ./_healthBoxContainer + h3 Stun + h3 Physical + h3 Overflow + +healthContainer(30).stun //Will/2 + 8 + +healthContainer(30).physical //Body/2 + 8 + +healthContainer(30).overflow //Body*2 + .stunInfo + input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}") + .physicalInfo + input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_bod}/2)+8-@{physicalWounds}") + .overflowInfo + input(type="number" name="attr_physicalHealth" disabled="true" value="ceil(@{abilitypool_wil}/2)+8-@{stunWounds}") \ No newline at end of file diff --git a/components/_healthBoxBox.pug b/components/_healthBoxBox.pug new file mode 100644 index 0000000..a5f2b08 --- /dev/null +++ b/components/_healthBoxBox.pug @@ -0,0 +1,12 @@ +mixin healthBox(number) + - let starter = number == 0 + - let modifier = Math.floor(number / 3) * -1 + - if (modifier == 0) modifier = '' + if starter + input.hidden.disp(id=`${attributes.class.substring(0,2)}B${number}` type="radio" name=`attr_${attributes.class}Wounds` value=number checked="checked") + label.healthTrackerBox.reset(for=`${attributes.class.substring(0,2)}B${number}`) + span.woundmodifier #{modifier} + else + input.hidden.disp(id=`${attributes.class.substring(0,2)}B${number}` type="radio" name=`attr_${attributes.class}Wounds` value=number) + label.healthTrackerBox(for=`${attributes.class.substring(0,2)}B${number}`) + span.woundmodifier #{modifier} \ No newline at end of file diff --git a/components/_healthBoxContainer.pug b/components/_healthBoxContainer.pug new file mode 100644 index 0000000..656b395 --- /dev/null +++ b/components/_healthBoxContainer.pug @@ -0,0 +1,5 @@ +mixin healthContainer(count) + div(class='healthContainer ' + attributes.class) + include ./_healthBoxBox + - for (var i = 0; i < count; i++) + +healthBox(i)(class=attributes.class) \ No newline at end of file diff --git a/main.css b/main.css index 5741739..3957465 100644 --- a/main.css +++ b/main.css @@ -28,6 +28,17 @@ padding: 0px; text-align: center; vertical-align: middle; + + &[type=roll] { + background-color: #550000; + border: 0; + width: 1.5em; + height: 1.5em; + background-image: none; + color: white; + border-radius: 8px; + box-shadow: none; + } } input { @@ -141,6 +152,7 @@ padding: 2em; width: auto; min-height: 100%; + height: fit-content; } .tab { @@ -150,7 +162,8 @@ outline-style: double; outline-color: #550000; width: 100%; - height: 40em; + min-height: 40em; + height: fit-content; display: none; } diff --git a/main.pug b/main.pug index 8ae86cc..5b3d21f 100644 --- a/main.pug +++ b/main.pug @@ -24,7 +24,7 @@ button.togbtn(type='action' name='act_togedge') Edge - - var abilities = ["Body", "Agility", "Reaction", "Strength", "Logic", "Intuition", "Charisma", "Magic", "Edge"] + var abilities = ["Body", "Agility", "Reaction", "Strength", "Willpower", "Logic", "Intuition", "Charisma", "Magic", "Edge"] include ./views/_main-sheet.pug diff --git a/output/main.css b/output/main.css index 6ffa4e7..149c9e1 100644 --- a/output/main.css +++ b/output/main.css @@ -3,11 +3,15 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { } .healthWrapper { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); gap: 1rem; display: grid; } +.healthWrapper > h3 { + color: #aae; +} + .healthWrapper > .healthContainer { grid-template-columns: repeat(3, auto); justify-content: start; @@ -25,9 +29,13 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { z-index: 1; -webkit-appearance: none; appearance: none; - width: 6rem; - height: 6rem; - background-color: red; + width: 3.5rem; + height: 3.5rem; + background-color: #444; + background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 90%; border: 2px solid #500; border-radius: 3px; order: 1; @@ -36,12 +44,12 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { } .healthWrapper > .healthContainer > label.healthTrackerBox.reset { - background-color: brown; order: 2; } -.healthWrapper > .healthContainer > label.healthTrackerBox:after { +.healthWrapper > .healthContainer > label.healthTrackerBox > span { content: "-1"; + display: none; position: absolute; top: 2px; right: 4px; @@ -53,17 +61,42 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { position: absolute; } +.healthWrapper > .healthContainer > input:checked + .healthTrackerBox > span { + display: block; +} + .healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox { background-color: #444; + background-image: none; order: 3; } +.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox > span { + display: block; +} + +.attr-rolls { + width: 100%; +} + +.attr-rolls > .attr-rolls-grid { + grid-gap: 4px; + grid-template-columns: repeat(2, auto); + display: grid; +} + +.attr-rolls > .attr-rolls-grid > p { + color: #aae; + margin-right: 30px; + font-size: 10pt; +} + .abilityBox { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 100%; - grid-template-columns: repeat(6, auto); + grid-template-columns: repeat(7, auto); grid-auto-flow: row; justify-content: start; align-items: center; @@ -93,6 +126,10 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { margin-bottom: -.5em; } +.abilityBox > h2 { + margin-bottom: 40px; +} + .sheetform { height: 100%; padding: 0; @@ -128,6 +165,17 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { padding: 0; } +.sheetform .charactersheet button[type="roll"] { + width: 1.5em; + height: 1.5em; + color: #fff; + box-shadow: none; + background-color: #500; + background-image: none; + border: 0; + border-radius: 8px; +} + .sheetform .charactersheet input { color: #aae; background-color: #444; @@ -222,6 +270,9 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { .generic-grid { width: auto; min-height: 100%; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; justify-content: space-around; @@ -232,7 +283,10 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab { .tab { outline-offset: 4px; width: 100%; - height: 40em; + min-height: 40em; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; outline: 4px double #500; margin-top: 10px; display: none; diff --git a/output/main.html b/output/main.html index b38c4a4..fb318de 100644 --- a/output/main.html +++ b/output/main.html @@ -24,7 +24,7 @@
-

Abilities

+

Attributes

Rating

@@ -32,78 +32,300 @@

Mod

Pool

+

Roll

+

=

+

+

=

+

+

=

+

+

=

+ + + +

+

+ +

=

+ +

+

=

+

+

=

+

+

=

+

+

=

+

+

=

+
-

Health

- +

Damage Tracks

-
- - - - - - - - +

Stun

+

Physical

+

Overflow

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+

Attribute Rolls

+
+

Surprise (R+I)

+ +

Composure (C+W)

+ +

Judge Intentions (C+I)

+ +

Memory (L+W)

+ +

Poison/Drug (B+W)

+ +

Carry/Lift (B+S)

+ +
+
+
diff --git a/views/_main-sheet.pug b/views/_main-sheet.pug index cec06fb..4ec6034 100644 --- a/views/_main-sheet.pug +++ b/views/_main-sheet.pug @@ -1,20 +1,14 @@ .tab.main-tab .generic-grid .ability-box - h2 Abilities + h2 Attributes include .././components/_abilityBox .healthBox - h2 Health - input(type="number" name="attr_physicalhealth" disabled="true" value="@{physicalHealth}") - .healthWrapper - .healthContainer - input.hidden.disp(id="physK0" type="radio" name="attr_physicalHealth" value="0" checked="checked") - label.healthTrackerBox.reset(for="physK0") - input.hidden.disp(id="physK1" type="radio" name="attr_physicalHealth" value="1") - label.healthTrackerBox(for="physK1") - input.hidden.disp(id="physK2" type="radio" name="attr_physicalHealth" value="2") - label.healthTrackerBox(for="physK2") - input.hidden.disp(id="physK3" type="radio" name="attr_physicalHealth" value="3") - label.healthTrackerBox(for="physK3") + h2 Damage Tracks + include .././components/_healthBox + .attr-rolls + include .././components/_attr-rolls + + .attr-container