test client player rotates well

1 files changed, 18 insertions, 13 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 009b1705..f31176cd 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -1,8 +1,8 @@
 /// <reference lib="dom" />
 
-import { ID, Item, PacketC, PacketS, Tile, Vec2 } from "./protocol.ts";
+import { ID, Item, PacketC, PacketS, Tile } from "./protocol.ts";
 import { FALLBACK_TILE, TILES } from "./tiles.ts";
-import { V2, add_v2, ceil_v2, floor_v2, lerp_exp_v2_mut, normalize } from "./util.ts";
+import { V2, add_v2, ceil_v2, floor_v2, length, lerp_exp_v2_mut, normalize } from "./util.ts";
 
 let ctx: CanvasRenderingContext2D;
 let canvas: HTMLCanvasElement;
@@ -32,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(tick_update, 1000 / 25);
 })
 
-interface PlayerData { x: number; y: number, name: string, rot: number, hand?: ID }
+interface PlayerData { x: number; y: number, name: string, rot: number, hand?: ID, facing: V2 }
 const players = new Map<number, PlayerData>()
 interface ItemData { kind: Item, tile?: V2, player?: ID, tracking_player: boolean, x: number, y: number }
 const items = new Map<number, ItemData>()
@@ -41,6 +41,7 @@ const tiles = new Map<string, TileData>()
 
 let my_id: number = -1
 const camera: V2 = { x: 0, y: 0 }
+const interact_target_anim: V2 = { x: 0, y: 0 }
 let scale = 0
 
 function send(p: PacketS) { ws.send(JSON.stringify(p)) }
@@ -50,7 +51,7 @@ function packet(p: PacketC) {
         my_id = p.joined.id
     } else if ("add_player" in p) {
         if (p.add_player.hand) items.set(p.add_player.hand[0], { kind: p.add_player.hand[1], player: p.add_player.id, tracking_player: true, x: 0, y: 0 })
-        players.set(p.add_player.id, { x: 0, y: 0, name: p.add_player.name, rot: 0, hand: p.add_player.hand?.[0] })
+        players.set(p.add_player.id, { x: 0, y: 0, name: p.add_player.name, rot: 0, hand: p.add_player.hand?.[0], facing: { x: 0, y: 1 } })
     } else if ("remove_player" in p) {
         players.delete(p.remove_player.id)
     } else if ("position" in p) {
@@ -88,17 +89,18 @@ function keyboard(ev: KeyboardEvent, down: boolean) {
     else keys_down.delete(ev.code)
 }
 
-function get_interact_target(): Vec2 | undefined {
+function get_interact_target(): V2 | undefined {
     const me = players.get(my_id)
     if (!me) return
-    return [
-        Math.floor(me.x + Math.sin(me.rot)),
-        Math.floor(me.y + Math.cos(me.rot))
-    ]
+    return {
+        x: Math.floor(me.x + Math.sin(me.rot)),
+        y: Math.floor(me.y + Math.cos(me.rot))
+    }
 }
 
 function interact() {
-    send({ interact: { pos: get_interact_target()! } })
+    const { x, y } = get_interact_target()!;
+    send({ interact: { pos: [x, y] } })
 }
 
 function tick_update() {
@@ -116,6 +118,8 @@ function frame_update(dt: number) {
         y: (+keys_down.has("KeyS") - +keys_down.has("KeyW"))
     })
 
+    if (length(input) > 0.1) lerp_exp_v2_mut(p.facing, input, dt * 10.)
+    p.rot = Math.atan2(p.facing.x, p.facing.y)
     p.x += input.x * dt * 5
     p.y += input.y * dt * 5
 
@@ -123,9 +127,11 @@ function frame_update(dt: number) {
         lerp_exp_v2_mut(i, i.tracking_player ? players.get(i.player!)! : add_v2(i.tile!, 0.5), dt * 10.)
     }
 
+    lerp_exp_v2_mut(interact_target_anim, get_interact_target() ?? { x: 0, y: 0 }, dt * 15.)
     lerp_exp_v2_mut(camera, p, dt * 10.)
 }
 
+
 function resize() {
     canvas.width = globalThis.innerWidth
     canvas.height = globalThis.innerHeight
@@ -192,7 +198,7 @@ function draw_ingame() {
     for (const [_, player] of players) {
         ctx.save()
         ctx.translate(player.x, player.y)
-        ctx.rotate(player.rot)
+        ctx.rotate(-player.rot)
         ctx.fillStyle = "rgb(226, 176, 26)"
         const psize = 0.6;
         ctx.fillRect(-psize / 2, -psize / 2, psize, psize)
@@ -214,9 +220,8 @@ function draw_ingame() {
 }
 
 function draw_interact_target() {
-    const [x, y] = get_interact_target() ?? [0, 0]
     ctx.save()
-    ctx.translate(x, y)
+    ctx.translate(interact_target_anim.x, interact_target_anim.y)
 
     ctx.lineCap = "round"
     ctx.lineJoin = "round"