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

food buff menu

Browse Source
This commit is contained in:
dudleycu 2021-08-25 06:32:45 +09:00
parent 99c17a114a
commit 0b0639dcfd
2 changed files with 108 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/TestPanel.js
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
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));