Fix Play Two Roads interaction

Fix Trade style
Re-roll testing
2025-10-11 13:14:07 -07:00 · 2025-10-11 13:08:13 -07:00 · 2025-10-11 12:59:50 -07:00 · 2025-10-11 12:55:36 -07:00 · 2025-10-11 12:52:56 -07:00
11 changed files with 790 additions and 493 deletions
--- a/client/src/Activities.tsx
+++ b/client/src/Activities.tsx
@ -246,7 +246,13 @@ const Activities: React.FC = () => {

      {placement && (
        <div className="Requirement">
-          {who} must place a {placeRoad ? "road" : "settlement"}.
+          {who} must place {
+            (turn && (turn as any).active === "road-building" && (turn as any).freeRoads)
+              ? `${(turn as any).freeRoads} roads`
+              : placeRoad
+              ? "a road"
+              : "a settlement"
+          }.
        </div>
      )}

--- a/client/src/MediaControl.css
+++ b/client/src/MediaControl.css
@ -28,13 +28,6 @@
  border: 2px dashed #666; /* Visual indicator for drop zone */
 }

-.MediaControlSpacer.Medium {
-  width: 11.5em;
-  height: 8.625em;
-  /* min-width: 11.5em;
-  min-height: 8.625em; */
-}
-
 .MediaControl {
  display: flex;
  position: absolute; /* Out of flow */
@ -60,13 +53,6 @@
  border: 1px solid black;
 }

