[Sharp Swords] layout fixes (#6926)

* removing info about language

* Fixing layout

Changing form grid to 100% flexbox to solve repeatable areas height growth.

Including new weapons roll damage button.

Fixing positive and negative dice rolling.

* including test files

* fixing google fonts import

* fixing game title and Equipments translation

* another fix to negative dice roll

* Improving weapon and equipment rolls

* Update README.md

removing language information

* new layout fixes

Fixing font, wepaons damage translation and general layout

* removing html tags

* another fix to the middle section layout

* fix game title center

* Update sharpswords.png

SharpSwordsAndSinisterSpells/README.md

@@ -1,3 +1 @@
-This is an unoficial character sheet for the Sharp Swords & Sinister Spells RPG game by Diogo Nogueira.
-
-Currently it is only in Portuguese language.
+This is an unofficial character sheet for the Sharp Swords & Sinister Spells RPG game by Diogo Nogueira.

SharpSwordsAndSinisterSpells/sharpswords.css

@@ -1,59 +1,63 @@
-/*----------------- GRID MAIN DEFINITIONS ------------------*/
-@import url('https://fonts.googleapis.com/css?family=New Rocker|Rosarivo&display=swap');
+/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
+@import url('https://fonts.googleapis.com/css?family=New+Rocker|Rosarivo&display=swap');
 
-.sheet-grid-main-container {
-	font-family: New Rocker;
-	font-size: 1em;
-	display: grid;
-	gap: 1.5em;
-	max-width: 800px;
+.sheet-main-container {
 	min-height: 600px;
-	/*justify-items: center;*/
-	grid-template-columns: 0.5fr 1fr 1fr;
-	grid-template-rows: auto auto auto 1fr 1fr 1fr auto;
-	grid-template-areas: "header     header     header" 
-											 "defs       defs       defs" 
-											 "other-attr other-attr other-attr"
-											 "main-attr  weapons    equipment" 
-											 "coins      habilities spells" 
-											 "notes      habilities spells" 
-											 "footer     footer     footer";
+  min-width: 800px;
+  max-width: 1000px;
 }
 
 /*----------------- GENERAL CSS ------------------*/
 
+.sheet-main-font {
+	font-family: 'New Rocker';
+	font-size: 1em;
+}
+
+.sheet-second-font {
+	font-family: 'Rosarivo';
+	font-size: 0.8em;
+}
+
 .sheet-flex-row {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .sheet-flex-column {
 	display: flex;
-	flex-direction: column;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .sheet-nowrap {
 	flex-wrap: nowrap;
 }
 
-.sheet-grid-main-container input {
-	margin: 0 2px 0 2px;
+.sheet-main-container input {
+	margin: 2px;
 }
 
-.sheet-grid-main-container input[type=number] {
-	width: 40px;
+.sheet-main-container input[type=number] {
+  width: 40px;
 }
 
-.sheet-grid-main-container fieldset {
+.sheet-main-container fieldset {
 	min-width: 0;
 	padding: 0;
 	margin: 0;
 	border: 0;
 }
 
-.sheet-grid-main-container textarea {
-	width: 100%;
+.sheet-main-container textarea {
+  width: 100%;
+  height: 5em;
+  margin: 2px;
+}
+
+.sheet-section {
+	margin: 0.7em;
 }
 
 .sheet-section-title {
@@ -75,18 +79,27 @@
 	padding: 2px;
 }
 
-.sheet-second-font {
-	font-family: Rosarivo;
-	font-size: 0.8em;
+.sheet-die-select {
+  width: auto;
+  margin: 2px;
+}
+
+.sheet-big-margin-bottom {
+  margin-bottom: 20px;
+}
+
+.sheet-repeatable-item {
+	margin-bottom: 5px;
 }
 
 /*------------- GRID SECTIONS -------------*/
 .sheet-header {
-	grid-area: header;
+	align-items: center;
 }
 
 .sheet-header h1 {
 	margin: 0px;
+	align-items: center;
 }
 
 .sheet-sharp-swords {
@@ -103,9 +116,7 @@
 	border-style:solid;
 }
 
-
 .sheet-char-definitions {
-	grid-area: defs;
 	justify-content: space-between;
 }
 
@@ -122,16 +133,31 @@
 	flex-grow: 1;
 }
 
+.sheet-middle-section {
+  justify-content: flex-start;
+}
+
+.sheet-left-column {
+  justify-content: stretch;
+  width: 20%;
+}
+
+.sheet-middle-column {
+	width: 40%;
+}
+
+.sheet-right-column {
+	width: 40%;
+}
+
 .sheet-main-attributes {
-	grid-area: main-attr;
 	display: grid;
-	grid-template-columns: 1fr auto 1fr 2fr;
-	justify-items: stretch;
-	align-items: center;
+	grid-template-columns: auto auto auto auto;
+	justify-items: flex-start;
+  align-items: center;
 }
 
 .sheet-other-attributes {
-	grid-area: other-attr;
 	justify-content: space-evenly;
 	align-items: center;
 }
@@ -140,32 +166,14 @@
 	align-items: center;
 }
 
-.sheet-habilities {
-	grid-area: habilities;
-}
-
-.sheet-equipment {
-	grid-area: equipment;
-}
-
-.sheet-notes {
-	grid-area: notes;
-}
-
-.sheet-spells {
-	grid-area: spells;
-}
-
-.sheet-weapons {
-	grid-area: weapons;
+.sheet-notes textarea{
+  height: 10em;
+  margin: 0px;
+  width: max-content;
 }
 
 .sheet-weapons-damage {
-	width: 4em;
-}
-
-.sheet-coins {
-	grid-area: coins;
+	width: 5em;
 }
 
 .sheet-coins-grid {
@@ -175,7 +183,6 @@
 }
 
 .sheet-footer {
-	grid-area: footer;
 	font-style: italic;
 	font-size: 0.7em;
 	justify-content: flex-end;

SharpSwordsAndSinisterSpells/sharpswords.html

@@ -1,32 +1,33 @@
-<div class="grid-main-container">
+<div class="main-container flex-column border">
 
   <!-- Header section -->
-  <div class="header flex-row">
-    <h1 data-i18n="sharp-swords" class="sharp-swords">ESPADAS<br \> AFIADAS</h1>
+  <div class="header flex-row section main-font">
+    <h1 data-i18n="sharp-swords" class="sharp-swords">ESPADAS <br> AFIADAS</h1>
     <h1 data-i18n="and" class="and">&</h1>
-    <h1 data-i18n="sinister-spells" class="sinister-spells">FEITIÇOS<br \> SINISTROS</h1>
+    <h1 data-i18n="sinister-spells" class="sinister-spells">FEITIÇOS<br> SINISTROS</h1>
   </div>
 
-  <div class="char-definitions flex-row border">
+  <!-- Character Definitions -->
+  <div class="char-definitions flex-row border section">
 
     <div class="flex-column">
       <div class="flex-row char-definitions-margin">
-        <span class="char-definitions-margin" data-i18n="char-name">Nome</span>
+        <span class="char-definitions-margin main-font" data-i18n="char-name">Nome</span>
         <input class="char-definitions-margin char-definitions-input" name="attr_character_name" type="text"
           title="{@character_name}" />
 
-        <span class="char-definitions-margin" data-i18n="char-archetype">Arquétipo</span>
+        <span class="char-definitions-margin main-font" data-i18n="char-archetype">Arquétipo</span>
         <input class="char-definitions-margin char-definitions-input" name="attr_archetype" type="text"
           title="{@archetype}" />
       </div>
 
       <div class="flex-row char-definitions-margin">
-        <span class="char-definitions-margin" data-i18n="char-calling">Vocação</span>
+        <span class="char-definitions-margin main-font" data-i18n="char-calling">Vocação</span>
         <input class="char-definitions-margin char-definitions-input" name="attr_calling" type="text"
           title="{@calling}" />
 
 
-        <span class="char-definitions-margin" data-i18n="char-complication">Complicação</span>
+        <span class="char-definitions-margin main-font" data-i18n="char-complication">Complicação</span>
         <input class="char-definitions-margin char-definitions-input" name="attr_complication" type="text"
           title="{@complication}" />
       </div>
@@ -34,11 +35,11 @@
 
     <div class="flex-row char-level-row">
       <div class="flex-column center">
-        <span data-i18n="char-level">Nível</span>
+        <span class="main-font" data-i18n="char-level">Nível</span>
         <input name="attr_level" type="number" value="1" title="{@level}" />
       </div>
       <div class="flex-column center">
-        <span data-i18n="adventures" data-i18n-title="char-adventures-levelup" title="Aventuras para o próximo nível">
+        <span class="main-font" data-i18n="adventures" data-i18n-title="char-adventures-levelup" title="Aventuras para o próximo nível">
 
           Aventuras
         </span>
@@ -47,11 +48,12 @@
     </div>
   </div>
 
-  <div class="other-attributes flex-row">
+  <!-- Other Attributes -->
+  <div class="other-attributes flex-row section">
 
     <div>
-      <span data-i18n="char-luck-die">Dado de sorte</span>
-      <select name="attr_luckdie" title="{@luckdie}">
+      <span class="main-font" data-i18n="char-luck-die">Dado de sorte</span>
+      <select class="die-select" name="attr_luckdie" title="{@luckdie}">
         <option value="d4" selected="selected">d4</option>
         <option value="d6">d6</option>
         <option value="d8">d8</option>
@@ -65,7 +67,7 @@
 
     <div class="flex-row health-points">
       <div class="char-definitions-margin">
-        <span data-i18n="char-hp">Pontos de Vida</span>
+        <span class="main-font" data-i18n="char-hp">Pontos de Vida</span>
       </div>
 
       <div class="flex-column center">
@@ -80,140 +82,158 @@
       </div>
     </div>
   </div>
-  <!-- Character attributes-->
-  <div class="main-attributes">
 
-    <span data-i18n="char-physique">Físico</span>
-    <input name="attr_physique" type="number" title="{@physique}" />
-    <input type="checkbox" name="attr_physique_primary" data-i18n-title="primary-checkbox"
-      title="Marque essa caixa se esse for um atirbuto primário." />
-    <button type="roll" name="roll_physique_check" title="{@physique_check}"
-      value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{physique_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20k1 | @{negative}, 2d20d1 } + ?{@{modifier}|0} ]] }}"></button>
+  <div class="middle-section flex-row nowrap">
+    <div class="left-column flex-column">
+      <!-- Character attributes-->
+      <div class="main-attributes section">
 
-    <span data-i18n="char-agility">Agilidade</span>
-    <input name="attr_agility" type="number" title="{@agility}" />
-    <input type="checkbox" name="attr_agility_primary" data-i18n-title="primary-checkbox"
-      title="Marque essa caixa se esse for um atirbuto primário." />
-    <button type="roll" name="roll_agility_check" title="{@agility_check}"
-      value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{agility_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20k1 | @{negative}, 2d20d1 } + ?{@{modifier}|0} ]] }}"></button>
+        <span class="main-font" data-i18n="char-physique">Físico</span>
+        <input name="attr_physique" type="number" title="{@physique}" />
+        <input type="checkbox" name="attr_physique_primary" data-i18n-title="primary-checkbox"
+          title="Marque essa caixa se esse for um atirbuto primário." />
+        <button type="roll" name="roll_physique_check" title="{@physique_check}"
+          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{physique_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
 
-    <span data-i18n="char-intellect">Intelecto</span>
-    <input name="attr_intellect" type="number" title="{@intellect}" />
-    <input type="checkbox" name="attr_intellect_primary" data-i18n-title="primary-checkbox"
-      title="Marque essa caixa se esse for um atirbuto primário." />
-    <button type="roll" name="roll_intellect_check" title="{@intellect_check}"
-      value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{intellect_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20k1 | @{negative}, 2d20d1 } + ?{@{modifier}|0} ]] }}"></button>
+        <span class="main-font" data-i18n="char-agility">Agilidade</span>
+        <input name="attr_agility" type="number" title="{@agility}" />
+        <input type="checkbox" name="attr_agility_primary" data-i18n-title="primary-checkbox"
+          title="Marque essa caixa se esse for um atirbuto primário." />
+        <button type="roll" name="roll_agility_check" title="{@agility_check}"
+          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{agility_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
 
-    <span data-i18n="char-will">Vontade</span>
-    <input name="attr_will" type="number" title="{@will}" />
-    <input type="checkbox" name="attr_will_primary" data-i18n-title="primary-checkbox"
-      title="Marque essa caixa se esse for um atirbuto primário." />
-    <button type="roll" name="roll_will_check" title="{@will_check}"
-      value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{will_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20k1 | @{negative}, 2d20d1 } + ?{@{modifier}|0} ]] }}"></button>
+        <span class="main-font" data-i18n="char-intellect">Intelecto</span>
+        <input name="attr_intellect" type="number" title="{@intellect}" />
+        <input type="checkbox" name="attr_intellect_primary" data-i18n-title="primary-checkbox"
+          title="Marque essa caixa se esse for um atirbuto primário." />
+        <button type="roll" name="roll_intellect_check" title="{@intellect_check}"
+          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{intellect_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
 
-  </div>
+        <span class="main-font" data-i18n="char-will">Vontade</span>
+        <input name="attr_will" type="number" title="{@will}" />
+        <input type="checkbox" name="attr_will_primary" data-i18n-title="primary-checkbox"
+          title="Marque essa caixa se esse for um atirbuto primário." />
+        <button type="roll" name="roll_will_check" title="{@will_check}"
+          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{will_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
 
-  <!-- Notes -->
-  <div class="notes flex-column">
-    <div class="section-title flex-row">
-      <span data-i18n="notes">Anotações</span>
-    </div>
-    <div class="flex-row grow">
-      <textarea name="attr_notes" title="{@notes}"></textarea>
-    </div>
-  </div>
-
-  <!-- Special Habilities -->
-  <div class="habilities flex-column border">
-    <div class="section-title">
-      <span data-i18n="special-habilities">Habilidades Especiais</span>
-    </div>
-    <fieldset class="repeating_specialhabilities">
-      <div class="flex-row">
-        <textarea name="attr_specialhabilities" data-i18n-placeholder="special-hability"
-          placeholder="Habilidade Especial"></textarea>
       </div>
-    </fieldset>
-  </div>
 
-  <!-- Spells -->
-  <div class="spells flex-column border">
-    <div class="section-title flex-row">
-      <span data-i18n="spells">Magias</span>
-    </div>
+      <!-- Coins -->
+      <div class="coins flex-column border section">
+        <div class="section-title">
+          <span class="main-font" data-i18n="coins">Moedas</span>
+        </div>
 
-    <fieldset class="repeating_spells">
-      <div class="flex-row">
-        <textarea name="attr_spelldescription" data-i18n-placeholder="spell" placeholder="Magia"></textarea>
+        <div class="coins-grid center">
+          <span class="second-font" data-i18n="copper-coins">mc</span>
+          <input name="attr_copper_coins" type="number" data-i18n-title="copper-coins-title"
+            title="Moedas de Cobre" />
+
+          <span class="second-font" data-i18n="silver-coins">mp</span>
+          <input name="attr_silver_coins" type="number" data-i18n-title="silver-coins-title"
+            title="Moedas de Prata" />
+
+          <span class="second-font" data-i18n="gold-coins">mo</span>
+          <input name="attr_gold_coins" type="number" data-i18n-title="gold-coins-title" title="Moedas de Ouro" />
+
+          <span class="second-font" data-i18n="platin-coins">mpl</span>
+          <input name="attr_platin_coins" type="number" data-i18n-title="platin-coins-title"
+            title="Moedas de Platina" />
+        </div>
       </div>
-    </fieldset>
-  </div>
 
-  <!-- Equipment -->
-  <div class="equipment flex-column border">
-    <!-- Equipment Header -->
-    <div class="section-title">
-      <span data-i18n="equipments">Equipamentos</span>
-    </div>
-
-    <fieldset class="repeating_equipment">
-      <div class="flex-row center">
-        <input name="attr_equipmentdescription" type="text" class="grow" data-i18n-placeholder="description"
-          placeholder="Descrição" />
-
-        <select name="attr_equipmentusagedie" data-i18n-title="usage-die" title="Dado de uso">
-          <option value="none" selected="selected">-</option>
-          <option value="d4">d4</option>
-          <option value="d6">d6</option>
-          <option value="d8">d8</option>
-          <option value="d10">d10</option>
-          <option value="d12">d12</option>
-          <option value="d20">d20</option>
-        </select>
-        <button type="roll" name="roll_usage_check" title="{@usage_check}"
-          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{usage_die} }} {{ @{result} = [[@{equipmentusagedie}cs>3cf<2]]}}"></button>
+      <!-- Notes -->
+      <div class="notes flex-column section">
+        <div class="section-title flex-row">
+          <span class="main-font" data-i18n="notes">Anotações</span>
+        </div>
+        <div class="flex-row grow">
+          <textarea name="attr_notes" title="{@notes}"></textarea>
+        </div>
       </div>
