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

Implemented database fetching functions

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
master
Joshua Sigona 4 years ago
parent 7e0a4a4985
commit eaedf1af98
4 changed files with 179 additions and 37 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. 75
      src/App.js
  2. 48
      src/TABLE_REFERENCE
  3. 65
      src/TestPanel.js
  4. 28
      src/style.css

75
src/App.js
Unescape View File

@ -22,6 +22,8 @@ import TestPanel from './TestPanel'; // Dudley's Test Panel
const axios = require('axios');
const parse = require('csv-parse/lib/sync')
Function.prototype.toJSON = function() { return "Unstorable function" }
/*
Damage types
const MELEE_DMG = 0
@ -36,8 +38,10 @@ const STEP_COUNTER = 3
const PARRY_COUNTER = 4
//NOT USED YET*/
const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504'
function GetBackendURL(p) {
return (process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504')+(p.TESTMODE?"/test":"")
return (BACKENDURL)+(p.TESTMODE?"/test":"")
}
function Col(p) {
@ -714,7 +718,7 @@ function DamageCalculator(p) {
data.data.rows.forEach((entry)=>{augmentData[entry.name]=entry})
setAugmentData(augmentData)
})
},[])
},[p.BACKENDURL])
const character = {
weapon:{
@ -851,16 +855,24 @@ function App() {
const [author,setAuthor] = useState("Dudley")
const [buildName,setBuildName] = useState("Fatimah")
const [className,setClassName] = useState("RANGER")
const [secondaryClassName,setSecondaryClassName] = useState("FORCE")
const [className,setClassName] = useState("Ranger")
const [secondaryClassName,setSecondaryClassName] = useState("Force")
const [bp,setBP] = useState(9999)
const [hp,setHP] = useState(289)
const [pp,setPP] = useState(100)
const [def,setDef] = useState(402)
const [weaponUp1,setWeaponUp1] = useState(0.34)
const [weaponUp2,setWeaponUp2] = useState(0.34)
const [weaponUp3,setWeaponUp3] = useState(0.34)
const [bp,setBP] = useState(1330)
const [hp,setHP] = useState(388)
const [pp,setPP] = useState(154)
const [weaponTotalAtk,setweaponTotalAtk] = useState(282)
const [baseAtk,setbaseAtk] = useState(650)
const [statDisplayAtk,setstatDisplayAtk] = useState(282)
useEffect(()=>{
setstatDisplayAtk(Number(weaponTotalAtk)+Number(baseAtk))
},[weaponTotalAtk,baseAtk])
const [def,setDef] = useState(932)
const [weaponUp1,setWeaponUp1] = useState(0.317)
const [weaponUp2,setWeaponUp2] = useState(0.241)
const [weaponUp3,setWeaponUp3] = useState(0.241)
const [damageResist,setDamageResist] = useState(0.18)
const [effectList,setEffectList] = useState([
@ -902,8 +914,21 @@ function App() {
const [modalOpen,setModalOpen] = useState(true)
const [BACKENDURL]=useState(process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504')
const [TESTMODE,setTESTMODE] = useState(false)
const [DATA,setDATA] = useState({GetData:()=>{}})
function GetData(table,row,col){
return DATA!==undefined?DATA[table]!==undefined?DATA[table][row]!==undefined?DATA[table][row][col]!==undefined?DATA[table][row][col]:DATA[table][row]:DATA[table]:DATA:"no data"
}
useEffect(()=>{
axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/data")
.then((data)=>{
setDATA(data.data)
})
},[TESTMODE])
return (
<>
@ -911,11 +936,26 @@ function App() {
<Switch>
<Route path={process.env.PUBLIC_URL+"/admin"}>
<TestHeader/>
<AdminPanel BACKENDURL={BACKENDURL} TESTMODE={TESTMODE}/>
<AdminPanel BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
</Route>
<Route path={process.env.PUBLIC_URL+"/test"}>
<TestHeader/>
<TestPanel bp={bp} className={className} secondaryClassName={secondaryClassName} />
<TestPanel
author={author}
buildName={buildName}
className={className}
secondaryClassName={secondaryClassName}
bp={bp}
hp={hp}
pp={pp}
def={def}
weaponUp1={weaponUp1}
weaponUp2={weaponUp2}
weaponUp3={weaponUp3}
damageResist={damageResist}
statDisplayAtk={statDisplayAtk}
GetData={GetData}
/>
</Route>
<Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/>
@ -938,6 +978,13 @@ function App() {
<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">Modal content goes here.{BACKENDURL}
<br/><br/>
<Toggle className="testmode" defaultChecked={TESTMODE} value={TESTMODE} onChange={(t)=>{setTESTMODE(t.target.checked)}}/>Test Mode: {JSON.stringify(TESTMODE)}
<br/><br/>{"Fighter Icon URL: "+GetData("class","Fighter","icon")}
<br/><br/>Gunner Level Stats:{
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
.map((numb)=>{
var data=GetData("class_level_data","Gunner Lv."+numb);
return <><br/>{"Lv."+data.level+": "+data.hp+","+data.atk+","+data.def}</>
})}
</PopupWindow>
</div>
</Route>

48
src/TABLE_REFERENCE
Unescape View File

@ -0,0 +1,48 @@
class:
name icon
class_level_data:
class_id level hp atk def name
class_weapon_type_data:
class_id weapon_type_id
weapon:
name rarity level_req atk potential_id variance base_affix_slots drop_info pb_gauge_build icon
weapon_existence_data:
weapon_type_id weapon_id popularity editors_choice
weapon_type:
name dmg_type icon
photon_art:
name weapon_type_id potency dps power_distribution pp frames
armor:
name rarity level_req def hp pp mel_dmg rng_dmg tec_dmg crit_rate crit_dmg pp_cost_reduction active_pp_recovery natural_pp_recovery dmg_res all_down_res burn_res freeze_res blind_res shock_res panic_res poison_res battle_power_value pb_gauge_build icon popularity editors_choice
potential:
name icon
potential_data:
potential_id level name mel_dmg rng_dmg tec_dmg crit_rate crit_dmg pp_cost_reduction active_pp_recovery natural_pp_recovery dmg_res all_down_res burn_res freeze_res blind_res shock_res panic_res poison_res battle_power_value pb_gauge_build
builds:
users_id creator build_name class1 created_on last_modified data class2 likes editors_choice
skill:
name skill_type_id icon
skill_type:
name
skill_data:
skill_id level name variance mel_dmg rng_dmg tec_dmg crit_rate crit_dmg pp_cost_reduction active_pp_recovery natural_pp_recovery dmg_res popularity editors_choice
class_skill:
name class_id icon description
class_skill_data:
name class_skill_id level dependency effect duration cooldown damage_taken pa_potency conditional_buff pp_recovery property all_damage_buff active_pp_recovery status_ailment_accum status_ailment_duration pp_consumption max_hp_decrease natural_pp_recovery added_pp pb_gauge_fortification
augment:
augment_type_id name variance hp pp mel_dmg rng_dmg tec_dmg crit_rate crit_dmg pp_cost_reduction active_pp_recovery natural_pp_recovery dmg_res affix_success_rate all_down_res burn_res freeze_res blind_res shock_res panic_res poison_res battle_power_value pb_gauge_build popularity editors_choice
augment_type:
name icon
enemy_data:
level def atk
food:
name potency pp dmg_res hp pp_consumption pp_recovery weak_point_dmg hp_recovery popularity editors_choice
food_mult:
amount potency pp dmg_res hp pp_consumption pp_recovery weak_point_dmg hp_recovery
roles:
name
users:
username email created_on roles_id avatar editors_choice
database_audit:
action table_name row_name row_id new_value date users_id old_value

65
src/TestPanel.js
Unescape View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect,useState } from 'react';
import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/
function DefaultTooltip(p) {
return <Tooltip className="jTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip>
@ -20,6 +20,31 @@ function ExpandTooltip(p) {
}
function TestPanel(p) {
const [bpGraphMax,setbpGraphMax] = useState(1000)
const [hpGraphMax,sethpGraphMax] = useState(1000)
const [ppGraphMax,setppGraphMax] = useState(1000)
const [atkGraphMax,setatkGraphMax] = useState(1000)
const [defGraphMax,setdefGraphMax] = useState(1000)
useEffect(()=>{
if (p.bp>1000) {
setbpGraphMax(3000)
sethpGraphMax(3000)
setppGraphMax(3000)
setatkGraphMax(3000)
setdefGraphMax(3000)
} else {
setbpGraphMax(1000)
sethpGraphMax(1000)
setppGraphMax(1000)
setatkGraphMax(1000)
setdefGraphMax(1000)
}
},[p.bp])
console.log(p.GetData("class",p.className,"icon"))
return ( //Futasuke is a genius
<div className="main">
<div className="containerA">
@ -41,7 +66,7 @@ function TestPanel(p) {
<tr>
<td>Class</td>
<td>
<img alt="" src="Ra.png" /> Ranger <br />
<img alt="" src={process.env.PUBLIC_URL+p.GetData("class",p.className,"icon")} />{p.className}<br />
<img alt="" src="Fo.png" /> Force
</td>
<td>
@ -119,7 +144,7 @@ function TestPanel(p) {
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li>
<li><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
</ul>
</div>
<div className="pr">
@ -142,37 +167,43 @@ function TestPanel(p) {
<table className="statsInfo">
<tr>
<td>Battle Power</td>
<td className="ri">{p.bp}</td>
<td>&nbsp;</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>
</tr>
<tr>
<td>HP</td>
<td>289</td>
<td>&nbsp;</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>
</tr>
<tr>
<td>PP</td>
<td>100</td>
<td>&nbsp;</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>
</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>
</tr>
<tr>
<td>Defense</td>
<td>402</td>
<td>&nbsp;</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>
</tr>
<tr>
<td>Weapon Up</td>
<td className="statsMelWeaponUp"><span className="ye">+34%</span></td>
<td className="statsRngWeaponUp"><span className="ye">+34%</span></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>
</tr>
<tr>
<td></td>
<td className="statsTecWeaponUp"><span className="ye">+34%</span></td>
<td>Ailment Resist.</td>
<td>{p.damageResist}</td>
<td>&nbsp;</td>
</tr>
</tr>
<tr>
<td>Damage Resist.</td>
<td>18%</td>
<td>{p.damageResist}</td>
<td>&nbsp;</td>
</tr>
</table>

28
src/style.css
Unescape View File

@ -48,6 +48,9 @@ body {
text-align: center;
-webkit-font-smoothing: antialiased;
}
table td {
vertical-align: top;
}
ul {
list-style-type: none;
padding-inline-start: 0;
@ -181,11 +184,24 @@ em {
.box td:last-child {
text-align: right;
}
.barGraph {
background: linear-gradient(90deg, #65beef, #f5ee3c);
display: block;
height: 8px;
}
.barOverlay {
border: 2px solid black;
display: block;
height: 8px;
}
.statsInfo {
table-layout:fixed;
}
.statsInfo td:nth-child(2) {
text-align: right;
}
.statsInfo td:last-child {
width: 45%;
min-width: 55%;
}
.statsInfo span {
@ -257,9 +273,6 @@ em {
.da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
.basicInfo td {
vertical-align: top;
}
.basicInfo tr:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
@ -891,7 +904,7 @@ button{
.table-responsive table {
background-color: rgba(20,29,40,0.66);
}
.table{
.table {
border: 1px solid black;
border-spacing:1px;
}
@ -1106,4 +1119,7 @@ p.adminNav hr {
}
.testmode.react-toggle--checked .react-toggle-track:hover {
background-color: #00AADD;
}
}
.addAug{
height: 37px;
}
Write Preview
Loading…
Cancel
Save