player moves with camera on grid

2 files changed, 45 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
diff --git a/test-client/util.ts b/test-client/util.ts
index 994e6acf..99f0c013 100644
--- a/test-client/util.ts
+++ b/test-client/util.ts
@@ -2,3 +2,9 @@ export interface V2 { x: number, y: number }
 export function length(p: V2): number { return Math.sqrt(p.x * p.x + p.y * p.y) }
 export function normalize_mut(p: V2) { const l = length(p); if (l == 0) return; p.x /= l; p.y /= l }
 export function normalize(p: V2): V2 { let l = length(p); if (l == 0) l = 1; return { x: p.x / l, y: p.y / l } }
+export function lerp_v2_mut(current: V2, target: V2, dt: number) {
+    current.x = target.x + (current.x - target.x) * Math.exp(-dt)
+    current.y = target.y + (current.y - target.y) * Math.exp(-dt)
+}
+export function floor_v2(p: V2): V2 { return { x: Math.floor(p.x), y: Math.floor(p.y) } }
+export function ceil_v2(p: V2): V2 { return { x: Math.ceil(p.x), y: Math.ceil(p.y) } }