-    </fieldset>
-  </div>
-
-  <!-- Weapons -->
-  <div class="weapons flex-column border">
-    <!-- Weapons Header -->
-    <div class="section-title">
-      <span data-i18n="weapons">Armas</span>
     </div>
 
-    <fieldset class="repeating_weapons">
-      <div class="flex-row nowrap">
-        <input name="attr_weapondescription" type="text" class="grow" data-i18n-placeholder="description"
-          placeholder="Descrição" />
-        <!-- TODO make damage die roll -->
-        <input class="weapons-damage" name="attr_weapondamage" type="text" data-i18n-placeholder="damage"
-          placeholder="Dano" />
+    <div class="middle-column flex-column">
+      <!-- Weapons -->
+      <div class="weapons flex-column border section">
+        <!-- Weapons Header -->
+        <div class="section-title">
+          <span class="main-font" data-i18n="weapons">Armas</span>
+        </div>
+
+        <fieldset class="repeating_weapons">
+          <div class="flex-row center nowrap repeatable-item">
+            <input name="attr_weapondescription" type="text" class="grow" data-i18n-placeholder="description"
+              placeholder="Descrição" />
+
+            <input class="weapons-damage" name="attr_weapondamage" type="text" data-i18n-placeholder="damage"
+              placeholder="Dano" />
+            <button type="roll" name="roll_weapondamagecheck" title="{@weapondamagecheck}"
+              value="&{template:default} {{name=@{character_name} }} {{ @{weapon}=@{weapondescription} }} {{ @{damage} = [[@{weapondamage}]]}}"></button>
+          </div>
+        </fieldset>
+
       </div>
