From 576758f33e679f15ef2b0cbfa7639c1490ce072b Mon Sep 17 00:00:00 2001
From: NMarrero <NicoMarrero@gmail.com>
Date: Sat, 27 Feb 2021 17:08:49 +0000
Subject: [PATCH] Serenity: Add skills tooltip with competency levels and roll
 difficulties

---
 Serenity/serenity.css  |  10 ++-
 Serenity/serenity.html | 158 +++++++++++++++++++++++++++++++++++------
 2 files changed, 145 insertions(+), 23 deletions(-)

diff --git a/Serenity/serenity.css b/Serenity/serenity.css
index 4983ae3387..81c73db86f 100644
--- a/Serenity/serenity.css
+++ b/Serenity/serenity.css
@@ -53,8 +53,12 @@
 }
 
 .sheet-serenity-charactersheet .sheet-serenity-fieldset:before {
-    content: attr(title);
-    position: absolute;
+    content: attr(data-name);
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-fieldset:before,
+.sheet-serenity-charactersheet .sheet-serenity-fieldset-title {
+    position: absolute !important;
     top: -15px;
     left: 10px;
     padding: 0 5px;
@@ -1730,11 +1734,11 @@
 }
 
 .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table {
+    color: white;
     margin: 5px;
 }
 
 .sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table td {
-    color: white;
     padding: 5px;
     border: 1px solid white;
     text-align: left;
diff --git a/Serenity/serenity.html b/Serenity/serenity.html
index e6837ab13b..b22da6c72a 100644
--- a/Serenity/serenity.html
+++ b/Serenity/serenity.html
@@ -552,7 +552,7 @@
         <!-- ATTRIBUTES -->
         <div
           class="sheet-serenity-fieldset sheet-character-attributes"
-          title="Attributes"
+          data-name="Attributes"
         >
           <table border="0" cellpadding="0" cellspacing="0">
             <tbody>
@@ -751,7 +751,7 @@
         <!-- DERIVED TRAITS -->
         <div
           class="sheet-serenity-fieldset sheet-character-derived-traits"
-          title="Derived Traits"
+          data-name="Derived Traits"
         >
           <table border="0" cellpadding="0" cellspacing="0">
             <tbody>
@@ -939,7 +939,7 @@
         <!-- PLOT POINTS -->
         <div
           class="sheet-serenity-fieldset sheet-serenity-plot-points"
-          title="Plot Points"
+          data-name="Plot Points"
         >
           <div class="sheet-serenity-plot-points-input">
             <input
@@ -1060,10 +1060,125 @@
 
       <div class="sheet-serenity-float-group">
         <!-- SKILLS -->
-        <div
-          class="sheet-serenity-fieldset sheet-character-skills"
-          title="Skills"
-        >
+        <div class="sheet-serenity-fieldset sheet-character-skills">
+          <span class="sheet-serenity-tooltip sheet-serenity-fieldset-title">
+            Skills
+            <span class="sheet-serenity-tooltip-text">
+              Skill Levels
+              <table>
+                <tbody>
+                  <tr>
+                    <th>Die</th>
+                    <th>Proficiency</th>
+                    <th>Comment</th>
+                  </tr>
+                  <tr>
+                    <td>d2</td>
+                    <td>Incompetent</td>
+                    <td>“That ain’t the ‘on’ button, is it?”</td>
+                  </tr>
+                  <tr>
+                    <td>d4</td>
+                    <td>Novice</td>
+                    <td>“Don’t pull the trigger, squeeze it.”</td>
+                  </tr>
+                  <tr>
+                    <td>d6</td>
+                    <td>Competent</td>
+                    <td>“Believe I know this dance. Shall we?”</td>
+                  </tr>
+                  <tr>
+                    <td>d8</td>
+                    <td>Expert</td>
+                    <td>
+                      “I can reprogram this trash bin to go wherever we want.”
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>d10</td>
+                    <td>Professional</td>
+                    <td>
+                      “The dermal mender will keep that ear on fine. Just don’t
+                      fiddle with it!”
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>d12</td>
+                    <td>Master</td>
+                    <td>“A Crazy Ivan? Right now? Okay.”</td>
+                  </tr>
+                  <tr>
+                    <td>d12+</td>
+                    <td>Supreme</td>
+                    <td>
+                      “You’re holding eights, low queen, jack, and ace. Your
+                      eyes gave it away.”
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+              Roll Difficulties
+              <table>
+                <tbody>
+                  <tr>
+                    <th>Action</th>
+                    <th>Ordinary Success</th>
+                    <th>Extraordinary Success</th>
+                    <th>Complex Task</th>
+                  </tr>
+                  <tr>
+                    <td>Easy</td>
+                    <td>3</td>
+                    <td>10</td>
+                    <td>15</td>
+                  </tr>
+                  <tr>
+                    <td>Average</td>
+                    <td>7</td>
+                    <td>14</td>
+                    <td>35</td>
+                  </tr>
+                  <tr>
+                    <td>Hard</td>
+                    <td>11</td>
+                    <td>18</td>
+                    <td>55</td>
+                  </tr>
+                  <tr>
+                    <td>Formidable</td>
+                    <td>15</td>
+                    <td>22</td>
+                    <td>75</td>
+                  </tr>
+                  <tr>
+                    <td>Heroic</td>
+                    <td>19</td>
+                    <td>26</td>
+                    <td>95</td>
+                  </tr>
+                  <tr>
+                    <td>Incredible</td>
+                    <td>23</td>
+                    <td>30</td>
+                    <td>115</td>
+                  </tr>
+                  <tr>
+                    <td>Ridiculous</td>
+                    <td>27</td>
+                    <td>34</td>
+                    <td>135</td>
+                  </tr>
+                  <tr>
+                    <td>Impossible</td>
+                    <td>31</td>
+                    <td>38</td>
+                    <td>155</td>
+                  </tr>
+                </tbody>
+              </table>
+            </span>
+          </span>
           <table border="0" cellpadding="0" cellspacing="0">
             <tbody>
               <tr>
@@ -3493,7 +3608,7 @@
         <!-- SPECIALTIES -->
         <div
           class="sheet-serenity-fieldset sheet-serenity-character-specialties"
-          title="Skill Specialties"
+          data-name="Skill Specialties"
         >
           <fieldset class="repeating_specialties">
             <select class="sheet-serenity-skills" name="attr_Skill">
@@ -3549,7 +3664,7 @@
         <!-- ASSETS -->
         <div
           class="sheet-serenity-fieldset sheet-serenity-character-assets"
-          title="Assets"
+          data-name="Assets"
         >
           <fieldset class="repeating_assets">
             <select class="sheet-serenity-assets" name="attr_Asset">
@@ -4282,7 +4397,7 @@
         <!-- COMPLICATIONS -->
         <div
           class="sheet-serenity-fieldset sheet-serenity-character-complications"
-          title="Complications"
+          data-name="Complications"
         >
           <fieldset class="repeating_complications">
             <select
@@ -5038,7 +5153,7 @@
     <div class="sheet-serenity-float-group">
       <div
         class="sheet-serenity-fieldset sheet-serenity-currency"
-        title="Currency"
+        data-name="Currency"
       >
         <table border="0" cellspacing="0" cellpadding="0">
           <tbody>
@@ -5115,7 +5230,7 @@
       </div>
       <div
         class="sheet-serenity-fieldset sheet-serenity-combat-actions"
-        title="Combat Actions"
+        data-name="Combat Actions"
       >
         <table border="0" cellpadding="0" cellspacing="0">
           <tbody>
@@ -5151,7 +5266,7 @@
       <!-- EQUIPMENT -->
       <div
         class="sheet-serenity-fieldset sheet-serenity-character-equipment"
-        title="Equipment"
+        data-name="Equipment"
       >
         Held Equipment &amp; Weapons:<br /><textarea
           name="attr_HeldEquipment"
@@ -5164,7 +5279,7 @@
       <!-- WEAPONS -->
       <div
         class="sheet-serenity-fieldset sheet-serenity-character-weapons"
-        title="Equipped Hand-to-Hand Weapons"
+        data-name="Equipped Hand-to-Hand Weapons"
       >
         <span class="sheet-serenity-weapon-name-label"></span>
         <span class="sheet-serenity-weapon-damage-label">Damage</span>
@@ -5230,7 +5345,7 @@
       </div>
       <div
         class="sheet-serenity-fieldset sheet-serenity-character-weapons"
-        title="Equipped Ranged Weapons"
+        data-name="Equipped Ranged Weapons"
       >
         <span class="sheet-serenity-weapon-name-label">Name</span>
         <span class="sheet-serenity-weapon-damage-label">Damage</span>
@@ -5296,7 +5411,7 @@
       </div>
       <div
         class="sheet-serenity-fieldset sheet-serenity-character-weapons"
-        title="Equipped Explosives"
+        data-name="Equipped Explosives"
       >
         <span class="sheet-serenity-weapon-name-label">Name</span>
         <span class="sheet-serenity-weapon-damage-label">Damage</span>
@@ -5346,7 +5461,7 @@
       </div>
       <div
         class="sheet-serenity-fieldset sheet-serenity-character-armor"
-        title="Equipped Armor"
+        data-name="Equipped Armor"
       >
         <span class="sheet-serenity-armor-name-label">Name</span>
         <span class="sheet-serenity-armor-rating-label">Rating</span>
@@ -5414,16 +5529,19 @@
   </div>
 
   <div class="sheet-tab-content sheet-tab3-content">
-    <div class="sheet-serenity-fieldset sheet-serenity-notes" title="Notes">
+    <div class="sheet-serenity-fieldset sheet-serenity-notes" data-name="Notes">
       <textarea name="attr_Notes"></textarea>
     </div>
     <div
       class="sheet-serenity-fieldset sheet-serenity-explanation"
-      title="Description"
+      data-name="Description"
     >
       <textarea name="attr_Description"></textarea>
     </div>
-    <div class="sheet-serenity-fieldset sheet-serenity-history" title="History">
+    <div
+      class="sheet-serenity-fieldset sheet-serenity-history"
+      data-name="History"
+    >
       <textarea name="attr_History"></textarea>
     </div>
   </div>