message timeout replaces persist

3 files changed, 48 insertions, 25 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 1679ab42..2990c685 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -18,7 +18,7 @@
 /// <reference lib="dom" />
 
 import { MovementBase, collide_player_player, update_movement } from "./movement.ts";
-import { Gamedata, ItemIndex, ItemLocation, Message, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
+import { Gamedata, ItemIndex, ItemLocation, Message, MessageTimeout, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
 import { V2, lerp_exp_v2_mut, normalize, lerp_exp } from "./util.ts";
 import { draw_ingame, draw_wait } from "./visual.ts";
 
@@ -79,8 +79,8 @@ export interface PlayerData extends MovementBase {
     direction: V2,
     character: number,
     anim_position: V2,
+    message_persist?: MessageData,
     message?: MessageData,
-    message_clear?: number,
 }
 
 export interface TileData {
@@ -93,17 +93,17 @@ export interface MessageData {
     inner: Message
     anim_position: V2,
     anim_size: number,
+    timeout: MessageTimeout,
 }
 
 export const players = new Map<PlayerID, PlayerData>()
 export const tiles = new Map<string, TileData>()
 export const items_removed = new Set<ItemData>()
 
-export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], tile_collide: [], tile_interact: [], maps: {} }
+export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], tile_collide: [], tile_interact: [], maps: [] }
 
 export let time_remaining: number | null = null
 export let global_message: MessageData | undefined = undefined
-let global_message_clear: number | undefined = undefined
 export let my_id: PlayerID = -1
 export let points = 0
 export let demands_completed = 0
