add hint-based tutorial for item crafting

3 files changed, 30 insertions, 12 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 6ed3c6e1..875e420d 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -97,12 +97,13 @@ export interface MessageData {
     inner: Message
     anim_position: V2,
     anim_size: number,
-    timeout: MessageTimeout,
+    timeout?: MessageTimeout,
 }
 
 export const players = new Map<PlayerID, PlayerData>()
 export const tiles = new Map<string, TileData>()
 export const items_removed = new Set<ItemData>()
+export const server_hints = new Map<string, MessageData>()
 
 export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], tile_collide: [], tile_interact: [], maps: [] }
 
@@ -245,6 +246,12 @@ function packet(p: PacketC) {
         case "movement_sync":
             players.get(my_id)!.position = last_server_sent_position
             break;
+        case "server_hint":
+            if (p.message) server_hints.set(p.position + "", { inner: p.message, anim_size: 0., anim_position: p.position ? { x: p.position[0] + 0.5, y: p.position[1] + 0.5 } : players.get(my_id)!.anim_position })
+            else server_hints.delete(p.position + "")
+            break;
+        case "environment":
+            break
         case "menu":
             switch (p.menu) {
                 case "book": open("https://s.metamuffin.org/static/hurrycurry/book.pdf"); break
@@ -272,6 +279,8 @@ function keyboard(ev: KeyboardEvent, down: boolean) {
     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 == "Numpad8") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:seared-patty,sliced-bun" } })
+    if (down && ev.code == "Numpad9") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:bun" } })
     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)
@@ -364,6 +373,9 @@ function frame_update(dt: number) {
     }
     remove.forEach(i => items_removed.delete(i))
 
+    for (const [_, h] of server_hints)
+        tick_message(h, dt);
+
     lerp_exp_v2_mut(camera, p.position, dt * 10.)
 
     if (global_message && tick_message(global_message, dt)) global_message = undefined
@@ -399,7 +411,8 @@ function 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.anim_size = lerp_exp(m.anim_size, m.timeout ? m.timeout.remaining > 0.3 ? 1 : 0 : 1, dt * 3)
+    if (!m.timeout) return false
     m.timeout.remaining -= dt;
     return m.timeout.remaining <= 0
 }
diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index f88d1dec..d0f5f997 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -1,5 +1,3 @@
-import { V2 } from "./util.ts";
-
 /*
     Hurry Curry! - a game about cooking
     Copyright 2024 metamuffin
@@ -60,7 +58,7 @@ export type PacketC =
     | { type: "update_map", tile: Vec2, kind: TileIndex | null, neighbors: [TileIndex | null] } // A map tile was changed
     | { 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: "server_hint", message?: Message, position?: V2 } // Hint message from server with optional position. Message is unset to clear previous message
+    | { type: "server_hint", message?: Message, position?: Vec2 } // Hint message from server with optional position. Message is unset to clear previous message
     | { type: "score" } & Score // Supplies information for score OSD
     | { type: "menu" } & Menu // Open a menu on the client-side
     | { type: "environment", effects: string[] }
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 4c0a8ecc..09b6ec85 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -15,7 +15,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 */
-import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, nametag_scale_anim, players, points, tiles, time_remaining } from "./main.ts";
+import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, nametag_scale_anim, players, points, server_hints, tiles, time_remaining } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
 import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
@@ -71,9 +71,14 @@ export function draw_ingame() {
         if (player.message_persist) draw_message(player.message_persist)
     }
 
+    // Draw nametags
     for (const [_, player] of players)
         draw_player_nametag(player)
 
+    // Draw server hints
+    for (const [_, message] of server_hints)
+        draw_message(message)
+
     // Draw interact target
     draw_interact_target()
 
@@ -221,12 +226,14 @@ function draw_message(m: MessageData) {
         ctx.closePath()
         ctx.fill()
 
-        const t = m.timeout.remaining / m.timeout.initial;
-        ctx.beginPath()
-        ctx.strokeStyle = `hsl(${Math.sqrt(t) * 0.3}turn, 100%, 50%)`
-        ctx.lineWidth = 0.1
-        ctx.arc(0, -1, 0.45, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * (1 - t))
-        ctx.stroke()
+        if (m.timeout) {
+            const t = m.timeout.remaining / m.timeout.initial;
+            ctx.beginPath()
+            ctx.strokeStyle = `hsl(${Math.sqrt(t) * 0.3}turn, 100%, 50%)`
+            ctx.lineWidth = 0.1
+            ctx.arc(0, -1, 0.45, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * (1 - t))
+            ctx.stroke()
+        }
 
         ctx.translate(0, -1)
         draw_item_sprite(ctx, data.item_names[m.inner.item] as ItemName)