simple class for map drawing

src/react/Minimap.tsx

@@ -1,27 +1,13 @@
 import { useRef, useEffect } from 'react'
+import { MinimapDrawer } from './MinimapDrawer'
 
 export default () => {
   const canvasRef = useRef<HTMLCanvasElement>(null) 
 
   const drawMap = () => {
     const canvas = canvasRef.current!
-    const ctx = canvas.getContext('2d')!
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    const centerX = canvas.width / 2
-    const centerY = canvas.height / 2
-    const radius = 25
-
-    ctx.beginPath()
-
-    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false)
-
-    ctx.fillStyle = 'white'
-    ctx.fill()
-
-    ctx.strokeStyle = '#000000'
-    ctx.lineWidth = 1
-    ctx.stroke()
+    const minimapDrawer = new MinimapDrawer(canvas)
+    minimapDrawer.draw()
   }
 
   useEffect(() => {

src/react/MinimapDrawer.ts

@@ -0,0 +1,43 @@
+
+export class MinimapDrawer {
+  centerX: number
+  centerY: number
+  radius: number
+  canvas: HTMLCanvasElement
+  ctx: CanvasRenderingContext2D 
+
+  constructor (
+    canvas: HTMLCanvasElement,
+    centerX?: number,
+    centerY?: number,
+    radius?: number,
+  ) {
+    this.canvas = canvas
+    this.ctx = this.canvas.getContext('2d')!
+    this.centerX = centerX ?? this.canvas.width / 2
+    this.centerY = centerY ?? this.canvas.height / 2
+    this.radius = radius ?? 25
+  }
+
+  draw() {
+    this.ctx.clearRect(
+      this.centerX - this.radius, 
+      this.centerY - this.radius, 
+      this.canvas.width, 
+      this.canvas.height
+    )
+    this.ctx.strokeStyle = 'black'
+
+    this.ctx.beginPath()
+
+    this.ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false)
+
+    this.ctx.fillStyle = 'white'
+    this.ctx.fill()
+
+    this.ctx.strokeStyle = '#000000'
+    this.ctx.lineWidth = 1
+    this.ctx.stroke()
+
+  }
+}