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

Skill Tree proof-of-concept

Browse Source
This commit is contained in:
Joshua Sigona 2021-08-12 23:55:49 +09:00
parent 9374c0b23c
commit 4c8f3ce5d6
2 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.js
View File

@ -8,6 +8,8 @@ import { ExpandTooltip } from './components/ExpandTooltip';
import {XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill, PatchCheck} from 'react-bootstrap-icons' import {XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill, PatchCheck} from 'react-bootstrap-icons'
import { SkillTree } from './skilltree/skillTree';
import { import {
HashRouter, HashRouter,
Switch, Switch,
@ -830,6 +832,28 @@ function App() {
<Route path={process.env.PUBLIC_URL+"/formula"}> <Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/> <DamageCalculator/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/skilltree"}>
<SkillTree strokeStyle="rgba(0,0,128,1)" lineWidth={3} lineDash={[]}
gridDimensions={[6,6]} gridSize={[80,60]} gridPadding={[10,10]}
skillLines={["□ □ ", //─ □
"└□─┘□□", //│ ├┤┼
" │ ││", //
" │ □│", //┌ ┐ ┬
" □─□┼□", //└ ┘ ┴
" □ "]}
/>
<br/>
<hr/>
<br/>
<SkillTree strokeStyle="rgba(255,0,0,0.5)" lineWidth={10} lineDash={[10,10]}
gridDimensions={[5,5]} gridSize={[120,120]} gridPadding={[5,5]}
skillLines={["□□□□ ", //─ □
"│ │┌□", //│ ├┤┼
"│□┘□ ", //
"□ │ ", //┌ ┐ ┬
" □ "]}//└ ┘ ┴
/>
</Route>
<Route path="/"> <Route path="/">
<Helmet> <Helmet>
<title>{APP_TITLE}</title> <title>{APP_TITLE}</title>

53
src/skilltree/skillTree.js Normal file
View File

@ -0,0 +1,53 @@
import { useRef,useEffect } from 'react';
import { contextType } from 'react-modal';
function SkillTree(p) {
const canvasRef = useRef(null)
useEffect(() => {
const canvas = canvasRef.current
const context = canvas.getContext('2d')
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
var y=0
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
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()
}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;
}
x++
}
y++
}
}, [p.skillLines,p.gridSize,p.gridPadding,p.gridDimensions])
return <canvas
width={p.gridSize[0]*p.gridDimensions[0]+p.gridPadding[0]*(p.gridDimensions[0]-1)}
height={p.gridSize[1]*p.gridDimensions[1]+p.gridPadding[1]*(p.gridDimensions[1]-1)} ref={canvasRef} {...p}/>
}
export {SkillTree}