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

Break down array elements of skill tree into X,Y components for stateful updates

Browse Source
master
sigonasr2, Sig, Sigo 3 years ago
parent dbfa044589
commit 870876de60
3 changed files with 33 additions and 50 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. 29
      src/App.js
  2. 39
      src/skilltree/skillTree.js
  3. 15
      src/skilltree/skillTreeEditor.js

29
src/App.js
Unescape View File

@ -6,7 +6,7 @@ import Helmet from 'react-helmet'
import {XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill} from 'react-bootstrap-icons'
import { SkillTree } from './skilltree/skillTree';
import { SkillTreeEditor } from './skilltree/skillTreeEditor'
import {
HashRouter,
@ -753,9 +753,6 @@ function App() {
const [LOGGEDINUSER,setLOGGEDINUSER] = useState("")
const [LOGGEDINHASH,setLOGGEDINHASH] = useState("")
const [gridDimensionsX,setGridDimensionsX] = useState(5)
const [gridDimensionsY,setGridDimensionsY] = useState(5)
function GetData(table,row,col,id){
var data = id?DATAID:DATA
@ -835,29 +832,7 @@ function App() {
</Route>
<Route path={process.env.PUBLIC_URL+"/skilltree"}>
<Box title="Skill Tree">
<SkillTree strokeStyle="rgba(0,0,128,1)" lineWidth={3} lineDash={[]}
gridDimensionsX={gridDimensionsX} gridDimensionsY={gridDimensionsY} gridSize={[80,60]} gridPadding={[10,10]}
skillLines={["□ □ ", //─ □
"└□─┘□□", //│ ├┤┼
" │ ││", //
" │ □│", //┌ ┐ ┬
" □─□┼□", //└ ┘ ┴
" □ "]}
/>
<br/>
<hr/>
<br/>
<SkillTree strokeStyle="rgba(255,0,0,0.5)" lineWidth={10} lineDash={[10,10]}
gridDimensionsX={5} gridDimensionsY={5} gridSize={[120,120]} gridPadding={[5,5]}
skillLines={["□□□□ ", //─ □
"│ │┌□", //│ ├┤┼
"│□┘□ ", //
"□ │ ", //┌ ┐ ┬
" □ "]}//└ ┘ ┴
/>
Width: <input type="number" onChange={(f)=>{setGridDimensionsX(Number(f.currentTarget.value))}} value={gridDimensionsX}/>
Height: <input type="number" onChange={(f)=>{setGridDimensionsY(Number(f.currentTarget.value))}} value={gridDimensionsY}/>
<SkillTreeEditor/>
</Box>
</Route>
<Route path="/">

39
src/skilltree/skillTree.js
Unescape View File

@ -7,8 +7,8 @@ function SkillTree(p) {
const [height,setHeight] = useState(0)
useEffect(() => {
setWidth(p.gridSize[0]*p.gridDimensionsX+p.gridPadding[0]*(p.gridDimensionsX-1))
setHeight(p.gridSize[1]*p.gridDimensionsY+p.gridPadding[1]*(p.gridDimensionsY-1))
setWidth(p.gridSizeX*p.gridDimensionsX+p.gridPaddingX*(p.gridDimensionsX-1))
setHeight(p.gridSizeY*p.gridDimensionsY+p.gridPaddingY*(p.gridDimensionsY-1))
}, [p.skillLines,p.gridSize,p.gridPadding,p.gridDimensionsX,p.gridDimensionsY])
useEffect(()=>{
@ -16,13 +16,6 @@ function SkillTree(p) {
const context = canvas.getContext('2d')
context.clearRect(0,0,width,height)
context.fillStyle = '#AA6666'
/*for (var x=0;x<p.gridDimensions[0];x++) {
for (var y=0;y<p.gridDimensions[1];y++) {
var padX = x!==0?p.gridPadding[0]*x:0
var padY = y!==0?p.gridPadding[1]*y:0
context.fillRect(x*p.gridSize[0]+(padX), y*p.gridSize[1]+(padY), p.gridSize[0], p.gridSize[1])
}
}*/
context.strokeStyle=p.strokeStyle
context.lineWidth=p.lineWidth //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
context.setLineDash(p.lineDash) //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
@ -30,22 +23,22 @@ function SkillTree(p) {
for (var line of p.skillLines) {
var x=0
for (var char of line.split('')) {
var padX = x!==0?p.gridPadding[0]*x:0
var padY = y!==0?p.gridPadding[1]*y:0
var padX = x!==0?p.gridPaddingX*x:0
var padY = y!==0?p.gridPaddingY*y:0
switch (char) {
case "─":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()}break;
case "│":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke()}break;
case "└":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()}break;
case "┌":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke()}break;
case "┘":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()}break;
case "┐":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke()}break;
case "├":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke()}break;
case "┤":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke();context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()
case "─":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()}break;
case "│":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke()}break;
case "└":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()}break;
case "┌":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke()}break;
case "┘":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()}break;
case "┐":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke()}break;
case "├":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke()}break;
case "┤":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()
}break;
case "┬":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke();context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.stroke()}break;
case "┴":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()}break;
case "┼":{context.beginPath();context.moveTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)-p.gridPadding[1]);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]/2,y*p.gridSize[1]+(padY)+p.gridSize[1]+p.gridPadding[1]);context.moveTo(x*p.gridSize[0]+(padX)-p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.lineTo(x*p.gridSize[0]+(padX)+p.gridSize[0]+p.gridPadding[0],y*p.gridSize[1]+(padY)+p.gridSize[1]/2);context.stroke()}break;
case "□":{context.fillRect(x*p.gridSize[0]+(padX), y*p.gridSize[1]+(padY), p.gridSize[0], p.gridSize[1])}break;
case "┬":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke()}break;
case "┴":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()}break;
case "┼":{context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke()}break;
case "□":{context.fillRect(x*p.gridSizeX+(padX), y*p.gridSizeY+(padY), p.gridSizeX, p.gridSizeY)}break;
}
x++
}

15
src/skilltree/skillTreeEditor.js
Unescape View File

@ -0,0 +1,15 @@
import { SkillTree } from "./skillTree";
function SkillTreeEditor(p) {
return <SkillTree strokeStyle="rgba(0,0,128,1)" lineWidth={3} lineDash={[]}
gridDimensionsX={6} gridDimensionsY={6} gridSizeX={80} gridSizeY={60} gridPaddingX={10} gridPaddingY={10}
skillLines={["□ □ ", //─ □
"└□─┘□□", //│ ├┤┼
" │ ││", //
" │ □│", //┌ ┐ ┬
" □─□┼□", //└ ┘ ┴
" □ "]}
/>
}
export {SkillTreeEditor}
Write Preview
Loading…
Cancel
Save