-.MediaControl.Medium {
-  width: 11.5em;
-  height: 8.625em;
-  /* min-width: 11.5em;
-   min-height: 8.625em; */
-}
-
 .MediaControl .Controls {
  display: none; /* Hidden by default, shown on hover */
  position: absolute;
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
--- a/client/src/PlayerColor.tsx
+++ b/client/src/PlayerColor.tsx
@ -7,18 +7,20 @@ type PlayerColorProps = { color?: string };

 const mapColor = (c?: string) => {
  if (!c) return undefined;
-  const key = c.toLowerCase();
-  switch (key) {
-    case "red":
-      return "R";
-    case "orange":
-      return "O";
-    case "white":
-      return "W";
-    case "blue":
-      return "B";
+  switch (c.toLowerCase()) {
+    case 'red':
+      return 'R'
+    case 'orange':
+      return 'O'
+    case 'white':
+      return 'W'
+    case 'blue':
+      return 'B'
    default:
-      return undefined;
+      if (['R', 'O', 'W', 'B'].includes(c)) {
+        return c
+      }
+      return undefined
  }
 };

--- a/client/src/PlayerList.css
+++ b/client/src/PlayerList.css
@ -47,31 +47,12 @@
  justify-content: space-around;
 }

-.PlayerList .Unselected > div:nth-child(2) > div {
-  justify-content: flex-end;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0.25rem;
-  padding: 0.25rem;
-  max-width: 8rem;
-  background-color: #eee;
-  border-radius: 0.25rem;
-}
-
-.PlayerList .Unselected .Self {
-  border: 1px solid black;
-}
-
-.PlayerList .PlayerSelector .PlayerColor {
-  width: 1em;
-  height: 1em;
-}
-
 .PlayerList .PlayerSelector {
-  display: inline-flex;
+  display: flex;
  flex-wrap: wrap;
+  gap: 0.25rem;
  flex-direction: row;
+  align-items: start;
 }

 .PlayerList .PlayerSelector.MuiList-padding {
@ -91,30 +72,28 @@
 .PlayerList .PlayerSelector .PlayerEntry {
  display: flex;
  flex-direction: column;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1 1 0px;
-  align-items: flex-start;
-  border: 1px solid rgba(0,0,0,0);
-  border-radius: 0.25em;
-  min-width: 11em;
-  padding: 0 1px;
+  align-items: stretch;
+  /* min-width: 10rem; */
+  padding: 0.25rem;
  justify-content: flex-end;
+  max-width: min-content;
 }

-.PlayerList .PlayerSelector .PlayerEntry > div:first-child {
+/* .PlayerList .PlayerSelector .PlayerEntry > div:first-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin-bottom: 0.25em;
-}
+} */

-.PlayerList .PlayerEntry[data-selectable=true]:hover {
+/* .PlayerList .PlayerEntry[data-selectable=true]:hover {
  border-color: rgba(0,0,0,0.5);
  cursor: pointer;
-}
+} */
+
+/* Ensure the inline border color (player color) is visible */
+/* inline style borderColor on .PlayerEntry will override background/border defaults */

 .PlayerList .Players .PlayerToggle {
  min-width: 5em;
--- a/client/src/PlayerList.tsx
+++ b/client/src/PlayerList.tsx
@ -1,11 +1,12 @@
-import React, { useState, useEffect, useCallback, useContext } from "react";
-import Paper from "@mui/material/Paper";
-import List from "@mui/material/List";
-import "./PlayerList.css";
-import { MediaControl, MediaAgent, Peer } from "./MediaControl";
-import { PlayerColor } from "./PlayerColor";
-import Box from "@mui/material/Box";
-import { GlobalContext } from "./GlobalContext";
+import React, { useState, useEffect, useCallback, useContext, useMemo } from 'react';
+import Paper from '@mui/material/Paper';
+import List from '@mui/material/List';
+import './PlayerList.css';
+import { MediaControl, MediaAgent, Peer } from './MediaControl';
+import { PlayerColor } from './PlayerColor';
+import Box from '@mui/material/Box';
+import { GlobalContext } from './GlobalContext';
+import { styles } from './Styles';

 type Player = {
  name: string;
@ -24,14 +25,17 @@ type Player = {

 const PlayerList: React.FC = () => {
  const { session, socketUrl, lastJsonMessage, sendJsonMessage } = useContext(GlobalContext);
-  const [players, setPlayers] = useState<Player[] | null>(null);
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [player, setPlayer] = useState<Player | null>(null);
  const [peers, setPeers] = useState<Record<string, Peer>>({});
+  const [gameState, setGameState] = useState<string | undefined>(undefined);
+
  useEffect(() => {
-    console.log("player-list - Mounted - requesting fields");
+    console.log('player-list - Mounted - requesting fields');
    if (sendJsonMessage) {
      sendJsonMessage({
-        type: "get",
-        fields: ["participants"],
+        type: 'get',
+        fields: ['participants'],
      });
    }
  }, [sendJsonMessage]);
@ -64,20 +68,6 @@ const PlayerList: React.FC = () => {
    [session]
  );

-  useEffect(() => {
-    if (!players) {
-      return;
-    }
-    players.forEach((player) => {
-      console.log("rabbit - player:", {
-        name: player.name,
-        live: player.live,
-        in_peers: peers[player.session_id],
-        local_or_media: player.local || player.has_media !== false,
-      });
-    });
-  }, [players]);
-
  // Use the WebSocket hook for room events with automatic reconnection
  useEffect(() => {
    if (!lastJsonMessage) {
@ -85,25 +75,33 @@ const PlayerList: React.FC = () => {
    }
    const data: any = lastJsonMessage;
    switch (data.type) {
-      case "game-update": {
+      case 'game-update': {
        console.log(`player-list - game-update:`, data.update);

+        // Track game state if provided
+        if ('state' in data.update) {
+          setGameState(data.update.state);
+        }
+
        // Handle participants list
-        if ("participants" in data.update && data.update.participants) {
+        if ('participants' in data.update && data.update.participants) {
          const participantsList: Player[] = data.update.participants;
          console.log(`player-list - participants:`, participantsList);

-          participantsList.forEach((player) => {
+          participantsList.forEach(player => {
            player.local = player.session_id === session?.id;
+            if (player.local) {
+              setPlayer(player);
+            }
          });
          participantsList.sort(sortPlayers);
          console.log(`player-list - sorted participants:`, participantsList);
          setPlayers(participantsList);

          // Initialize peers with remote mute/video state
-          setPeers((prevPeers) => {
+          setPeers(prevPeers => {
            const updated: Record<string, Peer> = { ...prevPeers };
-            participantsList.forEach((player) => {
+            participantsList.forEach(player => {
              // Only update remote peers, never overwrite local peer object
              if (!player.local && updated[player.session_id]) {
                updated[player.session_id] = {
@ -118,9 +116,9 @@ const PlayerList: React.FC = () => {
        }
        break;
      }
-      case "peer_state_update": {
+      case 'peer_state_update': {
        // Update peer state in peers, but do not override local mute
-        setPeers((prevPeers) => {
+        setPeers(prevPeers => {
          const updated = { ...prevPeers };
          const peerId = data.data?.peer_id || data.peer_id;
          if (peerId && updated[peerId]) {
@ -140,62 +138,68 @@ const PlayerList: React.FC = () => {
    }
  }, [lastJsonMessage, session, sortPlayers, setPeers, setPlayers]);

+  // Compute which colors are already taken
+  const availableColors = useMemo(() => {
+    const assignedColors = new Set(players.filter(p => p.color !== 'unassigned').map(p => p.color));
+    return ['O', 'R', 'W', 'B'].filter(color => !assignedColors.has(color));
+  }, [players]);
+
  useEffect(() => {
-    if (players !== null || !sendJsonMessage) {
+    if (players.length !== 0 || !sendJsonMessage) {
      return;
    }
    // Request participants list
    sendJsonMessage({
-      type: "get",
-      fields: ["participants"],
+      type: 'get',
+      fields: ['participants'],
    });
  }, [players, sendJsonMessage]);

  return (
-    <Box sx={{ position: "relative", width: "100%" }}>
+    <Box sx={{ position: 'relative', width: '100%' }}>
      <Paper
-        className={`player-list Medium`}
+        className={`PlayerList Medium`}
        sx={{
-          maxWidth: { xs: "100%", sm: 500 },
+          maxWidth: { xs: '100%', sm: 500 },
          p: { xs: 1, sm: 2 },
          m: { xs: 0, sm: 2 },
        }}
      >
        <MediaAgent {...{ session, peers, setPeers }} />
-        <List className="PlayerSelector">
-          {players?.map((player) => {
-            const peerObj = peers[player.session_id] || peers[player.name];
-            return (
-              <Box
-                key={player.session_id}
-                sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
-                className={`PlayerEntry ${player.local ? "PlayerSelf" : ""}`}
-              >
-                <Box>
-                  <Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
-                    <Box style={{ display: "flex-wrap", alignItems: "center" }}>
-                      <div className="Name">{player.name ? player.name : player.session_id}</div>
-                      {player.protected && (
-                        <div
-                          style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
-                          title="This name is protected with a password"
-                        >
-                          🔒
-                        </div>
-                      )}
-                      {player.bot_instance_id && (
-                        <div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
-                          🤖
-                        </div>
-                      )}
+        <List className="PlayerSelector Players">
+          {players
+            .filter(p => p.color && p.color !== 'unassigned')
+            .map(player => {
+              const peerObj = peers[player.session_id] || peers[player.name];
+              const playerStyle = player.color !== 'unassigned' ? styles[player.color] : {};
+              return (
+                <Box
+                  key={player.session_id}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    p: 1,
+                    borderRadius: '0.25rem',
+                    ...playerStyle,
+                  }}
+                  className={`PlayerEntry ${player.local ? 'PlayerSelf' : ''}`}
+                >
+                  <Box
+                    style={{
+                      display: 'flex-wrap',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Box style={{ display: 'flex-wrap', alignItems: 'center' }} className="Name">
+                      {player.bot_instance_id && <>🤖</>}
+                      {player.name ? player.name : player.session_id}
                    </Box>
+                    {player.name && !player.live && <Box className="NoNetwork"></Box>}
                  </Box>
-                  {player.name && !player.live && <div className="NoNetwork"></div>}
-                </Box>
-                {player.name && player.live && peerObj && (player.local || player.has_media !== false) ? (
-                  <>
+                  {player.name && player.live ? (
                    <MediaControl
-                      className="Medium"
                      key={player.session_id}
                      peer={peerObj}
                      isSelf={player.local}
@ -203,60 +207,99 @@ const PlayerList: React.FC = () => {
                      remoteAudioMuted={peerObj?.muted}
                      remoteVideoOff={peerObj?.video_on === false}
                    />
-
-                    {/* If this is the local player and they haven't picked a color, show a picker */}
-                    {player.local && player.color === "unassigned" && (
-                      <div style={{ marginTop: 8, width: "100%" }}>
-                        <div style={{ marginBottom: 6, fontSize: "0.9em" }}>Pick your color:</div>
-                        <div style={{ display: "flex", gap: 8 }}>
-                          {["orange", "red", "white", "blue"].map((c) => (
-                            <Box
-                              key={c}
-                              sx={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 8,
-                                padding: "6px 8px",
-                                borderRadius: 6,
-                                border: "1px solid #ccc",
-                                background: "#fff",
-                                cursor: sendJsonMessage ? "pointer" : "not-allowed",
-                              }}
-                              onClick={() => {
-                                if (!sendJsonMessage) return;
-                                sendJsonMessage({ type: "set", field: "color", value: c[0].toUpperCase() });
-                              }}
-                            >
-                              <PlayerColor color={c} />
-                            </Box>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </>
-                ) : player.name && player.live && player.has_media === false ? (
-                  <div
-                    className="Video fade-in"
-                    style={{
-                      background: "#333",
-                      color: "#fff",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "100%",
-                      height: "100%",
-                      fontSize: "14px",
+                  ) : (
+                    <div
+                      className="Video fade-in"
+                      style={{
+                        background: '#333',
+                        color: '#fff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                        fontSize: '14px',
+                      }}
+                    >
+                      💬 Chat Only
+                    </div>
+                  )}
+                </Box>
+              );
+            })}
+        </List>
+        {gameState === 'lobby' && (
+          <Paper sx={{ p: 0.5, mt: 0.5, backgroundColor: '#f9f9f9' }}>
+            <div style={{ marginBottom: 6, fontSize: '0.9em' }}>
+              {player && player.color !== 'unassigned' ? 'Change' : 'Pick'} your color:
+            </div>
+            <Box style={{ display: 'flex', gap: 8 }}>
+              {availableColors.map(c => {
+                return (
+                  <Box
+                    key={c}
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      cursor: 'pointer',
+                    }}
+                    onClick={() => {
+                      sendJsonMessage({ type: 'set', field: 'color', value: c });
                    }}
                  >
-                    💬 Chat Only
-                  </div>
-                ) : (
-                  <video className="Video"></video>
-                )}
-              </Box>
-            );
-          })}
-        </List>
+                    <PlayerColor color={c} />
+                  </Box>
+                );
+              })}
+            </Box>
+          </Paper>
+        )}
+        <Paper>
+          <List className="PlayerSelector Observers">
+            {players
+              .filter(p => !p.color || p.color === 'unassigned')
+              .map(player => {
+                const peerObj = peers[player.session_id] || peers[player.name];
+                return (
+                  <Box
+                    key={player.session_id}
+                    sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+                    className={`PlayerEntry ${player.local ? 'PlayerSelf' : ''}`}
+                    data-selectable={player.local && gameState === 'lobby'}
+                  >
+                    <Box
+                      style={{
+                        display: 'flex-wrap',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <Box style={{ display: 'flex-wrap', alignItems: 'center' }} className="Name">
+                        {player.bot_instance_id && <>🤖</>}
+                        {player.name ? player.name : player.session_id}
+                      </Box>
+                      {player.name && !player.live && <Box className="NoNetwork"></Box>}
+                    </Box>
+
+                    {/* Show media control if available */}
+                    {player.name &&
+                      player.live &&
+                      peerObj &&
+                      (player.local || player.has_media !== false) && (
+                        <MediaControl
+                          key={player.session_id}
+                          peer={peerObj}
+                          isSelf={player.local}
+                          sendJsonMessage={player.local ? sendJsonMessage : undefined}
+                          remoteAudioMuted={peerObj?.muted}
+                          remoteVideoOff={peerObj?.video_on === false}
+                        />
+                      )}
+                  </Box>
+                );
+              })}
+          </List>
+        </Paper>
      </Paper>
    </Box>
  );
--- a/client/src/Styles.ts
+++ b/client/src/Styles.ts
@ -4,18 +4,30 @@ import { orange, lightBlue, red, grey } from '@mui/material/colors';
 const styles = {
  R: {
    color: '#fff',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: red[700],
    backgroundColor: red[500],
  },
  O: {
    color: '#000',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: orange[600],
    backgroundColor: orange[500],
  },
  W: {
    color: '#000',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: grey[300],
    backgroundColor: grey[50],
  },
  B: {
    color: '#fff',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: lightBlue[700],
    backgroundColor: lightBlue[500],
  },
 };
--- a/client/src/Trade.css
+++ b/client/src/Trade.css
@ -4,15 +4,22 @@
  align-items: center;
  margin-right: 0.25rem;
  font-size: 0.75em;
+  /* allow the Trade component to stretch to its sidebar/container */
+  align-self: stretch;
+  width: 100%;
+  flex-direction: column;
 }

 .Trade > * {
  max-height: calc(100dvh - 2rem);
  overflow: auto;
-  width: 32em;
-  display: inline-flex;
+  /* fill the available width of the sidebar rather than using a fixed size */
+  width: 100%;
+  max-width: 100%;
+  display: flex;
  padding: 0.5em;
  flex-direction: column;
+  box-sizing: border-box;
 }

 .Trade .Title {
--- a/server/routes/games.ts
+++ b/server/routes/games.ts
@ -60,7 +60,12 @@ const processTies = (players: Player[]): boolean => {
  /* Sort the players into buckets based on their
   * order, and their current roll. If a resulting
   * roll array has more than one element, then there
-   * is a tie that must be resolved */
+   * is a tie that must be resolved. To ensure that
+   * earlier rolls remain more significant across
+   * subsequent tie-break rounds, we pad singleton
+   * players' numeric `order` when ties are detected so
+   * their earlier digits don't get outranked by extra
+   * digits appended to tied players. */
  let slots: Player[][] = [];
  players.forEach((player: Player) => {
    if (!slots[player.order]) {
@ -87,6 +92,37 @@ const processTies = (players: Player[]): boolean => {
    }
  };

+  // First detect whether any ties exist at all. If so, we need to pad
+  // singleton players' `order` values (multiply by 6) so that their
+  // existing rolls remain more significant than any additional digits
+  // that will be appended by tied players when they re-roll.
+  for (const slot of slots) {
+    if (slot && slot.length > 1) {
+      ties = true;
+      break;
+    }
+  }
+
+  if (ties) {
+    // Pad singleton players by shifting their order a digit left in base-6
+    players.forEach((player: Player) => {
+      const slot = slots[player.order];
+      if (slot && slot.length === 1) {
+        player.order = (player.order || 0) * 6;
+      }
+    });
+
+    // Rebuild slots based on the newly padded orders so we can assign
+    // positions correctly below.
+    slots = [];
+    players.forEach((player: Player) => {
+      if (!slots[player.order]) {
+        slots[player.order] = [];
+      }
+      slots[player.order]!.push(player);
+    });
+  }
+
  /* Reverse from high to low */
  const rev = slots.slice().reverse();
  for (const slot of rev) {
@ -2803,14 +2839,43 @@ const placeRoad = (game: Game, session: Session, index: number): string | undefi
  road.color = session.color;
  road.type = "road";
  player.roads--;
+  /* Handle normal play road placement including Road Building free roads.
+   * If the turn is a road-building action, decrement freeRoads and
+   * only clear actions when no free roads remain. Otherwise, during
+   * initial placement we advance the initial-placement sequence. */
+  if (game.state === "normal") {
+    addActivity(game, session, `${session.name} placed a road.`);
+    calculateRoadLengths(game, session);

-  /* During initial placement, placing a road advances the initial-placement
-   * sequence. In forward direction we move to the next player; when the
-   * last player places their road we flip to backward and begin the reverse
-   * settlement placements. In backward direction we move to the previous
-   * player and when the first player finishes, initial placement is done
-   * and normal play begins. */
-  if (game.state === "initial-placement") {
+    let resetLimits = true;
+    if (game.turn && (game.turn as any).active === "road-building") {
+      if ((game.turn as any).freeRoads !== undefined) {
+        (game.turn as any).freeRoads = (game.turn as any).freeRoads - 1;
+      }
+      if ((game.turn as any).freeRoads === 0) {
+        delete (game.turn as any).free;
+        delete (game.turn as any).active;
+        delete (game.turn as any).freeRoads;
+      }
+
+      const roads = getValidRoads(game, session.color as string);
+      if (!roads || roads.length === 0) {
+        delete (game.turn as any).active;
+        delete (game.turn as any).freeRoads;
+        addActivity(game, session, `${session.name} has another road to play, but there are no more valid locations.`);
+      } else if ((game.turn as any).freeRoads !== 0) {
+        (game.turn as any).free = true;
+        setForRoadPlacement(game, roads);
+        resetLimits = false;
+      }
+    }
+
+    if (resetLimits) {
+      delete (game.turn as any).free;
+      game.turn.actions = [];
+      game.turn.limits = {};
+    }
+  } else if (game.state === "initial-placement") {
    const order: PlayerColor[] = game.playerOrder;
    const idx = order.indexOf(session.color);
    // defensive: if player not found, just clear actions and continue
@ -4829,3 +4894,6 @@ router.post("/:id?", async (req, res /*, next*/) => {
 });

 export default router;
+
+// Export helpers for unit testing
+export { processTies, processGameOrder };
--- a/server/src/app.ts
+++ b/server/src/app.ts
@ -93,10 +93,12 @@ process.on("SIGINT", () => {
  server.close(() => process.exit(1));
 });

-console.log("Opening server.");
-server.listen(serverConfig.port, () => {
-  console.log(`http/ws server listening on ${serverConfig.port}`);
-});
+if (process.env['NODE_ENV'] !== 'test') {
+  console.log("Opening server.");
+  server.listen(serverConfig.port, () => {
+    console.log(`http/ws server listening on ${serverConfig.port}`);
+  });
+}

 server.on("error", function (error: any) {
  if (error.syscall !== "listen") {
--- a/server/tests/app.test.ts
+++ b/server/tests/app.test.ts
@ -1,5 +1,9 @@
 import request from 'supertest';
 const { app } = require('../src/app');
+const gamesModule = require('../../server/routes/games');
+
+// Import helpers for direct testing (exported for tests)
+const { processTies } = gamesModule;

 describe('Server Routes', () => {
  it('should respond to GET /', async () => {
@ -8,4 +12,43 @@ describe('Server Routes', () => {
  });

  // Add more tests as needed
+  it('resolves ties and preserves earlier rolls precedence', () => {
+    /* Build fake players to simulate the scenario:
+     * - James rolled 2
+     * - Guest rolled 2
+     * - Incognito rolled 5
+     * Expectation: Incognito 1st, Guest 2nd, James 3rd
+     * To simulate tie re-roll, processTies should mark ties and pad singleton orders.
+     */
+    const players = [
+      { name: 'James', color: 'R', order: 2, orderRoll: 2, position: '', orderStatus: '', tied: false },
+      { name: 'Guest', color: 'B', order: 2, orderRoll: 2, position: '', orderStatus: '', tied: false },
+      { name: 'Incognito', color: 'O', order: 5, orderRoll: 5, position: '', orderStatus: '', tied: false },
+    ];
+
+    // First sort like the server does (descending by order)
+    players.sort((A: any, B: any) => B.order - A.order);
+
+    // Invoke processTies to simulate the server behavior
+    const hadTies = processTies(players as any);
+
+    // There should be ties among the two players who rolled 2
+    expect(hadTies).toBe(true);
+
+    // Incognito should be placed 1st and not tied
+  const inc = players.find((p: any) => p.name === 'Incognito');
+  expect(inc).toBeDefined();
+  expect(inc!.position).toBe('1st');
+  expect(inc!.tied).toBe(false);
+
+    // The two players who tied should have been marked tied and have orderRoll reset
+  const james = players.find((p: any) => p.name === 'James');
+  const guest = players.find((p: any) => p.name === 'Guest');
+  expect(james).toBeDefined();
+  expect(guest).toBeDefined();
+  expect(james!.tied).toBe(true);
+  expect(guest!.tied).toBe(true);
+  expect(james!.orderRoll).toBe(0);
+  expect(guest!.orderRoll).toBe(0);
+  });
 });
Author	SHA1	Message	Date
James Ketrenos	419b36c22f	Fix Play Two Roads interaction	2025-10-11 13:14:07 -07:00
James Ketrenos	67f2580e3a	Fix Trade style	2025-10-11 13:08:13 -07:00
James Ketrenos	58d2a19ada	Re-roll testing	2025-10-11 12:59:50 -07:00
James Ketrenos	ecfcb0476b	Fix roll ordering at start	2025-10-11 12:55:36 -07:00
James Ketrenos	bc5a928da6	Adding style for color picking	2025-10-11 12:52:56 -07:00