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

Finish skill tree backend and frontend connections

Browse Source
master
Joshua Sigona 3 years ago
parent 5bccfd1438
commit 6f52ee42ba
2 changed files with 69 additions and 23 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. 23
      src/App.js
  2. 65
      src/skilltree/skillTreeEditor.js

23
src/App.js
Unescape View File

@ -357,7 +357,7 @@ 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:<span style={{color:"gold"}}>Skill Tree Editor</span>,url:"/admin/skilltreeeditor",render:<SkillTreeEditor setUpdate={p.setUpdate} password={password} BACKENDURL={GetBackendURL(p)} 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},
@ -753,6 +753,7 @@ function App() {
const [TESTMODE,setTESTMODE] = useState(false)
const [DATA,setDATA] = useState({GetData:()=>{}})
const [DATAID,setDATAID] = useState({GetData:()=>{}})
const [update,setUpdate] = useState(false)
const [LOGGEDINUSER,setLOGGEDINUSER] = useState("")
const [LOGGEDINHASH,setLOGGEDINHASH] = useState("")
@ -765,6 +766,19 @@ function App() {
return data!==undefined?data[table]!==undefined?data[table][row]!==undefined?data[table][row][col]!==undefined?data[table][row][col]:data[table][row]:data[table]:data:"no data"
}
useEffect(()=>{
if (update) {
setUpdate(false)
axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/data")
.then((data)=>{
setDATA(data.data)
})
axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/dataid")
.then((data)=>{
setDATAID(data.data)
})
}
},[update])
useEffect(()=>{
axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/data")
@ -786,7 +800,7 @@ function App() {
<title>{APP_TITLE+" - Admin Panel"}</title>
</Helmet>
<TestHeader/>
<AdminPanel setTESTMODE={setTESTMODE} BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
<AdminPanel setUpdate={setUpdate} setTESTMODE={setTESTMODE} BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
</Route>
<Route path={process.env.PUBLIC_URL+"/test"}>
<Helmet>
@ -836,11 +850,6 @@ function App() {
<Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/>
</Route>
<Route path={process.env.PUBLIC_URL+"/skilltree"}>
<Box title="Skill Tree">
<SkillTreeEditor BACKENDURL={GetBackendURL({TESTMODE:TESTMODE})} GetData={GetData}/>
</Box>
</Route>
<Route path="/">
<Helmet>
<title>{APP_TITLE}</title>

65
src/skilltree/skillTreeEditor.js
Unescape View File

@ -7,9 +7,11 @@ function SkillTreeEditor(p) {
const ADJUSTMENT = [-32,-32]
const [firstLoad,setFirstLoad] = useState(true)
const [classList,setClassList] = useState({})
const [skillTreeData,setSkillTreeData] = useState({})
const [cl,setCl] = useState(0)
const [cl,setCl] = useState(-1)
const [lineColor,setLineColor] = useState("#000000")
const [lineWidth,setLineWidth] = useState(3)
const [dimensionX,setDimensionX] = useState(6)
@ -25,7 +27,7 @@ function SkillTreeEditor(p) {
const [loading,setLoading] = useState(false)
function GetSkills(x,y) {
var filtered = skillData.filter((skill)=>Number(skill[0])===x&&Number(skill[1])===y)
var filtered = skillData.filter((skill)=>Number(skill.split(",")[0])===Number(x)&&Number(skill.split(",")[1])===Number(y))
if (filtered.length>0) {
return filtered[0]
} else {
@ -35,12 +37,29 @@ function SkillTreeEditor(p) {
function SaveSkillTrees() {
axios.post(p.BACKENDURL+"/saveskilltree",{
pass:p.password,
data:skillLines.slice(0,dimensionY).map((str)=>str.slice(0,dimensionX)).join(','),
skill_data:skillData.join(';'),
line_color:lineColor,
line_width:lineWidth,
gridsizex:gridSizeX,
gridsizey:gridSizeY,
gridpaddingx:gridPaddingX,
gridpaddingy:gridPaddingY,
class_id:cl
})
.then((data)=>{
if (data.data==="OK!") {
setMessage(<span style={{color:"green"}}>{"Successfully saved skill tree for "+p.GetData("class",undefined,undefined,true)[cl].name+"!"}</span>)
p.setUpdate(true)
}
})
.catch((err)=>{
setMessage(<span style={{color:"red"}}>{err.message}</span>)
})
.then(()=>{
setLoading(false)
})
}
useEffect(()=>{
@ -50,6 +69,7 @@ function SkillTreeEditor(p) {
useEffect(()=>{
var keys = Object.keys(skillTreeData)
var found = false
for (var id of keys) {
//console.log(cl+"/"+skillTreeData[id].class_id)
if (Number(skillTreeData[id].class_id)===Number(cl)) {
@ -65,12 +85,22 @@ function SkillTreeEditor(p) {
setGridSizeY(skillTreeData[id].gridsizey)
setGridPaddingX(skillTreeData[id].gridpaddingx)
setGridPaddingY(skillTreeData[id].gridpaddingy)
found=true
}
}
if (!found) {
setSkillLines([])
setSkillData([])
setDimensionX(6)
setDimensionY(6)
}
},[skillTreeData,cl])
useEffect(()=>{
if (firstLoad) {
setCl(Object.keys(classList)[0])
setFirstLoad(false)
}
},[classList])
useEffect(()=>{
@ -127,27 +157,34 @@ function SkillTreeEditor(p) {
return <>
{loading?<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>:<>
<h2>{message}</h2>
<label for="classSelect">Class Select:</label><select id="classSelect" value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
<option value=""></option>
{Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
</select>
<br/><button onClick={()=>{
<br/>
<br/>
{p.GetData("class",undefined,undefined,true)[cl]?.name&&<button onClick={()=>{
setLoading(true)
SaveSkillTrees()
}}>{"Save "+p.GetData("class",undefined,undefined,true)[cl].name+" Skill Tree"}</button>
}}>{"Save "+p.GetData("class",undefined,undefined,true)[cl]?.name+" Skill Tree"}</button>}
<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)}
<label for="lineColor">Line Color:</label><input type="color" id="lineColor" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/>
<label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/>
<label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/>
<label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/>
<label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/>
<label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/>
<label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/>
<label for="gridPaddingY">Grid Padding Y:</label><input type="number" id="gridPaddingY" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/>
<br/>
<hr/>
<br/>
<label for="lineColor">Line Color:</label><input type="color" id="lineColor" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/><br/>
<label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/><br/>
<label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/><br/>
<label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/><br/>
<label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/><br/>
<label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/><br/>
<label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/><br/>
<label for="gridPaddingY">Grid Padding Y:</label><input type="number" id="gridPaddingY" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/><br/>
</div></>}
</>

Write Preview
Loading…
Cancel
Save