You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.8 KiB
51 lines
1.8 KiB
function ClassSelectorWindow(p) {
|
|
return <SelectorWindow title={(p.editClass)?"Select Sub Class":"Select Main Class"} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} GetData={p.GetData}
|
|
dataFunction={() => {
|
|
var dat1 = p.GetData("class")
|
|
return Object.keys(dat1)
|
|
}
|
|
}
|
|
displayFunction={(key) => {
|
|
return <li className="classSelect" onClick={() => { if (p.editClass===0){p.setClassName(key)}else{p.setSubClassName(key)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</li>
|
|
}}
|
|
/>
|
|
}
|
|
|
|
<ClassSelectorWindow setClassName={setClassName} editClass={classNameSetter} setSubClassName={setSubClassName} modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="box treeSelectBox">
|
|
<div className="boxTitleBar">
|
|
<h1>Class Skill Tree</h1>
|
|
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
|
|
</div>
|
|
<div className="treeListContainer customScrollbar">
|
|
<ul className="treeList">
|
|
{Object.keys(p.GetData("class")).map((cl)=><li className={className===cl?"treeListMain":subclassName===cl?"treeListSub":""}><img alt="" src={p.GetData("class")[cl].icon} />{cl}</li>)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|
|
</>
|
|
} |