From bb8ac0d6a7efa295100cfaff3ff90615ae3d8e88 Mon Sep 17 00:00:00 2001
From: Medieve <medieve@gmail.com>
Date: Sat, 25 Sep 2021 16:09:09 -0600
Subject: [PATCH] Mutants & Masterminds 3E Official

Updates to making the importer more robust and capable of bringing in the default NPC sheets.

Updates to fix a majority of text overflow problems, particularly in the power window.
---
 .../mutants-and-masterminds3e.css             | 61 ++++++++++++++++---
 .../mutants-and-masterminds3e.html            | 22 ++++---
 2 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.css b/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.css
index ef674fa7d5..88607482ca 100644
--- a/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.css	
+++ b/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.css	
@@ -237,7 +237,7 @@ input[type="hidden"][name="attr_afflictions_1"]:not([value]) ~ .npcAfflictions {
 input[type="hidden"][name="attr_op_npc"][value="0"] ~ .sheet .main {
     display: grid;
     grid-template-rows: auto auto 1fr;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: auto minmax(250px, 1fr) minmax(230px, 1fr);
     gap: 1rem;
     grid-template-areas: 
         "details details complications"
@@ -721,6 +721,7 @@ input.anim_reduced[type="hidden"][value="off"] ~ .hover-section:hover {
     z-index: 50;
     gap: 1rem;
 }
+.lowerHeader:hover {z-index: 100;}
 .upper {
     display: grid;
     grid-template-columns: auto 1fr;
@@ -965,8 +966,8 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     display: flex;
     align-items: center;
     overflow: hidden;
-    right: -5px;
-    bottom: 10px;
+    right: -10px;
+    bottom: 16px;
     height: 50px !important;
     width: 50px !important;
     background: var(--col-purple);
@@ -1108,6 +1109,9 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     flex-wrap: wrap;
     grid-gap: 2px;
 }
+.section-complications .repcontainer .repitem { 
+    max-width: 100%;
+}
 .section-complications input[type='text'] {
     background: linear-gradient(to bottom, var(--col-black), var(--col-blue));
     background: var(--col-black);
@@ -1128,6 +1132,10 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     min-width: 6ch; /* Whatever feels good to you */
     min-height: 2em;
     padding: 0 6px; /* Matching my input's padding so that the widths are correct */
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .section-complications .autoExpand input {
     position: absolute; /* removes the input from the DOM flow, allowing the span to exist in the same space */
@@ -1137,6 +1145,10 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     font-size: 14px;
     text-transform: none;
     cursor: pointer;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .section-complications .autoExpand:hover input {
     color: var(--col-green);
@@ -1145,6 +1157,7 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     padding: 0;
     margin: 0;
     cursor: pointer;
+    max-width: 100%;
 }
 
 .complication_window {
@@ -1204,6 +1217,7 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     font-weight: 600;
     text-transform: none;
 
+    
 }
 /* ==== Edit Conditions =====*/
 .edit_complications {
@@ -1271,6 +1285,9 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .display_condition:hover {
     background-position: 0 20%;
     border: 2px solid var(--col-yellow);
 }
+.section-conditions:hover {
+    z-index: 2;
+}
 
 .section-conditions .content {
     display: flex;
@@ -1627,7 +1644,7 @@ input.anim_reduced[type="hidden"][value="off"] ~ div .edit_conditions label:hove
 .section-abilities .content {
     display: grid;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 .section-abilities:hover {
     z-index: 99;
@@ -1693,7 +1710,6 @@ input.anim_reduced[value="off"] ~ * .ability_labels div span {
     grid-area: defenses;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
     z-index: 51;
 }
 
@@ -1728,6 +1744,7 @@ input.anim_reduced[value="off"] ~ * .defense_labels div span {
 .section-defenses .section-damage {
     position: relative;
     display: flex;
+    margin-top: 20%;
     justify-content: space-evenly;
     filter: drop-shadow(2px 2px 6px var(--col-red)) drop-shadow(2px 2px 4px var(--col-black));
 }
@@ -2057,6 +2074,7 @@ input[type="hidden"][name="attr_afflictions_1"][value] + .display_afflictions {
     cursor: text;
     border-radius: 0px 0px 10px 0;
     width: calc(100% - 30px);
+    text-overflow: ellipsis;
 }
 .sheet .advantage_row input[type="number"], .sheet .skill-row input[type="number"] {
     background: var(--col-black);
@@ -2174,6 +2192,7 @@ input[type="hidden"][name="attr_afflictions_1"][value] + .display_afflictions {
 /* ==== Section Powers =====*/
 .section-powers {
     grid-area: main;
+    min-width: 200px;
     border-image: unset;
     background: linear-gradient(to bottom, var(--col-option), var(--col-black)), var(--bg-circuit), var(--col-option);
     background-size: 200px;
@@ -2610,12 +2629,27 @@ button.rank_display span {
     background-clip: text;
     transform: skew(25deg);
 }
+.display-powers [class^=element] h1 {
+    width: 100%;
+}
 .display-powers .element-power h1 {
     z-index: 1;
+    width: calc(100% - 40px);
 }
+.display-powers .element-text h1 {
+    width: auto;
+    max-width: 80%;
+}
+
 .display-powers .element-power textarea {
     border-color: transparent;
 }
+.display-powers h1 span {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
 .display-powers .element-power h1 span {
     --col-stroke: var(--col-yellow);
     font-family: var(--font-header);
@@ -2627,7 +2661,7 @@ button.rank_display span {
     -webkit-text-fill-color: transparent;
     position: relative;
     padding: 0 2px;
-    white-space: nowrap;
+
     z-index: 1;
 }
 .display-powers .element-power::before {
@@ -2757,7 +2791,6 @@ button.rank_display span {
     display: none;
 }
 .display-powers .element-attack_fx .display_condition {
-    width: max-content;
     cursor: default;
 }
 .display-powers .element-attack_fx .display_condition:hover {
@@ -2794,6 +2827,7 @@ button.rank_display span {
     display: flex;
     flex-direction: column;
     align-content: space-between;
+    min-width: 50px;
 }
 .element-attack_fx .section-Affliction h2 {
     align-self: center;
@@ -2805,6 +2839,12 @@ button.rank_display span {
     writing-mode: vertical-lr;
     text-orientation: mixed;
 }
+.section-Affliction span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .element-attack_fx .section-Affliction .tag {
     mix-blend-mode: normal !important;
 }
@@ -2894,6 +2934,7 @@ button.rank_display span {
     border-image: unset;
     background: linear-gradient(var(--col-white-t), var(--col-white-t)), linear-gradient(var(--col-purple-t), var(--col-purple-t)), var(--bg-skills);
     background-size: cover;
+    min-width: 230px;
     z-index: 500;
 }
 .section-skills .content {
@@ -2954,7 +2995,6 @@ button.rank_display span {
     background-repeat: no-repeat;
     margin-bottom: 5px;
     border: 2px solid var(--col-yellow);
-    padding: 2px;
     z-index: 1;
 }
 .skill-group .skill-row {
@@ -2997,7 +3037,7 @@ button.rank_display span {
 .skill-group .skill-row h2 input {
     color: var(--col-white);
     font-family: var(--font-normal);
-    padding-left: 4px;
+    text-overflow: ellipsis;
 }
 .sheet .skill-row button {
     position: relative;
@@ -3133,6 +3173,7 @@ input.anim_reduced[value="off"] ~ * .skill_labels div:nth-of-type(1) span {
     grid-template-areas: 
         "name name name"
         "trait trait trait"
+        "extra extra extra"
     ;
     position: relative;
     padding: 2px;
@@ -3278,9 +3319,11 @@ input.anim_reduced[value="off"] ~ * .skill_labels div:nth-of-type(1) span {
 
 .sheet-rolltemplate-roll .sheet-extras {
     display: flex;
+    grid-area: extra;
     flex-direction: column;
     background: var(--col-black);
     font-family: var(--font-normal);
+    font-size: 16px;
     color: var(--col-white);
     width: fit-content;
     margin-top: 8px;
diff --git a/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.html b/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.html
index dbaba38f34..36f340d69e 100644
--- a/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.html	
+++ b/Mutants and Masterminds 3E Official/mutants-and-masterminds3e.html	
@@ -2970,14 +2970,14 @@
       fields:['string','string']
     },
     */
-    {
-      section:'repeating_movement',
-      fields:['speedtype','speedrank', 'speedhour', 'speedround']
-    },
     {
       section:'repeating_powers',
       fields:['label','descriptor','cost','activated','dynpool','rank_total','rank','rankBonus','rankCost','action','range','duration','action','damage','aoe','defense','check','description','element_type','master_row','attack_fx','combat','attack_rank','attack_mod','damage','check','crit', 'afflictions_1']
     },
+    {
+      section:'repeating_movement',
+      fields:['speedtype','speedrank', 'speedhour', 'speedround']
+    },
     {
       section:'repeating_equipment',
       fields:['label','descriptor','cost','activated','dynpool','rank_total','rank','rankBonus','rankCost','action','range','duration','action','damage','aoe','defense','check','description','element_type','master_row','attack_fx','combat','attack_rank','attack_mod','damage','check','crit', 'afflictions_1']
@@ -3296,7 +3296,6 @@
       if(Array.isArray(statblock)){
         statblock = statblock[0];
       }
-      debug({statblock});
       await clearSections();
       if(statblock.minions){
         let minions = !Array.isArray(statblock.minions.character) ? [{...statblock.minions.character}] : [...statblock.minions.character];
@@ -3307,12 +3306,13 @@
         if(statblock[parser]){
           let arrRef = Object.keys(statblock[parser])[0];
           if(statblock[parser][arrRef]){
-            debug(`parsing statblock[${parser}][${arrRef}]`);
+            if(!Array.isArray(statblock[parser][arrRef])){
+              statblock[parser][arrRef] = [statblock[parser][arrRef]];
+            }
             parsers[parser](statblock[parser][arrRef],setObj,powerNames);
           }
         }
       });
-      debug({setObj});
       set(setObj);
     /*}catch(err){
       //Maybe add chat output to this effect as well.
@@ -3611,8 +3611,12 @@
     setObj[`${row}_size`] = (obj.size._name||'').toLowerCase();
     setObj[`${row}_cost`] = obj.powerpoints._value||'';
     if(obj.powers){
-      debug({row,type,obj});
-      obj.powers.power.forEach((obj)=>parseGeneralPower(rowID,'gen_power',type,obj,setObj,powerNames));
+      if(obj.powers.power){
+        if(!Array.isArray(obj.powers.power)){
+          obj.powers.power = [obj.powers.power];
+        }
+        obj.powers.power.forEach((obj)=>parseGeneralPower(rowID,'gen_power',type,obj,setObj,powerNames));
+      }
     }
   };
   const stripOrderInfo = function(string){