sigonasr2
/
ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added left and right button overlay function for skill tree

Browse Source
master
dudleycu 3 years ago
parent be53f8b5bd
commit 423cf2e19f
2 changed files with 48 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 34
      src/TestPanel.js
  2. 47
      src/style.css

34
src/TestPanel.js
Unescape View File

@ -125,6 +125,16 @@ function SelectorWindow(p) {
</PopupWindow> </PopupWindow>
} }
function LeftButton(p){
return <span className="skillLeftButton">
</span>
}
function RightButton(p){
return <span className="skillRightButton">
</span>
}
function GetSpecialWeaponName(item) { 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):"" 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} skillLines={skillTreeData} halflineheight={halflineheight}
/>} />}
<div className="skillTreeGrid"> <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="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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> </div>
</div></> : <></>} </div></> : <></>}

47
src/style.css
Unescape View File

@ -319,9 +319,6 @@ em {
.equipAugs { .equipAugs {
flex: 1 1 auto; flex: 1 1 auto;
} }
.equipAugs ul {
position: relative;
}
.equipAugs li { .equipAugs li {
background-color: rgba(128,128,128,0.50); background-color: rgba(128,128,128,0.50);
color: white; color: white;
@ -354,9 +351,6 @@ em {
white-space: normal; white-space: normal;
left: 1em; left: 1em;
} }
.tooltipAnchor {
position: relative;
}
.xTooltip { .xTooltip {
margin: 0 10px 0 0; margin: 0 10px 0 0;
display: inline; display: inline;
@ -726,34 +720,26 @@ li.treeListSub:after {
"a5 b5 c5 d5 e5 f5" "a5 b5 c5 d5 e5 f5"
"a6 b6 c6 d6 e6 f6"; "a6 b6 c6 d6 e6 f6";
} }
.skillTreeGrid div { .skillTreeGrid > div {
background-color: rgba(128,128,128,0.33); background-color: rgba(128,128,128,0.33);
color: white; color: white;
padding: 6px; padding: 6px;
/*background-repeat: no-repeat;
background-position: right top;
background-origin: content-box;*/
text-align: center; text-align: center;
height: 148px; height: 148px;
position: relative; position: relative;
margin: 0 10px 96px 0; margin: 0 10px 96px 0;
} }
.skillTreeGrid div:hover .skillButtons {
visibility: visible;
}
div.skillActive { div.skillActive {
background-color: rgba(18,103,87,0.5); background-color: rgba(18,103,87,0.5);
} }
div.skillMaxed { div.skillMaxed {
background-color: rgba(18,103,87,0.5); background-color: rgba(18,103,87,0.5);
} }
.skillTreeGrid div:hover { .skillTreeGrid > div:hover {
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
background-color: rgba(113,169,189,0.33); 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); outline: 2px solid rgba(54,255,255,0.66);
background-color: rgba(18,103,87,0.5); 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; line-height: 40px;
} }
div.skillActive .skillAllocated { div.skillActive .skillAllocated {
color: rgb(255,255,0) color: rgb(255,255,0);
} }
div.skillMaxed .skillAllocated { div.skillMaxed .skillAllocated {
color: rgb(255,135,80); color: rgb(255,135,80);
@ -807,7 +793,26 @@ div.skillMaxed .skillAllocated {
height: 48px; height: 48px;
text-align: left; 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 { .skillPoints {
background-color: rgba(64,64,64,0.5); background-color: rgba(64,64,64,0.5);
text-align: center; text-align: center;
@ -857,7 +862,7 @@ div.skillMaxed .skillAllocated {
outline: 2px solid #30cdef; outline: 2px solid #30cdef;
} }
.editBoxActive { .editBoxActive {
position: relative;
width: 100%; width: 100%;
} }
.editBoxActive:hover { .editBoxActive:hover {
@ -879,7 +884,7 @@ input#editBoxInput {
width: 100%; width: 100%;
} }
.editClass { .editClass {
position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }

Write Preview
Loading…
Cancel
Save