diff --git a/src/App.js b/src/App.js index 1f3acf1..7ae6004 100644 --- a/src/App.js +++ b/src/App.js @@ -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
{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.BACKENDURL+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.BACKENDURL+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.BACKENDURL+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.BACKENDURL+"/"+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) { {{fields.map((col,i)=>{{setSubmitVal({field:col.name,value:f});}}/>})}{SubmitBoxes()}} className="submitbutton"/>} {data.map((dat)=> - {axios.delete(BACKEND_URL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/>{fields.map((col,i)=> + {axios.delete(p.BACKENDURL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/>{fields.map((col,i)=> { - return axios.patch(BACKEND_URL+p.path,{ + return axios.patch(p.BACKENDURL+p.path,{ [col.name]:value, id:dat.id }) @@ -555,7 +556,7 @@ function TableEditor(p) { } function AdminPanel(p) { - return
+ return
Class
@@ -597,76 +598,76 @@ function AdminPanel(p) { Database Audit
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
@@ -689,7 +690,7 @@ function DamageCalculator(p) { //const [update,setUpdate] = useState(false) useEffect(()=>{ - axios.get(BACKEND_URL+"/augment") + axios.get(p.BACKENDURL+"/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 ( - <> - - - - - - - - - - - - - - -
- - - - - - - - + <> + + + + + + + + + + + + + + +
- - - - - Modal content goes here.{BACKEND_URL} -

} - >Mouseover Me! I need more width to make this work. -

- {setTestMode(t.target.checked)}}/>Test Mode: {JSON.stringify(testMode)} - -
- - - + + + + + + + + + + + + + Modal content goes here.{BACKENDURL} +

+ {setTESTMODE(t.target.checked)}}/>Test Mode: {JSON.stringify(TESTMODE)} + +
+ + + ); } diff --git a/src/TestPanel.js b/src/TestPanel.js index af5161a..1c8c230 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -1,4 +1,21 @@ import React 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 {p.mouseOverText} +} +function ExpandTooltip(p) { + return {p.mouseOverText} +} function TestPanel() { return ( //Futasuke is a genius @@ -94,7 +111,8 @@ function TestPanel() {

Abilitiy Details

    -
  • Potency +20%/
    Critical Hit Rage +15% for 30 seconds after a successful sidestep
    Dynamo Unit Lv.3
    • +
  • } tooltip={<>Potency +20%/
    Critical Hit Rage +15% for 30 seconds after a successful sidestep}/>Dynamo Unit Lv.3
    • +
  • } tooltip={<>Potency +20%/
    Critical Hit Rage +15% for 30 seconds after a successful sidestep}/>Dynamo Unit Lv.3
  • Potency +4%
    Fixa Attack Lv.3
  • PP +5
    Ranged Weapon Potency +2.0%
    Pettas Soul II
  • HP -10, Potency +1.5%,
    Potency Floor Increase +1.5%
    Damage Resistance -1.5%
    Alts Secreta II
    • diff --git a/src/style.css b/src/style.css index 95aafef..3eb02cf 100644 --- a/src/style.css +++ b/src/style.css @@ -379,7 +379,15 @@ em { position: absolute; white-space: normal; left: 1em; - +} +.xtooltip { + margin: 0 10px 0 0; + display: inline; + cursor: help; +} +div.xtooltip div { + min-width: 200px; + background-color: rgba(38,53,63,0.9); } .tooltip:hover span { visibility: visible;