more game stuff

app/src/shared/types.ts

@@ -40,68 +40,111 @@ export class GameContext {
 
     circfill(x: number, y: number, r: number, color = "black") {
         const c = this.ctx
+        c.save()
         c.beginPath()
         c.fillStyle = color
         c.arc(x, y, r, 0, Math.PI * 2)
         c.fill()
+        c.restore()
     }
 
     line(x0: number, y0: number, x1: number, y1: number, color = "black") {
         const c = this.ctx
+        c.save()
         c.beginPath()
         c.strokeStyle = color
         c.moveTo(x0, y0)
         c.lineTo(x1, y1)
         c.stroke()
+        c.restore()
     }
 
     oval(x0: number, y0: number, x1: number, y1: number, color = "black") {
         const c = this.ctx
         const w = x1 - x0
         const h = y1 - y0
+        c.save()
         c.beginPath()
         c.strokeStyle = color
         c.ellipse(x0 + w / 2, y0 + h / 2, Math.abs(w) / 2, Math.abs(h) / 2, 0, 0, Math.PI * 2)
         c.stroke()
+        c.restore()
     }
 
     ovalfill(x0: number, y0: number, x1: number, y1: number, color = "black") {
         const c = this.ctx
         const w = x1 - x0
         const h = y1 - y0
+        c.save()
         c.beginPath()
         c.fillStyle = color
         c.ellipse(x0 + w / 2, y0 + h / 2, Math.abs(w) / 2, Math.abs(h) / 2, 0, 0, Math.PI * 2)
         c.fill()
+        c.restore()
     }
 
     rect(x0: number, y0: number, x1: number, y1: number, color = "black") {
         const c = this.ctx
+        c.save()
         c.beginPath()
         c.strokeStyle = color
         c.rect(x0, y0, x1 - x0, y1 - y0)
         c.stroke()
+        c.restore()
     }
 
     rectfill(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        const c = this.ctx
+        c.save()
         this.ctx.fillStyle = color
         this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0)
+        c.restore()
     }
 
     rrect(x: number, y: number, w: number, h: number, r: number, color = "black") {
         const c = this.ctx
+        c.save()
         c.beginPath()
         c.strokeStyle = color
         this.roundRectPath(x, y, w, h, r)
         c.stroke()
+        c.restore()
     }
 
     rrectfill(x: number, y: number, w: number, h: number, r: number, color = "black") {
         const c = this.ctx
+        c.save()
         c.beginPath()
         c.fillStyle = color
         this.roundRectPath(x, y, w, h, r)
         c.fill()
+        c.restore()
+    }
+
+    trianglefill(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, color = "black") {
+        return this.polygonfill(
+            [
+                [x0, y0],
+                [x1, y1],
+                [x2, y2]
+            ],
+            color
+        )
+    }
+
+    polygonfill(points: [number, number][], color = "black") {
+        if (points.length < 3) return // need at least a triangle
+        const c = this.ctx
+        c.save()
+        c.beginPath()
+        c.fillStyle = color
+        c.moveTo(points[0]![0], points[0]![1])
+        for (let i = 1; i < points.length; i++) {
+            c.lineTo(points[i]![0], points[i]![1])
+        }
+        c.closePath()
+        c.fill()
+        c.restore()
     }
 
     private roundRectPath(x: number, y: number, w: number, h: number, r: number) {