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

Merge branch 'master' of https://github.com/sigonasr2/ngsplanner

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-23 19:20:22 +09:00
commit a88bda5528
2 changed files with 67 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/TestPanel.js
View File

@ -398,6 +398,65 @@ useEffect(()=>{
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div className="statsInfo">
<table>
<tbody>
<tr>
<td>Battle Power</td>
<td>{p.bp}</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>
</tr>
<tr>
<td>HP</td>
<td>{p.hp}</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>
</tr>
<tr>
<td>PP</td>
<td>{p.pp}</td>
<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>
</tr>
<tr>
<td>Attack</td>
<td>{p.statDisplayAtk}</td>
<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>
</tr>
<tr>
<td>Defense</td>
<td>{p.def}</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>
</tr>
<tr>
<td>Weapon Up</td>
<td><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></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Ailment Resist.</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>
</tr>
<tr>
<td>Damage Resist.</td>
<td>{(p.damageResist*100).toFixed(1)}%</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">

14
src/style.css
View File

@ -131,7 +131,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
border-spacing: 0; border-spacing: 0;
color: white; color: white;
margin: 10px auto; margin: 10px auto;
width: 95%;
} }
.box tr { .box tr {
/* background-image: url("tr_bg.png");*/ /* background-image: url("tr_bg.png");*/
@ -163,19 +162,21 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
height: 8px; height: 8px;
} }
.statsInfo { .statsInfo {
background-color:rgba(0,0,0,0.33);
margin: 0 10px;
padding: 5px;
}
.statsInfo > table {
table-layout:fixed; table-layout:fixed;
width: 100%; width: 100%;
line-height: 23px; line-height: 23px;
} }
.statsInfo td:nth-child(2) { .statsInfo > table td:nth-child(2) {
text-align: right; text-align: right;
} }
.statsInfo td:nth-child(3) { .statsInfo > table td:nth-child(3) {
width: 50%; width: 50%;
} }
/*.statsInfo span {
}*/
.boxTitleBar { .boxTitleBar {
background-color: rgba(124, 144, 148, 0.66); background-color: rgba(124, 144, 148, 0.66);
color: white; color: white;
@ -228,6 +229,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
table-layout:fixed; table-layout:fixed;
width: 100%; width: 100%;
line-height: 23px; line-height: 23px;
margin: 0 5px;
} }
.basicInfo td:nth-child(3) { .basicInfo td:nth-child(3) {
width: 33%; width: 33%;