[Feast of Legends] v1.1 (#5546)

* Feast of Legends: v1.1 refactor sheetworker, add init button, minor fixes, upload images

* Feast of Legends: v1.1 update image links

Feast_of_Legends/feast_of_legends.css

@@ -1,28 +1,6 @@
-/*------------------------------------*\
+/*------------------------------------------------*\
   #GENERAL
-\*------------------------------------*/
-
-
-/* --------- Content positioning ------------- */
-
-.sheet-flex-center {
-  display: flex;
-  align-items: center;
-}
-
-.sheet-flex-middle {
-  display: flex;
-  justify-content: center;
-}
-
-.sheet-flex-down {
-  flex-flow: column nowrap;
-}
-
-.sheet-section {
-    padding: 5px;
-    min-height: 90%;
-}
+\*------------------------------------------------*/
 
 
 /* --------- Text ------------- */
@@ -52,9 +30,10 @@ input[type="number"] {
 }
 
 textarea {
-  width: 85%;
-  height: 70%;
   background-color: transparent;
+  width: 89%;
+  height: 70%;
+  margin-right: 15px;
 }
 
 input[type="checkbox"].sheet-checkbox {
@@ -62,6 +41,12 @@ input[type="checkbox"].sheet-checkbox {
   border-radius: 0px;
 }
 
+textarea:focus,
+input[type="text"]:focus,
+input[type="number"]:focus{
+  background-color: #F6CED8;
+}
+
 /* -----Hides up/down buttons on numberfields that don't need them ---*/
 
 input[type=number].sheet-ref::-webkit-inner-spin-button,
@@ -76,78 +61,88 @@ input[type=number].sheet-txtfield {
   -moz-appearance: textfield;
 }
 
-/*  Buttons  */
+/* ------- Buttons ---------- */
 
-button[type="roll"]{
+button[type="roll"]:not(.sheet-small){
   color: black;
   height: 30px;
   width: 30px;
   margin-left: 15px;
 }
 
-button[type="roll"]::before{
+button[type="roll"]:not(.sheet-small)::before{
   font-size: 1.4em;
 }
 
 
-/*------------------------------------*\
+/*-----------------------------------------------------------------*\
   #SECTIONS
-\*------------------------------------*/
+\*-----------------------------------------------------------------*/
 
+
+/* --------- General Section Styling ------------- */
+.sheet-flex-center {
+  display: flex;
+  align-items: center;
+}
+
+.sheet-flex-middle {
+  display: flex;
+  justify-content: center;
+}
+
+.sheet-flex-down {
+  flex-flow: column nowrap;
+}
+
+.sheet-section {
+    padding: 5px;
+    min-height: 90%;
+}
+
+
+/*  ----- Character Sheet Structure -------
+
+'.sheet-main' defines the sheet's general structure and dimensions using CSS Grid.
+
+It uses 'Grid template areas' to name  each sheet section,
+so that they can be positioned in the grid easily,
+ while also providing a human-readable overview. */
 div.sheet-main {
   display: grid;
+  grid-template-columns: 3.5fr 3.5fr;
+  grid-template-rows: 2fr 0.6fr 2.3fr 0.7fr 3fr 0.7fr 1fr 2fr;
+  grid-template-areas:"logo       name"
+                      "logo       bio"
+                      "stats      bio"
+                      "stats      gold"
+                      "stats      load"
+                      "stats      skilled"
+                      "resistance order-skills"
+                      "resistance order-skills";
   grid-gap: 6px;
-  grid-template-columns: 2.5fr 1fr 3.5fr;
-  grid-template-rows: 2fr 1fr 2fr 1fr 3fr 1fr 1fr 2fr;
-  grid-template-areas:"logo       logo       name"
-                      "logo       logo       bio"
-                      "stats      stats      bio"
-                      "stats      stats      gold"
-                      "stats      stats      load"
-                      "stats      stats      skilled"
-                      "resistance resistance order-skills"
-                      "resistance resistance order-skills";
-  width: 650px;
-  height: 900px;
-  background-image: url(https://i.imgur.com/qKceron.jpg);
-  background-size: 650px 900px;
+  width:    650px; /* Defines the width and height of the sheet */
+  height:   900px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLborder.jpg?raw=true);
+  background-size: 650px 900px; /* Sets the sheet border image to same size as sheet */
   background-repeat: no-repeat;
 }
 
+/* Section-specific CSS is written in a way that removes the need to define classes
+on each individual   */
+
 /* LOGO SECTION */
 
 div.sheet-logo{
   grid-area: logo;
-  background-image: url(https://i.imgur.com/N8oNFQ9.jpg);
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLlogo.jpg?raw=true);
   background-size: 295px 180px;
   background-repeat: no-repeat;
   margin-left: 20px;
-  margin-top: 20px;
+  margin-top: 15px;
 }
 
-/* NAME SECTION */
 
-div.sheet-name{
-  grid-area: name;
-  padding-top: 35px;
-}
-
-div.sheet-name div.sheet-section-small{
-  background-image: url(https://i.imgur.com/ia9MOUx.jpg);
-  background-size: contain;
-  background-repeat: no-repeat;
-  height: 50px;
-  width: 290px;
-}
-
-div.sheet-name label{
-  width: 50px;
-  padding-left: 15px;
-}
-
-div.sheet-name input{
-  width: 180px;
-}
 
 /* STATS SECTION */
 
@@ -156,8 +151,24 @@ div.sheet-stats{
   margin-left: 15px;
 }
 
+div.sheet-stats div:first-child{
+  display: flex;
+  align-items: start;
+  height: 25px;
+}
+
+div.sheet-stats div:first-child button{
+  width: 110px;
+  margin-left: 0px;
+}
+
+div.sheet-stats div:first-child span{
+  padding: 0px 0px 5px 5px;
+}
+
+
 div.sheet-stats div.sheet-stat-block{
-  background-image: url(https://i.imgur.com/i0fqhxv.jpg);
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLstatblock.jpg?raw=true);
   background-repeat: no-repeat;
   background-size: contain;
   height: 65px;
@@ -184,12 +195,14 @@ div.sheet-stats span{
   padding-left: 10px;
 }
 
+
+
 /* RESITANCE SECTION */
 
 div.sheet-resistance{
   grid-area: resistance;
-  background-image: url(https://i.imgur.com/SlEHxEm.jpg);
-  background-size: 290px 170px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true);
+  background-size: 290px 190px;
   background-repeat: no-repeat;
   margin-left: 20px;
   margin-bottom: 20px;
@@ -221,27 +234,59 @@ div.sheet-resistance hr {
   width: 110px;
 }
 
+
+
+/* NAME SECTION */
+
+div.sheet-name{
+  grid-area: name;
+  padding-top: 35px;
+}
+
+div.sheet-name div.sheet-section-small{
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true);
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 50px;
+  width: 290px;
+}
+
+div.sheet-name label{
+  width: 50px;
+  padding-left: 15px;
+}
+
+div.sheet-name input{
+  width: 180px;
+}
+
+
+
 /* BIO SECTION */
 
 div.sheet-bio{
   grid-area: bio;
-  background-image: url(https://i.imgur.com/SlEHxEm.jpg);
-  background-size: 290px 195px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true);
+  background-size: 290px 210px;
   background-repeat: no-repeat; 
   padding-right: 25px;
 }
 
 div.sheet-bio label{
   width:60px;
-  margin-top: 0px;
+  margin-top: 3px;
+}
+
+div.sheet-bio textarea{
+  height: 80%;
 }
 
 /* GOLD SECTION */
 
 div.sheet-gold{
   grid-area: gold;
-  background-image: url(https://i.imgur.com/ia9MOUx.jpg);
-  background-size: 290px 60px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true);
+  background-size: 290px 50px;
   background-repeat: no-repeat;
   padding-bottom: 20px;
 }
@@ -255,27 +300,47 @@ div.sheet-gold input[type=number]{
   width: 120px;
 }
 
+
+
 /* LOAD SECTION */
 
 div.sheet-load{
   grid-area: load;
-  background-image: url(https://i.imgur.com/SlEHxEm.jpg);
-  background-size: 290px 195px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true);
+  background-size: 290px 210px;
   background-repeat: no-repeat;
   padding-right: 25px; 
 }
 
 div.sheet-load label{
   width:60px;
-  margin-top: 0px;
+  margin-top: 3px;
+}
+
+div.sheet-load input[type="text"]:first-child{
+  width: 150px;
+}
+
+div.sheet-load input[type="text"].sheet-small{
+  width: 50px;
+}
+
+div.sheet-load textarea{
+  margin:3px 15px 0px 0px;
+  height: 75%;
+}
+
+div.sheet-load button.sheet-small{
+  color: black;
 }
 
 /* SKILLED SECTION */
 
 div.sheet-skilled{
   grid-area: skilled;
-  background-image: url(https://i.imgur.com/ia9MOUx.jpg);
-  background-size: 290px 60px;
+  align-items: start;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true);
+  background-size: 290px 50px;
   background-repeat: no-repeat;
   padding-bottom: 25px;
 }
@@ -283,18 +348,22 @@ div.sheet-skilled{
 div.sheet-skilled label{
   width: 90px;
   padding-left: 10px;
+  margin-top: 10px; 
 }
 
 div.sheet-skilled input{
   width: 160px;
+  margin-top: 5px;
 }
 
+
+
 /* ORDER SKILL SECTION */
 
 div.sheet-order-skills{
   grid-area: order-skills;
-  background-image: url(https://i.imgur.com/SlEHxEm.jpg);
-  background-size: 290px 185px;
+  background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true);
+  background-size: 290px 190px;
   background-repeat: no-repeat;
   padding-right: 25px;
 }

Feast_of_Legends/feast_of_legends.html

@@ -17,10 +17,16 @@
   </div>
 
 <!-- MAIN STAT SECTION -->
+
   <div class="stats section">
+
+    <div>
+      <button name="roll_init" type="roll" value="&{template:default} {{name=Initiative}} {{Result=[[d20]]}} &{tracker}"><span>Initiative</span></button>
+    </div>
+
     <div class="stat-block flex-center">
       <label>STRENGTH</label>
-      <input name="attr_strength" type="number" value="2">
+      <input name="attr_strength" type="number" value="">
       <span name="attr_strength_bonus"></span>
       <button name="roll_strength" type="roll" value="&{template:default} {{name=Strength}} {{Result=[[d20+(@{strength_bonus})]]}}"></button>
     </div>
@@ -55,13 +61,13 @@
 
     <div class="stat-block flex-center">
       <label>DEFENSE</label>
-      <input name="attr_defense" type="number" value="11">
-      <input name="attr_defense_bonus" type="number" value="" class="ref" disabled="true">
+      <input name="attr_defense"       type="number" value="10">
+      <input name="attr_defense_bonus" type="number" value="">
     </div>
 
     <div class="stat-block flex-center">
       <label>HIT POINTS</label>
-      <input name="attr_hit_points" type="number" value="">
+      <input name="attr_hit_points"     type="number" value="">
       <input name="attr_hit_points_max" type="number" value="">
     </div>
   </div>
@@ -80,6 +86,7 @@
       <input name="attr_resistance2" type="text">
       <input name="attr_resistance3" type="text">
       <input name="attr_resistance4" type="text">
+      <input name="attr_resistance5" type="text">
     </div>
   </div>
 
@@ -92,12 +99,18 @@
 <!-- GOLD SECTION-->
   <div class="gold section flex-center">
     <label>Gold:</label>
-    <input name="attr_gold" type="number" value="200">
+    <input name="attr_gold" type="number" value="10">
   </div>
 
 <!-- LOAD SECTION -->
   <div class="load section flex-center flex-middle flex-down">
     <label>Load</label>
+    <span>
+      <input name="attr_attack_name" type="text" placeholder="Attack/Weapon Name"> 
+      <input name="attr_attack_bonus" type="number" value=""> 
+      <input name="attr_attack_damage" type="text" value="1d6" class="small">
+      <button name="roll_attack" type="roll" value="&{template:default} {{name=@{attack_name}}} {{Attack=[[d20+(@{attack_bonus})]]}} {{Damage=[[@{attack_damage}]]}}" class ="small"></button>
+    </span>
     <textarea name="attr_load" placeholder="Load"></textarea>
   </div>
 
@@ -126,71 +139,33 @@
 
 <script type="text/worker">
 
-var attr_base = ["strength_base","intelligence_base","charm_base","arcana_base","grace_base"];
-
-var attr_bonus = ["strength_bonus","intelligence_bonus","charm_bonus","arcana_bonus","grace_bonus"];
-
-const stats = ["strength","intelligence","charm","arcana","grace"];
+const int = score => parseInt(score, 10) || 0;
 
+// Auto-calculates & updates 'Stat Bonus' based on changes to corresponding 'Base Stat',
+// according to the table on page 5 of the Rulebook.
+// If the Base stat is less than 1, the sheet sets the bonus to "-2"
 
+const stats = ["strength", "intelligence", "charm", "arcana", "grace"];
 stats.forEach(stat => {
     on(`change:${stat}`, () => {
         getAttrs([stat], values => {
-          const stat_base = parseInt(values[stat], 10)||0;
-          console.log(stat_base);
-
-          if(stat_base == "2" || stat_base == "3" || stat_base == "4"){
-            const stat_bonus = "-2"
+            const stat_base = int(values[stat]);
+            console.log(stat_base);
+            let stat_bonus = 0;
+            if (stat_base >= 17) stat_bonus = "+4";
+            else if (stat_base >= 16) stat_bonus = "+3";
+            else if (stat_base >= 13) stat_bonus = "+2";
+            else if (stat_base >= 9) stat_bonus = "+1";
+            else if (stat_base >= 7) stat_bonus = "0";
+            else if (stat_base >= 5) stat_bonus = "-1";
+            else if (stat_base >= 1) stat_bonus = "-2";
+            else stat_bonus = "-2";
+            
             setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
+                [`${stat}_bonus`]: stat_bonus
             });
-          }
-
-          else if(stat_base == "5" || stat_base == "6"){
-            const stat_bonus = "-1"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
-          else if(stat_base == "7" || stat_base == "8"){
-            const stat_bonus = "0"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
-          else if(stat_base == "9" || stat_base == "10" || stat_base == "11" || stat_base == "12"){
-            const stat_bonus = "+1"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
-          else if(stat_base == "13" || stat_base == "14" || stat_base == "15"){
-            const stat_bonus = "+2"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
-          else if(stat_base == "16"){
-            const stat_bonus = "+3"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
-          else if(stat_base >= "17"){
-            const stat_bonus = "+4"
-            setAttrs({
-                [`${stat}_bonus`]: stat_bonus 
-            });
-          }
-
         });
     });
 });
 
-
 </script>