Web client: explicit initial message value to avoid null checking

armsnyder · armsnyder · commit 766f354f21e7 · 2021-01-12T15:47:05.000-08:00
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -7,10 +7,12 @@
 
   onMount(() => sendMessage({ action: "hello", version: "0.0.0" }));
 
-  const decorate = createMessageReceiver<Decorate>("decorate");
+  const decorate = createMessageReceiver<Decorate>({
+    action: "decorate",
+    decoration: "",
+  });
 
-  const error = createMessageReceiver<Error>("error");
-  $: errorMessage = $error?.error ?? "";
+  const error = createMessageReceiver<Error>({ action: "error", error: "" });
 </script>
 
 <style>
@@ -19,10 +21,10 @@
   }
 </style>
 
-{#if errorMessage}
-  <Alert>Error from server: {errorMessage}</Alert>
+{#if $error.error}
+  <Alert>Error from server: {$error.error}</Alert>
 {/if}
 
-<p>{$decorate?.decoration ?? 'Waiting to be decorated...'}</p>
+<p>{$decorate.decoration || 'Waiting to be decorated...'}</p>
 
 <Board />
diff --git a/web/src/Board.svelte b/web/src/Board.svelte
@@ -7,7 +7,15 @@
 
   onMount(() => sendMessage({ action: "hostGame", nickname: "adam" }));
 
-  const boardUpdate = createMessageReceiver<UpdateBoard>("updateBoard");
+  const boardUpdate = createMessageReceiver<UpdateBoard>({
+    action: "updateBoard",
+    board: [],
+    player: 1,
+    p1score: 0,
+    p2score: 0,
+    x: 0,
+    y: 0,
+  });
 </script>
 
 <style>
@@ -28,11 +36,11 @@
 </style>
 
 <table>
-  {#each $boardUpdate?.board ?? [] as row}
+  {#each $boardUpdate.board as row}
     <tr>
-      {#each row as disk}
+      {#each row as value}
         <td>
-          <Cell {disk} />
+          <Cell {value} />
         </td>
       {/each}
     </tr>
diff --git a/web/src/Cell.svelte b/web/src/Cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { Disk } from "./boardTypes";
-  export let disk: Disk = 0;
+  import type { Cell } from "./boardTypes";
+  export let value: Cell = 0;
 </script>
 
 <style>
@@ -18,4 +18,4 @@
     }
 </style>
 
-<div class="player-{disk}">⬤</div>
+<div class="player-{value}">⬤</div>
diff --git a/web/src/boardTypes.ts b/web/src/boardTypes.ts
@@ -1,3 +1,5 @@
-export type Disk = 0 | 1 | 2;
+export type Player = 1 | 2;
 
-export type Board = Disk[][];
+export type Cell = Player | 0;
+
+export type Board = Cell[][];
diff --git a/web/src/messageTypes.ts b/web/src/messageTypes.ts
@@ -1,4 +1,4 @@
-import type { Board, Disk } from "./boardTypes";
+import type { Board, Player } from "./boardTypes";
 
 export type OutboundMessage =
   | Hello
@@ -75,7 +75,7 @@ export interface PlaceDisk {
 export interface UpdateBoard {
   action: "updateBoard";
   board: Board;
-  player: Disk;
+  player: Player;
   x: number;
   y: number;
   p1score: number;
diff --git a/web/src/websocket.ts b/web/src/websocket.ts
@@ -27,9 +27,9 @@ socket.addEventListener("message", ({ data }) => {
 
 // Function for sending messages over the websocket connection.
 export const sendMessage = (message: OutboundMessage) => {
-  if (socket.readyState == 0) {
+  if (socket.readyState == socket.CONNECTING) {
     outboundQueue.push(message);
-  } else if (socket.readyState == 1) {
+  } else if (socket.readyState == socket.OPEN) {
     socket.send(JSON.stringify(message));
   } else {
     throw new Error(`Websocket readystate is ${socket.readyState}`);
@@ -39,12 +39,14 @@ export const sendMessage = (message: OutboundMessage) => {
 // Create a readable store that receives a specific message type.
 // Svelte components can use the $ shorthand to auto-subscribe to the latest value.
 export const createMessageReceiver = <T extends InboundMessage>(
-  action: string
-): Readable<T | null> => ({
-  subscribe: (run, invalidate) =>
-    messageStore.subscribe((value) => {
-      if (!value || value.action === action) {
-        run(value as T | null);
+  initialValue: T
+): Readable<T> => ({
+  subscribe: (run, invalidate) => {
+    run(initialValue);
+    return messageStore.subscribe((value) => {
+      if (value && value.action === initialValue.action) {
+        run(value as T);
       }
-    }, invalidate),
+    }, invalidate);
+  },
 });
