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

Setup test button functionality

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
master
Joshua Sigona 4 years ago
parent 2de2a9aef6
commit a60c4c2e86
3 changed files with 105 additions and 83 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. 158
      src/App.js
  2. 20
      src/TestPanel.js
  3. 10
      src/style.css

158
src/App.js
Unescape View File

@ -4,7 +4,6 @@ import './style.css'; // The new new
import React, {useState,useEffect,useRef,useReducer} from 'react'; import React, {useState,useEffect,useRef,useReducer} from 'react';
import useGlobalKeyDown from 'react-global-key-down-hook' import useGlobalKeyDown from 'react-global-key-down-hook'
import Modal from 'react-modal' 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 Toggle from 'react-toggle' //Tooltip props: http://aaronshaf.github.io/react-toggle/
import {XSquare, XSquareFill, PlusCircle} from 'react-bootstrap-icons' 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 axios = require('axios');
const parse = require('csv-parse/lib/sync') 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 Damage types
const MELEE_DMG = 0 const MELEE_DMG = 0
@ -39,6 +36,10 @@ const STEP_COUNTER = 3
const PARRY_COUNTER = 4 const PARRY_COUNTER = 4
//NOT USED YET*/ //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) { function Col(p) {
return <div className="con"> return <div className="con">
{p.children} {p.children}
@ -448,7 +449,7 @@ function TableEditor(p) {
function SubmitBoxes() { function SubmitBoxes() {
if (!lockSubmission) { if (!lockSubmission) {
setLockSubmission(true) setLockSubmission(true)
axios.post(BACKEND_URL+p.path,submitVals) axios.post(p.BACKENDURL+p.path,submitVals)
.then(()=>{ .then(()=>{
setSubmitVal("Clear") setSubmitVal("Clear")
setUpdate(true) setUpdate(true)
@ -473,7 +474,7 @@ function TableEditor(p) {
useEffect(()=>{ useEffect(()=>{
var promises=[] var promises=[]
parse(fileData,{columns:true,skip_empty_lines:true}).forEach((entry)=>{ 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) Promise.allSettled(promises)
.then(()=>{ .then(()=>{
@ -494,7 +495,7 @@ function TableEditor(p) {
if (update) { if (update) {
setLoading(true) setLoading(true)
var dependency_map = {} var dependency_map = {}
axios.get(BACKEND_URL+p.path) axios.get(p.BACKENDURL+p.path)
.then((data)=>{ .then((data)=>{
var cols = data.data.fields var cols = data.data.fields
var rows = data.data.rows var rows = data.data.rows
@ -504,7 +505,7 @@ function TableEditor(p) {
var promise_list = [] var promise_list = []
cols.filter((col)=>col.name!=="id"&&col.name.includes("_id")).forEach((col)=>{ 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)=>{ .then((data)=>{
dependency_map[col.name]=data.data.rows.sort((a,b)=>b.id-a.id) dependency_map[col.name]=data.data.rows.sort((a,b)=>b.id-a.id)
})) }))
@ -541,9 +542,9 @@ function TableEditor(p) {
{<tr><td></td>{fields.map((col,i)=><td key={i}>{<InputBox includeBlankValue={true} data={dependencies[col.name]} callback4={ {<tr><td></td>{fields.map((col,i)=><td key={i}>{<InputBox includeBlankValue={true} data={dependencies[col.name]} callback4={
(f)=>{setSubmitVal({field:col.name,value:f});}}/>}</td>)}<input style={{position:'absolute',top:"-1000px"}}/><PlusCircle onClick={()=>{SubmitBoxes()}} className="submitbutton"/></tr>} (f)=>{setSubmitVal({field:col.name,value:f});}}/>}</td>)}<input style={{position:'absolute',top:"-1000px"}}/><PlusCircle onClick={()=>{SubmitBoxes()}} className="submitbutton"/></tr>}
{data.map((dat)=><tr key={dat.id}> {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)})}}/></td>{fields.map((col,i)=><td key={dat.id+"_"+i} className="table-padding table"> <td><XSquareFill className="webicon" onClick={()=>{axios.delete(p.BACKENDURL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/></td>{fields.map((col,i)=><td key={dat.id+"_"+i} className="table-padding table">
<InputBox lockSubmission={lockSubmission} data={dependencies[col.name]} callback={(value)=>{ <InputBox lockSubmission={lockSubmission} data={dependencies[col.name]} callback={(value)=>{
return axios.patch(BACKEND_URL+p.path,{ return axios.patch(p.BACKENDURL+p.path,{
[col.name]:value, [col.name]:value,
id:dat.id id:dat.id
}) })
@ -555,7 +556,7 @@ function TableEditor(p) {
} }
function AdminPanel(p) { function AdminPanel(p) {
return <div id="main"> return <div className="main">
<div className="w-25"><Box title="Navigation"> <div className="w-25"><Box title="Navigation">
<Table classes="adminNav"> <Table classes="adminNav">
<Link to={process.env.PUBLIC_URL+"/admin/class"}>Class</Link><br/> <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/></Table></Box></div> <Link to={process.env.PUBLIC_URL+"/admin/database_audit"}>Database Audit</Link><br/></Table></Box></div>
<div className="w-75"> <div className="w-75">
<Route path={process.env.PUBLIC_URL+"/admin/class"}> <Route path={process.env.PUBLIC_URL+"/admin/class"}>
<TableEditor path="/class"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/class"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/classdata"}> <Route path={process.env.PUBLIC_URL+"/admin/classdata"}>
<TableEditor path="/class_level_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/class_level_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/classweaponcompatibility"}> <Route path={process.env.PUBLIC_URL+"/admin/classweaponcompatibility"}>
<TableEditor path="/class_weapon_type_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/class_weapon_type_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/photonarts"}> <Route path={process.env.PUBLIC_URL+"/admin/photonarts"}>
<TableEditor path="/photon_art"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/photon_art"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/weapons"}> <Route path={process.env.PUBLIC_URL+"/admin/weapons"}>
<TableEditor path="/weapon"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/weapon"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/weaponexistencedata"}> <Route path={process.env.PUBLIC_URL+"/admin/weaponexistencedata"}>
<TableEditor path="/weapon_existence_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/weapon_existence_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/weapontypes"}> <Route path={process.env.PUBLIC_URL+"/admin/weapontypes"}>
<TableEditor path="/weapon_type"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/weapon_type"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/armor"}> <Route path={process.env.PUBLIC_URL+"/admin/armor"}>
<TableEditor path="/armor"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/armor"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/potentials"}> <Route path={process.env.PUBLIC_URL+"/admin/potentials"}>
<TableEditor path="/potential"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/potential"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/potentialdata"}> <Route path={process.env.PUBLIC_URL+"/admin/potentialdata"}>
<TableEditor path="/potential_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/potential_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/builds"}> <Route path={process.env.PUBLIC_URL+"/admin/builds"}>
<TableEditor path="/builds"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/builds"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/skills"}> <Route path={process.env.PUBLIC_URL+"/admin/skills"}>
<TableEditor path="/skill"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/skill"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/skilltypes"}> <Route path={process.env.PUBLIC_URL+"/admin/skilltypes"}>
<TableEditor path="/skill_type"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/skill_type"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/skilldata"}> <Route path={process.env.PUBLIC_URL+"/admin/skilldata"}>
<TableEditor path="/skill_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/skill_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/classskills"}> <Route path={process.env.PUBLIC_URL+"/admin/classskills"}>
<TableEditor path="/class_skill"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/class_skill"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/classskilldata"}> <Route path={process.env.PUBLIC_URL+"/admin/classskilldata"}>
<TableEditor path="/class_skill_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/class_skill_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/augments"}> <Route path={process.env.PUBLIC_URL+"/admin/augments"}>
<TableEditor path="/augment"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/augment"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/augmenttypes"}> <Route path={process.env.PUBLIC_URL+"/admin/augmenttypes"}>
<TableEditor path="/augment_type"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/augment_type"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/enemydata"}> <Route path={process.env.PUBLIC_URL+"/admin/enemydata"}>
<TableEditor path="/enemy_data"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/enemy_data"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/food"}> <Route path={process.env.PUBLIC_URL+"/admin/food"}>
<TableEditor path="/food"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/food"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/foodmultipliers"}> <Route path={process.env.PUBLIC_URL+"/admin/foodmultipliers"}>
<TableEditor path="/food_mult"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/food_mult"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/roles"}> <Route path={process.env.PUBLIC_URL+"/admin/roles"}>
<TableEditor path="/roles"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/roles"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/users"}> <Route path={process.env.PUBLIC_URL+"/admin/users"}>
<TableEditor path="/users"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/users"/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/admin/database_audit"}> <Route path={process.env.PUBLIC_URL+"/admin/database_audit"}>
<TableEditor path="/database_audit"/> <TableEditor BACKENDURL={GetBackendURL(p)} path="/database_audit"/>
</Route> </Route>
</div> </div>
</div> </div>
@ -689,7 +690,7 @@ function DamageCalculator(p) {
//const [update,setUpdate] = useState(false) //const [update,setUpdate] = useState(false)
useEffect(()=>{ useEffect(()=>{
axios.get(BACKEND_URL+"/augment") axios.get(p.BACKENDURL+"/augment")
.then((data)=>{ .then((data)=>{
var augmentData = {} var augmentData = {}
data.data.rows.forEach((entry)=>{augmentData[entry.name]=entry}) 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() { function App() {
@ -884,51 +883,48 @@ function App() {
const [effective,setEffective] = useState(127) const [effective,setEffective] = useState(127)
const [modalOpen,setModalOpen] = useState(true) 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 ( return (
<> <>
<HashRouter> <HashRouter>
<Switch> <Switch>
<Route path={process.env.PUBLIC_URL+"/admin"}> <Route path={process.env.PUBLIC_URL+"/admin"}>
<TestHeader/> <TestHeader/>
<AdminPanel/> <AdminPanel BACKENDURL={BACKENDURL} TESTMODE={TESTMODE}/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/test"}> <Route path={process.env.PUBLIC_URL+"/test"}>
<TestHeader/> <TestHeader/>
<TestPanel/> <TestPanel/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/formula"}> <Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/> <DamageCalculator/>
</Route> </Route>
<Route path="/"> <Route path="/">
<div id="main"> <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}/>
</Col>
<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}/>
</Col>
<Col> <Col>
<MainBox author={author} setAuthor={setAuthor} buildName={buildName} setBuildName={setBuildName} className={className} setClassName={setClassName} secondaryClassName={secondaryClassName} setSecondaryClassName={setSecondaryClassName}/>
<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}/> <EffectsBox effectList={effectList} setEffectList={setEffectList}/>
<DamageBox criticalHitRate={criticalHitRate} setCriticalHitRate={setCriticalHitRate} criticalMultiplier={criticalMultiplier} setCriticalMultiplier={setCriticalMultiplier} midRange={midRange} setMidRange={setMidRange} critical={critical} setCritical={setCritical} effective={effective} setEffective={setEffective}/> </Col>
</Col> <Col>
<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">Modal content goes here.{BACKEND_URL} <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}/>
<br/><br/><Tooltip <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}/>
arrow={10} background="rgba(40,40,40,0.8)" border="white" radius={10} </Col>
offset={-6} placement="top" fadeDuration={300} style={{width:"600px"}} <Col>
content={<TooltipTest/>}
>Mouseover Me! I need more width to make this work.</Tooltip> <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}/>
<br/><br/> <DamageBox criticalHitRate={criticalHitRate} setCriticalHitRate={setCriticalHitRate} criticalMultiplier={criticalMultiplier} setCriticalMultiplier={setCriticalMultiplier} midRange={midRange} setMidRange={setMidRange} critical={critical} setCritical={setCritical} effective={effective} setEffective={setEffective}/>
<Toggle className="testmode" defaultChecked={testMode} value={testMode} onChange={(t)=>{setTestMode(t.target.checked)}}/>Test Mode: {JSON.stringify(testMode)} </Col>
</PopupWindow> <PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">Modal content goes here.{BACKENDURL}
</div> <br/><br/>
</Route> <Toggle className="testmode" defaultChecked={TESTMODE} value={TESTMODE} onChange={(t)=>{setTESTMODE(t.target.checked)}}/>Test Mode: {JSON.stringify(TESTMODE)}
</Switch> </PopupWindow>
</HashRouter> </div>
</Route>
</Switch>
</HashRouter>
</> </>
); );
} }

20
src/TestPanel.js
Unescape View File

@ -1,4 +1,21 @@
import React from 'react'; 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 <Tooltip className="jTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip>
}
function ExpandTooltip(p) {
return <Tooltip
arrow={15}
fadeDuration={200}
fadeEasing="linear"
fixed={true}
offset={0}
padding={16}
placement="top"
radius={10}
zIndex={1}
className="xTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip>
}
function TestPanel() { function TestPanel() {
return ( //Futasuke is a genius return ( //Futasuke is a genius
@ -94,7 +111,8 @@ function TestPanel() {
<div className="equipAugs"> <div className="equipAugs">
<h3>Abilitiy Details</h3> <h3>Abilitiy Details</h3>
<ul> <ul>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</span></div><span className="pot">Dynamo Unit Lv.3</span></li> <li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li>
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span className="fixa">Fixa Attack Lv.3</span></li> <li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span className="fixa">Fixa Attack Lv.3</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span className="aug">Pettas Soul II</span></li> <li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span className="aug">Pettas Soul II</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span className="aug">Alts Secreta II</span></li> <li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span className="aug">Alts Secreta II</span></li>

10
src/style.css
Unescape View File

@ -379,7 +379,15 @@ em {
position: absolute; position: absolute;
white-space: normal; white-space: normal;
left: 1em; 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 { .tooltip:hover span {
visibility: visible; visibility: visible;

Write Preview
Loading…
Cancel
Save