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 80c2df60b9 024f0fd288
commit 8461019940
2 changed files with 127 additions and 44 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. 58
      src/TestPanel.js
  2. 113
      src/style.css

58
src/TestPanel.js
Unescape View File

@ -64,7 +64,7 @@ function PageControl(p) {
function Class(p) {
const CLASSES = p.GetData("class")
const class_obj = CLASSES[p.name]
return CLASSES!=="no data"?class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></>:<><img alt="" width="24" src={DisplayIcon("")}/>Nico</>
return CLASSES!=="no data"?class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></>:<>-</>
}
function EditableClass(p){
@ -313,6 +313,7 @@ const [effectPage,setEffectPage] = useState(1)
const [weaponPage,setWeaponPage] = useState(1)
const [statPage,setStatPage] = useState(1)
const [foodMenuWindowOpen,setFoodMenuWindowOpen] = useState(false)
const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false)
const [treePage,setTreePage] = useState(1)
@ -403,24 +404,24 @@ useEffect(()=>{
<div className="boxTitleBar">
<h1>Basic Information</h1></div>
<div className="basicInfo">
<div style={{gridArea:"author"}}>Author</div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setauthor} data={author}/></div>
<div style={{gridArea:"build"}}>Build Name</div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div><div><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
<div style={{gridArea:"subClass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</div><div><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
<div style={{gridArea:"author"}}><span>Author</span></div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setauthor} data={author}/></div>
<div style={{gridArea:"build"}}><span>Build Name</span></div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}><span>Class</span></div><div><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
<div style={{gridArea:"subClass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}><span>Sub-Class</span></div><div><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
</div>
<div className="statsInfo">
<div style={{gridArea:"bp"}}>Battle Power</div><div>{p.bp}</div><div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"hp"}}>HP</div><div>{p.hp}</div><div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"pp"}}>PP</div><div>{p.pp}</div><div style={{gridArea:"ppGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"atk"}}>Attack</div><div>{p.statDisplayAtk}</div><div style={{gridArea:"atkGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"def"}}>Defense</div><div>{p.def}</div><div style={{gridArea:"defGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"wepUp2"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></div>
<div style={{gridArea:"wepUp3"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></div>
<div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"bp"}}><span>Battle Power</span></div><div>{p.bp}</div><div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"hp"}}><span>HP</span></div><div>{p.hp}</div><div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"pp"}}><span>PP</span></div><div>{p.pp}</div><div style={{gridArea:"ppGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"atk"}}><span>Attack</span></div><div>{p.statDisplayAtk}</div><div style={{gridArea:"atkGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"def"}}><span>Defense</span></div><div>{p.def}</div><div style={{gridArea:"defGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
<div style={{gridArea:"wepUp"}}><span>Weapon Up</span></div>
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
<div style={{gridArea:"wepUp3",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div>
<div style={{gridArea:"res"}}><span>Ailment Resist.</span></div>
<div style={{gridArea:"res2"}}>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
@ -435,13 +436,14 @@ useEffect(()=>{
<div style={{gridArea:"dmgRes"}}>Damage Resist.</div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
<button onClick={()=>{SaveData()}}>Save</button>
</div>
</div>
<div className="box">
<div className="boxTitleBar">
<h1>Current Effects</h1></div>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
{effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
{effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setFoodMenuWindowOpen(true)}}>Food Boost Effect
@ -493,9 +495,8 @@ ELEMENT<br />
EQUIP CONDITIONS<br />
NOT TRADABLE
</div>
<div className="itemDetailsContent">
POTENTIAL PRESET SKILL
<div className="itemPotential">POTENTIAL</div><div className="itemPreset">PRESET</div>
<div className="itemDetailsAugment">
AUGMENT
@ -570,6 +571,9 @@ AUGMENT
</div>
<div className="containerC">
<div className="box">
<div className="boxTitleBar">
<h1>Damage Stats</h1></div>
@ -720,6 +724,18 @@ AUGMENT
setArmorSelectWindowOpen(false)}}><div className="itemWeaponWrapper"><img className="itemimg" alt="" src={DisplayIcon(item?.icon)} /><em className="rifle">{item.name}</em></div><br /><span className="atk">{item.def}</span></li>}}
/>
<SelectorWindow className="itemBox" title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
<li className="itemWrapper">
<div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div>
<div className="itemNameWrapper meat">meet</div>
<div className="itemRarityWrapper"><img alt="" src={DisplayIcon("icons/NGSUIRarity1Star.png")} /></div>
<div className="itemPropertiesWrapper"><span className="atk">9999</span><span class="pot">Indomitable Unit</span></div>
<div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div>
</li>
</SelectorWindow>
</>
)
}

113
src/style.css
Unescape View File

