1 files changed, 39 insertions, 5 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index b9fb1557..1780b5d7 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 
 import { PacketC, PacketS } from "./protocol.ts";
-import { normalize } from "./util.ts";
+import { V2, ceil_v2, floor_v2, lerp_v2_mut, normalize } from "./util.ts";
 
 let ctx: CanvasRenderingContext2D;
 let canvas: HTMLCanvasElement;
@@ -36,7 +36,10 @@ interface Item { x: number; y: number }
 const items = new Map<number, Item>()
 interface Tile { x: number; y: number }
 const tiles = new Map<string, Tile>()
+
 let my_id: number = -1
+const camera: V2 = { x: 0, y: 0 }
+let scale = 0
 
 function send(p: PacketS) { ws.send(JSON.stringify(p)) }
 function packet(p: PacketC) {
@@ -86,8 +89,11 @@ function frame_update(dt: number) {
         x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")),
         y: (+keys_down.has("KeyS") - +keys_down.has("KeyW"))
     })
-    p.x += input.x * dt * 10
-    p.y += input.y * dt * 10
+
+    p.x += input.x * dt * 5
+    p.y += input.y * dt * 5
+
+    lerp_v2_mut(camera, p, dt * 10.)
 }
 
 function resize() {
@@ -123,24 +129,52 @@ function draw_wait(text: string) {
     ctx.fillText(text, canvas.width / 2, canvas.height / 2)
 }
 
+
+function map_screen_to_world(screen: V2): V2 {
+    return {
+        x: ((screen.x - canvas.width / 2) / scale) + camera.x,
+        y: ((screen.y - canvas.height / 2) / scale) + camera.y,
+    }
+}
+
 function draw_ingame() {
     ctx.fillStyle = "#111"
     ctx.fillRect(0, 0, canvas.width, canvas.height)
 
-    const scale = Math.min(canvas.width, canvas.height) / 10;
+    scale = Math.min(canvas.width, canvas.height) / 10;
     ctx.save()
     ctx.translate(canvas.width / 2, canvas.height / 2)
     ctx.scale(scale, scale)
+    ctx.translate(-camera.x, -camera.y)
+
+    draw_grid()
 
     for (const [_, player] of players) {
         ctx.save()
         ctx.translate(player.x, player.y)
         ctx.rotate(player.rot)
         ctx.fillStyle = "rgb(226, 176, 26)"
-        ctx.fillRect(-0.5, -0.5, 1, 1)
+        const psize = 0.6;
+        ctx.fillRect(-psize / 2, -psize / 2, psize, psize)
         ctx.restore()
     }
 
     ctx.restore()
 }
 
+function draw_grid() {
+    ctx.strokeStyle = "#333"
+    ctx.lineWidth = 0.01
+    ctx.beginPath()
+    const min = floor_v2(map_screen_to_world({ x: 0, y: 0 }))
+    const max = ceil_v2(map_screen_to_world({ x: canvas.width, y: canvas.height }))
+    for (let x = min.x; x < max.x; x++) {
+        ctx.moveTo(x, min.y)
+        ctx.lineTo(x, max.y)
+    }
+    for (let y = min.y; y < max.y; y++) {
+        ctx.moveTo(min.x, y)
+        ctx.lineTo(max.x, y)
+    }
+    ctx.stroke()
+}
\ No newline at end of file