From ff96231297da136b75fcee3d47248f5cf8a5f912 Mon Sep 17 00:00:00 2001
From: Stexinator <hurricane90@gmx.de>
Date: Sun, 5 Feb 2023 14:56:11 +0100
Subject: [PATCH] [SalvageUnion] update sheet for alpha core book

---
 SalvageUnion/SalvageUnion.css  |  76 +++++-
 SalvageUnion/SalvageUnion.html | 420 ++++++++++++++++++++++++---------
 2 files changed, 382 insertions(+), 114 deletions(-)

diff --git a/SalvageUnion/SalvageUnion.css b/SalvageUnion/SalvageUnion.css
index 88e96ab345..c1bf8b2098 100644
--- a/SalvageUnion/SalvageUnion.css
+++ b/SalvageUnion/SalvageUnion.css
@@ -1,7 +1,13 @@
 
 .wrapper {
 	background-color: antiquewhite;
-	padding: 10px;
+	padding: 20px;
+}
+
+summary{
+    display:list-item;
+    list-style-position: outside;
+    margin-left: 10px;
 }
 
 /*Configure the tab buttons*/
@@ -11,7 +17,10 @@
 }
 
 .pilot,
-.mech {
+.mech,
+.crawler,
+.settings
+ {
     display: none;
     margin-top: 5px;
 }
@@ -22,21 +31,47 @@
 
 /* show the selected tab */
 .tabstoggle[value="pilot"] ~ div.pilot,
-.tabstoggle[value="mech"] ~ div.mech {
+.tabstoggle[value="mech"] ~ div.mech,
+.tabstoggle[value="crawler"] ~ div.crawler,
+.tabstoggle[value="settings"] ~ div.settings
+ {
     display: block;
 }
 
-.twocolumns {
-    display: flex;
-    margin-top: 5px;
+.show-pilot:not(:checked) ~ button.pilot-button {
+    display:none;
+}
+.show-pilot:checked ~ button.pilot-button {
 }
 
-.valuecolumn {
-    display: inline-grid;
+.show-mech:not(:checked) ~ button.mech-button {
+    display:none;
+}
+.show-mech:checked ~ button.mech-button {
+}
+
+.show-crawler:not(:checked) ~ button.crawler-button {
+    display:none;
+}
+.show-crawler:checked ~ button.crawler-button {
+}
+
+
+/**
+    sheet content
+**/
+
+.twocolumns {
+    max-width: 45%;
+    min-width: 35%;
+}
+
+.descValuePair {
+    display: flex;
 }
 
 .textarea {
-    max-height: 50px;
+    padding: 5px;
 }
 
 .weapon {
@@ -51,13 +86,36 @@ h3 {
     margin-top: 2%;
 }
 
+.inventory {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
 
+.equipment {
+    display: inline-flex;
+    width: 100%;
+}
+
+.equipment > label,
+.equipment > summary > input[type="text"]
+ {
+    width: 22%;
+}
 
 .ui-dialog .charsheet input {
     height: 24px;
 }
 
 
+/* Setting sections */
+
+label.settings-checkbox {
+    width: fit-content;
+    cursor: pointer;
+}
+
+
 
 
 .sheet-rolltemplate-roll table,
diff --git a/SalvageUnion/SalvageUnion.html b/SalvageUnion/SalvageUnion.html
index 2e60f22d81..7309b4d9d2 100644
--- a/SalvageUnion/SalvageUnion.html
+++ b/SalvageUnion/SalvageUnion.html
@@ -1,50 +1,72 @@
 <div class="wrapper">
-    <input type="hidden" class="tabstoggle" name="attr_sheetTab" value="pilot"/>
+    <input type="hidden" class="tabstoggle" name="attr_sheetTab" value="settings"/>
     <div>
-        <button type="action" name="act_pilot" class="tabs">Pilot</button>
-        <button type="action" name="act_mech" class="tabs">Mech</button>
+        <input class="show-pilot" name="attr_isPilot" type="checkbox" checked hidden/>
+        <button type="action" name="act_pilot" class="tabs pilot-button">Pilot</button>
+
+        <input class="show-mech" name="attr_isMech" type="checkbox" hidden/>
+        <button type="action" name="act_mech" class="tabs mech-button">Mech</button>
+
+        <input class="show-crawler" name="attr_isCrawler" type="checkbox" hidden/>
+        <button type="action" name="act_crawler" class="tabs crawler-button">Union Crawler</button>
+
+        <button type="action" name="act_settings" class="tabs">Settings</button>
     </div>
 
     <div class="pilot">
-        <h2>Pilot <button type="roll" value="&{template:roll}{{name=@{character_name}}}{{roll=[[1d20]]}}"></button></h2>
-        <div style="display: flex;">
+        <h2>Pilot
+            <button type="roll" value="&{template:roll}{{name=@{character_name}}}{{roll=[[1d20]]}}"></button>
+        </h2>
+        <div style="display:flex">
             <div class="twocolumns">
-                <div class="labels">
-                    <label>Callsign</label>
-                    <label>Background </label>
-                    <label>Ideal </label>
-                    <label>Flaw </label>
-                    <label>Keepsake </label>
-                    <label>Motto </label>
+                <div class="descValuePair">
+                    <label for="name">Callsign</label>
+                    <input id="name" type="text" name="attr_character_name">
                 </div>
-                <div class="valuecolumn">
-                    <input type="text" name="attr_character_name">
-                    <input type="text" name="attr_background">
-                    <input type="text" name="attr_ideal">
-                    <input type="text" name="attr_flaw">
-                    <input type="text" name="attr_keepsake">
-                    <input type="text" name="attr_motto">
+                <div class="descValuePair">
+
+                    <label for="class">Class</label>
+                    <input id="class" type="text" name="attr_character_class">
                 </div>
+                <details>
+                    <summary>
+                            <span class="descValuePair">
+                                <label>Background</label>
+                                <input type="text" name="attr_background">
+                            </span>
+                    </summary>
+                    <textarea name="attr_backgroundDetails"></textarea>
+                </details>
+                <details>
+                    <summary>
+                            <span class="descValuePair">
+                                <label>Keepsake </label>
+                                <input type="text" name="attr_keepsake">
+                            </span>
+                    </summary>
+                    <textarea name="attr_keepsakeDetails"></textarea>
+                </details>
+                <details>
+                    <summary>
+                            <span class="descValuePair">
+                                <label>Motto </label>
+                                <input type="text" name="attr_motto">
+                            </span>
+                    </summary>
+                    <textarea name="attr_mottoDetails"></textarea>
+                </details>
             </div>
 
-            <div class="marginleft">
-                <h3>Stats</h3>
-                <div class="twocolumns">
-                    <div class="labels">
-                        <label>Health</label>
-                        <label>Ability Pts </label>
-                        <label>Stress </label>
-                    </div>
-                    <div class="valuecolumn">
-                        <input type="number" min="0" max="10" name="attr_health" value="10">
-                        <input type="number" min="0" max="5" name="attr_abilitypts" value="5">
-                        <input type="number" min="0" max="10" name="attr_stress" value="0">
-                    </div>
-                    <div>
-                        <label> of 10</label>
-                        <label> of 5</label>
-                        <label> of 10 </label>
-                    </div>
+            <div class="marginleft twocolumns">
+                <div class="descValuePair">
+                    <label for="health">Health</label>
+                    <input id="health" type="number" min="0" max="10" name="attr_health" value="10">
+                    <label> of 10</label>
+                </div>
+                <div class="descValuePair">
+                    <label for="abilityPts">Ability Pts </label>
+                    <input id="abilityPts" type="number" min="0" max="5" name="attr_abilitypts" value="5">
+                    <label> of 5</label>
                 </div>
             </div>
         </div>
@@ -57,74 +79,247 @@
         </div>
         <div>
             <fieldset class="repeating_weapons">
-                <div class="weapon">
-                    <input type="text" name="attr_weaponname" title="Name of the Weapon">
-                    <input type="text" name="attr_range" title="Range">
-                    <input type="text" name="attr_damage" title="Damage">
-                    <button type="roll" title="Fire the Weapon" value="&{template:weapon}{{callsign=@{character_name}}}{{range=@{range}}}{{weapon_name=@{weaponname}}}{{roll=[[1d20]]}}{{damage=@{damage}}}">
-                    </button>
-                </div>
+                <details>
+                    <summary>
+                        <input type="text" name="attr_weaponname" title="Name of the Weapon">
+                        <input type="text" name="attr_range" title="Range">
+                        <input type="text" name="attr_damage" title="Damage">
+                        <button type="roll" title="Fire the Weapon" value="&{template:weapon}{{callsign=@{character_name}}}{{range=@{range}}}{{weapon_name=@{weaponname}}}{{roll=[[1d20]]}}{{damage=@{damage}}}">
+                        </button>
+                    </summary>
+                    <textarea name="attr_weaponDetails"></textarea>
+                </details>
             </fieldset>
         </div>
 
         <h3>Inventory</h3>
-        <div>
-            <input type="text" name="attr_itemname1">
-            <input type="text" name="attr_itemname2">
-            <input type="text" name="attr_itemname3">
-            <input type="text" name="attr_itemname4">
-            <input type="text" name="attr_itemname5">
-            <input type="text" name="attr_itemname6">
+        <div class="inventory">
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname1">
+                </summary>
+                <textarea name="attr_itemDetails1"></textarea>
+            </details>
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname2">
+                </summary>
+                <textarea name="attr_itemDetails2"></textarea>
+            </details>
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname3">
+                </summary>
+                <textarea name="attr_itemDetails3"></textarea>
+            </details>
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname4">
+                </summary>
+                <textarea name="attr_itemDetails4"></textarea>
+            </details>
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname5">
+                </summary>
+                <textarea name="attr_itemDetails5"></textarea>
+            </details>
+            <details>
+                <summary>
+                    <input type="text" name="attr_itemname6">
+                </summary>
+                <textarea name="attr_itemDetails6"></textarea>
+            </details>
         </div>
 
         <h3>Equipment</h3>
+        <div class="equipment">
+            <label>Name</label>
+            <label>AP/Uses</label>
+            <label>Range</label>
+            <label>Action</label>
+        </div>
         <fieldset class="repeating_equipment">
-            <textarea name="attr_equipment" class="textarea"></textarea>
+            <details class="equipment">
+                <summary>
+                    <input type="text" name="attr_name" title="Name of the Equipment">
+                    <input type="text" name="attr_cost" title="AP/Uses">
+                    <input type="text" name="attr_range" title="Range">
+                    <input type="text" name="attr_action" title="Action">
+                </summary>
+                <textarea name="attr_equipment" class="textarea"></textarea>
+            </details>
         </fieldset>
 
         <h3>Abilities</h3>
+        <div class="equipment">
+            <label>Name</label>
+            <label>AP</label>
+            <label>Range</label>
+            <label>Action</label>
+        </div>
         <fieldset class="repeating_abilities">
-            <textarea name="attr_ability" class="textarea"></textarea>
+            <details class="equipment">
+                <summary>
+                    <input type="text" name="attr_name" title="Name of the Ability">
+                    <input type="text" name="attr_cost" title="AP">
+                    <input type="text" name="attr_range" title="Range">
+                    <input type="text" name="attr_action" title="Action">
+                </summary>
+                <textarea name="attr_ability" class="textarea"></textarea>
+            </details>
         </fieldset>
-
     </div>
 
     <div class="mech">
-        <h2>Mech <button type="roll" value="&{template:roll}{{name=@{mechname}}}{{roll=[[1d20]]}}"></button></h2>
-        <div style="display: flex;">
+        <h2>Mech
+            <button type="roll" value="&{template:roll}{{name=@{character_name}}}{{roll=[[1d20]]}}"></button>
+        </h2>
+        <div style="display:flex">
             <div class="twocolumns">
-                <div class="labels">
-                    <label>Name</label>
-                    <label>System Slots </label>
-                    <label>Module Slots </label>
-                    <label>Chassis Type </label>
+                <div class="descValuePair">
+                    <label for="mechname">Name</label>
+                    <input id="mechname" type="text" name="attr_character_name">
                 </div>
-                <div class="valuecolumn">
-                    <input type="text" name="attr_mechname">
-                    <input type="text" name="attr_system">
-                    <input type="text" name="attr_module">
-                    <input type="text" name="attr_chassis">
+                <div class="descValuePair">
+                    <label for="system">System Slots</label>
+                    <input id="system" type="text" name="attr_system">
+                </div>
+                <div class="descValuePair">
+                    <label for="module">Module Slots </label>
+                    <input id="module" type="text" name="attr_module">
+                </div>
+                <details>
+                    <summary>
+                            <span class="descValuePair">
+                                <label for="chassis">Chassis Type </label>
+                                <input id="chassis" type="text" name="attr_chassis">
+                            </span>
+                    </summary>
+                    <textarea name="attr_chassisDetails"></textarea>
+                </details>
+            </div>
+
+            <div class="marginleft twocolumns">
+                <div class="descValuePair">
+                    <label for="structure">Structure</label>
+                    <input type="number" id="structure" min="0" name="attr_structure" value="10">
+                    <label> of <input type="number" min="0" name="attr_structure_max" value="10"></label>
+                </div>
+                <div class="descValuePair">
+                    <label for="energyPts">Energy Pts </label>
+                    <input type="number" id="energyPts" min="0" name="attr_energy" value="10">
+                    <label> of <input type="number" min="0" name="attr_energy_max" value="10"></label>
+                </div>
+                <div class="descValuePair">
+                    <label for="heat">Heat</label>
+                    <input type="number" id="heat" min="0" max="10" name="attr_heat" value="0">
+                    <label> of <input type="number" min="0" name="attr_heat_max" value="10"> </label>
+                </div>
+            </div>
+        </div>
+
+        <h3>Weapons</h3>
+        <div class="weapon">
+            <label>Name</label>
+            <label>Range</label>
+            <label>Damage</label>
+        </div>
+        <div>
+            <fieldset class="repeating_mechweapons">
+                <details>
+                    <summary>
+                        <input type="text" name="attr_weaponname" title="Name of the Weapon">
+                        <input type="text" name="attr_range" title="Range">
+                        <input type="text" name="attr_damage" title="Damage">
+                        <button type="roll" title="Fire the Weapon" value="&{template:weapon}{{callsign=@{character_name}}}{{range=@{range}}}{{weapon_name=@{weaponname}}}{{roll=[[1d20]]}}{{damage=@{damage}}}">
+                        </button>
+                    </summary>
+                    <textarea name="attr_weaponDetails"></textarea>
+                </details>
+            </fieldset>
+        </div>
+
+        <h3>Cargo</h3>
+        <fieldset class="repeating_cargo">
+            <details>
+                <summary>
+                    <input type="text" name="attr_cargoname">
+                </summary>
+                <textarea class="textarea" name="attr_cargo"></textarea>
+            </details>
+
+        </fieldset>
+
+        <h3>Modules</h3>
+        <div class="equipment">
+            <label>Name</label>
+            <label>AP/Uses</label>
+            <label>Range</label>
+            <label>Action</label>
+        </div>
+        <fieldset class="repeating_modules">
+            <details class="equipment">
+                <summary>
+                    <input type="text" name="attr_name" title="Name of the Equipment">
+                    <input type="text" name="attr_cost" title="AP/Uses">
+                    <input type="text" name="attr_range" title="Range">
+                    <input type="text" name="attr_action" title="Action">
+                </summary>
+                <textarea name="attr_details" class="textarea"></textarea>
+            </details>
+        </fieldset>
+
+        <h3>Systems</h3>
+        <div class="equipment">
+            <label>Name</label>
+            <label>AP/Uses</label>
+            <label>Range</label>
+            <label>Action</label>
+        </div>
+        <fieldset class="repeating_systems">
+            <details class="equipment">
+                <summary>
+                    <input type="text" name="attr_name" title="Name of the Equipment">
+                    <input type="text" name="attr_cost" title="AP/Uses">
+                    <input type="text" name="attr_range" title="Range">
+                    <input type="text" name="attr_action" title="Action">
+                </summary>
+                <textarea name="attr_details" class="textarea"></textarea>
+            </details>
+        </fieldset>
+    </div>
+
+    <div class="crawler">
+        <h2>Crawler
+            <button type="roll" value="&{template:roll}{{name=@{character_name}}}{{roll=[[1d20]]}}"></button>
+        </h2>
+        <div style="display:flex">
+            <div class="twocolumns">
+                <div class="descValuePair">
+                    <label for="crawlername">Name</label>
+                    <input id="crawlername" type="text" name="attr_character_name">
+                </div>
+                <details>
+                    <summary>
+                            <span class="descValuePair">
+                                <label for="type">Crawler Type</label>
+                                <input id="type" type="text" name="attr_crawlertype">
+                            </span>
+                    </summary>
+                    <textarea name="attr_typeDetails"></textarea>
+                </details>
+                <div class="descValuePair">
+                    <label for="techlevel">Tech Level</label>
+                    <input id="techlevel" type="text" name="attr_techlevel">
                 </div>
             </div>
 
-            <div class="marginleft">
-                <h3>Stats</h3>
-                <div class="twocolumns">
-                    <div class="labels">
-                        <label>Structure</label>
-                        <label>Energy Pts </label>
-                        <label>Heat </label>
-                    </div>
-                    <div class="valuecolumn">
-                        <input type="number" min="0" name="attr_structure" value="10">
-                        <input type="number" min="0" name="attr_energy" value="10">
-                        <input type="number" min="0" max="10" name="attr_heat" value="0">
-                    </div>
-                    <div>
-                        <label> of  <input type="number" min="0" name="attr_structure_max" value="10"></label>
-                        <label> of  <input type="number" min="0" name="attr_energy_max" value="10"></label>
-                        <label> of  <input type="number" min="0" name="attr_heat_max" value="10"> </label>
-                    </div>
+            <div class="marginleft twocolumns">
+                <div class="descValuePair">
+                    <label for="crawlerstructure">Structure</label>
+                    <input type="number" id="crawlerstructure" min="0" name="attr_structure" value="20">
+                    <label> of <input type="number" min="0" name="attr_structure_max" value="20"></label>
                 </div>
             </div>
         </div>
@@ -141,7 +336,7 @@
                     <input type="text" name="attr_weaponname" title="Name of the Weapon">
                     <input type="text" name="attr_range" title="Range">
                     <input type="text" name="attr_damage" title="Damage">
-                    <button type="roll" title="Fire the Weapon" value="&{template:weapon}{{callsign=@{mechname}}}{{range=@{range}}}{{weapon_name=@{weaponname}}}{{roll=[[1d20]]}}{{damage=@{damage}}}">
+                    <button type="roll" title="Fire the Weapon" value="&{template:weapon}{{callsign=@{character_name}}}{{range=@{range}}}{{weapon_name=@{weaponname}}}{{roll=[[1d20]]}}{{damage=@{damage}}}">
                     </button>
                 </div>
             </fieldset>
@@ -152,21 +347,39 @@
             <textarea name="attr_cargo" class="textarea"></textarea>
         </fieldset>
 
-        <h3>Modules</h3>
-        <fieldset class="repeating_modules">
-            <textarea name="attr_module" class="textarea"></textarea>
+        <h3>Bays</h3>
+        <fieldset class="repeating_bays">
+            <details class="equipment">
+                <summary>
+                    <input type="text" name="attr_name" title="Name of the Bay">
+                </summary>
+                <textarea name="attr_details" class="textarea"></textarea>
+            </details>
         </fieldset>
+    </div>
 
-        <h3>Systems</h3>
-        <fieldset class="repeating_systems">
-            <textarea name="attr_system" class="textarea"></textarea>
-        </fieldset>
+    <div class="settings">
+        <br>
+        <label for="isPilot" class="settings-checkbox">
+            <span>Is Pilot</span>
+            <input id="isPilot" name="attr_isPilot" type="checkbox" checked/>
+        </label>
+        <br>
+        <label for="isMech" class="settings-checkbox">
+            <span>Is Mech</span>
+            <input id="isMech" name="attr_isMech" type="checkbox"/>
+        </label>
+        <br>
+        <label for="isCrawler" class="settings-checkbox">
+            <span>Is Crawler</span>
+            <input id="isCrawler" name="attr_isCrawler" type="checkbox"/>
+        </label>
     </div>
 </div>
 
 
 <script type="text/worker">
-    const buttonlist = ["pilot","mech"];
+    const buttonlist = ["pilot","mech","crawler","settings"];
     buttonlist.forEach(button => {
         on(`clicked:${button}`, function() {
             setAttrs({
@@ -192,25 +405,24 @@
             <td>
                 {{#rollBetween() roll 20 20}}
                 <strong>Nailed it</strong> ({{roll}}) <br>
-                You have overcome the odds and managed an outstanding success. You may achieve an additional bonus of your choice to the action. When dealing damage you double it.
+                You have overcome the odds and managed an outstanding success. You may achieve an additional bonus of your choice to the action e.g. double the damage.
                 {{/rollBetween() roll 20 20}}
 
                 {{#rollBetween() roll 11 19}}
-                Success ({{roll}}) - You’ve achieved your goal without any compromises. When attacking you hit the target and deal standard damage
+                Success ({{roll}}) - You hit the target and deal standard damage
                 {{/rollBetween() roll 11 19}}
 
                 {{#rollBetween() roll 6 10}}
-                Tough Choice ({{roll}}) - You succeed in your action but at a cost. The Mediator will give you a tough choice with some kind of consequence. When attacking you hit but something has
+                Tough Choice ({{roll}}) - You succeed in your action but at a cost. The Mediator will give you a tough choice with some kind of consequence. You hit but something has
                 gone wrong.
                 {{/rollBetween() roll 6 10}}
 
                 {{#rollBetween() roll 2 5}}
-                Failure ({{roll}}) - You’ve failed at what you were attempting, and you’ll face a consequence of The Mediator’s choice. When attacking you miss the target.
+                Failure ({{roll}}) - You miss the target.
                 {{/rollBetween() roll 2 5}}
 
                 {{#rollBetween() roll 1 1}}
-                Cascade Failure ({{roll}}) - You have not only failed, but something has gone terribly wrong. You will suffer a severe consequence of The Mediator’s choice. When attacking you miss the
-                target and something has gone wrong.
+                Cascade Failure ({{roll}}) - You miss the target and something has gone wrong.
                 {{/rollBetween() roll 1 1}}
             </td>
         </tr>
@@ -247,21 +459,19 @@
                 {{/rollBetween() roll 20 20}}
 
                 {{#rollBetween() roll 11 19}}
-                Success ({{roll}}) - You’ve achieved your goal without any compromises. When attacking you hit the target and deal standard damage
+                Success ({{roll}}) - You’ve achieved your goal without any compromises.
                 {{/rollBetween() roll 11 19}}
 
                 {{#rollBetween() roll 6 10}}
-                Tough Choice ({{roll}}) - You succeed in your action but at a cost. The Mediator will give you a tough choice with some kind of consequence. When attacking you hit but something has
-                gone wrong.
+                Tough Choice ({{roll}}) - You succeed in your action but at a cost. The Mediator will give you a tough choice with some kind of consequence.
                 {{/rollBetween() roll 6 10}}
 
                 {{#rollBetween() roll 2 5}}
-                Failure ({{roll}}) - You’ve failed at what you were attempting, and you’ll face a consequence of The Mediator’s choice. When attacking you miss the target.
+                Failure ({{roll}}) - You’ve failed at what you were attempting, and you’ll face a consequence of The Mediator’s choice.
                 {{/rollBetween() roll 2 5}}
 
                 {{#rollBetween() roll 1 1}}
-                Cascade Failure ({{roll}}) - You have not only failed, but something has gone terribly wrong. You will suffer a severe consequence of The Mediator’s choice. When attacking you miss the
-                target and something has gone wrong.
+                Cascade Failure ({{roll}}) - You have not only failed, but something has gone terribly wrong. You will suffer a severe consequence of The Mediator’s choice.
                 {{/rollBetween() roll 1 1}}
             </td>
         </tr>