-    </fieldset>
 
-  </div>
-
-  <!-- Coins -->
-  <div class="coins flex-column border">
-    <div class="section-title">
-      <span data-i18n="coins">Moedas</span>
+      <!-- Special Habilities -->
+      <div class="habilities flex-column border section">
+        <div class="section-title">
+          <span class="main-font" data-i18n="special-habilities">Habilidades Especiais</span>
+        </div>
+        <fieldset class="repeating_specialhabilities">
+          <div class="flex-row repeatable-item">
+            <input name="attr_habilityname" type="text" data-i18n-placeholder="name" placeholder="Nome" />
+            <textarea name="attr_habilitydescription" data-i18n-placeholder="description"
+              placeholder="Descrição"></textarea>
+          </div>
+        </fieldset>
+      </div>
     </div>
 
-    <div class="coins-grid second-font">
-      <span data-i18n="copper-coins">mc</span>
-      <input name="attr_copper_coins" type="number" data-i18n-title="copper-coins-title" title="Moedas de Cobre" />
+    <div class="right-column flex-column">
+      <!-- Equipment -->
+      <div class="equipment flex-column border section">
+        <!-- Equipment Header -->
+        <div class="section-title">
+          <span class="main-font" data-i18n="equipments">Equipamentos</span>
+        </div>
 
