3 files changed, 19 insertions, 14 deletions
diff --git a/test-client/main.ts b/test-client/main.ts
index 3568244e..c56f9db4 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -20,7 +20,7 @@
 import { init_locale } from "./locale.ts";
 import { MovementBase, collide_player_player, update_movement } from "./movement.ts";
 import { particle_splash, tick_particles } from "./particles.ts";
-import { Gamedata, ItemIndex, ItemLocation, Message, MessageTimeout, PacketC, PacketS, PlayerID, Score, TileIndex } from "./protocol.ts";
+import { Gamedata, ItemIndex, ItemLocation, Message, MessageTimeout, PacketC, PacketS, PlayerClass, PlayerID, Score, TileIndex } from "./protocol.ts";
 import { V2, lerp_exp_v2_mut, normalize, lerp_exp } from "./util.ts";
 import { draw_ingame, draw_wait } from "./visual.ts";
 
@@ -50,7 +50,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     ws.onclose = () => console.log("close")
     ws.onopen = () => {
         console.log("open")
-        send({ type: "join", name: "test", character: Math.floor(Math.random() * 255) })
+        send({ type: "join", name: "test", character: Math.floor(Math.random() * 255), class: "chef" })
     }
 
     canvas = document.createElement("canvas");
@@ -85,6 +85,7 @@ export interface PlayerData extends MovementBase {
     name: string,
     item?: ItemData,
     direction: V2,
+    class: PlayerClass,
     character: number,
     anim_position: V2,
     message_persist?: MessageData,
@@ -153,6 +154,7 @@ function packet(p: PacketC) {
                 position: { x: p.position[0], y: p.position[1], },
                 anim_position: { x: p.position[0], y: p.position[1] },
                 character: p.character,
+                class: p.class,
                 name: p.name,
                 rot: 0,
                 facing: { x: 0, y: 1 },
diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index 64d740c3..2dcde685 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -36,7 +36,7 @@ export interface Gamedata {
 }
 
 export type PacketS =
-    { type: "join", name: string, character: number } // Spawns a new character. The server replies with "joined". Dont send it to spectate.
+    { type: "join", name: string, character: number, class: PlayerClass } // Spawns a new character. The server replies with "joined". Dont send it to spectate.
     | { 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
@@ -48,7 +48,7 @@ export type PacketC =
     { type: "version", minor: number, major: number, supports_bincode?: boolean } // Sent once after connecting to ensure you client is compatible
     | { type: "joined", id: PlayerID } // Informs you about the id of the character you spawned
     | { type: "data", data: Gamedata } // Game data was changed
-    | { type: "add_player", id: PlayerID, name: string, position: Vec2, character: number } // Somebody else joined (or was already in the game)
+    | { type: "add_player", id: PlayerID, name: string, position: Vec2, character: number, class: PlayerClass } // Somebody else joined (or was already in the game)
     | { type: "remove_player", id: PlayerID }  // Somebody left
     | { type: "movement", player: PlayerID, pos: Vec2, rot: number, boost: boolean, dir: Vec2 } // Update the movement of a players (your own position is included here)
     | { type: "movement_sync" } // Your movement is difference on the server, you should update your position from a `position` packet
@@ -98,3 +98,5 @@ export type Message =
 export type ItemLocation =
     { player: PlayerID }
     | { tile: Vec2 }
+
+export type PlayerClass = "chef" | "bot" | "customer"
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 784a36a3..c5f34c1c 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -20,7 +20,7 @@ import { ItemData, MessageData, MessageStyle, PlayerData, TileData, camera, came
 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";
-import { Message } from "./protocol.ts";
+import { Message, PlayerClass } from "./protocol.ts";
 import { draw_particles, particle_count } from "./particles.ts";
 
 export function draw_wait(text: string) {
@@ -145,7 +145,7 @@ function draw_player(player: PlayerData) {
     ctx.translate(player.anim_position.x, player.anim_position.y)
     ctx.rotate(-player.rot)
     if (player.boosting) ctx.scale(1.3, 1.3)
-    draw_character(player.character)
+    draw_character(player.class, player.character)
     ctx.restore()
     if (player.item) draw_item(player.item)
 }
@@ -200,24 +200,25 @@ function draw_grid() {
     ctx.stroke()
 }
 
-function draw_character(character: number) {
+function draw_character(pclass: PlayerClass, character: number) {
     ctx.fillStyle = `hsl(${character}rad, 50%, 50%)`
     ctx.beginPath()
     ctx.arc(0, 0, PLAYER_SIZE, 0, Math.PI * 2)
     ctx.fill()
 
-    if (character >= 0) {
+    if (pclass != "customer") {
         ctx.fillStyle = `hsl(${character}rad, 80%, 10%)`
         ctx.beginPath()
         ctx.arc(0, -0.2, PLAYER_SIZE, 0, Math.PI * 2)
         ctx.fill()
     }
-
-    ctx.fillStyle = `hsl(${character}rad, 80%, 70%)`
-    ctx.beginPath()
-    ctx.moveTo(-0.04, 0.25)
-    ctx.lineTo(0.04, 0.25)
-    ctx.lineTo(0, 0.4)
+    if (pclass != "bot") {
+        ctx.fillStyle = `hsl(${character}rad, 80%, 70%)`
+        ctx.beginPath()
+        ctx.moveTo(-0.04, 0.25)
+        ctx.lineTo(0.04, 0.25)
+        ctx.lineTo(0, 0.4)
+    }
     ctx.fill()
 }