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

food buff menu

Browse Source
master
dudleycu 3 years ago
parent 99c17a114a
commit 0b0639dcfd
2 changed files with 110 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. 59
      src/TestPanel.js
  2. 95
      src/style.css

59
src/TestPanel.js
Unescape View File

@ -63,7 +63,7 @@ function PageControl(p) {
function Class(p) { function Class(p) {
const CLASSES = p.GetData("class") const CLASSES = p.GetData("class")
const class_obj = CLASSES[p.name] 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){ function EditableClass(p){
@ -308,6 +308,7 @@ const [effectPage,setEffectPage] = useState(1)
const [weaponPage,setWeaponPage] = useState(1) const [weaponPage,setWeaponPage] = useState(1)
const [statPage,setStatPage] = useState(1) const [statPage,setStatPage] = useState(1)
const [foodMenuWindowOpen,setFoodMenuWindowOpen] = useState(false)
const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false) const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false) const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false)
const [treePage,setTreePage] = useState(1) const [treePage,setTreePage] = useState(1)
@ -369,24 +370,24 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Information</h1></div> <h1>Basic Information</h1></div>
<div className="basicInfo"> <div className="basicInfo">
<div style={{gridArea:"author"}}>Author</div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setauthor} data={author}/></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"}}>Build Name</div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></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)}}>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:"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)}}>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:"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>
<div className="statsInfo"> <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:"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"}}>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:"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"}}>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:"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"}}>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:"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"}}>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:"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"}}>Weapon Up</div> <div style={{gridArea:"wepUp"}}><span>Weapon Up</span></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 /> <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"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></div> <img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</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:"wepUp3",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div>
<div style={{gridArea:"res"}}>Ailment Resist.</div> <div style={{gridArea:"res"}}><span>Ailment Resist.</span></div>
<div style={{gridArea:"res2"}}> <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/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 /> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
@ -399,7 +400,7 @@ useEffect(()=>{
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
</div> </div>
<div style={{gridArea:"dmgRes"}}>Damage Resist.</div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div> <div style={{gridArea:"dmgRes"}}><span>Damage Resist.</span></div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
</div> </div>
</div> </div>
@ -407,7 +408,7 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Current Effects</h1></div> <h1>Current Effects</h1></div>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> <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
@ -459,9 +460,8 @@ ELEMENT<br />
EQUIP CONDITIONS<br /> EQUIP CONDITIONS<br />
NOT TRADABLE NOT TRADABLE
</div> </div>
<div className="itemDetailsContent"> <div className="itemPotential">POTENTIAL</div><div className="itemPreset">PRESET</div>
<div className="itemDetailsAugment">
POTENTIAL PRESET SKILL
AUGMENT AUGMENT
@ -536,6 +536,9 @@ AUGMENT
</div> </div>
<div className="containerC"> <div className="containerC">
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Damage Stats</h1></div> <h1>Damage Stats</h1></div>
@ -686,6 +689,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>}} 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>99</span><span>+</span></div>
</li>
</SelectorWindow>
</> </>
) )
} }

95
src/style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save