import React, { useEffect,useState,useRef } from 'react'; import Tooltip from 'react-simple-tooltip' //Mess with all tooltip props here: https://cedricdelpoux.github.io/react-simple-tooltip/ /** * 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) { useEffect(()=>{ var timer1 = setTimeout(()=>{ document.getElementById("editBoxInput").focus() document.getElementById("editBoxInput").select() },100) return () => { clearTimeout(timer1); }; }) return { if (e.key==="Enter") {p.setEdit(false)} else if (e.key==="Escape") {p.setEdit(false)} }} maxLength={p.maxlength?p.maxlength:20} onBlur={()=>{p.setEdit(false)}} value={p.value} onChange={(f)=>{f.currentTarget.value.length>0?p.setName(f.currentTarget.value):p.setName(p.originalName)}}> } function EditBoxInput(p) { const [edit,setEdit] = useState(false) useEffect(()=>{ if (p.callback) { p.callback() } },[edit,p]) return <>
Author | ||
Build Name | ||
Class |
|
Lv.{p.classLv} Lv.{p.secondaryClassLv} |
Battle Power | {p.bp} | ||
HP | {p.hp} | ||
PP | {p.pp} | ||
Attack | {p.statDisplayAtk} | ||
Defense | {p.def} | ||
Weapon Up | +{(p.weaponUp1*100).toFixed(1)}% +{(p.weaponUp3*100).toFixed(1)}% |
+{(p.weaponUp2*100).toFixed(1)}% | |
Ailment Resist. | {p.damageResist} | ||
Damage Resist. | {p.damageResist} |
Critical Hit Rate | 5% |
Critical Multiplier | 120% |
Midrange | 126 |
Critcal | 152 |
Effective | 127 |