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
This commit is contained in:
dudleycu 2021-08-17 22:05:08 +09:00
parent be53f8b5bd
commit 423cf2e19f
2 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/TestPanel.js
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
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%;
} }