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

componentize layout

Browse Source
master
Joshua Sigona 3 years ago
parent 2213088df9
commit 5e5434fee1
2 changed files with 187 additions and 174 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      ngoplanner/src/App.css
  2. 212
      ngoplanner/src/App.js

7
ngoplanner/src/App.css
Unescape 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
Unescape 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></>
);
}

Write Preview
Loading…
Cancel
Save