@ -4,7 +4,6 @@ import './style.css'; // The new new
import React , { useState , useEffect , useRef , useReducer } from 'react' ;
import useGlobalKeyDown from 'react-global-key-down-hook'
import Modal from 'react-modal'
import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/
import Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/
import { XSquare , XSquareFill , PlusCircle } from 'react-bootstrap-icons'
@ -23,8 +22,6 @@ import TestPanel from './TestPanel'; // Dudley's Test Panel
const axios = require ( 'axios' ) ;
const parse = require ( 'csv-parse/lib/sync' )
const BACKEND _URL = process . env . REACT _APP _GITPOD _WORKSPACE _URL || process . env . REACT _APP _BACKEND _URL || 'https://projectdivar.com:4504' ; //You can specify a .env file locally with REACT_APP_BACKEND_URL defining a URL to retrieve data from.
/ *
Damage types
const MELEE _DMG = 0
@ -39,6 +36,10 @@ const STEP_COUNTER = 3
const PARRY _COUNTER = 4
//NOT USED YET*/
function GetBackendURL ( p ) {
return ( process . env . REACT _APP _GITPOD _WORKSPACE _URL || process . env . REACT _APP _BACKENDURL || 'https://projectdivar.com:4504' ) + ( p . TESTMODE ? "/test" : "" )
}
function Col ( p ) {
return < div className = "con" >
{ p . children }
@ -448,7 +449,7 @@ function TableEditor(p) {
function SubmitBoxes ( ) {
if ( ! lockSubmission ) {
setLockSubmission ( true )
axios . post ( BACKEND _ URL+ p . path , submitVals )
axios . post ( p . BACKEND URL+ p . path , submitVals )
. then ( ( ) => {
setSubmitVal ( "Clear" )
setUpdate ( true )
@ -473,7 +474,7 @@ function TableEditor(p) {
useEffect ( ( ) => {
var promises = [ ]
parse ( fileData , { columns : true , skip _empty _lines : true } ) . forEach ( ( entry ) => {
promises . push ( axios . post ( BACKEND _ URL+ p . path , entry ) )
promises . push ( axios . post ( p . BACKEND URL+ p . path , entry ) )
} )
Promise . allSettled ( promises )
. then ( ( ) => {
@ -494,7 +495,7 @@ function TableEditor(p) {
if ( update ) {
setLoading ( true )
var dependency _map = { }
axios . get ( BACKEND _ URL+ p . path )
axios . get ( p . BACKEND URL+ p . path )
. then ( ( data ) => {
var cols = data . data . fields
var rows = data . data . rows
@ -504,7 +505,7 @@ function TableEditor(p) {
var promise _list = [ ]
cols . filter ( ( col ) => col . name !== "id" && col . name . includes ( "_id" ) ) . forEach ( ( col ) => {
promise _list . push ( axios . get ( BACKEND _ URL+ "/" + col . name . replace ( "_id" , "" ) )
promise _list . push ( axios . get ( p . BACKEND URL+ "/" + col . name . replace ( "_id" , "" ) )
. then ( ( data ) => {
dependency _map [ col . name ] = data . data . rows . sort ( ( a , b ) => b . id - a . id )
} ) )
@ -541,9 +542,9 @@ function TableEditor(p) {
{ < tr > < td > < / t d > { f i e l d s . m a p ( ( c o l , i ) = > < t d k e y = { i } > { < I n p u t B o x i n c l u d e B l a n k V a l u e = { t r u e } d a t a = { d e p e n d e n c i e s [ c o l . n a m e ] } c a l l b a c k 4 = {
( f ) => { setSubmitVal ( { field : col . name , value : f } ) ; } } / > } < /td>)}<input style={{position:'absolute',top:"-1000px"}}/ > < PlusCircle onClick = { ( ) => { SubmitBoxes ( ) } } className = "submitbutton" / > < / t r > }
{ data . map ( ( dat ) => < tr key = { dat . id } >
< td > < XSquareFill className = "webicon" onClick = { ( ) => { axios . delete ( BACKEND _ URL+ p . path , { data : { id : dat . id } } ) . then ( ( ) => { setUpdate ( true ) } ) . catch ( ( err ) => { alert ( err . response . data ) } ) } } / > < / t d > { f i e l d s . m a p ( ( c o l , i ) = > < t d k e y = { d a t . i d + " _ " + i } c l a s s N a m e = " t a b l e - p a d d i n g t a b l e " >
< td > < XSquareFill className = "webicon" onClick = { ( ) => { axios . delete ( p . BACKEND URL+ p . path , { data : { id : dat . id } } ) . then ( ( ) => { setUpdate ( true ) } ) . catch ( ( err ) => { alert ( err . response . data ) } ) } } / > < / t d > { f i e l d s . m a p ( ( c o l , i ) = > < t d k e y = { d a t . i d + " _ " + i } c l a s s N a m e = " t a b l e - p a d d i n g t a b l e " >
< InputBox lockSubmission = { lockSubmission } data = { dependencies [ col . name ] } callback = { ( value ) => {
return axios . patch ( BACKEND _ URL+ p . path , {
return axios . patch ( p . BACKEND URL+ p . path , {
[ col . name ] : value ,
id : dat . id
} )
@ -555,7 +556,7 @@ function TableEditor(p) {
}
function AdminPanel ( p ) {
return < div id = "main" >
return < div className = "main" >
< div className = "w-25" > < Box title = "Navigation" >
< Table classes = "adminNav" >
< Link to = { process . env . PUBLIC _URL + "/admin/class" } > Class < /Link><br/ >
@ -597,76 +598,76 @@ function AdminPanel(p) {
< Link to = { process . env . PUBLIC _URL + "/admin/database_audit" } > Database Audit < /Link><br/ > < / T a b l e > < / B o x > < / d i v >
< div className = "w-75" >
< Route path = { process . env . PUBLIC _URL + "/admin/class" } >
< TableEditor path = "/class" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/class" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/classdata" } >
< TableEditor path = "/class_level_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/class_level_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/classweaponcompatibility" } >
< TableEditor path = "/class_weapon_type_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/class_weapon_type_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/photonarts" } >
< TableEditor path = "/photon_art" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/photon_art" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/weapons" } >
< TableEditor path = "/weapon" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/weapon" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/weaponexistencedata" } >
< TableEditor path = "/weapon_existence_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/weapon_existence_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/weapontypes" } >
< TableEditor path = "/weapon_type" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/weapon_type" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/armor" } >
< TableEditor path = "/armor" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/armor" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/potentials" } >
< TableEditor path = "/potential" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/potential" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/potentialdata" } >
< TableEditor path = "/potential_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/potential_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/builds" } >
< TableEditor path = "/builds" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/builds" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/skills" } >
< TableEditor path = "/skill" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/skill" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/skilltypes" } >
< TableEditor path = "/skill_type" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/skill_type" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/skilldata" } >
< TableEditor path = "/skill_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/skill_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/classskills" } >
< TableEditor path = "/class_skill" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/class_skill" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/classskilldata" } >
< TableEditor path = "/class_skill_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/class_skill_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/augments" } >
< TableEditor path = "/augment" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/augment" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/augmenttypes" } >
< TableEditor path = "/augment_type" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/augment_type" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/enemydata" } >
< TableEditor path = "/enemy_data" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/enemy_data" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/food" } >
< TableEditor path = "/food" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/food" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/foodmultipliers" } >
< TableEditor path = "/food_mult" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/food_mult" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/roles" } >
< TableEditor path = "/roles" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/roles" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/users" } >
< TableEditor path = "/users" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/users" / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/admin/database_audit" } >
< TableEditor path = "/database_audit" / >
< TableEditor BACKENDURL = { GetBackendURL ( p ) } path = "/database_audit" / >
< / R o u t e >
< / d i v >
< / d i v >
@ -689,7 +690,7 @@ function DamageCalculator(p) {
//const [update,setUpdate] = useState(false)
useEffect ( ( ) => {
axios . get ( BACKEND _ URL+ "/augment" )
axios . get ( p . BACKEND URL+ "/augment" )
. then ( ( data ) => {
var augmentData = { }
data . data . rows . forEach ( ( entry ) => { augmentData [ entry . name ] = entry } )
@ -826,9 +827,7 @@ function DamageCalculator(p) {
< / >
}
function TooltipTest ( p ) {
return < > This is some tooltip info ! Does it get larger as we add more content ? Or does it stay puny . < / >
}
function App ( ) {
@ -884,51 +883,48 @@ function App() {
const [ effective , setEffective ] = useState ( 127 )
const [ modalOpen , setModalOpen ] = useState ( true )
const [ testMode , setTestMode ] = useState ( false )
const [ BACKENDURL , setBACKENDURL ] = useState ( process . env . REACT _APP _GITPOD _WORKSPACE _URL || process . env . REACT _APP _BACKENDURL || 'https://projectdivar.com:4504' )
const [ TESTMODE , setTESTMODE ] = useState ( false )
return (
< >
< HashRouter >
< Switch >
< Route path = { process . env . PUBLIC _URL + "/admin" } >
< TestHeader / >
< AdminPanel / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/test" } >
< TestHeader / >
< TestPanel / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/formula" } >
< DamageCalculator / >
< / R o u t e >
< Route path = "/" >
< div id = "main" >
< Col >
< MainBox author = { author } setAuthor = { setAuthor } buildName = { buildName } setBuildName = { setBuildName } className = { className } setClassName = { setClassName } secondaryClassName = { secondaryClassName } setSecondaryClassName = { setSecondaryClassName } / >
< EffectsBox effectList = { effectList } setEffectList = { setEffectList } / >
< / C o l >
< Col >
< EquipBox weapon = { weapon } setWeapon = { setWeapon } armorSlot1 = { armorSlot1 } setArmorSlot1 = { setArmorSlot1 } armorSlot2 = { armorSlot2 } setArmorSlot2 = { setArmorSlot2 } armorSlot3 = { armorSlot3 } setArmorSlot3 = { setArmorSlot3 } weaponEnhancementLv = { weaponEnhancementLv } setWeaponEnhancementLv = { setWeaponEnhancementLv } armorSlot1EnhancementLv = { armorSlot1EnhancementLv } setArmorSlot1EnhancementLv = { setArmorSlot1EnhancementLv } armorSlot2EnhancementLv = { armorSlot2EnhancementLv } setArmorSlot2EnhancementLv = { setArmorSlot2EnhancementLv } armorSlot3EnhancementLv = { armorSlot3EnhancementLv } setArmorSlot3EnhancementLv = { setArmorSlot3EnhancementLv } / >
< EquippedWeaponBox weapon = { weapon } armorSlot1 = { armorSlot1 } armorSlot2 = { armorSlot2 } armorSlot3 = { armorSlot3 } weaponAbilityList = { weaponAbilityList } setWeaponAbilityList = { setWeaponAbilityList } armor1AbilityList = { armor1AbilityList } setArmor1AbilityList = { setArmor1AbilityList } armor2AbilityList = { armor2AbilityList } setArmor2AbilityList = { setArmor2AbilityList } armor3AbilityList = { armor3AbilityList } setArmor3AbilityList = { setArmor3AbilityList } weaponEnhancementLv = { weaponEnhancementLv } armorSlot1EnhancementLv = { armorSlot1EnhancementLv } armorSlot2EnhancementLv = { armorSlot2EnhancementLv } armorSlot3EnhancementLv = { armorSlot3EnhancementLv } / >
< / C o l >
< >
< HashRouter >
< Switch >
< Route path = { process . env . PUBLIC _URL + "/admin" } >
< TestHeader / >
< AdminPanel BACKENDURL = { BACKENDURL } TESTMODE = { TESTMODE } / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/test" } >
< TestHeader / >
< TestPanel / >
< / R o u t e >
< Route path = { process . env . PUBLIC _URL + "/formula" } >
< DamageCalculator / >
< / R o u t e >
< Route path = "/" >
< div id = "main" >
< Col >
< StatsBox bp = { bp } setBP = { setBP } hp = { hp } setHP = { setHP } pp = { pp } setPP = { setPP } def = { def } setDef = { setDef } weaponUp1 = { weaponUp1 } setWeaponUp1 = { setWeaponUp1 } weaponUp2 = { weaponUp2 } setWeaponUp2 = { setWeaponUp2 } weaponUp3 = { weaponUp3 } setWeaponUp3 = { setWeaponUp3 } damageResist = { damageResist } setDamageResist = { setDamageResist } / >
< DamageBox criticalHitRate = { criticalHitRate } setCriticalHitRate = { setCriticalHitRate } criticalMultiplier = { criticalMultiplier } setCriticalMultiplier = { setCriticalMultiplier } midRange = { midRange } setMidRange = { setMidRange } critical = { critical } setCritical = { setCritical } effective = { effective } setEffective = { setEffective } / >
< / C o l >
< PopupWindow modalOpen = { modalOpen } setModalOpen = { setModalOpen } showCloseButton = { true } title = "Modal Title" > Modal content goes here . { BACKEND _URL }
< br / > < br / > < Tooltip
arrow = { 10 } background = "rgba(40,40,40,0.8)" border = "white" radius = { 10 }
offset = { - 6 } placement = "top" fadeDuration = { 300 } style = { { width : "600px" } }
content = { < TooltipTest / > }
> Mouseover Me ! I need more width to make this work . < / T o o l t i p >
< br / > < br / >
< Toggle className = "testmode" defaultChecked = { testMode } value = { testMode } onChange = { ( t ) => { setTestMode ( t . target . checked ) } } / > Test Mode : { JSON . stringify ( testMode ) }
< / P o p u p W i n d o w >
< / d i v >
< / R o u t e >
< / S w i t c h >
< / H a s h R o u t e r >
< MainBox author = { author } setAuthor = { setAuthor } buildName = { buildName } setBuildName = { setBuildName } className = { className } setClassName = { setClassName } secondaryClassName = { secondaryClassName } setSecondaryClassName = { setSecondaryClassName } / >
< EffectsBox effectList = { effectList } setEffectList = { setEffectList } / >
< / C o l >
< Col >
< EquipBox weapon = { weapon } setWeapon = { setWeapon } armorSlot1 = { armorSlot1 } setArmorSlot1 = { setArmorSlot1 } armorSlot2 = { armorSlot2 } setArmorSlot2 = { setArmorSlot2 } armorSlot3 = { armorSlot3 } setArmorSlot3 = { setArmorSlot3 } weaponEnhancementLv = { weaponEnhancementLv } setWeaponEnhancementLv = { setWeaponEnhancementLv } armorSlot1EnhancementLv = { armorSlot1EnhancementLv } setArmorSlot1EnhancementLv = { setArmorSlot1EnhancementLv } armorSlot2EnhancementLv = { armorSlot2EnhancementLv } setArmorSlot2EnhancementLv = { setArmorSlot2EnhancementLv } armorSlot3EnhancementLv = { armorSlot3EnhancementLv } setArmorSlot3EnhancementLv = { setArmorSlot3EnhancementLv } / >
< EquippedWeaponBox weapon = { weapon } armorSlot1 = { armorSlot1 } armorSlot2 = { armorSlot2 } armorSlot3 = { armorSlot3 } weaponAbilityList = { weaponAbilityList } setWeaponAbilityList = { setWeaponAbilityList } armor1AbilityList = { armor1AbilityList } setArmor1AbilityList = { setArmor1AbilityList } armor2AbilityList = { armor2AbilityList } setArmor2AbilityList = { setArmor2AbilityList } armor3AbilityList = { armor3AbilityList } setArmor3AbilityList = { setArmor3AbilityList } weaponEnhancementLv = { weaponEnhancementLv } armorSlot1EnhancementLv = { armorSlot1EnhancementLv } armorSlot2EnhancementLv = { armorSlot2EnhancementLv } armorSlot3EnhancementLv = { armorSlot3EnhancementLv } / >
< / C o l >
< Col >
< StatsBox bp = { bp } setBP = { setBP } hp = { hp } setHP = { setHP } pp = { pp } setPP = { setPP } def = { def } setDef = { setDef } weaponUp1 = { weaponUp1 } setWeaponUp1 = { setWeaponUp1 } weaponUp2 = { weaponUp2 } setWeaponUp2 = { setWeaponUp2 } weaponUp3 = { weaponUp3 } setWeaponUp3 = { setWeaponUp3 } damageResist = { damageResist } setDamageResist = { setDamageResist } / >
< DamageBox criticalHitRate = { criticalHitRate } setCriticalHitRate = { setCriticalHitRate } criticalMultiplier = { criticalMultiplier } setCriticalMultiplier = { setCriticalMultiplier } midRange = { midRange } setMidRange = { setMidRange } critical = { critical } setCritical = { setCritical } effective = { effective } setEffective = { setEffective } / >
< / C o l >
< 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 ) }
< / P o p u p W i n d o w >
< / d i v >
< / R o u t e >
< / S w i t c h >
< / H a s h R o u t e r >
< / >
) ;
}
