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. 354
      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;
@ -306,4 +306,9 @@ td:last-child {
}
.ye {
color: #ffb74c;
}
.hover:hover{
background-color:rgba(255,255,0,0.4);
cursor:pointer;
}

354
ngoplanner/src/App.js
Unescape View File

@ -1,183 +1,191 @@
import logo from './logo.svg';
import './App.css';
import React, {useState,useEffect,useRef} from 'react';
function Col(p) {
return <div className="con">
{p.children}
</div>
}
function Box(p) {
return <>
<div className="box">
<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">
<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>
</Box>
}
function StatsBox() {
return <Box title="Stats">
<table className="st">
<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>
</Box>
}
function EffectsBox() {
return <Box title="Current Effects">
<ul className="boxmenu">
<li>1</li>
<li>2</li>
</ul>
<h3>Effect Name</h3>
<ul className="bu">
<li>Food Bost Effect
<ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
</ul>
</li>
<li>Shifta / Deband
<ul>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li>
</ul>
</li>
<li>Region Mag Boost
<ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul>
</li>
</ul>
</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>
</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>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div className="de">
<div>
<h3>Abilitiy Details</h3>
<ul className="aug">
<li><img alt="" src="https://pso2.arks-visiphone.com/images/8/8d/NGSUIItemPotentialAbility.png" /> Wellspring Unit Lv.3</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/7/7e/UINGSItemPresetAbility.png" /> Fixa Fatale Lv.5</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Attack II</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Efficet</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Efficet</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Souls 2</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Reverij</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Factalz</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Crakus</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Attack Vaz III</li>
</ul>
</div>
<div>
<h3>Properties</h3>
<ul className="pr">
<li>Enhancement Lv.&emsp;<span>+35</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<span>-</span></li>
</ul>
</div>
</div>
</Box>
}
function DamageBox() {
return <Box title="Damage">
<ul className="boxmenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<br /><br />
<table className="ba">
<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>
</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">
<div className="con">
<div className="box">
<h1>&#9830;&ensp;NGS Planner</h1>
<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>
</table>
</div>
<div className="box">
<h1>&#9830;&ensp;Stats</h1>
<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>
</table>
</div>
<div className="box">
<h1>&#9830;&ensp;Current Effects</h1>
<ul className="boxmenu">
<li>1</li>
<li>2</li>
</ul>
<h3>Effect Name</h3>
<ul className="bu">
<li>Food Bost Effect
<ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
</ul>
</li>
<li>Shifta / Deband
<ul>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li>
</ul>
</li>
<li>Region Mag Boost
<ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul>
</li>
</ul>
</div>
</div>
<div className="con">
<div className="box">
<h1>&#9830;&ensp;Equip</h1>
<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>
<h2><img alt="" src="https://pso2na.arks-visiphone.com/images/b/bc/NGSUIItemAssaultRifleMini.png" />Ophistia Shooter+35</h2>
<ul className="boxmenu">
<li>W</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div className="de">
<div>
<h3>Abilitiy Details</h3>
<ul className="aug">
<li><img alt="" src="https://pso2.arks-visiphone.com/images/8/8d/NGSUIItemPotentialAbility.png" /> Wellspring Unit Lv.3</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/7/7e/UINGSItemPresetAbility.png" /> Fixa Fatale Lv.5</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Attack II</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Efficet</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro S Efficet</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Souls 2</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Reverij</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Factalz</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Crakus</li>
<li><img alt="" src="https://pso2na.arks-visiphone.com/images/5/56/UINGSItemSpecialAbility.png" /> Legaro Attack Vaz III</li>
</ul>
</div>
<div>
<h3>Properties</h3>
<ul className="pr">
<li>Enhancement Lv.&emsp;<span>+35</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<span>-</span></li>
</ul>
</div>
</div>
</div>
</div>
<div className="con">
<div className="box">
<h1>&#9830;&ensp;Damage</h1>
<ul className="boxmenu">
<li>1</li>
<li>2</li>
<li>3</li>
</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>
</table>
</div>
</div>
<Col>
<MainBox/>
<StatsBox/>
<EffectsBox/>
</Col>
<Col>
<EquipBox/>
<EquippedWeaponBox/>
</Col>
<Col>
<DamageBox/>
</Col>
</div></>
);
}

Write Preview
Loading…
Cancel
Save