app routes room $roomName summary: compute coryat on backend

cmnord · Aug 15, 2024 · 0a76d8e · 0a76d8e
1 parent f16dc1b
commit 0a76d8e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/app/routes/room.$roomName_.summary/chart.tsx b/app/routes/room.$roomName_.summary/chart.tsx
@@ -12,7 +12,7 @@ import {
   YAxis,
 } from "recharts";
 import { Action, gameEngine } from "~/engine";
-import { State, getNumCluesInBoard, stateFromGame } from "~/engine/state";
+import { Player, getNumCluesInBoard, stateFromGame } from "~/engine/state";
 import { Game } from "~/models/game.server";
 import { stringToHslColor } from "~/utils";
 
@@ -78,18 +78,16 @@ const CustomDot = (props: DotProps & { payload?: DataPoint }) => {
 /** Chart is a line chart of each player's score over time. */
 export default function Chart({
   game,
-  state,
+  players,
   roomEvents,
 }: {
   game: Game;
-  state: State;
+  players: Player[];
   roomEvents: Action[];
 }) {
   const initialPoint: DataPoint = {
     x: 0,
-    ...Object.fromEntries(
-      Array.from(state.players.values()).map((player) => [player.userId, 0]),
-    ),
+    ...Object.fromEntries(players.map((player) => [player.userId, 0])),
     wagerable: 0,
   };
   const data = [initialPoint];
@@ -147,7 +145,7 @@ export default function Chart({
           ))}
           {/* Horizontal reference line at score 0 */}
           <ReferenceLine y={0} strokeDasharray="3 3" />
-          {Array.from(state.players.values()).map((player) => (
+          {players.map((player) => (
             <Line
               name={player.name}
               connectNulls

diff --git a/app/routes/room.$roomName_.summary/route.tsx b/app/routes/room.$roomName_.summary/route.tsx
@@ -48,8 +48,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
   const roomEvents = await getRoomEvents(room.id, accessToken);
 
+  const state = applyRoomEventsToState(stateFromGame(game), roomEvents);
   if (userId) {
-    const state = applyRoomEventsToState(stateFromGame(game), roomEvents);
     if (state.type === GameState.GameOver && state.players.has(userId)) {
       const solve = await getSolve(userId, game.id, accessToken);
       if (solve && solve.solved_at === null) {
@@ -58,7 +58,16 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     }
   }
 
+  const sortedPlayers = Array.from(state.players.values()).sort(
+    (a, b) => b.score - a.score,
+  );
+  const coryats = sortedPlayers.map((player) =>
+    getCoryat(player.userId, state),
+  );
+
   return json({
+    sortedPlayers,
+    coryats,
     game,
     roomEvents,
     roomId,
@@ -74,11 +83,8 @@ export default function PlayGame() {
     data.roomEvents,
   );
 
-  const sortedPlayers = Array.from(state.players.values()).sort(
-    (a, b) => b.score - a.score,
-  );
-  const maxScore = sortedPlayers.at(0)?.score;
-  const winningPlayers = sortedPlayers
+  const maxScore = data.sortedPlayers.at(0)?.score;
+  const winningPlayers = data.sortedPlayers
     .filter((p) => p.score === maxScore)
     .map((p) => p.name);
 
@@ -90,7 +96,7 @@ export default function PlayGame() {
       >
         <h2 className="text-2xl">Congrats, {winningPlayers.join(" and ")}!</h2>
         <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3">
-          {sortedPlayers.map((p) => (
+          {data.sortedPlayers.map((p) => (
             <PlayerScore
               key={p.userId}
               player={p}
@@ -101,15 +107,15 @@ export default function PlayGame() {
         </div>
         <h3 className="text-lg">Coryat Scores</h3>
         <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3">
-          {sortedPlayers.map((p) => (
+          {data.sortedPlayers.map((p, i) => (
             <span>
-              {p.name}: {formatDollars(getCoryat(p.userId, state))}
+              {p.name}: {formatDollars(data.coryats[i])}
             </span>
           ))}
         </div>
         <ScoreChart
           game={data.game}
-          state={state}
+          players={data.sortedPlayers}
           roomEvents={data.roomEvents.filter(isTypedRoomEvent)}
         />
       </div>