From 9f554c5bb64acacd7b9edf81fe1424bd4a5e5ded Mon Sep 17 00:00:00 2001
From: Erik Goettel <egellman89@outlook.com>
Date: Mon, 16 Dec 2024 19:20:18 -0700
Subject: [PATCH] # Table Top Defined New Features

---
 Table Top Defined/Table_Top_Defined.css  |  48 +++++++-
 Table Top Defined/Table_Top_Defined.html | 150 +++++++++++++++++++----
 2 files changed, 171 insertions(+), 27 deletions(-)

diff --git a/Table Top Defined/Table_Top_Defined.css b/Table Top Defined/Table_Top_Defined.css
index de82508f7792..5eb52af734a9 100644
--- a/Table Top Defined/Table_Top_Defined.css	
+++ b/Table Top Defined/Table_Top_Defined.css	
@@ -311,7 +311,7 @@
 .ui-dialog .charsheet .Small-Button{
     width: 16px;
     height: 12px;
-    padding: 0;
+    padding: 0 0 1px 0;
     margin: 0;
     border: 1px black solid;
     transition-duration: 0.4s;
@@ -397,13 +397,27 @@
     margin: 0;
 }
 
+.ui-dialog .charsheet .die-select{
+    width: 24px;
+    height: 21px;
+    font-weight: bold;
+    text-align: center;
+    padding: 0;
+    font-size: 12px;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    vertical-align: middle;
+}
+
 .ui-dialog .charsheet .fixed-select{
-    width: 52px;
-    height: 18px;
+    width: 60px;
+    height: 21px;
     text-align: center;
     padding: 0;
     font-size: 12px;
     margin: 0;
+    vertical-align: middle;
 }
 
 /*General Grid*/
@@ -799,6 +813,22 @@
     padding-bottom: 8px;
 }
 
+.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc1,
+.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc2,
+.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc3,
+.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc4{
+    width: auto;
+}
+
+.sheet-abilities .grc1 > div,
+.sheet-abilities .grc2 > div,
+.sheet-abilities .grc3 > div,
+.sheet-abilities .grc4 > div{
+    align-items: center;
+    min-height: 20px;
+    height: auto;
+}
+
 .ui-dialog .charsheet .sheet-abilities .Ability-name{
     background-color: #000000;
     color: #FFFFFF;
@@ -808,16 +838,21 @@
     font-size: medium;
 }
 
+.charsheet .sheet-abilities .ability_description{
+    background-color: #D0D0D0;
+}
+
 .ui-dialog .charsheet .sheet-abilities textarea{
     vertical-align: top;
     text-align: left;
     height: 54px;
     min-height: 54px;
-    width: 94%;
+    width: 96%;
     border: 1px solid black;
     border-radius: 5px 5px 5px 5px;
     resize: vertical;
-    padding: 0;
+    padding: 2px;
+    color: #000000;
 }
 
 .sheet-abilities .ggrid .grr4.ggridc .ability-toggle[value="1"] ~ div.ability_description.ggrid{
@@ -851,6 +886,7 @@
     width: 20%;
     border-radius: 12px 12px 0 0;
     overflow: clip;
+    background: #D0D0D0;
 }
 
 /*</editor-fold>*/
