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

Fix invalid <table> DOM nesting

Browse Source
This commit is contained in:
Joshua Sigona 2021-07-11 19:03:00 +09:00
parent 13f29810bd
commit b291ae9e3b
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.js
View File

@ -166,20 +166,28 @@ function EditableClass(p){
</> </>
} }
function Table(p) {
return <table className={p.classes}>
<tbody>
{p.children}
</tbody>
</table>
}
function MainBox(p) { function MainBox(p) {
return <Box title="NGS Planner"> return <Box title="NGS Planner">
<table className="ba"> <Table classes="ba">
<ListRow title="Author"><EditableBox setData={p.setAuthor} data={p.author}/></ListRow> <ListRow title="Author"><EditableBox setData={p.setAuthor} data={p.author}/></ListRow>
<ListRow title="Build Name"><EditableBox setData={p.setBuildName} data={p.buildName}/></ListRow> <ListRow title="Build Name"><EditableBox setData={p.setBuildName} data={p.buildName}/></ListRow>
<ListRow title="Class" content={<EditableClass setClassName={p.setClassName} class={p.className}></EditableClass>}><span className="ye">Lv.20</span></ListRow> <ListRow title="Class" content={<EditableClass setClassName={p.setClassName} class={p.className}></EditableClass>}><span className="ye">Lv.20</span></ListRow>
<ListRow content={<><EditableClass setClassName={p.setSecondaryClassName} class={p.secondaryClassName}></EditableClass></>}>Lv.15</ListRow> <ListRow content={<><EditableClass setClassName={p.setSecondaryClassName} class={p.secondaryClassName}></EditableClass></>}>Lv.15</ListRow>
</table> </Table>
</Box> </Box>
} }
function StatsBox(p) { function StatsBox(p) {
return <Box title="Stats"> return <Box title="Stats">
<table className="st"> <Table classes="st">
<ListRow title="Battle Power" content={p.bp}></ListRow> <ListRow title="Battle Power" content={p.bp}></ListRow>
<ListRow title="HP" content={p.hp}></ListRow> <ListRow title="HP" content={p.hp}></ListRow>
<ListRow title="PP" content={p.pp}></ListRow> <ListRow title="PP" content={p.pp}></ListRow>
@ -187,7 +195,7 @@ function StatsBox(p) {
<ListRow title="Weapon Up" content={<><img alt="" src="/ngsplanner/icons/MEL.png" /> <span className="ye">+{p.weaponUp1*100}%</span></>}><img alt="" src="/ngsplanner/icons/RNG.png" /> <span className="ye">+{p.weaponUp2*100}%</span></ListRow> <ListRow title="Weapon Up" content={<><img alt="" src="/ngsplanner/icons/MEL.png" /> <span className="ye">+{p.weaponUp1*100}%</span></>}><img alt="" src="/ngsplanner/icons/RNG.png" /> <span className="ye">+{p.weaponUp2*100}%</span></ListRow>
<ListRow content={<><img alt="" src="/ngsplanner/icons/TEC.png" /> <span className="ye">+{p.weaponUp3*100}%</span></>}></ListRow> <ListRow content={<><img alt="" src="/ngsplanner/icons/TEC.png" /> <span className="ye">+{p.weaponUp3*100}%</span></>}></ListRow>
<ListRow title="Damage Resist." content={p.damageResist*100+"%"}></ListRow> <ListRow title="Damage Resist." content={p.damageResist*100+"%"}></ListRow>
</table> </Table>
</Box> </Box>
} }
@ -309,13 +317,13 @@ function DamageBox(p) {
<br /><br /> <br /><br />
{ {
currentPage===1&& currentPage===1&&
<table className="ba"> <Table classes="ba">
<ListRow title="Critical Hit Rate">{p.criticalHitRate*100}%</ListRow> <ListRow title="Critical Hit Rate">{p.criticalHitRate*100}%</ListRow>
<ListRow title="Critical Multiplier">{p.criticalMultiplier*100}%</ListRow> <ListRow title="Critical Multiplier">{p.criticalMultiplier*100}%</ListRow>
<ListRow title="Midrange">{p.midRange}</ListRow> <ListRow title="Midrange">{p.midRange}</ListRow>
<ListRow title="Critical">{p.critical}</ListRow> <ListRow title="Critical">{p.critical}</ListRow>
<ListRow title="Effective"><span className="ye">{p.effective}</span></ListRow> <ListRow title="Effective"><span className="ye">{p.effective}</span></ListRow>
</table> </Table>
} }
</Box> </Box>
} }