Skill Tree proof-of-concept

src/App.js

@@ -8,6 +8,8 @@ import { ExpandTooltip } from './components/ExpandTooltip';
 
 import {XSquareFill, PlusCircle, LifePreserver, Server, CloudUploadFill, PatchCheck} from 'react-bootstrap-icons'
 
+import { SkillTree } from './skilltree/skillTree';
+
 import {
   HashRouter,
   Switch,
@@ -830,6 +832,28 @@ function App() {
 				<Route path={process.env.PUBLIC_URL+"/formula"}>
 					<DamageCalculator/>
 				</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="/">
 					<Helmet>
 						<title>{APP_TITLE}</title>

src/skilltree/skillTree.js

@@ -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}