From 423cf2e19f54bb489f4967cccbec0a873709a2c6 Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Tue, 17 Aug 2021 22:05:08 +0900
Subject: [PATCH] Added left and right button overlay function for skill tree

---
 src/TestPanel.js | 34 ++++++++++++++++++++++------------
 src/style.css    | 47 ++++++++++++++++++++++++++---------------------
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/TestPanel.js b/src/TestPanel.js
index 4f213a9..388ceaf 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -125,6 +125,16 @@ function SelectorWindow(p) {
   </PopupWindow>
 }
 
+function LeftButton(p){
+	return <span className="skillLeftButton">
+  </span>
+}
+
+function RightButton(p){
+	return <span className="skillRightButton">
+  </span>
+}
+
 function GetSpecialWeaponName(item) {
   return item[WEAPON_EXISTENCE_DATA]!==undefined?(item[WEAPON_EXISTENCE_DATA].special_name?.length>0)?item[WEAPON_EXISTENCE_DATA].special_name:(item[WEAPON_WEAPON].name+" "+item[WEAPON_WEAPONTYPE].name):""
 }
@@ -538,18 +548,18 @@ AUGMENT
                   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 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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></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 className="skillButtons"><LeftButton /><RightButton /></div></div>
                 </div>
               </div>
             </div></> : <></>}
diff --git a/src/style.css b/src/style.css
index f570bd9..53e0162 100644
--- a/src/style.css
+++ b/src/style.css
@@ -319,9 +319,6 @@ em {
 .equipAugs {
 	flex: 1 1 auto;	
 }
-.equipAugs ul {
-	position: relative;
-}
 .equipAugs li {
 	background-color: rgba(128,128,128,0.50);
 	color: white;
@@ -354,9 +351,6 @@ em {
 	white-space: normal;
 	left: 1em;
 }
-.tooltipAnchor {
-    position: relative;
-}
 .xTooltip {
 	margin: 0 10px 0 0;
 	display: inline;
@@ -726,34 +720,26 @@ li.treeListSub:after {
 	"a5 b5 c5 d5 e5 f5"
 	"a6 b6 c6 d6 e6 f6";
 }
-.skillTreeGrid div {
+.skillTreeGrid > div {
 	background-color: rgba(128,128,128,0.33);
 	color: white;
 	padding: 6px;
-    /*background-repeat: no-repeat;
-    background-position: right top;
-	background-origin: content-box;*/
 	text-align: center;
 	height: 148px;
 	position: relative;
 	margin: 0 10px 96px 0;
 }
-.skillTreeGrid div:hover .skillButtons {
-	visibility: visible;
-}
 div.skillActive {
 	background-color: rgba(18,103,87,0.5);
 }
 div.skillMaxed {
 	background-color: rgba(18,103,87,0.5);
 }
-.skillTreeGrid div:hover {
+.skillTreeGrid > div:hover {
 	outline: 2px solid rgba(54,255,255,0.66);
 	background-color: rgba(113,169,189,0.33);
-	background-image: url("./icons/skilltree_div_overlay.png");
-	background-repeat: no-repeat;
 }
-.skillTreeGrid div.skillActive:hover, .skillTreeGrid div.skillMaxed:hover  {
+.skillTreeGrid > div.skillActive:hover, .skillTreeGrid > div.skillMaxed:hover  {
 	outline: 2px solid rgba(54,255,255,0.66);
 	background-color: rgba(18,103,87,0.5);
 }
@@ -771,7 +757,7 @@ div.skillLocked img, div.skillLocked span.skillAllocated, div.skillLocked em.ski
 	line-height: 40px;
 }
 div.skillActive .skillAllocated {
-	color: rgb(255,255,0)
+	color: rgb(255,255,0);
 } 
 div.skillMaxed .skillAllocated {
 	color: rgb(255,135,80);
@@ -807,7 +793,26 @@ div.skillMaxed .skillAllocated {
 	height: 48px;
 	text-align: left;
 }
-
+.skillButtons {
+position:absolute;
+display: grid;
+grid-template-columns: repeat(2, 1fr);
+width: 171px;
+height: 148px;
+left: 0;
+top: 0;
+cursor: pointer;
+}
+.skillButtons > span:hover {
+	background-image: url("./icons/skilltree_div_overlay.png");
+	background-repeat: no-repeat;
+}
+.skillLeftButton {
+	background-position: left;
+}
+.skillRightButton {
+	background-position: right;
+}
 .skillPoints {
 	background-color: rgba(64,64,64,0.5);
 	text-align: center;
@@ -857,7 +862,7 @@ div.skillMaxed .skillAllocated {
 	outline: 2px solid #30cdef;
 }
 .editBoxActive {
-	position: relative;
+
 	width: 100%;
 }
 .editBoxActive:hover {
@@ -879,7 +884,7 @@ input#editBoxInput {
 	width: 100%;
 }
 .editClass {
-	position: relative;
+
 	display: inline-block;
 	width: 100%;
 }