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

componentize layout

Browse Source
This commit is contained in:
Joshua Sigona 2021-06-26 14:27:45 +09:00
parent 2213088df9
commit 5e5434fee1
2 changed files with 187 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ngoplanner/src/App.css
View File

@ -27,7 +27,7 @@ body {
background-size: 1903px,2560px;
background-color: #e8ecf4;
background-repeat: no-repeat,repeat-y;
background-position: center;
background-position: center 0px;
color: black;
font-family: ngs,sans-serif;
font-size: 16px;
@ -307,3 +307,8 @@ td:last-child {
.ye {
color: #ffb74c;
}
.hover:hover{
background-color:rgba(255,255,0,0.4);
cursor:pointer;
}

212
ngoplanner/src/App.js
View File

@ -1,78 +1,74 @@
import logo from './logo.svg';
import './App.css';
import React, {useState,useEffect,useRef} from 'react';
function App() {
return (
<>
<div id="main">
<div className="con">
function Col(p) {
return <div className="con">
{p.children}
</div>
}
function Box(p) {
return <>
<div className="box">
<h1>&#9830;&ensp;NGS Planner</h1>
<h1>&#9830;&ensp;{p.title}</h1>
{p.children}
</div>
</>
}
function EditBox(p) {
const [loaded,setLoaded] = useState(false)
useEffect(()=>{
setTimeout(()=>{document.getElementById("editBox").focus()},100)
setLoaded(true)
})
return <input id="editBox" onKeyDown={(e)=>{
if (e.key==="Enter") {p.setEdit(false)}
}} maxLength={p.maxlength?p.maxlength:20} onBlur={()=>{p.setEdit(false)}} value={p.value} onChange={(f)=>{p.setName(f.currentTarget.value)}}>
</input>
}
function EditableBox(p) {
const [name,setName] = useState(p.data)
const [edit,setEdit] = useState(false)
return <>
<div className="hover" onClick={(f)=>{setEdit(true)}}>
{edit?
<EditBox maxlength={p.maxlength} setEdit={setEdit} setName={setName} value={name}/>
:<>{name}</>}
</div>
</>
}
function MainBox() {
return <Box title="NGS Planner">
<table className="ba">
<tr>
<td>Author</td>
<td>&nbsp;</td>
<td>Dudley</td>
</tr>
<tr>
<td>Build Name</td>
<td>&nbsp;</td>
<td>Fatimah</td>
</tr>
<tr>
<td>Class</td>
<td><img alt="" src="https://pso2na.arks-visiphone.com/images/8/87/UINGSClassRa.png" /> Ranger</td>
<td><span className="ye">Lv.20</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img alt="" src="https://pso2na.arks-visiphone.com/images/3/39/UINGSClassFo.png" /> Force</td>
<td>Lv.15</td>
</tr>
<ListRow title="Author"><EditableBox data="Dudley"/></ListRow>
<ListRow title="Build Name"><EditableBox data="Fatimah"/></ListRow>
<ListRow title="Class" content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/8/87/UINGSClassRa.png" /> Ranger</>}><span className="ye">Lv.20</span></ListRow>
<ListRow content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/3/39/UINGSClassFo.png" /> Force</>}>Lv.15</ListRow>
</table>
</div>
<div className="box">
<h1>&#9830;&ensp;Stats</h1>
</Box>
}
function StatsBox() {
return <Box title="Stats">
<table className="st">
<tr>
<td>Battle Power</td>
<td className="ri">1344</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>HP</td>
<td>289</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>PP</td>
<td>100</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Defense</td>
<td>402</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Weapon Up</td>
<td><img alt="" src="https://pso2na.arks-visiphone.com/images/3/37/NGSUIStatSATK.png" /> <span className="ye">+34%</span></td>
<td><img alt="" src="https://pso2na.arks-visiphone.com/images/c/c5/NGSUIStatRATK.png" /> <span className="ye">+34%</span></td>
</tr>
<tr>
<td></td>
<td><img alt="" src="https://pso2na.arks-visiphone.com/images/a/ae/NGSUIStatTATK.png" /> <span className="ye">+34%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Damage Resist.</td>
<td>18%</td>
<td>&nbsp;</td>
</tr>
<ListRow title="Battle Power" content={1344}></ListRow>
<ListRow title="HP" content={289}></ListRow>
<ListRow title="PP" content={100}></ListRow>
<ListRow title="Defense" content={402}></ListRow>
<ListRow title="Weapon Up" content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/3/37/NGSUIStatSATK.png" /> <span className="ye">+34%</span></>}><img alt="" src="https://pso2na.arks-visiphone.com/images/c/c5/NGSUIStatRATK.png" /> <span className="ye">+34%</span></ListRow>
<ListRow content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/a/ae/NGSUIStatTATK.png" /> <span className="ye">+34%</span></>}></ListRow>
<ListRow title="Damage Resist." content="18%"></ListRow>
</table>
</div>
<div className="box">
<h1>&#9830;&ensp;Current Effects</h1>
</Box>
}
function EffectsBox() {
return <Box title="Current Effects">
<ul className="boxmenu">
<li>1</li>
<li>2</li>
@ -97,20 +93,22 @@ function App() {
</ul>
</li>
</ul>
</div>
</div>
<div className="con">
<div className="box">
<h1>&#9830;&ensp;Equip</h1>
</Box>
}
function EquipBox() {
return <Box title="Equip">
<div className="we">
<div><h3>Weapon</h3><br /><img alt="" src="https://i.imgur.com/uc1iBck.png" /><br />Ophistia Shooter+35</div>
<div><h3>Slot 1</h3><br /><img alt="" src="https://i.imgur.com/uldt9lR.png" /><br />Klauzdyne+10</div>
<div><h3>Slot 2</h3><br /><img alt="" src="https://i.imgur.com/F0t58xP.png" /><br />Klauznum+10</div>
<div><h3>Slot 3</h3><br /><img alt="" src="https://i.imgur.com/20M6Z7t.png" /><br />Klauzment+10</div>
</div>
</div>
<div className="box">
<h1>&#9830;&ensp;Equipped Weapon</h1>
</Box>
}
function EquippedWeaponBox() {
return <Box title="Equipped Weapon">
<h2><img alt="" src="https://pso2na.arks-visiphone.com/images/b/bc/NGSUIItemAssaultRifleMini.png" />Ophistia Shooter+35</h2>
<ul className="boxmenu">
<li>W</li>
@ -143,11 +141,11 @@ function App() {
</ul>
</div>
</div>
</div>
</div>
<div className="con">
<div className="box">
<h1>&#9830;&ensp;Damage</h1>
</Box>
}
function DamageBox() {
return <Box title="Damage">
<ul className="boxmenu">
<li>1</li>
<li>2</li>
@ -155,29 +153,39 @@ function App() {
</ul>
<br /><br />
<table className="ba">
<tr>
<td>Critical Hit Rate</td>
<td>5%</td>
</tr>
<tr>
<td>Critical Multiplier</td>
<td>120%</td>
</tr>
<tr>
<td>Midrange</td>
<td>126</td>
</tr>
<tr>
<td>Critcal</td>
<td>152</td>
</tr>
<tr>
<td>Effective</td>
<td><span className="ye">127</span></td>
</tr>
<ListRow title="Critical Hit Rate">5%</ListRow>
<ListRow title="Critical Multiplier">120%</ListRow>
<ListRow title="Midrange">126</ListRow>
<ListRow title="Critical">152</ListRow>
<ListRow title="Effective"><span className="ye">127</span></ListRow>
</table>
</div>
</div>
</Box>
}
function ListRow(p) {
return <tr>
<td>{p.title}</td>
<td>{p.content}</td>
<td>{p.children}</td>
</tr>
}
function App() {
return (
<>
<div id="main">
<Col>
<MainBox/>
<StatsBox/>
<EffectsBox/>
</Col>
<Col>
<EquipBox/>
<EquippedWeaponBox/>
</Col>
<Col>
<DamageBox/>
</Col>
</div></>
);
}