From 63d682b721f439c52354ba8543587d196982748f Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Tue, 17 Aug 2021 04:36:14 +0000
Subject: [PATCH] CSS revision, changing layouts here and there

---
 src/TestPanel.js | 73 ++++++++++++++++++++++++++----------------------
 src/style.css    | 25 ++++++++++++-----
 2 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/src/TestPanel.js b/src/TestPanel.js
index e7e44bb..ff5746b 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -189,6 +189,7 @@ const [statPage,setStatPage] = useState(1)
 
 const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
 const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false)
+const [treePage,setTreePage] = useState(1)
 const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
 const [armorSelectWindowOpen,setArmorSelectWindowOpen] = useState(false)
 
@@ -301,10 +302,10 @@ useEffect(()=>{
       <div className="boxTitleBar">
       <h1>Current Effects</h1></div>
       <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
-      <h3>Effect Name</h3>
-      <ul className="infoBuffs">
-        {
-          effectPage===1?<><li>Food Boost Effect
+      {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
+      
+        
+          
             <ul>
               <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
               <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@@ -320,9 +321,9 @@ useEffect(()=>{
             <ul>
               <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
             </ul>
-          </li></>:<></>
-        }
-      </ul>
+          </li></ul></>:<></>
+        
+      }
       </div>
       </div>
       <div className="containerB">
@@ -562,40 +563,44 @@ AUGMENT
 
 
 
-<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
-
+      <Modal isOpen={classSkillTreeWindowOpen} onRequestClose={() => { setClassSkillTreeWindowOpen(false) }} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
         <div className="box skillTreeBox">
           <div className="boxTitleBar">
-            <h1>Ranger01</h1>
+            <h1>Class Skill Tree</h1>
             <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
           </div>
-          <div className="skillTreeContainer customScrollbar">
-            <div style={{position:"relative"}}>
-              {<SkillTree style={{position:"absolute"}} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
-                    gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY}
-                    skillLines={skillTreeData} halflineheight={halflineheight}
-            />}
-              <div className="skillTreeGrid">
-                <div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div>
-                <div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div>
-                <div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div>
-                <div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div>
-                <div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div>
-                <div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div>
-                <div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div>
-                <div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div>
-                <div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div>
-                <div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div>
-                <div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div>
-                <div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
+          <PageControl pages={2} pageNames={[<><img alt="" src={DisplayIcon("/icons/class/ra.png")} /> Ranger</>, <><img alt="" src={DisplayIcon("/icons/class/fo.png")} /> Force</>, "Launcher", "Rod", "Talis"]} currentPage={treePage} setCurrentPage={setTreePage} />
+          {treePage === 1 ? <>
+            <div className="skillTreeContainer customScrollbar">
+              <div style={{ position: "relative" }}>
+                {<SkillTree style={{ position: "absolute" }} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
+                  gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY}
+                  skillLines={skillTreeData} halflineheight={halflineheight}
+                />}
+                <div className="skillTreeGrid">
+                  <div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div>
+                  <div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div>
+                  <div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div>
+                  <div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div>
+                  <div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div>
+                  <div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div>
+                  <div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div>
+                  <div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div>
+                  <div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div>
+                  <div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div>
+                  <div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div>
+                  <div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
+                </div>
               </div>
+            </div></> : <></>}
+            <div className="skillPoints">
+              <div>Your Skill Points<span>6</span></div>
+              <div>SP<span></span>0</div>
             </div>
-          </div>
-          <div className="skillPoints">Your Skill Points&emsp;&emsp;6&emsp;&emsp;&emsp;SP&emsp;&emsp;&emsp;&emsp;0</div>
-          <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
+            <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
+          
         </div>
-
-</Modal>
+      </Modal>
 
 <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
   pageNames={["All","Rifle","Launcher","Rod","Talis"]}
diff --git a/src/style.css b/src/style.css
index 62e8aab..8fe645a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -141,7 +141,6 @@ em {
 	justify-content: center;
 	gap: 10px;
 	margin: 0 10px;
-	max-width: calc(450 * 3);
 }
 .containerA{
 }
@@ -778,7 +777,7 @@ li.treeListSub:after {
 	text-align: center;
 	height: 148px;
 	position: relative;
-	margin: 0 10px 48px 0;
+	margin: 0 10px 96px 0;
 }
 .skillTreeGrid div:hover .skillButtons {
 	visibility: visible;
@@ -857,6 +856,18 @@ div.skillMaxed .skillAllocated {
 	padding: 16px 0 10px 0;
 	color: white;
 	font-size: 14pt;
+	display: grid;
+	grid-template-columns: repeat(auto-fit,292px);
+	justify-content: center;
+	gap: 10px;
+}
+.skillPoints div:first-child {
+	text-align: center;
+}
+.skillPoints div span {
+	display: inline-block;
+	width: calc(292px / 2);
+	text-align: center;
 }
 .skillConfirm {
 	justify-content: center;
@@ -1019,11 +1030,11 @@ button{
 	background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1));
 }
 .modalItemListContainer {
-		overflow-y: auto;
-		overflow-x: hidden;
-		margin: 10px 5px 0 0;
-		padding: 2px;
-		max-height: calc(90vh - 115px);
+	overflow-y: auto;
+	overflow-x: hidden;
+	margin: 10px 5px 0 0;
+	padding: 2px;
+	max-height: calc(90vh - 115px);
 }
 .webicon{
 	color:maroon;