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

Continued progress on test panel and implementing other database editing features.

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
master
Joshua Sigona 3 years ago
parent eaedf1af98
commit 14b7e35812
3 changed files with 55 additions and 42 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. 44
      src/App.js
  2. 29
      src/TestPanel.js
  3. 24
      src/style.css

44
src/App.js
Unescape View File

@ -94,27 +94,27 @@ function EditableBox(p) {
}
const CLASSES = {
HUNTER:{
Hunter:{
name:"Hunter",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassHu.png"
},
FIGHTER:{
Fighter:{
name:"Fighter",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassFi.png"
},
RANGER:{
Ranger:{
name:"Ranger",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassRa.png"
},
GUNNER:{
Gunner:{
name:"Gunner",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassGu.png"
},
FORCE:{
Force:{
name:"Force",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassFo.png"
},
TECHTER:{
Techter:{
name:"Techter",
icon:process.env.PUBLIC_URL+"/icons/UINGSClassTe.png"
}
@ -561,14 +561,29 @@ function TableEditor(p) {
function DatabaseEditor(p) {
const [loading,setLoading] = useState(false)
const [message,setMessage] = useState(<span style={{color:"black"}}></span>)
return <>
{!loading?<>
<button className="basichover" style={{backgroundColor:"navy"}} onClick={()=>{setLoading(true)}}>Apply TEST Database to LIVE Database</button><br/><br/>
<button className="basichover" style={{backgroundColor:"navy"}} onClick={()=>{
setLoading(true)
setMessage(<span style={{color:"black"}}>Uploading Test Database to Production...</span>)
axios.post(p.BACKENDURL+"/databases/testtolive")
.then(()=>{
setMessage(<span style={{color:"green"}}>Success! Test Database is now live!</span>)
})
.catch((err)=>{
setMessage(<span style={{color:"red"}}>{err.message}</span>)
})
.then(()=>{
setLoading(false)
})
}}>Apply TEST Database to LIVE Database</button><br/><br/>
<button className="basichover" style={{backgroundColor:"maroon"}} onClick={()=>{setLoading(true)}}>Reset TEST database using current LIVE Database</button><br/><br/>
<button className="basichover" style={{backgroundColor:"darkgreen"}} onClick={()=>{setLoading(true)}}>Backup current TEST and LIVE Database</button><br/><br/>
</>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
}
{message}
</>
}
@ -755,11 +770,11 @@ function DamageCalculator(p) {
const [weaponTotalAtk,setWeaponTotalAtk] = useState(100)
const [weaponBaseAtk,setWeaponBaseAtk] = useState(1)
const [weaponEnhanceLvl,setWeaponEnhanceLvl] = useState(1)
const [weaponEnhanceLv,setweaponEnhanceLv] = useState(1)
useEffect(()=>{
setWeaponTotalAtk(Number(weaponBaseAtk)+Number(weaponEnhanceLvl))
},[weaponBaseAtk,weaponEnhanceLvl])
setWeaponTotalAtk(Number(weaponBaseAtk)+Number(weaponEnhanceLv))
},[weaponBaseAtk,weaponEnhanceLv])
const [dmgVariance,setDmgVariance] = useState(1)
@ -809,7 +824,7 @@ function DamageCalculator(p) {
Weapon Total Atk:<EditStatBox value={weaponTotalAtk} callback={(val)=>{setWeaponTotalAtk(val)}}/>
<ul>
<li>●Weapon Base Atk:<EditStatBox value={weaponBaseAtk} callback={(val)=>{setWeaponBaseAtk(val)}}/></li>
<li>●Weapon Enhance Lvl:<EditStatBox value={weaponEnhanceLvl} callback={(val)=>{setWeaponEnhanceLvl(val)}}/></li>
<li>●Weapon Enhance Lv:<EditStatBox value={weaponEnhanceLv} callback={(val)=>{setweaponEnhanceLv(val)}}/></li>
</ul>
<br/><br/><br/>
Damage Variance:<EditStatBox value={dmgVariance} callback={(val)=>{setDmgVariance(val)}}/>
@ -857,6 +872,9 @@ function App() {
const [buildName,setBuildName] = useState("Fatimah")
const [className,setClassName] = useState("Ranger")
const [secondaryClassName,setSecondaryClassName] = useState("Force")
const [classLv,setClassLv] = useState(20)
const [secondaryClassLv,setSecondaryClassLv] = useState(15)
const [bp,setBP] = useState(1330)
const [hp,setHP] = useState(388)
@ -944,7 +962,9 @@ function App() {
author={author}
buildName={buildName}
className={className}
secondaryClassName={secondaryClassName}
secondaryClassName={secondaryClassName}
classLv={classLv}
secondaryClassLv={secondaryClassLv}
bp={bp}
hp={hp}
pp={pp}

29
src/TestPanel.js
Unescape View File

@ -43,7 +43,7 @@ useEffect(()=>{
}
},[p.bp])
console.log(p.GetData("class",p.className,"icon"))
//console.log(p.GetData("class",p.className,"icon"))
return ( //Futasuke is a genius
<div className="main">
@ -66,12 +66,12 @@ console.log(p.GetData("class",p.className,"icon"))
<tr>
<td>Class</td>
<td>
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.className,"icon")} />{p.className}<br />
<img alt="" src="Fo.png" /> Force
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.className,"icon")} /> {p.className}<br />
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.secondaryClassName,"icon")} /> {p.secondaryClassName}
</td>
<td>
<span className="ye">Lv.20</span><br />
Lv.15
<span className="ye">Lv.{p.classLv}</span><br />
Lv.{p.secondaryClassLv}
</td>
</tr>
</table>
@ -168,43 +168,46 @@ console.log(p.GetData("class",p.className,"icon"))
<tr>
<td>Battle Power</td>
<td>{p.bp}</td>
<td><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
<td colspan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>HP</td>
<td>{p.hp}</td>
<td><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
<td colspan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>PP</td>
<td>{p.pp}</td>
<td><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
<td colspan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Attack</td>
<td>{p.statDisplayAtk}</td>
<td><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
<td colspan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Defense</td>
<td>{p.def}</td>
<td><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
<td colspan="2"><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}>&nbsp;</span></div></td>
</tr>
<tr>
<td>Weapon Up</td>
<td className="statsMelWeaponUp"><span className="ye">+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<span className="ye">+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td className="statsRngWeaponUp"><span className="ye">+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /><span className="ye">&nbsp;+{(p.weaponUp1*100).toFixed(1)}%</span><br />
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /><span className="ye">&nbsp;+{(p.weaponUp3*100).toFixed(1)}%</span></td>
<td><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /><span className="ye">&nbsp;+{(p.weaponUp2*100).toFixed(1)}%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Ailment Resist.</td>
<td>{p.damageResist}</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Damage Resist.</td>
<td>{p.damageResist}</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>

24
src/style.css
Unescape View File

@ -196,30 +196,17 @@ em {
}
.statsInfo {
table-layout:fixed;
width: 100%;
line-height: 23px;
}
.statsInfo td:nth-child(2) {
text-align: right;
}
.statsInfo td:last-child {
min-width: 55%;
.statsInfo td:nth-child(3) {
width: 50%;
}
.statsInfo span {
}
.statsMelWeaponUp:before {
content: url("./icons/mel.png");
margin-right: 5px;
vertical-align: middle;
}
.statsRngWeaponUp:before {
content: url("./icons/rng.png");
margin-right: 5px;
vertical-align: middle;
}
.statsTecWeaponUp:before {
content: url("./icons/tec.png");
margin-right: 5px;
vertical-align: middle;
}
.boxTitleBar {
/* background-color: #495a61; */
@ -273,6 +260,9 @@ em {
.da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
.basicInfo {
line-height: 23px;
}
.basicInfo tr:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}

Write Preview
Loading…
Cancel
Save