componentize layout
This commit is contained in:
parent
2213088df9
commit
5e5434fee1
@ -27,7 +27,7 @@ body {
|
|||||||
background-size: 1903px,2560px;
|
background-size: 1903px,2560px;
|
||||||
background-color: #e8ecf4;
|
background-color: #e8ecf4;
|
||||||
background-repeat: no-repeat,repeat-y;
|
background-repeat: no-repeat,repeat-y;
|
||||||
background-position: center;
|
background-position: center 0px;
|
||||||
color: black;
|
color: black;
|
||||||
font-family: ngs,sans-serif;
|
font-family: ngs,sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -306,4 +306,9 @@ td:last-child {
|
|||||||
}
|
}
|
||||||
.ye {
|
.ye {
|
||||||
color: #ffb74c;
|
color: #ffb74c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover:hover{
|
||||||
|
background-color:rgba(255,255,0,0.4);
|
||||||
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
@ -1,183 +1,191 @@
|
|||||||
import logo from './logo.svg';
|
import logo from './logo.svg';
|
||||||
import './App.css';
|
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div className="con">
|
<Col>
|
||||||
<div className="box">
|
<MainBox/>
|
||||||
<h1>♦ NGS Planner</h1>
|
<StatsBox/>
|
||||||
<table className="ba">
|
<EffectsBox/>
|
||||||
<tr>
|
</Col>
|
||||||
<td>Author</td>
|
<Col>
|
||||||
<td> </td>
|
<EquipBox/>
|
||||||
<td>Dudley</td>
|
<EquippedWeaponBox/>
|
||||||
</tr>
|
</Col>
|
||||||
<tr>
|
<Col>
|
||||||
<td>Build Name</td>
|
<DamageBox/>
|
||||||
<td> </td>
|
</Col>
|
||||||
<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>
|
|
||||||
</div></>
|
</div></>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user