-      <span data-i18n="silver-coins">mp</span>
-      <input name="attr_silver_coins" type="number" data-i18n-title="silver-coins-title" title="Moedas de Prata" />
+        <fieldset class="repeating_equipment">
+          <div class="flex-row center nowrap repeatable-item">
+            <input name="attr_equipmentdescription" type="text" class="grow" data-i18n-placeholder="description"
+              placeholder="Descrição" />
 
-      <span data-i18n="gold-coins">mo</span>
-      <input name="attr_gold_coins" type="number" data-i18n-title="gold-coins-title" title="Moedas de Ouro" />
+            <select class="die-select" name="attr_equipmentusagedie" data-i18n-title="usage-die" title="Dado de uso">
+              <option value="none" selected="selected">-</option>
+              <option value="d4">d4</option>
+              <option value="d6">d6</option>
+              <option value="d8">d8</option>
+              <option value="d10">d10</option>
+              <option value="d12">d12</option>
+              <option value="d20">d20</option>
+            </select>
+            <button type="roll" name="roll_usage_check" title="{@usage_check}"
+              value="&{template:default} {{name=@{character_name} }} {{ @{item} = @{equipmentdescription} }} {{ @{check}=@{usage_die} }} {{ @{result} = [[@{equipmentusagedie}cs>3cf<2]]}}"></button>
+          </div>
+        </fieldset>
+      </div>
 
