more fun functions

app/src/shared/game.ts

@@ -6,8 +6,11 @@ export class GameContext {
   width = 960
   height = 540
 
-  clear() {
-    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+  clear(color?: string) {
+    if (color)
+      this.rectfill(0, 0, this.ctx.canvas.width, this.ctx.canvas.height, color)
+    else
+      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
   }
 
   text(msg: string, x: number, y: number, color = "black", size = 16, font = "C64ProMono") {
@@ -31,6 +34,27 @@ export class GameContext {
     c.restore()
   }
 
+  centerTextX(msg: string, y: number, color = "black", size = 16, font = "C64ProMono") {
+    const c = this.ctx
+    c.save()
+    c.fillStyle = color
+    c.font = `${size}px ${font}`
+    c.textBaseline = "middle"
+    c.textAlign = "center"
+    c.fillText(msg, this.width / 2, y)
+    c.restore()
+  }
+
+  centerTextY(msg: string, x: number, color = "black", size = 16, font = "C64ProMono") {
+    const c = this.ctx
+    c.save()
+    c.fillStyle = color
+    c.font = `${size}px ${font}`
+    c.textBaseline = "middle"
+    c.textAlign = "center"
+    c.fillText(msg, x, this.height / 2)
+    c.restore()
+  }
 
   circ(x: number, y: number, r: number, color = "black") {
     const c = this.ctx