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

Move app variables to outer scope

Browse Source
This commit is contained in:
Joshua Sigona 2021-06-26 15:45:21 +09:00
parent 2aff73e055
commit 21894d0406
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ngoplanner/src/App.js
View File

@ -1,6 +1,6 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import React, {useState,useEffect,useRef} from 'react'; import React, {useState,useEffect,useRef,useReducer} from 'react';
function Col(p) { function Col(p) {
return <div className="con"> return <div className="con">
@ -31,13 +31,12 @@ return <input id="editBox" onKeyDown={(e)=>{
} }
function EditableBox(p) { function EditableBox(p) {
const [name,setName] = useState(p.data)
const [edit,setEdit] = useState(false) const [edit,setEdit] = useState(false)
return <> return <>
<div className="hover" onClick={(f)=>{setEdit(true)}}> <div className="hover" onClick={(f)=>{setEdit(true)}}>
{edit? {edit?
<EditBox maxlength={p.maxlength} setEdit={setEdit} originalName={name} setName={setName} value={name}/> <EditBox maxlength={p.maxlength} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
:<>{name}</>} :<>{p.data}</>}
</div> </div>
</> </>
} }
@ -91,20 +90,18 @@ function EditableClass(p){
</> </>
} }
function MainBox() { function MainBox(p) {
const [className,setClassName] = useState("RANGER")
const [secondaryClassName,setSecondaryClassName] = useState("FORCE")
return <Box title="NGS Planner"> return <Box title="NGS Planner">
<table className="ba"> <table className="ba">
<ListRow title="Author"><EditableBox data="Dudley"/></ListRow> <ListRow title="Author"><EditableBox setData={p.setAuthor} data={p.author}/></ListRow>
<ListRow title="Build Name"><EditableBox data="Fatimah"/></ListRow> <ListRow title="Build Name"><EditableBox setData={p.setBuildName} data={p.buildName}/></ListRow>
<ListRow title="Class" content={<EditableClass setClassName={setClassName} class={className}></EditableClass>}><span className="ye">Lv.20</span></ListRow> <ListRow title="Class" content={<EditableClass setClassName={p.setClassName} class={p.className}></EditableClass>}><span className="ye">Lv.20</span></ListRow>
<ListRow content={<><EditableClass setClassName={setSecondaryClassName} class={secondaryClassName}></EditableClass></>}>Lv.15</ListRow> <ListRow content={<><EditableClass setClassName={p.setSecondaryClassName} class={p.secondaryClassName}></EditableClass></>}>Lv.15</ListRow>
</table> </table>
</Box> </Box>
} }
function StatsBox() { function StatsBox(p) {
return <Box title="Stats"> return <Box title="Stats">
<table className="st"> <table className="st">
<ListRow title="Battle Power" content={1344}></ListRow> <ListRow title="Battle Power" content={1344}></ListRow>
@ -118,7 +115,7 @@ function StatsBox() {
</Box> </Box>
} }
function EffectsBox() { function EffectsBox(p) {
return <Box title="Current Effects"> return <Box title="Current Effects">
<ul className="boxmenu"> <ul className="boxmenu">
<li>1</li> <li>1</li>
@ -147,7 +144,7 @@ function EffectsBox() {
</Box> </Box>
} }
function EquipBox() { function EquipBox(p) {
return <Box title="Equip"> return <Box title="Equip">
<div className="we"> <div className="we">
<div><h3>Weapon</h3><br /><img alt="" src="https://i.imgur.com/uc1iBck.png" /><br />Ophistia Shooter+35</div> <div><h3>Weapon</h3><br /><img alt="" src="https://i.imgur.com/uc1iBck.png" /><br />Ophistia Shooter+35</div>
@ -158,7 +155,7 @@ function EquipBox() {
</Box> </Box>
} }
function EquippedWeaponBox() { function EquippedWeaponBox(p) {
return <Box title="Equipped Weapon"> return <Box title="Equipped Weapon">
<h2><img alt="" src="https://pso2na.arks-visiphone.com/images/b/bc/NGSUIItemAssaultRifleMini.png" />Ophistia Shooter+35</h2> <h2><img alt="" src="https://pso2na.arks-visiphone.com/images/b/bc/NGSUIItemAssaultRifleMini.png" />Ophistia Shooter+35</h2>
<ul className="boxmenu"> <ul className="boxmenu">
@ -195,7 +192,7 @@ function EquippedWeaponBox() {
</Box> </Box>
} }
function DamageBox() { function DamageBox(p) {
return <Box title="Damage"> return <Box title="Damage">
<ul className="boxmenu"> <ul className="boxmenu">
<li>1</li> <li>1</li>
@ -222,11 +219,16 @@ function ListRow(p) {
} }
function App() { function App() {
const [author,setAuthor] = useState("Dudley")
const [buildName,setBuildName] = useState("Fatimah")
const [className,setClassName] = useState("RANGER")
const [secondaryClassName,setSecondaryClassName] = useState("FORCE")
return ( return (
<> <>
<div id="main"> <div id="main">
<Col> <Col>
<MainBox/> <MainBox author={author} setAuthor={setAuthor} buildName={buildName} setBuildName={setBuildName} className={className} setClassName={setClassName} secondaryClassName={secondaryClassName} setSecondaryClassName={setSecondaryClassName}/>
<StatsBox/> <StatsBox/>
<EffectsBox/> <EffectsBox/>
</Col> </Col>