|
|
@ -1,4 +1,4 @@ |
|
|
|
import React, { useEffect,useState,useRef } from 'react'; |
|
|
|
import React, { useEffect,useState } from 'react'; |
|
|
|
import Modal from 'react-modal' |
|
|
|
import Modal from 'react-modal' |
|
|
|
import { DisplayIcon } from './DEFAULTS'; |
|
|
|
import { DisplayIcon } from './DEFAULTS'; |
|
|
|
import { ExpandTooltip } from './components/ExpandTooltip'; |
|
|
|
import { ExpandTooltip } from './components/ExpandTooltip'; |
|
|
@ -7,29 +7,6 @@ import { SkillTree } from './skilltree/skillTree'; |
|
|
|
//Helper variables for Weapon selector with structure: [weapon_type,weapon,potential,potential_tooltip,weapon_existence_data]
|
|
|
|
//Helper variables for Weapon selector with structure: [weapon_type,weapon,potential,potential_tooltip,weapon_existence_data]
|
|
|
|
const WEAPON_WEAPONTYPE=0;const WEAPON_WEAPON=1;const WEAPON_POTENTIAL=2;const WEAPON_POTENTIAL_TOOLTIP=3;const WEAPON_EXISTENCE_DATA=4; |
|
|
|
const WEAPON_WEAPONTYPE=0;const WEAPON_WEAPON=1;const WEAPON_POTENTIAL=2;const WEAPON_POTENTIAL_TOOLTIP=3;const WEAPON_EXISTENCE_DATA=4; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* Hook that alerts clicks outside of the passed ref |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
function useOutsideAlerter(ref,setEdit) { |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* Alert if clicked on outside of element |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
function handleClickOutside(event) { |
|
|
|
|
|
|
|
if (ref.current && !ref.current.contains(event.target)) { |
|
|
|
|
|
|
|
setEdit(false) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Bind the event listener
|
|
|
|
|
|
|
|
document.addEventListener("mousedown", handleClickOutside); |
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
// Unbind the event listener on clean up
|
|
|
|
|
|
|
|
document.removeEventListener("mousedown", handleClickOutside); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}, [ref,setEdit]); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function EditBox(p) { |
|
|
|
function EditBox(p) { |
|
|
|
useEffect(()=>{ |
|
|
|
useEffect(()=>{ |
|
|
|
var timer1 = setTimeout(()=>{ |
|
|
|
var timer1 = setTimeout(()=>{ |
|
|
@ -89,23 +66,6 @@ function Class(p) { |
|
|
|
return class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></> |
|
|
|
return class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></> |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function ClassSelector(p){ |
|
|
|
|
|
|
|
const CLASSES = p.GetData("class") |
|
|
|
|
|
|
|
const wrapperRef = useRef(null); |
|
|
|
|
|
|
|
useOutsideAlerter(wrapperRef,p.setEdit); |
|
|
|
|
|
|
|
return <><div className="popup2" ref={wrapperRef}> |
|
|
|
|
|
|
|
Class Selector<hr/> |
|
|
|
|
|
|
|
<div className="popup"> |
|
|
|
|
|
|
|
{Object.keys(CLASSES).map((cl,i)=>{ |
|
|
|
|
|
|
|
return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img alt="" src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button> |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function EditableClass(p){ |
|
|
|
function EditableClass(p){ |
|
|
|
return <><div className="editClass" onClick={()=>{p.setClassNameSetter(p.editClass);p.setClassSelectWindowOpen(true)}}><Class GetData={p.GetData} name={p.name}/> |
|
|
|
return <><div className="editClass" onClick={()=>{p.setClassNameSetter(p.editClass);p.setClassSelectWindowOpen(true)}}><Class GetData={p.GetData} name={p.name}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|