@@ -206,10 +206,13 @@ function packet(p: PacketC) {
             break;
         case "communicate": {
             const player = players.get(p.player)!
-            if (player.message_clear) clearTimeout(player.message_clear)
-            if (p.message) player.message = { inner: p.message, anim_size: 0., anim_position: player.anim_position }
-            if (p.persist && !p.message) player.message = undefined
-            if (!p.persist) player.message_clear = setTimeout(() => delete player.message, 3000)
+            if (p.message) {
+                const message = { inner: p.message, anim_size: 0., anim_position: player.anim_position, timeout: p.timeout ?? { initial: 5, remaining: 5 } };
+                if (p.timeout === undefined) player.message = message
+                else player.message_persist = message
+            } else if (p.timeout !== undefined) {
+                delete player.message_persist
+            }
             break;
         }
         case "score":
@@ -219,15 +222,11 @@ function packet(p: PacketC) {
             time_remaining = p.time_remaining ?? null
             break;
         case "error":
-            if (global_message_clear) clearTimeout(global_message_clear)
-            global_message = { inner: { text: p.message }, anim_size: 0., anim_position: { x: 0, y: 0 } }
-            global_message_clear = setTimeout(() => global_message = undefined, 4000)
+            global_message = { inner: { text: p.message }, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } }
             console.warn(p.message)
             break;
         case "server_message":
-            if (global_message_clear) clearTimeout(global_message_clear)
-            global_message = { inner: { text: p.text }, anim_size: 0., anim_position: { x: 0, y: 0 } }
-            global_message_clear = setTimeout(() => global_message = undefined, 4000)
+            global_message = { inner: { text: p.text }, anim_size: 0., anim_position: { x: 0, y: 0 }, timeout: { initial: 5, remaining: 5 } }
             break;
         case "set_ingame":
             console.log(`ingame ${p.state}`);
@@ -257,12 +256,12 @@ function keyboard(ev: KeyboardEvent, down: boolean) {
     if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault()
     if (!keys_down.has(KEY_INTERACT) && ev.code == KEY_INTERACT && down) set_interact(true)
     if (keys_down.has(KEY_INTERACT) && ev.code == KEY_INTERACT && !down) set_interact(false)
-    if (down && ev.code == "Numpad1") send({ player: my_id, type: "communicate", message: { text: "/start junior" }, persist: false })
-    if (down && ev.code == "Numpad2") send({ player: my_id, type: "communicate", message: { text: "/start senior" }, persist: false })
-    if (down && ev.code == "Numpad3") send({ player: my_id, type: "communicate", message: { text: "/start sophomore" }, persist: false })
-    if (down && ev.code == "Numpad4") send({ player: my_id, type: "communicate", message: { text: "/start debug" }, persist: false })
-    if (down && ev.code == "Numpad5") send({ player: my_id, type: "communicate", message: { text: "/start bus" }, persist: false })
-    if (down && ev.code == "Numpad0") send({ player: my_id, type: "communicate", message: { text: "/end" }, persist: false })
+    if (down && ev.code == "Numpad1") send({ player: my_id, type: "communicate", message: { text: "/start junior" } })
+    if (down && ev.code == "Numpad2") send({ player: my_id, type: "communicate", message: { text: "/start senior" } })
+    if (down && ev.code == "Numpad3") send({ player: my_id, type: "communicate", message: { text: "/start sophomore" } })
+    if (down && ev.code == "Numpad4") send({ player: my_id, type: "communicate", message: { text: "/start debug" } })
+    if (down && ev.code == "Numpad5") send({ player: my_id, type: "communicate", message: { text: "/start bus" } })
+    if (down && ev.code == "Numpad0") send({ player: my_id, type: "communicate", message: { text: "/end" } })
     if (down) keys_down.add(ev.code)
     else keys_down.delete(ev.code)
 }
@@ -275,7 +274,7 @@ function close_chat() {
 }
 function toggle_chat() {
     if (chat) {
-        if (chat.value.length) send({ player: my_id, type: "communicate", message: { text: chat.value }, persist: false })
+        if (chat.value.length) send({ player: my_id, type: "communicate", message: { text: chat.value } })
         chat.remove()
         canvas.focus()
         chat = null;
@@ -342,7 +341,9 @@ function frame_update(dt: number) {
         if (pid == my_id) player.anim_position.x = player.position.x, player.anim_position.y = player.position.y
         else lerp_exp_v2_mut(player.anim_position, player.position, dt * 15)
         if (player.item !== undefined && player.item !== null) update_item(player.item)
-        if (player.message) player.message.anim_size = lerp_exp(player.message.anim_size, 1, dt * 3)
+        if (player.message && tick_message(player.message, dt)) delete player.message
+        if (player.message_persist && tick_message(player.message_persist, dt)) delete player.message_persist
+
     }
     for (const [_, tile] of tiles) {
         if (tile.item !== undefined && tile.item !== null) update_item(tile.item)
@@ -359,6 +360,8 @@ function frame_update(dt: number) {
 
     lerp_exp_v2_mut(camera, p.position, dt * 10.)
 
+    if (global_message && tick_message(global_message, dt)) global_message = undefined
+
     const it = get_interact_target() ?? { x: 0, y: 0 };
     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.)
@@ -387,3 +390,10 @@ function draw() {
     else throw new Error(`ws state invalid`);
     requestAnimationFrame(draw)
 }
+
+function tick_message(m: MessageData | undefined, dt: number): boolean {
+    if (!m) return true
+    m.anim_size = lerp_exp(m.anim_size, m.timeout.remaining > 0.3 ? 1 : 0, dt * 3)
+    m.timeout.remaining -= dt;
+    return m.timeout.remaining <= 0
+}
diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index d5ce67ff..40532c08 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -40,7 +40,7 @@ export type PacketS =
     | { type: "leave", player: PlayerID } // Despawns a character
     | { type: "movement", player: PlayerID, pos: Vec2, dir: Vec2, boost: boolean }
     | { type: "interact", player: PlayerID, pos?: Vec2 } // Interact with some tile. pos is a position when pressing and null when releasing interact button
-    | { type: "communicate", player: PlayerID, message?: Message, persist: boolean } // Send a message
+    | { type: "communicate", player: PlayerID, message?: Message, timeout?: number } // Send a message
     | { type: "replay_tick", dt: number } // Steps forward in replay.
 
 export type PacketC =
@@ -55,7 +55,7 @@ export type PacketC =
     | { type: "set_item", location: ItemLocation, item?: ItemIndex } // the item contained in a tile or player changed
     | { type: "set_progress", item: ItemLocation, progress?: number, warn: boolean } // A tile is doing something. progress goes from 0 to 1, then null when finished
     | { type: "update_map", tile: Vec2, kind: TileIndex | null, neighbors: [TileIndex | null] } // A map tile was changed
-    | { type: "communicate", player: PlayerID, message?: Message, persist: boolean } // A player wants to communicate something, message is null when cleared
+    | { type: "communicate", player: PlayerID, message?: Message, timeout?: MessageTimeout } // A player wants to communicate something, message is null when cleared
     | { type: "server_message", text: string } // Text message from the server
     | { type: "score" } & Score // Supplies information for score OSD
     | { type: "menu" } & Menu // Open a menu on the client-side
@@ -67,6 +67,11 @@ export type Menu =
     { menu: "book" }
     | { menu: "score", data: Score }
 
+export interface MessageTimeout {
+    initial: number,
+    remaining: number
+}
+
 export interface Score {
     points: number,
     demands_failed: number,
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 07cfde67..59734234 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -66,8 +66,10 @@ export function draw_ingame() {
         if (tile.item) draw_item(tile.item)
 
     // Draw player messages
-    for (const [_, player] of players)
+    for (const [_, player] of players) {
         if (player.message) draw_message(player.message)
+        if (player.message_persist) draw_message(player.message_persist)
+    }
 
     for (const [_, player] of players)
         draw_player_nametag(player)
@@ -219,6 +221,12 @@ function draw_message(m: MessageData) {
         ctx.closePath()
         ctx.fill()
 
+        ctx.beginPath()
+        ctx.strokeStyle = "red"
+        ctx.lineWidth = 0.1
+        ctx.arc(0, -1, 0.45, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * (1 - m.timeout.remaining / m.timeout.initial))
+        ctx.stroke()
+
         ctx.translate(0, -1)
         draw_item_sprite(ctx, data.item_names[m.inner.item] as ItemName)
         ctx.translate(0, 1)