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
master
Joshua Sigona 3 years ago
parent baf3c624ae a9dde4a2a5
commit c304bdb9c2
2 changed files with 47 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. 33
      src/TestPanel.js
  2. 47
      src/style.css

33
src/TestPanel.js
Unescape View File

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

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