From 0b0639dcfd981c9a906a6a52c8a0929d99cb2d94 Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Wed, 25 Aug 2021 06:32:45 +0900
Subject: [PATCH] food buff menu

---
 src/TestPanel.js | 59 +++++++++++++++++++-----------
 src/style.css    | 95 +++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 110 insertions(+), 44 deletions(-)

diff --git a/src/TestPanel.js b/src/TestPanel.js
index e2e701f..0d5f5fe 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -63,7 +63,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){
@@ -308,6 +308,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)
@@ -369,24 +370,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 />
@@ -399,7 +400,7 @@ useEffect(()=>{
   <img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
 </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>
@@ -407,7 +408,7 @@ useEffect(()=>{
       <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
       
         
           
@@ -459,9 +460,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 
 
 
@@ -536,6 +536,9 @@ AUGMENT
 
       </div>
       <div className="containerC">
+
+
+
       <div className="box">
       <div className="boxTitleBar">
       <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>}}
   />
 
+<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>
+
 </>
 )
 }
diff --git a/src/style.css b/src/style.css
index 4a8570f..1acd5c6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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,49 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	box-sizing: content-box;
 	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 {
     background-image: url("./icons/NGSUIRarity1Star.png");
 }
@@ -860,19 +912,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 +928,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 +1392,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 +1406,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));