-      <span data-i18n="platin-coins">mpl</span>
-      <input name="attr_platin_coins" type="number" data-i18n-title="platin-coins-title" title="Moedas de Platina" />
+      <!-- Spells -->
+      <div class="spells flex-column border section">
+        <div class="section-title flex-row">
+          <span class="main-font" data-i18n="spells">Magias</span>
+        </div>
+
+        <fieldset class="repeating_spells">
+          <div class="flex-row repeatable-item">
+            <input name="attr_spellname" type="text" data-i18n-placeholder="name" placeholder="Nome" />
+            <textarea name="attr_spelldescription" data-i18n-placeholder="description"
+              placeholder="Descrição"></textarea>
+          </div>
+        </fieldset>
+      </div>
     </div>
+
   </div>
 
   <div class="footer flex-row second-font">
@@ -231,6 +251,8 @@
   <span data-i18n="modifier">Modificador</span>
   <span data-i18n="result">Resultado</span>
   <span data-i18n="check">Teste</span>
+  <span data-i18n="weapon">Arma</span>
+  <span data-i18n="item">Item</span>
 </div>
 
 <!--Sheet Workers -->
@@ -252,10 +274,13 @@
           physique_label: getTranslationByKey("char-physique"),
           agility_label: getTranslationByKey("char-agility"),
           intellect_label: getTranslationByKey("char-intellect"),
-          will_label: getTranslationByKey("char-will")
+          will_label: getTranslationByKey("char-will"),
+          weapon: getTranslationByKey("weapon"),
+          item: getTranslationByKey("item"),
+          damage: getTranslationByKey("damage")
 
       });     
       
   });
   
-</script>
+</script>

SharpSwordsAndSinisterSpells/sheet.json

@@ -4,5 +4,5 @@
 	"authors": "Daniel Tschiedel",
 	"roll20userid": "1408312",
 	"preview": "sharpswords.png",
-	"instructions": "This is an unoficial character sheet for the Sharp Swords & Sinister Spells RPG game by Diogo Nogueira.\n Currently it is only in Portuguese language."
+	"instructions": "This is an unofficial character sheet for the Sharp Swords & Sinister Spells RPG game by Diogo Nogueira."
 }

SharpSwordsAndSinisterSpells/test/test.css

