From ddf83c29fb4dd4bc00bce4d4c5543d5fc6ab7274 Mon Sep 17 00:00:00 2001
From: Adam Talbot <thisisadamtalbot@gmail.com>
Date: Sat, 18 Feb 2023 16:13:35 -0500
Subject: [PATCH] Display type on main page

---
 PokemonTabletopAdventures_v3/PTA3.css  |  18 ++++
 PokemonTabletopAdventures_v3/PTA3.html | 122 +++++++++++++++----------
 2 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/PokemonTabletopAdventures_v3/PTA3.css b/PokemonTabletopAdventures_v3/PTA3.css
index 8f377fe7df..6b0db10755 100644
--- a/PokemonTabletopAdventures_v3/PTA3.css
+++ b/PokemonTabletopAdventures_v3/PTA3.css
@@ -1844,6 +1844,24 @@ button[type="roll"].sheet-inline-roller {
   display: inline-block;
 }
 
+
+.sheet-active_type-transformation:not(:checked) ~ div.sheet-display-when-type-transformed {
+  display: none;
+}
+.sheet-active_type-transformation:checked ~ div.sheet-display-when-type-transformed {
+  display: inline-block;
+}
+.sheet-active_type-transformation:not(:checked) ~ div.sheet-display-when-type-not-transformed {
+  display: inline-block;
+}
+.sheet-active_type-transformation:checked ~ div.sheet-display-when-type-not-transformed {
+  display: none;
+}
+
+input.sheet-capitalize {
+  text-transform: capitalize;
+}
+
 /* For your PokeGear and other mobile devices */
 @media only screen and (max-width: 480px) {
   .sheet-wrapper {
diff --git a/PokemonTabletopAdventures_v3/PTA3.html b/PokemonTabletopAdventures_v3/PTA3.html
index 3f20ccfd05..5fc0bc646b 100644
--- a/PokemonTabletopAdventures_v3/PTA3.html
+++ b/PokemonTabletopAdventures_v3/PTA3.html
@@ -102,52 +102,68 @@
           <input class="sheet-top-information" name="attr_character_name" spellcheck="false" title="Attribute: character_name" type="text" />
           <b>Species</b>
           <input class="sheet-top-information" name="attr_species" spellcheck="false" title="Attribute: species" type="text" />
-          <b>Type</b>
-          <span>
-            <select class="sheet-half-text sheet-no-dropdown" name="attr_type1" title="Attribute: type1">
-              <option value="bug">Bug</option>
-              <option value="dark">Dark</option>
-              <option value="dragon">Dragon</option>
-              <option value="electric">Electric</option>
-              <option value="fairy">Fairy</option>
-              <option value="fighting">Fighting</option>
-              <option value="fire">Fire</option>
-              <option value="flying">Flying</option>
-              <option value="ghost">Ghost</option>
-              <option value="grass">Grass</option>
-              <option value="ground">Ground</option>
-              <option value="ice">Ice</option>
-              <option value="normal">Normal</option>
-              <option value="poison">Poison</option>
-              <option value="psychic">Psychic</option>
-              <option value="rock">Rock</option>
-              <option value="steel">Steel</option>
-              <option value="typeless" selected>Typeless</option>
-              <option value="water">Water</option>
-            </select>
-            <select class="sheet-half-text sheet-no-dropdown" name="attr_type2" title="Attribute: type2">
-              <option value=""></option>
-              <option value="bug">Bug</option>
-              <option value="dark">Dark</option>
-              <option value="dragon">Dragon</option>
-              <option value="electric">Electric</option>
-              <option value="fairy">Fairy</option>
-              <option value="fighting">Fighting</option>
-              <option value="fire">Fire</option>
-              <option value="flying">Flying</option>
-              <option value="ghost">Ghost</option>
-              <option value="grass">Grass</option>
-              <option value="ground">Ground</option>
-              <option value="ice">Ice</option>
-              <option value="normal">Normal</option>
-              <option value="poison">Poison</option>
-              <option value="psychic">Psychic</option>
-              <option value="rock">Rock</option>
-              <option value="steel">Steel</option>
-              <option value="typeless">Typeless</option>
-              <option value="water">Water</option>
-            </select>
-          </span>
+          <input class="sheet-active_type-transformation" name="attr_active_type-transformation" readonly hidden type="checkbox" />
+          <div class="sheet-display-when-type-not-transformed">
+            <b>Type</b>
+          </div>
+          <div class="sheet-display-when-type-transformed">
+            <b>Type Shift</b>
+          </div>
+          <div class="sheet-display-when-type-not-transformed">
+            <span>
+              <select class="sheet-half-text sheet-no-dropdown" name="attr_type1" title="Attribute: type1">
+                <option value="bug">Bug</option>
+                <option value="dark">Dark</option>
+                <option value="dragon">Dragon</option>
+                <option value="electric">Electric</option>
+                <option value="fairy">Fairy</option>
+                <option value="fighting">Fighting</option>
+                <option value="fire">Fire</option>
+                <option value="flying">Flying</option>
+                <option value="ghost">Ghost</option>
+                <option value="grass">Grass</option>
+                <option value="ground">Ground</option>
+                <option value="ice">Ice</option>
+                <option value="normal">Normal</option>
+                <option value="poison">Poison</option>
+                <option value="psychic">Psychic</option>
+                <option value="rock">Rock</option>
+                <option value="steel">Steel</option>
+                <option value="typeless" selected>Typeless</option>
+                <option value="water">Water</option>
+              </select>
+              <select class="sheet-half-text sheet-no-dropdown" name="attr_type2" title="Attribute: type2">
+                <option value=""></option>
+                <option value="bug">Bug</option>
+                <option value="dark">Dark</option>
+                <option value="dragon">Dragon</option>
+                <option value="electric">Electric</option>
+                <option value="fairy">Fairy</option>
+                <option value="fighting">Fighting</option>
+                <option value="fire">Fire</option>
+                <option value="flying">Flying</option>
+                <option value="ghost">Ghost</option>
+                <option value="grass">Grass</option>
+                <option value="ground">Ground</option>
+                <option value="ice">Ice</option>
+                <option value="normal">Normal</option>
+                <option value="poison">Poison</option>
+                <option value="psychic">Psychic</option>
+                <option value="rock">Rock</option>
+                <option value="steel">Steel</option>
+                <option value="typeless">Typeless</option>
+                <option value="water">Water</option>
+              </select>
+            </span>
+          </div>
+          <div class="sheet-display-when-type-transformed">
+            <span>
+              <input class="sheet-top-information sheet-half-text sheet-capitalize" name="attr_active_type1" readonly spellcheck="false" title="Attribute: active_type1" type="text" />
+              </select>
+              <input class="sheet-top-information sheet-half-text sheet-capitalize" name="attr_active_type2" readonly spellcheck="false" title="Attribute: active_type2" type="text" />
+              </select>
+            </span>
+          </div>
           <b>Nature</b>
           <select class="sheet-no-dropdown sheet-top-select" name="attr_nature-type" title="Attribute: nature-type">
             <option value=""></option>
@@ -3266,27 +3282,33 @@
   function getActiveTypeAsAttrs(values){
     const attrs = {
       active_type1: values["type1"],
-      active_type2: values["type2"]
+      active_type2: values["type2"],
+      "active_type-transformation": "off",
     };
     if(values["mega_active"]){
       attrs["active_type1"] = values["mega-type1"] || "";
       attrs["active_type2"] = values["mega-type2"] || "";
+      attrs["active_type-transformation"] = "on";
     }
     if(values["custom3_active"]){
       attrs["active_type1"] = values["custom3-type1"] || "";
       attrs["active_type2"] = values["custom3-type2"] || "";
+      attrs["active_type-transformation"] = "on";
     }
     if(values["custom2_active"]){
       attrs["active_type1"] = values["custom2-type1"] || "";
       attrs["active_type2"] = values["custom2-type2"] || "";
+      attrs["active_type-transformation"] = "on";
     }
     if(values["custom1_active"]){
       attrs["active_type1"] = values["custom1-type1"] || "";
       attrs["active_type2"] = values["custom1-type2"] || "";
+      attrs["active_type-transformation"] = "on";
     }
     if(values["tera_active"]){
       attrs["active_type1"] = values["tera-type1"] || "";
       attrs["active_type2"] = values["tera-type2"] || ""; //Should always be undefined
+      attrs["active_type-transformation"] = "on";
     }
     return attrs;
   }
@@ -3990,7 +4012,7 @@
   //Abstracting type1 and type2
   on("change:type1 change:type2 sheet:opened", function (eventInfo) {
     getAttrs(["type1", "type2", ...formActiveAttrs], function (values) {
-      if(!(values["tera_active"] || values["mega_active"] || values["custom1_active"] || values["custom2_active"] || values["custom3_active"])){
+      if(!isTypeTransformationActive(values)){
         setAttrs({
           "active_type1": values.type1,
           "active_type2": values.type2
@@ -3999,6 +4021,10 @@
     });
   });
 
+  function isTypeTransformationActive(values) {
+    return values["tera_active"] || values["mega_active"] || values["custom1_active"] || values["custom2_active"] || values["custom3_active"];
+  }
+
   // Collapsing Blocks
   on("change:repeating_features:options_flag", function (eventInfo) {
     const flag = eventInfo.newValue == "on" ? "-" : "+";