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

Add stuff

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-09 21:02:22 +09:00
parent 43d0a6eb7e
commit 1363c8c835
10 changed files with 241 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icons/status/blind.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 B

BIN
public/icons/status/burn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 807 B

BIN
public/icons/status/freeze.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 784 B

BIN
public/icons/status/panic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 791 B

BIN
public/icons/status/poison.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 824 B

BIN
public/icons/status/shock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 B

BIN
public/icons/status/stun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 805 B

14
src/App.js
View File

@ -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",
@ -1052,6 +1059,13 @@ function App() {
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}
/> />

165
src/TestPanel.js
View File

@ -213,12 +213,12 @@ 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>
@ -230,7 +230,7 @@ useEffect(()=>{
<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>
@ -245,14 +245,14 @@ useEffect(()=>{
<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>
@ -272,29 +272,29 @@ useEffect(()=>{
</ul> </ul>
</li></>:<></> </li></>:<></>
} }
</ul> </ul>
</div> </div>
</div> </div>
<div className="containerB"> <div className="containerB">
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equip</h1></div> <h1>Equip</h1></div>
<div className="equipPalette"> <div className="equipPalette">
<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 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 1</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 className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></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 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 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src="https://i.imgur.com/GtusK2X.png" /></div></div>
</div> </div>
</div> </div>
<div className="box">
<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={6} currentPage={weaponPage} setCurrentPage={setWeaponPage}/> <h2 className="rifle">Resurgir Rifle+40</h2>
<div className="equipDetails"> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}/>
<div className="equipAugs"> <div className="equipDetails">
<h3>Abilitiy Details</h3> <div className="equipAugs">
{weaponPage===1? {weaponPage===1?
<ul> <ul>
<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={<>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={<>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={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li>
@ -304,41 +304,18 @@ useEffect(()=>{
<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={<>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> <li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
</ul> </ul>
: :
<ul> <>hi</>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> }
<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>
<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">
</ul> <div className="boxTitleBar">
} <h1>Basic Stats</h1></div>
</div> <table className="statsInfo">
<div className="pr">
<h3>Properties</h3>
{weaponPage===1?
<ul>
<li>Enhancement Lv.&emsp;<span>+35</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<span>-</span></li>
</ul>:
<ul>
<li>Enhancement Lv.&emsp;<span>-</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<span>-</span></li>
</ul>
}
</div>
</div>
</div>
</div>
<div className="containerC">
<div className="box">
<div className="boxTitleBar">
<h1>Basic Stats</h1></div>
<table className="statsInfo">
<tr> <tr>
<td>Battle Power</td> <td>Battle Power</td>
<td>{p.bp}</td> <td>{p.bp}</td>
@ -373,23 +350,32 @@ useEffect(()=>{
</tr> </tr>
<tr> <tr>
<td>Ailment Resist.</td> <td>Ailment Resist.</td>
<td>{p.damageResist}</td> <td>
<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/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br />
</td>
<td>
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> </tr>
</tr>
<tr> <tr>
<td>Damage Resist.</td> <td>Damage Resist.</td>
<td>{p.damageResist}</td> <td>{(p.damageResist*100).toFixed(1)}%</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> </tr>
</table> </table>
</div> </div>
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Damage Stats</h1></div> <h1>Damage Stats</h1></div>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/> <PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
<table className="basicInfo"> <table className="basicInfo">
{statPage===1?<> {statPage===1?<>
<tr> <tr>
<td>Critical Hit Rate</td> <td>Critical Hit Rate</td>
@ -434,9 +420,9 @@ useEffect(()=>{
</tr> </tr>
</> </>
} }
</table> </table>
</div> </div>
</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>}}
/> />
</> </>

21
src/style.css
View File

@ -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;