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

Added skill tree skill data editing.

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-14 16:38:33 +09:00
parent e487851f92
commit ee4196e4c0
2 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/skilltree/skillTreeEditor.js
View File

@ -20,6 +20,16 @@ function SkillTreeEditor(p) {
const [gridPaddingY,setGridPaddingY] = useState(10)
const [renderedInputs,setRenderedInputs] = useState([])
const [skillLines,setSkillLines] = useState([])
const [skillData,setSkillData] = useState([])
function GetSkills(x,y) {
var filtered = skillData.filter((skill)=>Number(skill[0])===x&&Number(skill[1])===y)
if (filtered.length>0) {
return filtered[0]
} else {
return ""
}
}
useEffect(()=>{
setClassList(p.GetData("class",undefined,undefined,true))
@ -30,12 +40,19 @@ function SkillTreeEditor(p) {
var keys = Object.keys(skillTreeData)
for (var id of keys) {
//console.log(cl+"/"+skillTreeData[id].class_id)
if (skillTreeData[id].class_id==cl) {
if (Number(skillTreeData[id].class_id)===Number(cl)) {
var data = skillTreeData[id].data.split(',')
var skill = skillTreeData[id].skill_data.split(';')
setSkillLines(data)
setSkillData(skill)
setDimensionX(data[0].length)
setDimensionY(data.length)
setLineColor(skillTreeData[id].line_color)
setLineWidth(skillTreeData[id].line_width)
setGridSizeX(skillTreeData[id].gridsizex)
setGridSizeY(skillTreeData[id].gridsizey)
setGridPaddingX(skillTreeData[id].gridpaddingx)
setGridPaddingY(skillTreeData[id].gridpaddingy)
}
}
},[skillTreeData,cl])
@ -73,12 +90,28 @@ function SkillTreeEditor(p) {
string[y] = stringLine.join('')
setSkillLines(string)
}
} ADJUSTMENT={ADJUSTMENT} x={x} y={y} gridSizeX={gridSizeX} gridSizeY={gridSizeY} padX={padX} padY={padY}/>)
} skill={GetSkills(x,y)} skillCallback={(x,y,skill)=>{
var newSkillData = [...skillData]
var found=false
var newSkill = x+","+y+","+skill
for (var s in newSkillData) {
var split = newSkillData[s].split(',')
if (Number(split[0])===Number(x)&&Number(split[1])===Number(y)) {
newSkillData[s]=newSkill
found=true
break;
}
}
if (!found) {
newSkillData.push(newSkill)
}
setSkillData(newSkillData)
}} ADJUSTMENT={ADJUSTMENT} x={x} y={y} gridSizeX={gridSizeX} gridSizeY={gridSizeY} padX={padX} padY={padY}/>)
}
}
}
setRenderedInputs(controls)
},[skillLines,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY,cl,dimensionY,dimensionX])
},[skillLines,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY,cl,dimensionY,dimensionX,skillData])
return <>
<label for="classSelect">Class Select:</label><select id="classSelect" value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
@ -90,14 +123,14 @@ function SkillTreeEditor(p) {
skillLines={skillLines}
/>
{renderedInputs.map((control)=>control)}
<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)}}/>
<input type="number" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/>
<input type="number" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/>
<input type="number" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/>
<input type="number" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/>
<input type="number" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/>
<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)}}/>
</div>
</>

5
src/skilltree/skillTreeSelector.js
View File

@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
function SkillTreeSelector(p) {
const [selectedSkill,setSelectedSkill] = useState(undefined)
const [skillList,setSkillList] = useState([])
useEffect(()=>{
@ -15,8 +14,8 @@ function SkillTreeSelector(p) {
<option value={ch}>{ch}</option>)
}
</select>
{p.defaultValue==='□'&&<select style={{width:"64px",position:"absolute",left:p.ADJUSTMENT[0]+(p.x*p.gridSizeX+p.padX+p.gridSizeX/2),top:p.ADJUSTMENT[1]+(p.y*p.gridSizeY+p.padY+p.gridSizeY/2)+28}} onChange={(f)=>{setSelectedSkill(f.currentTarget.value)}} value={selectedSkill}>
{Object.keys((skillList)).filter((skill)=>skillList[skill].class_id===p.cl).map((skill)=><option value={skillList[skill].id}>{skillList[skill].name}</option>)}
{p.defaultValue==='□'&&<select style={{width:"64px",position:"absolute",left:p.ADJUSTMENT[0]+(p.x*p.gridSizeX+p.padX+p.gridSizeX/2),top:p.ADJUSTMENT[1]+(p.y*p.gridSizeY+p.padY+p.gridSizeY/2)+28}} onChange={(f)=>{p.skillCallback(p.x,p.y,f.currentTarget.value)}} value={p.skill.split(",")[2]}>
{["",...Object.keys((skillList)).filter((skill)=>skillList[skill].class_id===p.cl)].map((skill)=><option value={(skillList[skill])?skillList[skill].id:""}>{(skillList[skill])?skillList[skill].name:""}</option>)}
</select>}
</>