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

Database editor integration (non-functional post)

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-14 15:37:48 +09:00
parent f3c78bd5ba
commit 911ba668a4
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.js
View File

@ -357,6 +357,8 @@ function AdminPanel(p) {
{page:"Skills",url:"/admin/skills",table:"/skill"},
{page:"Skill Types",url:"/admin/skilltypes",table:"/skill_type"},
{page:"Skill Data",url:"/admin/skilldata",table:"/skill_data"},
{page:<span style={{color:"gold"}}>Skill Tree Editor</span>,url:"/admin/skilltreeeditor",render:<SkillTreeEditor GetData={p.DATA}/>},
{page:"Skill Tree Data",url:"/admin/skilltreedata",table:"/skill_tree_data"},
{page:"Photon Arts",url:"/admin/photonarts",table:"/photon_art",duplicate:true},
{page:"Class Skills",url:"/admin/classskills",table:"/class_skill",duplicate:true},
{page:"Class Skill Data",url:"/admin/classskilldata",table:"/class_skill_data",duplicate:true},
@ -395,22 +397,24 @@ function AdminPanel(p) {
})}}}></input>
<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
</div>:<>
<div className="w-25">Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}<br/>
<Box title="Navigation">
<div className="w-25">Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}<br/>
<Table classes="adminNav">
{navigationData.map((nav)=>(nav.hr)?<hr/>:<><Link to={process.env.PUBLIC_URL+nav.url}>{nav.page}</Link><br/></>)}
<Link to={process.env.PUBLIC_URL+"/admin/database_manager"}>Database Manager</Link><br/>
</Table></Box></div>
</Table></div></Box>
<div className="w-75">
{navigationData.map((nav)=>(nav.duplicate===undefined&&nav.hr===undefined)&&<Route path={process.env.PUBLIC_URL+nav.url}>
<Box title={nav.page}>
<Helmet>
<title>{APP_TITLE+" - Admin Panel: "+nav.page}</title>
</Helmet>
<h2><u>{nav.page}</u></h2>
<TableEditor password={password} BACKENDURL={GetBackendURL(p)} path={nav.table}/>
</Route>)}
{nav.render??<TableEditor password={password} BACKENDURL={GetBackendURL(p)} path={nav.table}/>}
</Box></Route>)}
<Route path={process.env.PUBLIC_URL+"/admin/database_manager"}>
<Box title="Database Editor">
<DatabaseEditor password={password} BACKENDURL={GetBackendURL(p)}/>
</Box>
</Route>
</div></>}
</div>

32
src/skilltree/skillTreeEditor.js
View File

@ -7,7 +7,8 @@ function SkillTreeEditor(p) {
const ADJUSTMENT = [-32,-32]
const [classList,setClassList] = useState([])
const [classList,setClassList] = useState({})
const [skillTreeData,setSkillTreeData] = useState({})
const [cl,setCl] = useState(0)
const [lineColor,setLineColor] = useState("#000000")
const [lineWidth,setLineWidth] = useState(3)
@ -18,18 +19,27 @@ function SkillTreeEditor(p) {
const [gridPaddingX,setGridPaddingX] = useState(10)
const [gridPaddingY,setGridPaddingY] = useState(10)
const [renderedInputs,setRenderedInputs] = useState([])
const [skillLines,setSkillLines] = useState([
"□ □ ", //─ □
"└□─┘□□", //│ ├┤┼
" │ ││", //
" │ □│", //┌ ┐ ┬
" □─□┼□", //└ ┘ ┴
" □ "])
const [skillLines,setSkillLines] = useState([])
useEffect(()=>{
setClassList(p.GetData("class",undefined,undefined,true))
setSkillTreeData(p.GetData("skill_tree_data",undefined,undefined,true))
},[p.GetData])
useEffect(()=>{
var keys = Object.keys(skillTreeData)
for (var id of keys) {
//console.log(cl+"/"+skillTreeData[id].class_id)
if (skillTreeData[id].class_id==cl) {
var data = skillTreeData[id].data.split(',')
setSkillLines(data)
setDimensionX(data[0].length)
setDimensionY(data.length)
setLineColor(skillTreeData[id].line_color)
}
}
},[skillTreeData,cl])
useEffect(()=>{
setCl(Object.keys(classList)[0])
},[classList])
@ -69,15 +79,15 @@ function SkillTreeEditor(p) {
},[skillLines,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY,cl])
return <>
<label for="classSelect">Class Select:</label><select id="classSelect" value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
{Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
</select>
<div style={{width:"800px",position:"relative",left:"300px"}}>
<SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]}
gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY}
skillLines={skillLines}
/>
{renderedInputs.map((control)=>control)}
<select value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
{Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
</select>
<input type="color" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/>
<input type="number" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/>
<input type="number" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/>