@@ -0,0 +1,189 @@
+/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
+@import url('https://fonts.googleapis.com/css?family=New+Rocker|Rosarivo&display=swap');
+
+.main-container {
+	min-height: 600px;
+  min-width: 800px;
+  max-width: 1000px;
+}
+
+/*----------------- GENERAL CSS ------------------*/
+
+.main-font {
+	font-family: 'New Rocker';
+	font-size: 1em;
+}
+
+.second-font {
+	font-family: 'Rosarivo';
+	font-size: 0.8em;
+}
+
+.flex-row {
+	display: flex;
+	flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.flex-column {
+	display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.nowrap {
+	flex-wrap: nowrap;
+}
+
+.main-container input {
+	margin: 2px;
+}
+
+.main-container input[type=number] {
+  width: 40px;
+}
+
+.main-container fieldset {
+	min-width: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+.main-container textarea {
+  width: 100%;
+  height: 5em;
+  margin: 2px;
+}
+
+.section {
+	margin: 0.7em;
+}
+
+.section-title {
+	margin-bottom: 10px;
+}
+
+.grow {
+	flex-grow: 1;
+}
+
+.center {
+	justify-content: center;
+	align-items: center;
+}
+
+.border {
+	border-width: 1px;
+	border-style: outset;
+	padding: 2px;
+}
+
+.die-select {
+  width: auto;
+  margin: 2px;
+}
+
+.big-margin-bottom {
+  margin-bottom: 20px;
+}
+
+.repeatable-item {
+	margin-bottom: 5px;
+}
+
+/*------------- GRID SECTIONS -------------*/
+
+.header {
+	align-items: center;
+}
+
+.header h1 {
+	margin: 0px;
+}
+
+.sharp-swords {
+	border-width:0px 0px 4px 0px; 
+	border-style:solid;
+}
+
+.and {
+	font-size: 4em;
+}
+
+.sinister-spells {
+	border-width:4px 0px 0px 0px; 
+	border-style:solid;
+}
+
+.char-definitions {
+	justify-content: space-between;
+}
+
+.char-definitions-margin {
+	margin: 4px;
+}
+
+.char-definitions-input {
+	min-width: 15em;
+}
+
+.char-level-row {
+	justify-content: space-evenly;
+	flex-grow: 1;
+}
+
+.middle-section {
+  justify-content: flex-start;
+}
+
+.left-column {
+  justify-content: stretch;
+  width: 20%;
+}
+
+.middle-column {
+	width: 40%;
+}
+
+.right-column {
+	width: 40%;
+}
+
+.main-attributes {
+	display: grid;
+	grid-template-columns: auto auto auto auto;
+	justify-items: flex-start;
+  align-items: center;
+}
+
+.other-attributes {
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+.health-points {
+	align-items: center;
+}
+
+.notes textarea{
+  height: 10em;
+  margin: 0px;
+  width: max-content;
+}
+
+.weapons-damage {
+	width: 5em;
+}
+
+.coins-grid {
+	display: grid;
+	grid-template-columns: auto 2fr;
+	gap: 4px;
+}
+
+.footer {
+	font-style: italic;
+	font-size: 0.7em;
+	justify-content: flex-end;
+}

SharpSwordsAndSinisterSpells/test/test.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  
+  <!--  Meta  -->
+  <meta charset="UTF-8" />
+  <title>My New Pen!</title>
+  
+  <!--  Styles  -->
+  <link rel="stylesheet" href="test.css">
+</head>
+<body>
+  <div class="main-container flex-column border">
+
+    <!-- Header section -->
+    <div class="header flex-row section main-font">
+      <h1 data-i18n="sharp-swords" class="sharp-swords">ESPADAS <br> AFIADAS</h1>
+      <h1 data-i18n="and" class="and">&</h1>
+      <h1 data-i18n="sinister-spells" class="sinister-spells">FEITIÇOS<br> SINISTROS</h1>
+    </div>
+  
+    <!-- Character Definitions -->
+    <div class="char-definitions flex-row border section">
+  
+      <div class="flex-column">
+        <div class="flex-row char-definitions-margin">
+          <span class="char-definitions-margin main-font" data-i18n="char-name">Nome</span>
+          <input class="char-definitions-margin char-definitions-input" name="attr_character_name" type="text"
+            title="{@character_name}" />
+  
+          <span class="char-definitions-margin main-font" data-i18n="char-archetype">Arquétipo</span>
+          <input class="char-definitions-margin char-definitions-input" name="attr_archetype" type="text"
+            title="{@archetype}" />
+        </div>
+  
+        <div class="flex-row char-definitions-margin">
+          <span class="char-definitions-margin main-font" data-i18n="char-calling">Vocação</span>
+          <input class="char-definitions-margin char-definitions-input" name="attr_calling" type="text"
+            title="{@calling}" />
+  
+  
+          <span class="char-definitions-margin main-font" data-i18n="char-complication">Complicação</span>
+          <input class="char-definitions-margin char-definitions-input" name="attr_complication" type="text"
+            title="{@complication}" />
+        </div>
+      </div>
+  
+      <div class="flex-row char-level-row">
+        <div class="flex-column center">
+          <span class="main-font" data-i18n="char-level">Nível</span>
+          <input name="attr_level" type="number" value="1" title="{@level}" />
+        </div>
+        <div class="flex-column center">
+          <span class="main-font" data-i18n="adventures" data-i18n-title="char-adventures-levelup" title="Aventuras para o próximo nível">
+  
+            Aventuras
+          </span>
+          <input name="attr_adventures_to_levelup" type="number" value="2" title="{@adventures_to_levelup}" />
+        </div>
+      </div>
+    </div>
+  
+    <!-- Other Attributes -->
+    <div class="other-attributes flex-row section">
+  
+      <div>
+        <span class="main-font" data-i18n="char-luck-die">Dado de sorte</span>
+        <select class="die-select" name="attr_luckdie" title="{@luckdie}">
+          <option value="d4" selected="selected">d4</option>
+          <option value="d6">d6</option>
+          <option value="d8">d8</option>
+          <option value="d10">d10</option>
+          <option value="d12">d12</option>
+          <option value="d20">d20</option>
+        </select>
+        <button type="roll" name="roll_luck_check" title="{@luck_check}"
+          value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{luckdie_label} }} {{ @{result} = [[@{luckdie}cs>3cf<2]]}}"></button>
+      </div>
+  
+      <div class="flex-row health-points">
+        <div class="char-definitions-margin">
+          <span class="main-font" data-i18n="char-hp">Pontos de Vida</span>
+        </div>
+  
+        <div class="flex-column center">
+          <span data-i18n="maximum" class="second-font">Max</span>
+          <input name="attr_hp" type="number" title="{@hp}" />
+  
+        </div>
+        <div class="flex-column center">
+          <span data-i18n="current-hp" class="second-font">Atuais</span>
+          <input name="attr_current_hp" type="number" title="{@current_hp}" />
+  
+        </div>
+      </div>
+    </div>
+  
+    <div class="middle-section flex-row nowrap">
+      <div class="left-column flex-column">
+        <!-- Character attributes-->
+        <div class="main-attributes section">
+  
+          <span class="main-font" data-i18n="char-physique">Físico</span>
+          <input name="attr_physique" type="number" title="{@physique}" />
+          <input type="checkbox" name="attr_physique_primary" data-i18n-title="primary-checkbox"
+            title="Marque essa caixa se esse for um atirbuto primário." />
+          <button type="roll" name="roll_physique_check" title="{@physique_check}"
+            value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{physique_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
+  
+          <span class="main-font" data-i18n="char-agility">Agilidade</span>
+          <input name="attr_agility" type="number" title="{@agility}" />
+          <input type="checkbox" name="attr_agility_primary" data-i18n-title="primary-checkbox"
+            title="Marque essa caixa se esse for um atirbuto primário." />
+          <button type="roll" name="roll_agility_check" title="{@agility_check}"
+            value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{agility_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
+  
+          <span class="main-font" data-i18n="char-intellect">Intelecto</span>
+          <input name="attr_intellect" type="number" title="{@intellect}" />
+          <input type="checkbox" name="attr_intellect_primary" data-i18n-title="primary-checkbox"
+            title="Marque essa caixa se esse for um atirbuto primário." />
+          <button type="roll" name="roll_intellect_check" title="{@intellect_check}"
+            value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{intellect_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
+  
+          <span class="main-font" data-i18n="char-will">Vontade</span>
+          <input name="attr_will" type="number" title="{@will}" />
+          <input type="checkbox" name="attr_will_primary" data-i18n-title="primary-checkbox"
+            title="Marque essa caixa se esse for um atirbuto primário." />
+          <button type="roll" name="roll_will_check" title="{@will_check}"
+            value="&{template:default} {{name=@{character_name} }} {{ @{check}=@{will_label} }} {{ @{result} = [[ ?{ @{positivenegativedie} | @{normal}, 1d20 | @{positive}, 2d20kl1 | @{negative}, 2d20kh1 } + ?{@{modifier}|0} ]] }}"></button>
+  
+        </div>
+  
+        <!-- Coins -->
+        <div class="coins flex-column border section">
+          <div class="section-title">
+            <span class="main-font" data-i18n="coins">Moedas</span>
+          </div>
+  
+          <div class="coins-grid center">
+            <span class="second-font" data-i18n="copper-coins">mc</span>
+            <input name="attr_copper_coins" type="number" data-i18n-title="copper-coins-title"
+              title="Moedas de Cobre" />
+  
+            <span class="second-font" data-i18n="silver-coins">mp</span>
+            <input name="attr_silver_coins" type="number" data-i18n-title="silver-coins-title"
+              title="Moedas de Prata" />
+  
+            <span class="second-font" data-i18n="gold-coins">mo</span>
+            <input name="attr_gold_coins" type="number" data-i18n-title="gold-coins-title" title="Moedas de Ouro" />
+  
+            <span class="second-font" data-i18n="platin-coins">mpl</span>
+            <input name="attr_platin_coins" type="number" data-i18n-title="platin-coins-title"
+              title="Moedas de Platina" />
+          </div>
+        </div>
+  
+        <!-- Notes -->
+        <div class="notes flex-column section">
+          <div class="section-title flex-row">
+            <span class="main-font" data-i18n="notes">Anotações</span>
+          </div>
+          <div class="flex-row grow">
+            <textarea name="attr_notes" title="{@notes}"></textarea>
+          </div>
+        </div>
+      </div>
+  
+      <div class="middle-column flex-column">
+        <!-- Weapons -->
+        <div class="weapons flex-column border section">
+          <!-- Weapons Header -->
+          <div class="section-title">
+            <span class="main-font" data-i18n="weapons">Armas</span>
+          </div>
+  
+          <fieldset class="repeating_weapons">
+            <div class="flex-row center nowrap repeatable-item">
+              <input name="attr_weapondescription" type="text" class="grow" data-i18n-placeholder="description"
+                placeholder="Descrição" />
+  
+              <input class="weapons-damage" name="attr_weapondamage" type="text" data-i18n-placeholder="damage"
+                placeholder="Dano" />
+              <button type="roll" name="roll_weapondamagecheck" title="{@weapondamagecheck}"
+                value="&{template:default} {{name=@{character_name} }} {{ @{weapon}=@{weapondescription} }} {{ @{damage} = [[@{weapondamage}]]}}"></button>
+            </div>
+          </fieldset>
+  
+        </div>
+  
+        <!-- Special Habilities -->
+        <div class="habilities flex-column border section">
+          <div class="section-title">
+            <span class="main-font" data-i18n="special-habilities">Habilidades Especiais</span>
+          </div>
+          <fieldset class="repeating_specialhabilities">
+            <div class="flex-row repeatable-item">
+              <input name="attr_habilityname" type="text" data-i18n-placeholder="name" placeholder="Nome" />
+              <textarea name="attr_habilitydescription" data-i18n-placeholder="description"
+                placeholder="Descrição"></textarea>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+  
+      <div class="right-column flex-column">
+        <!-- Equipment -->
+        <div class="equipment flex-column border section">
+          <!-- Equipment Header -->
+          <div class="section-title">
+            <span class="main-font" data-i18n="equipments">Equipamentos</span>
+          </div>
+  
+          <fieldset class="repeating_equipment">
+            <div class="flex-row center nowrap repeatable-item">
+              <input name="attr_equipmentdescription" type="text" class="grow" data-i18n-placeholder="description"
+                placeholder="Descrição" />
+  
+              <select class="die-select" name="attr_equipmentusagedie" data-i18n-title="usage-die" title="Dado de uso">
+                <option value="none" selected="selected">-</option>
+                <option value="d4">d4</option>
+                <option value="d6">d6</option>
+                <option value="d8">d8</option>
+                <option value="d10">d10</option>
+                <option value="d12">d12</option>
+                <option value="d20">d20</option>
+              </select>
+              <button type="roll" name="roll_usage_check" title="{@usage_check}"
+                value="&{template:default} {{name=@{character_name} }} {{ @{item} = @{equipmentdescription} }} {{ @{check}=@{usage_die} }} {{ @{result} = [[@{equipmentusagedie}cs>3cf<2]]}}"></button>
+            </div>
+          </fieldset>
+        </div>
+  
+        <!-- Spells -->
+        <div class="spells flex-column border section">
+          <div class="section-title flex-row">
+            <span class="main-font" data-i18n="spells">Magias</span>
+          </div>
+  
+          <fieldset class="repeating_spells">
+            <div class="flex-row repeatable-item">
+              <input name="attr_spellname" type="text" data-i18n-placeholder="name" placeholder="Nome" />
+              <textarea name="attr_spelldescription" data-i18n-placeholder="description"
+                placeholder="Descrição"></textarea>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+  
+    </div>
+  
+    <div class="footer flex-row second-font">
+      <span>“Sharp Swords & Sinister Spells” Copyright ©2016 Diogo Nogueira.</span>
+    </div>
+  </div>
+  <!-- end of sheet -->
+  
+  <!-- Strings translations for Roll Queries-->
+  <div style="display: none;">
+    <span data-i18n="positive-negative-die">Possui dado positivo ou negativo?</span>
+    <span data-i18n="normal">Normal</span>
+    <span data-i18n="positive">Positivo</span>
+    <span data-i18n="negative">Negativo</span>
+    <span data-i18n="modifier">Modificador</span>
+    <span data-i18n="result">Resultado</span>
+    <span data-i18n="check">Teste</span>
+    <span data-i18n="weapon">Arma</span>
+    <span data-i18n="item">Item</span>
+  </div>
+  
+  <!--Sheet Workers -->
+  <script type="text/worker">
+  
+    /*config Roll Queries translations */
+    on("sheet:opened", function(eventInfo){
+        
+        setAttrs({
+            positivenegativedie: getTranslationByKey("positive-negative-die"),
+            normal: getTranslationByKey("normal"),
+            positive: getTranslationByKey("positive"),
+            negative: getTranslationByKey("negative"),
+            modifier: getTranslationByKey("modifier"),
+            result: getTranslationByKey("result"),
+            check: getTranslationByKey("check"),
+            usage_die: getTranslationByKey("usage-die"),
+            luckdie_label: getTranslationByKey("char-luck-die"),
+            physique_label: getTranslationByKey("char-physique"),
+            agility_label: getTranslationByKey("char-agility"),
+            intellect_label: getTranslationByKey("char-intellect"),
+            will_label: getTranslationByKey("char-will"),
+            weapon: getTranslationByKey("weapon"),
+            item: getTranslationByKey("item"),
+            damage: getTranslationByKey("damage")
+  
+        });     
+        
+    });
+    
+  </script>
+</body>
+</html>

SharpSwordsAndSinisterSpells/translation.json

@@ -1,7 +1,7 @@
 {
-    "sharp-swords": "ESPADAS AFIADAS",
+    "sharp-swords": "ESPADAS<br> AFIADAS",
     "and": "&", 
-    "sinister-spells": "FEITIÇOS SINISTROS",
+    "sinister-spells": "FEITIÇOS<br> SINISTROS",
     "char-name": "Nome",
     "char-archetype": "Arquétipo",
     "char-calling": "Vocação",
@@ -22,7 +22,7 @@
     "special-hability": "Habilidade Especial",
     "spells": "Magias",
     "spell": "Magia",
-    "equipment": "Equipamentos",
+    "equipments": "Equipamentos",
     "usage-die": "Dado de uso",
     "coins": "Moedas",
     "copper-coins": "mc",
@@ -43,5 +43,8 @@
     "negative":"Negativo",
     "modifier":"Modificador",
     "result":"Resultado",
-    "check":"Teste"
+    "check":"Teste",
+    "name": "Nome",
+    "weapon": "Arma",
+    "item": "Item"
 }