@ -150,6 +150,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
text-align: right;
}
.barGraph {
margin: 8px 0;
background: linear-gradient(90deg, #65beef, #f5ee3c);
display: block;
height: 8px;
@ -168,13 +169,13 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
"build character character"
"class . ."
"subClass . .";
margin: 10px 10px;
margin: 10px 10px 0;
padding: 0 5px;
}
.statsInfo {
background-color:rgba(0,0,0,0.33);
margin: 0 10px;
padding: 5px;
margin: 5px 10px 0;
padding: 0 5px 5px;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: stretch;
@ -188,8 +189,13 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
"res res2 res3 res3"
"dmgRes dmgRes2 dmgRes2 dmgRes2";
}
.statsInfo > div {
.basicInfo > div, .statsInfo > div {
border-bottom: 1px solid rgba(128,128,128,0.5);
line-height: 25px;
position:relative;
}
.basicInfo > div > span, .statsInfo > div > span {
color: #97e2fc;
}
.boxTitleBar {
background-color: rgba(124, 144, 148, 0.66);
@ -381,9 +387,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
.pr li span {
color:white
}
.ye {
color: #ffb74c;
}
.itemlist {
margin: 0 10px;
}
@ -404,6 +407,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
.itemwep {
font-size: 10pt;
}
.itemWeaponWrapper {
white-space: nowrap;
overflow: hidden;
@ -422,6 +426,11 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin-right: 5px;
vertical-align: middle;
}
.meat:before {
content: url("./icons/food/meat.png");
margin-right: 5px;
vertical-align: middle;
}
.gb:before {
content: url("./icons/NGSUIItemGunbladeMini.png");
margin-right: 5px;
@ -441,6 +450,66 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
box-sizing: content-box;
border-style: solid;
}
.itemWrapper {
display: grid;
grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"img itemname itemname rarity"
"img . . ."
"img properties controls controls";
}
.itemImgWrapper {
grid-area: img;
}
.itemImgWrapper > img {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border: 4px solid rgba(128,128,128,1);
width: 48px;
box-sizing: content-box;
border-style: solid;
}
.itemNameWrapper {
font-size: 16px;
background-color:rgba(0,0,0,0.33);
grid-area: itemname;
margin: 0 10px;
padding: 2px 2px 0 2px;
white-space: nowrap;
}
.itemRarityWrapper {
grid-area: rarity;
}
.itemPropertiesWrapper {
color:white;
grid-area: properties;
margin: 0 10px;
}
.itemPropertiesWrapper > span {
white-space: nowrap;
}
.itemControlsWrapper {
grid-area: controls;
text-align: right;
white-space: nowrap;
}
.itemControlsWrapper > span:nth-child(1) {
background-color: rgba(113,169,189,0.33);
cursor: pointer;
}
.itemControlsWrapper > span:nth-child(2) {
background-color:rgba(0,0,0,0.33);
}
.itemControlsWrapper > span:nth-child(3) {
background-color: rgba(113,169,189,0.33);
cursor: pointer;
}
.itemControlsWrapper > span {
display:inline-block;
padding: 5px 10px;
text-align: center;
margin: 0 0 0 5px;
}
li.r1 {
background-image: url("./icons/NGSUIRarity1Star.png");
}
@ -473,7 +542,6 @@ li.r4 {
.itemlist li span {
background-repeat: no-repeat;
background-position: left center;
margin-right: 10px;
}
.atk:before {
content: url("./icons/NGSUIStatATKOutline.png");
@ -860,19 +928,11 @@ cursor:pointer !important;
/* Sig's Amazing CSS (cuz Dudley edited it) */
.editBox {
width: 100%;
}
.editBox:hover{
background-color:rgba(0,0,0,0.5);
cursor:pointer !important;
outline: 2px solid #30cdef;
}
.editBoxActive {
width: 100%;
}
.editBoxActive:hover {
cursor:pointer !important;
}
@ -884,12 +944,12 @@ input#editBoxInput {
color: white;
cursor:pointer !important;
font-family: ngs,sans-serif;
font-size: 11pt;
height: 28px;
outline: 2px solid #30cdef;
font-size: 16px;
outline: 2px solid #ffff00;
padding: 0 5px;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
width: 100%;
width:100%;
}
.editClass {
@ -1348,7 +1408,8 @@ p.adminNav hr {
display: grid;
grid-template-areas:
"icon properties"
"content content";
"potential preset"
"augment augment";
grid-template-columns: 128px 1fr;
grid-template-rows: auto;
margin: 10px 10px 0 10px;
@ -1361,8 +1422,14 @@ p.adminNav hr {
.itemDetailsProperties {
grid-area: properties;
}
.itemDetailsContent {
grid-area: content;
.itemDetailsAugment {
grid-area: augment;
}
.itemPotential {
grid-area: potential;
}
.itemPreset {
grid-area: preset;
}
.itemDetailsIcon img {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));

Write Preview
Loading…
Cancel
Save