Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
master
Joshua Sigona 3 years ago
parent 43d0a6eb7e
commit 1363c8c835
  1. BIN
      public/icons/status/blind.png
  2. BIN
      public/icons/status/burn.png
  3. BIN
      public/icons/status/freeze.png
  4. BIN
      public/icons/status/panic.png
  5. BIN
      public/icons/status/poison.png
  6. BIN
      public/icons/status/shock.png
  7. BIN
      public/icons/status/stun.png
  8. 16
      src/App.js
  9. 443
      src/TestPanel.js
  10. 21
      src/style.css

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 807 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 791 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 824 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 756 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 805 B

@ -965,6 +965,13 @@ function App() {
const [weaponUp2,setWeaponUp2] = useState(0.241) const [weaponUp2,setWeaponUp2] = useState(0.241)
const [weaponUp3,setWeaponUp3] = useState(0.241) const [weaponUp3,setWeaponUp3] = useState(0.241)
const [damageResist,setDamageResist] = useState(0.18) const [damageResist,setDamageResist] = useState(0.18)
const [burnResist,setburnResist] = useState(0)
const [shockResist,setshockResist] = useState(0)
const [panicResist,setpanicResist] = useState(0)
const [stunResist,setstunResist] = useState(0)
const [freezeResist,setfreezeResist] = useState(0)
const [blindResist,setblindResist] = useState(0)
const [poisonResist,setpoisonResist] = useState(0)
const [effectList,setEffectList] = useState([ const [effectList,setEffectList] = useState([
"Food Boost Effect", "Food Boost Effect",
@ -1051,7 +1058,14 @@ function App() {
weaponUp1={weaponUp1} weaponUp1={weaponUp1}
weaponUp2={weaponUp2} weaponUp2={weaponUp2}
weaponUp3={weaponUp3} weaponUp3={weaponUp3}
damageResist={damageResist} damageResist={damageResist}
burnResist={burnResist}
shockResist={shockResist}
panicResist={panicResist}
stunResist={stunResist}
freezeResist={freezeResist}
blindResist={blindResist}
poisonResist={poisonResist}
statDisplayAtk={statDisplayAtk} statDisplayAtk={statDisplayAtk}
GetData={GetData} GetData={GetData}
/> />

@ -213,230 +213,216 @@ useEffect(()=>{
return (<> return (<>
<div className="main"> <div className="main">
<div className="containerA"> <div className="containerA">
<div className="box basicInfoBox"> <div className="box basicInfoBox">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Information</h1></div> <h1>Basic Information</h1></div>
<table className="basicInfoTable"> <table className="basicInfoTable">
<tr> <tr>
<td>Author</td> <td>Author</td>
<td colspan="2"><EditBoxInput setData={setauthor} data={author}/></td> <td colspan="2"><EditBoxInput setData={setauthor} data={author}/></td>
</tr> </tr>
<tr> <tr>
<td>Build Name</td> <td>Build Name</td>
<td colspan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td> <td colspan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
</tr> </tr>
<tr> <tr>
<td onClick={()=>{setClassSelectWindowOpen(true)}} >Class</td> <td onClick={()=>{setClassSelectWindowOpen(true)}} >Class</td>
<td> <td>
<EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass> <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
</td> </td>
<td> <td>
<span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span> <span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Sub-Class</td> <td>Sub-Class</td>
<td> <td>
<EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass> <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
</td> </td>
<td> <td>
<EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/> <EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div className="box"> <div className="box">
<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}/>
<h3>Effect Name</h3> <h3>Effect Name</h3>
<ul className="infoBuffs"> <ul className="infoBuffs">
{ {
effectPage===1?<><li>Food Boost Effect effectPage===1?<><li>Food Boost Effect
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
</ul> </ul>
</li> </li>
<li>Shifta / Deband <li>Shifta / Deband
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li> <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li> <li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li>
</ul> </ul>
</li> </li>
<li>Region Mag Boost <li>Region Mag Boost
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li> <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul>
</li></>:<></>
}
</ul> </ul>
</li></>:<></> </div>
} </div>
</ul> <div className="containerB">
</div> <div className="box">
</div> <div className="boxTitleBar">
<div className="containerB"> <h1>Equip</h1></div>
<div className="box"> <div className="equipPalette">
<div className="boxTitleBar"> <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src="https://i.imgur.com/Xvx0qvt.png" /></div></div>
<h1>Equip</h1></div> <div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
<div className="equipPalette"> <div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src="https://i.imgur.com/Xvx0qvt.png" /></div></div> <div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div> </div>
<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div> </div>
<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
</div> <div className="box">
</div> <div className="boxTitleBar">
<div className="box"> <h1>Equipped Weapon</h1></div>
<div className="boxTitleBar"> <h2 className="rifle">Resurgir Rifle+40</h2>
<h1>Equipped Weapon</h1></div> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}/>
<h2 className="rifle">Resurgir Rifle+40</h2> <div className="equipDetails">
<PageControl pages={6} currentPage={weaponPage} setCurrentPage={setWeaponPage}/> <div className="equipAugs">
<div className="equipDetails"> {weaponPage===1?
<div className="equipAugs"> <ul>
<h3>Abilitiy Details</h3> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li>
{weaponPage===1? <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li>
<ul> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>PP +5<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Pettas Soul II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>PP +5<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Pettas Soul II</span></li> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li> <li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li> </ul>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li> :
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <>hi</>
</ul> }
: </div>
<ul> </div>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> </div>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> </div>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <div className="containerC">
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <div className="box">
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <div className="boxTitleBar">
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <h1>Basic Stats</h1></div>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <table className="statsInfo">
</ul> <tr>
} <td>Battle Power</td>
</div> <td>{p.bp}</td>
<div className="pr"> <td colspan="2"><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></td>
<h3>Properties</h3> </tr>
{weaponPage===1? <tr>
<ul> <td>HP</td>
<li>Enhancement Lv.&emsp;<span>+35</span></li> <td>{p.hp}</td>
<li>Multi-Weapon&emsp;<span>-</span></li> <td colspan="2"><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></td>
<li>Element&emsp;<span>-</span></li> </tr>
</ul>: <tr>
<ul> <td>PP</td>
<li>Enhancement Lv.&emsp;<span>-</span></li> <td>{p.pp}</td>
<li>Multi-Weapon&emsp;<span>-</span></li> <td colspan="2"><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></td>
<li>Element&emsp;<span>-</span></li> </tr>
</ul> <tr>
} <td>Attack</td>
</div> <td>{p.statDisplayAtk}</td>
</div> <td colspan="2"><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></td>
</div> </tr>
</div> <tr>
<div className="containerC"> <td>Defense</td>
<div className="box"> <td>{p.def}</td>
<div className="boxTitleBar"> <td colspan="2"><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></td>
<h1>Basic Stats</h1></div> </tr>
<table className="statsInfo"> <tr>
<tr> <td>Weapon Up</td>
<td>Battle Power</td> <td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<td>{p.bp}</td> <img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td colspan="2"><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></td> <td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>HP</td> <tr>
<td>{p.hp}</td> <td>Ailment Resist.</td>
<td colspan="2"><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></td> <td>
</tr> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br />
<tr> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
<td>PP</td> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br />
<td>{p.pp}</td> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br />
<td colspan="2"><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></td> </td>
</tr> <td>
<tr> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br />
<td>Attack</td> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br />
<td>{p.statDisplayAtk}</td> <img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
<td colspan="2"><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></td> </td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>Defense</td> <tr>
<td>{p.def}</td> <td>Damage Resist.</td>
<td colspan="2"><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></td> <td>{(p.damageResist*100).toFixed(1)}%</td>
</tr> <td>&nbsp;</td>
<tr> <td>&nbsp;</td>
<td>Weapon Up</td> </tr>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br /> </table>
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td> </div>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td> <div className="box">
<td>&nbsp;</td> <div className="boxTitleBar">
</tr> <h1>Damage Stats</h1></div>
<tr> <PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
<td>Ailment Resist.</td> <table className="basicInfo">
<td>{p.damageResist}</td> {statPage===1?<>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>Critical Hit Rate</td>
</tr> <td>5%</td>
<tr> </tr>
<td>Damage Resist.</td> <tr>
<td>{p.damageResist}</td> <td>Critical Multiplier</td>
<td>&nbsp;</td> <td>120%</td>
<td>&nbsp;</td> </tr>
</tr> <tr>
</table> <td>Midrange</td>
</div> <td>126</td>
<div className="box"> </tr>
<div className="boxTitleBar"> <tr>
<h1>Damage Stats</h1></div> <td>Critcal</td>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/> <td>152</td>
<table className="basicInfo"> </tr>
{statPage===1?<> <tr>
<tr> <td>Effective</td>
<td>Critical Hit Rate</td> <td><span className="ye">127</span></td>
<td>5%</td> </tr>
</tr> </>:<>
<tr> <tr>
<td>Critical Multiplier</td> <td>Critical Hit Rate</td>
<td>120%</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>Midrange</td> <td>Critical Multiplier</td>
<td>126</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>Critcal</td> <td>Midrange</td>
<td>152</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>Effective</td> <td>Critcal</td>
<td><span className="ye">127</span></td> <td>-</td>
</tr> </tr>
</>:<> <tr>
<tr> <td>Effective</td>
<td>Critical Hit Rate</td> <td><span className="ye">-</span></td>
<td>-</td> </tr>
</tr> </>
<tr> }
<td>Critical Multiplier</td> </table>
<td>-</td> </div>
</tr> </div>
<tr>
<td>Midrange</td>
<td>-</td>
</tr>
<tr>
<td>Critcal</td>
<td>-</td>
</tr>
<tr>
<td>Effective</td>
<td><span className="ye">-</span></td>
</tr>
</>
}
</table>
</div>
</div>
</div> </div>
<SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow> <SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow>
@ -451,7 +437,14 @@ useEffect(()=>{
var weapon_type=p.GetData("weapon_type",we.weapon_type_id,undefined,true) var weapon_type=p.GetData("weapon_type",we.weapon_type_id,undefined,true)
var weapon=p.GetData("weapon",we.weapon_id,undefined,true) var weapon=p.GetData("weapon",we.weapon_id,undefined,true)
var potential=p.GetData("potential",weapon.potential_id,undefined,true) var potential=p.GetData("potential",weapon.potential_id,undefined,true)
return [weapon_type,weapon,potential] var potential_all=p.GetData("potential_data")
var potential_tooltip=[]
for (var pot in potential_all) {
if (pot.includes(potential.name)) {
potential_tooltip.push(p.GetData("potential_data",pot))
}
}
return [weapon_type,weapon,potential,potential_tooltip]
}):[] }):[]
}} }}
filterFunction={(page,item)=>{ filterFunction={(page,item)=>{
@ -471,7 +464,9 @@ useEffect(()=>{
default:return 0 default:return 0
} }
}} }}
displayFunction={(item)=><li className={"itemwep r"+item[1].rarity}><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em><br /><span className="atk">{item[1].atk}</span> <span className="pot tooltip">{item[2].name}<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>} displayFunction={(item)=>{
return <li className={"itemwep r"+item[1].rarity}><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em><br /><span className="atk">{item[1].atk}</span> <span className="pot tooltip">{item[2].name} <span>{item[3].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description.replace("\\n","\n")}</>)}</span></span></li>}}
/> />
</> </>

@ -970,37 +970,30 @@ button{
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)); background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8));
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
justify-content: stretch; align-items: center;
grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr); grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px; grid-template-rows: 10px minmax(0, 1fr) 10px;
animation: fadeIn 0.15s;
} }
@keyframes fadeIn {
0% {opacity:0;top:-30px;}
100% {opacity:1;top:0;}
}
.modal { .modal {
outline: 0; outline: 0;
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
.boxModal { .boxModal {
animation: fadeIn 0.15s;
max-width: 580px; max-width: 580px;
margin: 0 auto; margin: 0 auto;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1); outline: 1px solid rgba(54,255,255,1);
} }
@keyframes fadeIn {
0% {opacity:0;margin-bottom:30px;}
100% {opacity:1;margin-bottom:0;}
}
.boxModal .boxTitleBar { .boxModal .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1)); background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
} }
/* box hover, save bcuz i will use this in popup menu
.box:hover {
outline: 1px solid rgba(54,255,255,1);
}
.box:hover .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
}
*/
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;

Loading…
Cancel
Save