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

Merge branch 'master' of https://github.com/sigonasr2/ngsplanner

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-17 22:43:53 +09:00
commit c304bdb9c2
2 changed files with 47 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/TestPanel.js
View File

@ -132,6 +132,15 @@ function SelectorWindow(p) {
</PopupWindow>
}
function LeftButton(p){
return <span className="skillLeftButton">
</span>
}
function RightButton(p){
return <span className="skillRightButton">
</span>
}
function ClassSelectorWindow(p) {
const [title,setTitle] = useState("Select Main Class")
useEffect(()=>{
@ -166,18 +175,18 @@ function GetSpecialWeaponName(item) {
function SkillTreeBoxes(p) {
return <>
<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>
</>
}

47
src/style.css
View File

@ -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%;
}