Immutable state, only reassigning changed subtree

package.json

@@ -7,25 +7,30 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@colyseus/schema": "^3.0.21",
+    "@colyseus/schema": "^3.0.74",
     "buffer": "^6.0.3",
+    "colyseus.js": "^0.16.22",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "happy-dom": "^20.0.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vitest": "^3.2.4"
   }
 }

src/App.css

@@ -2,41 +2,11 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
+  text-align: left;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+.buttons {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+}

src/App.tsx

@@ -1,22 +1,25 @@
+import { StateDisplay } from './display/StateDisplay';
+import { Item, MyRoomState, Player } from './schema/MyRoomState'
+import { simulateState } from './schema/simulateState';
+import { useColyseusState } from './schema/useColyseusState';
 import './App.css'
 
-import { Player } from './schema/MyRoomState'
-import { simulatePatchState, useRoomState } from './schema/simulate';
+const { clientState, decoder, updateState } = simulateState(() => new MyRoomState());
 
 /**
  * Update the string in the state.
  */
 function simulateUpdateString() {
-  simulatePatchState((state) => {
-    state.myString = "Updated! " + Math.random();
+  updateState((state) => {
+    state.myString = "Updated! " + Math.round(Math.random() * 1000000) / 1000000;
   });
 }
 
 /**
  * Add a new player to the state.
  */
 function simulateAddPlayer() {
-  simulatePatchState((state) => {
+  updateState((state) => {
     const num = (state.players.size + 1);
     state.players.set(`p-${num}`, new Player().assign({ name: "Player " + num }));
   });
@@ -26,32 +29,101 @@ function simulateAddPlayer() {
  * Remove a random player from the state.
  */
 function simulateRemovePlayer() {
-  simulatePatchState((state) => {
+  updateState((state) => {
     const randomKey = Array.from(state.players.keys())[Math.floor(Math.random() * state.players.size)];
     state.players.delete(randomKey);
   });
 }
 
+/**
+ * Adjust the position of a random player in the state.
+ */
+function simulateRenamePlayer() {
+  updateState((state) => {
+    const randomKey = Array.from(state.players.keys())[Math.floor(Math.random() * state.players.size)];
+    const player = state.players.get(randomKey);
+    if (player) {
+      player.name += ' X';
+    }
+  });
+}
+
+/**
+ * Adjust the position of a random player in the state.
+ */
+function simulateMovePlayer() {
+  updateState((state) => {
+    const randomKey = Array.from(state.players.keys())[Math.floor(Math.random() * state.players.size)];
+    const player = state.players.get(randomKey);
+    if (player) {
+      player.position.x = Math.floor(Math.random() * 100);
+      player.position.y = Math.floor(Math.random() * 100);
+    }
+  });
+}
+
+/**
+ * Add an item to the inventory of a random player in the state.
+ */
+function simulateAddItem() {
+  updateState((state) => {
+    const randomKey = Array.from(state.players.keys())[Math.floor(Math.random() * state.players.size)];
+    const player = state.players.get(randomKey);
+    if (player) {
+      const itemType = ['Sword', 'Shield', 'Potion', 'Bow'][Math.floor(Math.random() * 4)];
+      player.inventory.push(new Item(itemType));
+    }
+  });
+}
+
+/**
+ * Remove an item from the inventory of a random player in the state.
+ */
+function simulateRemoveItem() {
+  updateState((state) => {
+    const playersWithItems = Array.from(state.players.values()).filter(p => p.inventory.length > 0);
+    if (playersWithItems.length === 0) {
+      return; // No players with items to remove from.
+    }
+
+    const player = playersWithItems[Math.floor(Math.random() * playersWithItems.length)];
+    player.inventory.pop();
+  });
+}
+
+/**
+ * Increment the quantity of an item in the inventory of a random player in the state.
+ */
+function simulateIncrementItem() {
+  updateState((state) => {
+    const playersWithItems = Array.from(state.players.values()).filter(p => p.inventory.length > 0);
+    if (playersWithItems.length === 0) {
+      return; // No players with items to remove from.
+    }
+
+    const player = playersWithItems[Math.floor(Math.random() * playersWithItems.length)];
+    const itemIndex = Math.floor(Math.random() * player.inventory.length);
+    player.inventory[itemIndex].quantity += 1;
+  });
+}
+
 function App() {
-  const state = useRoomState((state) => state);
-  const players = useRoomState((state) => state.players);
+  const state = useColyseusState(clientState, decoder);
 
   return (
     <>
-      <h2>State</h2>
-      <p><strong><code>.myString</code>:</strong> {state.myString}</p>
-      <button onClick={simulateUpdateString}>Update <code>.myString</code></button>
-      <hr />
-
-      <h2><strong><code>.players</code></strong></h2>
-
-      {Array.from(players.keys()).map((key) => (
-        <p key={key}><code>{key}</code> → <code>{JSON.stringify(players.get(key)?.toJSON())}</code></p>
-      ))}
+      <StateDisplay state={state} />
 
-      <hr />
-      <button onClick={simulateAddPlayer}>Add player</button>
-      <button onClick={simulateRemovePlayer}>Remove player</button>
+      <div className="buttons">
+        <button onClick={simulateUpdateString}>Update <code>.myString</code></button>
+        <button onClick={simulateAddPlayer}>Add player</button>
+        <button onClick={simulateRemovePlayer}>Remove player</button>
+        <button onClick={simulateMovePlayer}>Move player</button>
+        <button onClick={simulateRenamePlayer}>Rename player</button>
+        <button onClick={simulateAddItem}>Add item</button>
+        <button onClick={simulateIncrementItem}>Increment item</button>
+        <button onClick={simulateRemoveItem}>Remove item</button>
+      </div>
     </>
   )
 }

src/display/ItemDisplay.css

@@ -0,0 +1,16 @@
+.item {
+  border: 1px solid #ccc;
+  padding: 0.5em 1em;
+  background-color: #242424;
+  corner-shape: squircle;
+  border-radius: 1em;
+}
+
+.item-type {
+  font-weight: bold;
+}
+
+.item-quantity {
+  font-style: italic;
+  text-align: center;
+}

src/display/ItemDisplay.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+import { Item } from '../schema/MyRoomState';
+import { Snapshot } from '../schema/createSnapshot';
+import { useRenderHighlight } from './useRenderHighlight';
+import './ItemDisplay.css'
+
+type Props = {
+  item: Snapshot<Item>; // You'd normally pass in the fields rather than the item class itself, but doing it this way lets the component only re-render when the item changes.
+}
+
+export const ItemDisplay = memo(({ item }: Props) => {
+  const highlightRef = useRenderHighlight<HTMLDivElement>();
+
+  return (
+    <div className="item" ref={highlightRef}>
+      <div className="item-type">{item.type}</div>
+      <div className="item-quantity">x{item.quantity}</div>
+    </div>
+  );
+});

src/display/ItemsDisplay.css

@@ -0,0 +1,11 @@
+.items {
+  border: 1px solid #ccc;
+  padding: 1em;
+  min-height: 3em;
+  display: flex;
+  gap: 1em;
+  background-color: #242424;
+  corner-shape: squircle;
+  border-radius: 1em;
+  box-sizing: border-box;
+}

src/display/ItemsDisplay.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { ArraySchema } from '@colyseus/schema';
+import { Snapshot } from '../schema/createSnapshot';
+import { Item } from '../schema/MyRoomState';
+import { ItemDisplay } from './ItemDisplay';
+import { useRenderHighlight } from './useRenderHighlight';
+import './ItemsDisplay.css'
+
+type Props = {
+  items: Snapshot<ArraySchema<Item>>;
+}
+
+export const ItemsDisplay = memo(({ items }: Props) => {
+  const highlightRef = useRenderHighlight<HTMLDivElement>();
+
+  return (
+    <div className="items" ref={highlightRef}>
+        {items.map(item => (
+          <ItemDisplay key={item.type} item={item} />
+        ))}
+    </div>
+  );
+});

src/display/PlayerDisplay.css

@@ -0,0 +1,23 @@
+.player {
+  border: 1px solid #ccc;
+  padding: 1em;
+  margin: 1em;
+  background-color: #242424;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  corner-shape: squircle;
+  border-radius: 1em;
+}
+
+.player-field {
+  display: flex;
+
+  & > :first-child {
+    min-width: 6em;
+  }
+
+  & > :last-child {
+    flex-grow: 1;
+  }
+}

src/display/PlayerDisplay.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { Player } from '../schema/MyRoomState';
+import { Snapshot } from '../schema/createSnapshot';
+import { ItemsDisplay } from './ItemsDisplay';
+import { PositionDisplay } from './PositionDisplay';
+import { useRenderHighlight } from './useRenderHighlight';
+import './PlayerDisplay.css'
+
+type Props = {
+  player: Snapshot<Player>; // You'd normally pass in the fields rather than the player class itself, but doing it this way lets the component only re-render when the item changes.
+}
+
+export const PlayerDisplay = memo(({ player }: Props) => {
+  const highlightRef = useRenderHighlight<HTMLDivElement>();
+
+  return (
+    <div className="player" ref={highlightRef}>
+      <div className="player-field"><strong>Name:</strong><div>{player.name}</div></div>
+      <div className="player-field"><strong>Position:</strong><PositionDisplay position={player.position} /></div>
+      <div className="player-field"><strong>Inventory:</strong><ItemsDisplay items={player.inventory} /></div>
+    </div>
+  );
+});

src/display/PlayersDisplay.css

@@ -0,0 +1,8 @@
+.players {
+  border: 1px solid #ccc;
+  padding: 1em;
+  margin: 1em;
+  background-color: #242424;
+  corner-shape: squircle;
+  border-radius: 1em;
+}

src/display/PlayersDisplay.tsx

@@ -0,0 +1,27 @@
+import { MapSchema } from '@colyseus/schema';
+import { memo } from 'react';
+import { Player } from '../schema/MyRoomState';
+import { Snapshot } from '../schema/createSnapshot';
+import { useRenderHighlight } from './useRenderHighlight';
+import { PlayerDisplay } from './PlayerDisplay';
+import './PlayersDisplay.css'
+
+type Props = {
+  players: Snapshot<MapSchema<Player>>;
+}
+
+export const PlayersDisplay = memo(({ players }: Props) => {
+  const highlightRef = useRenderHighlight<HTMLDivElement>();
+
+  return (
+    <div className="players" ref={highlightRef}>
+      <h2>Players</h2>
+
+      {Object.entries(players).map(([id, player]) => (
+        player !== undefined && (
+          <PlayerDisplay key={id} player={player} />
+        )
+      ))}
+    </div>
+  );
+});