componentize layout
This commit is contained in:
parent
2213088df9
commit
5e5434fee1
@ -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;
|
||||
}
|
||||
@ -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>♦ {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" /> [Meat] Potency +10.0%</li>
|
||||
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Shifta / Deband
|
||||
<ul>
|
||||
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li>
|
||||
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Region Mag Boost
|
||||
<ul>
|
||||
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> 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. <span>+35</span></li>
|
||||
<li>Multi-Weapon <span>-</span></li>
|
||||
<li>Element <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>♦ NGS Planner</h1>
|
||||
<table className="ba">
|
||||
<tr>
|
||||
<td>Author</td>
|
||||
<td> </td>
|
||||
<td>Dudley</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Build Name</td>
|
||||
<td> </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> </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>♦ Stats</h1>
|
||||
<table className="st">
|
||||
<tr>
|
||||
<td>Battle Power</td>
|
||||
<td className="ri">1344</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HP</td>
|
||||
<td>289</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PP</td>
|
||||
<td>100</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Defense</td>
|
||||
<td>402</td>
|
||||
<td> </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> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Damage Resist.</td>
|
||||
<td>18%</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div className="box">
|
||||
<h1>♦ 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" /> [Meat] Potency +10.0%</li>
|
||||
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Shifta / Deband
|
||||
<ul>
|
||||
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li>
|
||||
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Region Mag Boost
|
||||
<ul>
|
||||
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> Potency +5.0%</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="con">
|
||||
<div className="box">
|
||||
<h1>♦ 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>♦ 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. <span>+35</span></li>
|
||||
<li>Multi-Weapon <span>-</span></li>
|
||||
<li>Element <span>-</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="con">
|
||||
<div className="box">
|
||||
<h1>♦ 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></>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user