diff --git a/client.ts b/client.ts
index bbc69b0..4613acf 100644
--- a/client.ts
+++ b/client.ts
@@ -210,11 +210,11 @@ function init() {
canvasMsg = "connected as spectator";
// Initialize grid state
for (const [index, sym] of (msg.data as Spectate).grid.entries()) {
- if (sym === undefined) continue;
+ if (!sym) continue;
grid[index] = {
- kind: sym,
- hue: Math.floor(Math.random() * 255),
+ kind: sym.symbol,
time: null,
+ hue: sym.hue,
} as Shape;
}
break;
@@ -224,7 +224,7 @@ function init() {
const { x, y } = res.last;
const shape: Shape = {
kind: res.last.symbol,
- hue: Math.floor(Math.random() * 255),
+ hue: res.last.hue,
time: null,
};
grid[y*3+x] = shape;
diff --git a/common.ts b/common.ts
index d4055ba..5688f47 100644
--- a/common.ts
+++ b/common.ts
@@ -1,9 +1,12 @@
export type MessageKind = "click" | "hello" | "update" | "endgame" | "reset" | "spectate";
-export interface Message {
- kind: MessageKind,
- data: Click | Update | Hello | EndGame | Reset | Spectate,
-}
+export type Message =
+ | { kind: "click", data: Click }
+ | { kind: "hello", data: Hello }
+ | { kind: "update", data: Update }
+ | { kind: "endgame", data: EndGame }
+ | { kind: "reset", data: Reset }
+ | { kind: "spectate", data: Spectate };
export interface Click {
x: number,
@@ -12,8 +15,10 @@ export interface Click {
export type Symbol = "x" | "o";
+export type SymbolWithHue = { symbol: Symbol, hue: number };
+
export interface Update {
- last: { x: number, y: number, symbol: Symbol }
+ last: { x: number, y: number, symbol: Symbol, hue: number}
}
export interface Hello {
@@ -27,8 +32,7 @@ export interface EndGame {
type Reset = undefined;
-
export interface Spectate {
- grid: (Symbol | undefined)[]
+ grid: (SymbolWithHue | undefined)[]
}
diff --git a/index.html b/index.html
index 270036e..0704b8f 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,9 @@
-
+
Hello websockets
+
+
diff --git a/server.ts b/server.ts
index 9484b08..1f9033b 100644
--- a/server.ts
+++ b/server.ts
@@ -1,10 +1,11 @@
-import { Message, Update, Hello, EndGame, Symbol } from "common.js"
+import { Message, Update, Hello, EndGame, Symbol, SymbolWithHue } from "common.js"
import { WebSocket, WebSocketServer, MessageEvent } from "ws";
const port = 1234
const wss = new WebSocketServer({ port });
-let grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
+let grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+let hues = [0, 0, 0, 0, 0, 0, 0, 0, 0];
let endGame = false;
console.log(`waiting for connection on ws://localhost:${port}`);
@@ -30,13 +31,14 @@ wss.on("connection", (ws, req) => {
id += 1;
if (clients.length === 2) {
spectators.push(ws);
- const spectateData: (Symbol | undefined)[] = [];
- for (const playerId of grid) {
+ const spectateData: (SymbolWithHue | undefined)[] = [];
+ for (const [i, playerId] of grid.entries()) {
if (playerId === 0) {
spectateData.push(undefined);
} else {
const sym = clients.find(c => c.id === playerId)!.symbol;
- spectateData.push(sym);
+ const hue = hues[i];
+ spectateData.push({ symbol: sym, hue: hue });
}
}
const spectateMsg: Message = {
@@ -62,6 +64,7 @@ wss.on("connection", (ws, req) => {
ws.addEventListener("message", (event: MessageEvent) => {
const message = JSON.parse(event.data as string);
const {x, y} = message;
+ const hue = Math.floor(Math.random() * 255);
const player = clients.find(x => x.ws === ws);
if (!player) throw new Error("player not found");
console.log("received message", message, "player", player!.id, "currentPlayer", currentPlayer?.id);
@@ -95,10 +98,11 @@ wss.on("connection", (ws, req) => {
if (grid[y*3+x] === 0) {
grid[y*3+x] = player.id;
+ hues[y*3+x] = hue;
const msg = JSON.stringify({
kind: "update",
data: {
- last: { x, y, symbol: player.symbol }
+ last: { x, y, symbol: player.symbol, hue: hue },
} as Update,
} as Message);