game api

app/src/shared/types.ts

@@ -16,23 +16,104 @@ export type CommandResult = {
     output: CommandOutput
 }
 
-export type InputState = { key: string, shift: boolean, ctrl: boolean, meta: boolean }
+export type InputState = { key: string, shift: boolean, ctrl: boolean, meta: boolean, pressed: Set<string> }
 
 export class GameContext {
-    height = 540
-    width = 960
-
     constructor(public ctx: CanvasRenderingContext2D) { }
 
-    circ(x: number, y: number, r: number, color = "black") {
+    get width() { return this.ctx.canvas.width }
-        const ctx = this.ctx
+    get height() { return this.ctx.canvas.height }
-        ctx.beginPath()
-        ctx.strokeStyle = color
-        ctx.arc(x, y, r, 0, Math.PI * 2)
-        ctx.stroke()
-    }
 
     clear() {
-        this.ctx.clearRect(0, 0, this.width, this.height)
+        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+    }
+
+    circ(x: number, y: number, r: number, color = "black") {
+        const c = this.ctx
+        c.save()
+        c.beginPath()
+        c.strokeStyle = color
+        c.arc(x, y, r, 0, Math.PI * 2)
+        c.stroke()
+        c.restore()
+    }
+
+    circfill(x: number, y: number, r: number, color = "black") {
+        const c = this.ctx
+        c.beginPath()
+        c.fillStyle = color
+        c.arc(x, y, r, 0, Math.PI * 2)
+        c.fill()
+    }
+
+    line(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        const c = this.ctx
+        c.beginPath()
+        c.strokeStyle = color
+        c.moveTo(x0, y0)
+        c.lineTo(x1, y1)
+        c.stroke()
+    }
+
+    oval(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        const c = this.ctx
+        const w = x1 - x0
+        const h = y1 - y0
+        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()
+    }
+
+    ovalfill(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        const c = this.ctx
+        const w = x1 - x0
+        const h = y1 - y0
+        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()
+    }
+
+    rect(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        const c = this.ctx
+        c.beginPath()
+        c.strokeStyle = color
+        c.rect(x0, y0, x1 - x0, y1 - y0)
+        c.stroke()
+    }
+
+    rectfill(x0: number, y0: number, x1: number, y1: number, color = "black") {
+        this.ctx.fillStyle = color
+        this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0)
+    }
+
+    rrect(x: number, y: number, w: number, h: number, r: number, color = "black") {
+        const c = this.ctx
+        c.beginPath()
+        c.strokeStyle = color
+        this.roundRectPath(x, y, w, h, r)
+        c.stroke()
+    }
+
+    rrectfill(x: number, y: number, w: number, h: number, r: number, color = "black") {
+        const c = this.ctx
+        c.beginPath()
+        c.fillStyle = color
+        this.roundRectPath(x, y, w, h, r)
+        c.fill()
+    }
+
+    private roundRectPath(x: number, y: number, w: number, h: number, r: number) {
+        const c = this.ctx
+        c.moveTo(x + r, y)
+        c.lineTo(x + w - r, y)
+        c.quadraticCurveTo(x + w, y, x + w, y + r)
+        c.lineTo(x + w, y + h - r)
+        c.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
+        c.lineTo(x + r, y + h)
+        c.quadraticCurveTo(x, y + h, x, y + h - r)
+        c.lineTo(x, y + r)
+        c.quadraticCurveTo(x, y, x + r, y)
     }
 }