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

Added skill tree skill data editing.

Browse Source
master
Joshua Sigona 3 years ago
parent e487851f92
commit ee4196e4c0
2 changed files with 46 additions and 14 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. 55
      src/skilltree/skillTreeEditor.js
  2. 5
      src/skilltree/skillTreeSelector.js

55
src/skilltree/skillTreeEditor.js
Unescape 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
Unescape 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>}
</>

Write Preview
Loading…
Cancel
Save