prevent interact target change and movement when interacting. also more anim

2 files changed, 14 insertions, 16 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index f6aa7e97..7146a3d1 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -80,6 +80,7 @@ let my_id: PlayerID = -1
 export const camera: V2 = { x: 0, y: 0 }
 export const interact_target_anim: V2 = { x: 0, y: 0 }
 export let interact_possible_anim: number = 0
+export let interact_active_anim: number = 0
 let interacting: V2 | undefined;
 
 function send(p: PacketS) { ws.send(JSON.stringify(p)) }
@@ -169,11 +170,14 @@ export const keys_down = new Set();
 const HANDLED_KEYS = ["KeyW", "KeyA", "KeyS", "KeyD", "Space"]
 function keyboard(ev: KeyboardEvent, down: boolean) {
     if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault()
+    if (!keys_down.has("Space") && ev.code == "Space" && down) set_interact(true)
+    if (keys_down.has("Space") && ev.code == "Space" && !down) set_interact(false)
     if (down) keys_down.add(ev.code)
     else keys_down.delete(ev.code)
 }
 
 export function get_interact_target(): V2 | undefined {
+    if (interacting) return interacting
     const me = players.get(my_id)
     if (!me) return
     return {
@@ -182,23 +186,16 @@ export function get_interact_target(): V2 | undefined {
     }
 }
 
+function set_interact(edge: boolean) {
+    if (edge) interacting = get_interact_target()
+    if (interacting) send({ type: "interact", pos: [interacting.x, interacting.y], edge })
+    if (!edge) interacting = undefined
+}
+
 function tick_update() {
     const p = players.get(my_id)
     if (!p) return
-
     send({ type: "position", pos: [p.x, p.y], rot: p.rot })
-
-    const { x, y } = get_interact_target()!;
-    if (interacting && !keys_down.has("Space")) {
-        send({ type: "interact", pos: [interacting.x, interacting.y], edge: false })
-        interacting = undefined;
-    }
-    if (keys_down.has("Space") && x != interacting?.x && y != interacting?.y) {
-        if (interacting)
-            send({ type: "interact", pos: [interacting.x, interacting.y], edge: false })
-        send({ type: "interact", pos: [x, y], edge: true })
-        interacting = { x, y }
-    }
 }
 
 function frame_update(dt: number) {
@@ -209,7 +206,7 @@ function frame_update(dt: number) {
         x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")),
         y: (+keys_down.has("KeyS") - +keys_down.has("KeyW"))
     })
-
+    if (interacting) input.x *= 0, input.y *= 0
     player_movement_update(p, dt, input)
 
     const update_item = (item: ItemData) => {
@@ -240,6 +237,7 @@ function frame_update(dt: number) {
     const possible = data.tile_interact[tiles.get([it.x, it.y].toString())?.kind ?? 0] ?? false
     lerp_exp_v2_mut(interact_target_anim, it, dt * 15.)
     interact_possible_anim = lerp_exp(interact_possible_anim, +possible, dt * 18.)
+    interact_active_anim = lerp_exp(interact_active_anim, +!!interacting, dt * 15.)
 }
 
 function resize() {
diff --git a/test-client/visual.ts b/test-client/visual.ts
index a70b6387..60d8e7a0 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -1,4 +1,4 @@
-import { ItemData, MessageData, PlayerData, TileData, camera, canvas, ctx, data, get_interact_target, interact_possible_anim, interact_target_anim, items_removed, keys_down, players, tiles } from "./main.ts";
+import { ItemData, MessageData, PlayerData, TileData, camera, canvas, ctx, data, get_interact_target, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, players, tiles } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
 import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
@@ -113,7 +113,7 @@ function draw_interact_target() {
     ctx.lineCap = "round"
     ctx.lineJoin = "round"
     ctx.lineWidth = 0.06 + 0.03 * Math.sin(Date.now() / 100) * interact_possible_anim
-    ctx.strokeStyle = `hsla(225, ${interact_possible_anim * 100}%, 62.70%, ${interact_possible_anim * 0.7 + 0.3})`
+    ctx.strokeStyle = `hsla(${(1 - interact_active_anim) * 225 + interact_active_anim * 125}deg, ${interact_possible_anim * 100}%, 62.70%, ${interact_possible_anim * 0.7 + 0.3})`
     ctx.strokeRect(0, 0, 1, 1)
 
     ctx.restore()