feat: czar can now select a card

djpiper28 · Aug 30, 2024 · c2e3b7a · c2e3b7a
1 parent 896793b
commit c2e3b7a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 13 deletions.
diff --git a/cahfrontend/src/components/gameControls/GameLobby.tsx b/cahfrontend/src/components/gameControls/GameLobby.tsx
@@ -34,6 +34,8 @@ import CurrentRoundResults from "../gameItems/CurrentRoundResults";
 // Exported for testing reasons
 export function GameLobbyLoaded(props: Readonly<LobbyLoadedProps>) {
   const isGameOwner = () => props.state.ownerId === gameState.getPlayerId();
+  const isCzar = () =>
+    props.roundState.currentCardCzarId === gameState.getPlayerId();
   const settings = () => props.state.settings;
   const isGameStarted = () => props.state.gameState !== GameStateInLobby;
   const isCzarJudgingPhase = () =>
@@ -86,9 +88,10 @@ export function GameLobbyLoaded(props: Readonly<LobbyLoadedProps>) {
         <Show when={isGameStarted() && props.roundState}>
           <Show when={isCzarJudgingPhase()}>
             <SubHeader
-              text={`${props.roundState.currentCardCzarId === gameState.getPlayerId() ? "Chose a winning play" : "Waiting for the czar to judge"}:`}
+              text={`${isCzar() ? "Chose a winning play" : "Waiting for the czar to judge"}:`}
             />
             <CurrentRoundResults
+              isCzar={isCzar()}
               blackCard={props.roundState.blackCard}
               plays={props.allPlays.map((x, i) => {
                 return {

diff --git a/cahfrontend/src/components/gameItems/CurrentRoundResults.tsx b/cahfrontend/src/components/gameItems/CurrentRoundResults.tsx
@@ -1,6 +1,7 @@
 import { BlackCard, WhiteCard } from "../../gameLogicTypes";
 import { For } from "solid-js";
 import Card from "./Card";
+import { gameState } from "../../gameState/gameState";
 
 interface PlayerPlay {
   whiteCards: WhiteCard[];
@@ -10,28 +11,44 @@ interface PlayerPlay {
 interface PlayerPlayProps {
   play: PlayerPlay;
   index: number;
+  isCzar: boolean;
 }
 
 function PlayerCard(props: Readonly<PlayerPlayProps>) {
+  const cardNode = (
+      <div
+        class={`flex flex-row gap-2 border-2 border-white rounded-2xl ${props.play.winner ? "border-blue-500" : ""}`}
+      >
+        {props.play.whiteCards.map((card, index) => (
+          <Card
+            id={props.index + index}
+            cardText={card.bodyText}
+            packName={`Player ${props.index + 1}`}
+            isWhite={true}
+          />
+        ))}
+      </div>
+  )
+
+  if (!props.isCzar) {
+    return cardNode;
+  }
+
   return (
-    <div
-      class={`flex flex-row gap-2 border-2 border-white rounded-2xl ${props.play.winner ? "border-blue-500" : ""}`}
+    <button
+      onClick={() => {
+        gameState.czarSelectCards(props.play.whiteCards.map((x) => x.id));
+      }}
     >
-      {props.play.whiteCards.map((card, index) => (
-        <Card
-          id={props.index + index}
-          cardText={card.bodyText}
-          packName={`Player ${props.index + 1}`}
-          isWhite={true}
-        />
-      ))}
-    </div>
+      {cardNode}
+    </button>
   );
 }
 
 interface Props {
   blackCard: BlackCard;
   plays: PlayerPlay[];
+  isCzar: boolean;
 }
 
 export default function CurrentRoundResults(props: Readonly<Props>) {
@@ -45,7 +62,7 @@ export default function CurrentRoundResults(props: Readonly<Props>) {
       />
       <For each={props.plays}>
         {(play, index) => {
-          return <PlayerCard play={play} index={index()} />;
+          return <PlayerCard play={play} index={index()} isCzar={props.isCzar} />;
         }}
       </For>
     </div>

diff --git a/cahfrontend/src/gameState/gameState.ts b/cahfrontend/src/gameState/gameState.ts
@@ -9,6 +9,7 @@ import {
 import {
   MsgChangeSettings,
   MsgCommandError,
+  MsgCzarSelectCard,
   MsgNewOwner,
   MsgOnCardPlayed,
   MsgOnCzarJudgingPhase,
@@ -17,12 +18,14 @@ import {
   MsgOnPlayerDisconnect,
   MsgOnPlayerJoin,
   MsgOnPlayerLeave,
+  MsgOnWhiteCardPlayPhase,
   MsgPing,
   MsgPlayCards,
   MsgRoundInformation,
   MsgStartGame,
   RpcChangeSettingsMsg,
   RpcCommandErrorMsg,
+  RpcCzarSelectCardMsg,
   RpcMessage,
   RpcMessageBody,
   RpcMessageType,
@@ -395,6 +398,9 @@ class GameState {
         return this.handleOnCzarJudgingPhase(
           rpcMessage.data as RpcOnCzarJudgingPhaseMsg,
         );
+      case MsgOnWhiteCardPlayPhase:
+        console.log("TODO Implement me");
+        break;
       default:
         throw new Error(
           `Cannot handle RPC message as type is not valid ${rpcMessage.type}`,
@@ -457,6 +463,21 @@ class GameState {
       JSON.stringify(this.encodeMessage(MsgPlayCards, msg)),
     );
   }
+
+  public czarSelectCards(cards: number[]) {
+    console.log("Czar is selecting cards: ", cards)
+    if (!this.wsClient) {
+      throw new Error("Cannot play cards as websocket is not connected");
+    }
+
+    const msg: RpcCzarSelectCardMsg = {
+      cards: cards
+    }
+
+    this.wsClient.sendMessage(
+      JSON.stringify(this.encodeMessage(MsgCzarSelectCard, msg)),
+    );
+  }
 }
 
 export const gameState: GameState = new GameState();