@@ -978,6 +1014,7 @@ input.sptoggle[value="1"] ~ .sheet-repeating-fields{
 
 .minimizable-repeat-spells .spells-toggle[value="1"] ~ div.spells_description{
     display: grid;
+    background: #D0D0D0;
 }
 
 .minimizable-repeat-spells .spells_description input[type=number]{
@@ -1023,6 +1060,7 @@ input.sptoggle[value="1"] ~ .sheet-repeating-fields{
 }
 
 
+
 .minimizable-repeat-spells .spells_description .Details-2 {
     grid-area: Details-2;
     padding: 3px;
diff --git a/Table Top Defined/Table_Top_Defined.html b/Table Top Defined/Table_Top_Defined.html
index c66abc891ea0..4b5e36a38e53 100755
--- a/Table Top Defined/Table_Top_Defined.html	
+++ b/Table Top Defined/Table_Top_Defined.html	
@@ -676,23 +676,24 @@
         <input type="text" class="Ability-name" name="attr_abilityname" placeholder="<Ability Name Here>"/>
         <button type="roll" name="roll_ability_card" value="@{abilityroll}"></button>
         </div>
-        <div class="grr2 titleblock" style="font-size: small; font-weight: normal">
-         Uses Remaining: <input class="standard-input" type="text" name="attr_userdescription" placeholder="per day"/>
+        <div class="grr2 titleblock" style="font-size: small; font-weight: normal; margin-bottom: 2px">
+         Use(s): <input class="standard-input" type="text" name="attr_userdescription" placeholder="per day"/>
          Max Uses: <input class="standard-input" type="text" name="attr_uses"/>
+         Resource: <input title="Resource Name" class="standard-input" type="text" name="attr_resourceNameCard"/>
          <input type="hidden" name="attr_abilityroll"/>
         </div>
        </div>
        <input type="hidden" class="ability-toggle" name="attr_minimizeability" value="0"/>
        <div class="ability_description ggrid">
-        <div class="grr1 ggridc">
+        <div class="grr1 ggridc" style="margin-top: 2px">
          <div class="grc1">
-         <div>Target:</div>
+         <div>Target/Effect:</div>
          <div>Duration:</div>
          <div>DC:</div>
          <div>Ability Type?</div>
-          <div>Dice Rolled?</div>
-          <div>Spell Resistance?</div>
-         </div>
+         <div>Dice Rolled?</div>
+         <div>Spell Resistance?</div>
+        </div>
          <div class="grc2">
           <div><input class="standard-input" type="text" name="attr_abilitytarget"/></div>
           <div><input class="standard-input" type="text" name="attr_abilityduration" placeholder="Rounds"/></div>
@@ -706,9 +707,15 @@
            </select>
           </div>
           <div>
-           <span>
-            <input class="small-input" type="text" name="attr_abilitydicenum" placeholder="#"/><input class="small-input" type="text" name="attr_abilitydicetype" placeholder="d#"/>
-           </span>
+            <input class="standard-input" type="text" name="attr_abilitydicenum" placeholder="#"/>
+            <select class="die-select" name="attr_abilitydicetype">
+             <option value="d3">d3</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>
+           </select>
           </div>
           <div><input type="checkbox" name="attr_abilitysrconfirm" value="1"/></div>
          </div>
@@ -830,7 +837,19 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:
+          <span style="float: right; background: #D0D0D0">
+           <input style="float:none" type="text" name="attr_dicenum" placeholder="#">
+            <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select>
+          </span>
+         </div>
          <div>
           <div style="float:left"><div style="float:left">On Success:</div></div>
           <select name="attr_savesucces" class="spellselect">
@@ -921,7 +940,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"> 
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1012,7 +1039,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1103,7 +1138,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1194,7 +1237,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1287,7 +1338,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1378,7 +1437,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1469,7 +1536,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1560,7 +1635,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -1651,7 +1734,15 @@ <h3 style="color:white">Spell Casting</h3>
          <div>Components: <input type="text" name="attr_components"/></div>
          <div>Range: <input type="text" name="attr_range"/></div>
          <div>Duration: <input type="text" name="attr_duration"/></div>
-         <div>Dice Rolled:<span style="float: right; background-color: #FFFFFF"><input style="float:none" type="text" name="attr_dicenum" placeholder="#"><input style="float:none" type="text" name="attr_dicetype" placeholder="d#"></span></div>
+         <div>Dice Rolled:<span style="float: right; background: #D0D0D0"><input style="float:none" type="text" name="attr_dicenum" placeholder="#">            
+          <select class="die-select" name="attr_dicetype">
+             <option value="d3">d3</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>
+            </select></span></div>
          <div>
           <div style="float:left">On Success:</div>
          <select name="attr_savesucces" class="spellselect">
@@ -2408,7 +2499,15 @@ <h3 style="color:white">Spell Casting</h3>
       </div>
       <div>
        <input type="text" name="attr_dnum" class="small-input" placeholder="#"/>
-       <input type="text" name="attr_dtype" class="small-input" placeholder="d#"/>
+       <select class="die-select" name="attr_dtype">
+        <option value="d3">d3</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>
+       </select>
+       <!--<input type="text" name="attr_dtype" class="small-input" placeholder="d#"/>-->
       </div>
       <div><input type="text" name="attr_bonustodamage" class="standard-input" value="0"/></div>
       <div><input type="text" name="attr_enchdamagedice" class="standard-input" value=""/></div>
@@ -2577,7 +2676,14 @@ <h3 style="color:white">Spell Casting</h3>
        </div>
        <div>
         <input type="text" name="attr_dnum" class="small-input" placeholder="#"/>
-        <input type="text" name="attr_dtype" class="small-input" placeholder="d#"/>
+        <select class="die-select" name="attr_dtype">
+         <option value="d3">d3</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>
+        </select>
        </div>
        <div><input type="text" name="attr_bonustodamage" class="standard-input" value="0"/></div>
        <div><input type="text" name="attr_enchdamagedice" class="standard-input" value=""/></div>