Implemented database fetching functions

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/App.js

@@ -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 [className,setClassName] = useState("Ranger")
-	const [secondaryClassName,setSecondaryClassName] = useState("FORCE")
+	const [secondaryClassName,setSecondaryClassName] = useState("Force")
 	
-	const [bp,setBP] = useState(9999)
+	const [bp,setBP] = useState(1330)
-	const [hp,setHP] = useState(289)
+	const [hp,setHP] = useState(388)
-	const [pp,setPP] = useState(100)
+	const [pp,setPP] = useState(154)
-	const [def,setDef] = useState(402)
+	const [weaponTotalAtk,setweaponTotalAtk] = useState(282)
-	const [weaponUp1,setWeaponUp1] = useState(0.34)
+	const [baseAtk,setbaseAtk] = useState(650)
-	const [weaponUp2,setWeaponUp2] = useState(0.34)
+	const [statDisplayAtk,setstatDisplayAtk] = useState(282)
-	const [weaponUp3,setWeaponUp3] = useState(0.34)
+
+	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>

src/TABLE_REFERENCE

@@ -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

src/TestPanel.js

@@ -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>{p.bp}</td>
-    <td>&nbsp;</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>{p.hp}</td>
-    <td>&nbsp;</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>{p.pp}</td>
-    <td>&nbsp;</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>{p.def}</td>
-    <td>&nbsp;</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="statsMelWeaponUp"><span className="ye">+{(p.weaponUp1*100).toFixed(1)}%</span><br />
-    <td className="statsRngWeaponUp"><span className="ye">+34%</span></td>
+    <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>Ailment Resist.</td>
-    <td className="statsTecWeaponUp"><span className="ye">+34%</span></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>

src/style.css

@@ -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;
+}