Longwave

25 | {t("title.longwave")} 26 |

22 | {props.children} 23 |

39 | {props.children} 40 |

19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |

32 |

(null); 10 | return ( 11 | 12 | 13 |

{t("inputname.your_name")}:

14 | { 19 | if (!inputRef.current) { 20 | return false; 21 | } 22 | if (event.key !== "Enter") { 23 | return true; 24 | } 25 | props.setName(inputRef.current.value); 26 | }} 27 | /> 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/components/gameplay/TestContext.tsx: -------------------------------------------------------------------------------- 1 | import { ReactChild, Suspense } from "react"; 2 | import { GameState } from "../../state/GameState"; 3 | import { BuildGameModel } from "../../state/BuildGameModel"; 4 | import { GameModelContext } from "../../state/GameModelContext"; 5 | import { I18nextProvider } from "react-i18next"; 6 | import i18n from "./i18nForTests"; 7 | 8 | export function TestContext(props: { 9 | gameState: GameState; 10 | playerId: string; 11 | children: ReactChild; 12 | setState?: (newState: Partial) => void; 13 | }) { 14 | return ( 15 | ["left", "right"] as any, 21 | () => {} 22 | )} 23 | > 24 | Loading...}> 25 | {props.children} 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/components/common/GetContrastingText.ts: -------------------------------------------------------------------------------- 1 | interface RGB { 2 | b: number; 3 | g: number; 4 | r: number; 5 | } 6 | 7 | function hex2Rgb(hex: string): RGB | undefined { 8 | if (!hex || hex === undefined || hex === '') { 9 | return undefined; 10 | } 11 | 12 | const result: RegExpExecArray | null = 13 | /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 14 | 15 | return result ? { 16 | r: parseInt(result[1], 16), 17 | g: parseInt(result[2], 16), 18 | b: parseInt(result[3], 16) 19 | } : undefined; 20 | } 21 | 22 | function rgb2YIQ({ r, g, b }: RGB): number { 23 | return ((r * 299) + (g * 587) + (b * 114)) / 1000; 24 | } 25 | 26 | export function GetContrastingText(colorHex: string | undefined, 27 | threshold: number = 128): string { 28 | if (colorHex === undefined) { 29 | return '#000'; 30 | } 31 | 32 | const rgb: RGB | undefined = hex2Rgb(colorHex); 33 | 34 | if (rgb === undefined) { 35 | return '#000'; 36 | } 37 | 38 | return rgb2YIQ(rgb) >= threshold ? '#000' : '#fff'; 39 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Evan Bailey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/state/NewRound.ts: -------------------------------------------------------------------------------- 1 | import { RoundPhase, GameState } from "./GameState"; 2 | import { RandomSpectrumTarget } from "./RandomSpectrumTarget"; 3 | import { BuildGameModel } from "./BuildGameModel"; 4 | import { TFunction } from "i18next"; 5 | 6 | export function NewRound( 7 | playerId: string, 8 | gameState: GameState, 9 | tSpectrumCards: TFunction<"spectrum-cards"> 10 | ): Partial { 11 | const gameModel = BuildGameModel( 12 | gameState, 13 | () => {}, 14 | playerId, 15 | tSpectrumCards, 16 | () => {} 17 | ); 18 | 19 | const newState: Partial = { 20 | clueGiver: playerId, 21 | roundPhase: RoundPhase.GiveClue, 22 | deckIndex: gameState.deckIndex + 1, 23 | turnsTaken: gameState.turnsTaken + 1, 24 | spectrumTarget: RandomSpectrumTarget(), 25 | }; 26 | 27 | if (gameModel.clueGiver !== null) { 28 | newState.previousTurn = { 29 | spectrumCard: gameModel.spectrumCard, 30 | spectrumTarget: gameState.spectrumTarget, 31 | clueGiverName: gameModel.clueGiver.name, 32 | clue: gameState.clue, 33 | guess: gameState.guess, 34 | }; 35 | } 36 | 37 | return newState; 38 | } 39 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import "./index.css"; 2 | import "rc-slider/assets/index.css"; 3 | import "tippy.js/dist/tippy.css"; 4 | 5 | import React, { Suspense } from "react"; 6 | import ReactDOM from "react-dom"; 7 | 8 | import * as serviceWorker from "./serviceWorker"; 9 | import firebase from "firebase/app"; 10 | 11 | import App from "./components/App"; 12 | import { firebaseConfig } from "./firebaseConfig"; 13 | 14 | // import i18n (needs to be bundled ;)) 15 | import "./i18n"; 16 | 17 | firebase.initializeApp(firebaseConfig); 18 | firebase.analytics().logEvent("screen_view", { 19 | app_name: "Longwave", 20 | screen_name: "index", 21 | }); 22 | 23 | ReactDOM.render( 24 | 25 | Loading...}> 26 | 27 | 28 | , 29 | document.getElementById("root") 30 | ); 31 | 32 | //ReactDOM.render( 33 | // 34 | // 35 | // , 36 | // document.getElementById("root") 37 | //); 38 | 39 | // If you want your app to work offline and load faster, you can change 40 | // unregister() to register() below. Note this comes with some pitfalls. 41 | // Learn more about service workers: https://bit.ly/CRA-PWA 42 | serviceWorker.unregister(); 43 | -------------------------------------------------------------------------------- /.github/workflows/cloudzilla/master/k8s/deploy.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: apps/v1 2 | kind: Deployment 3 | metadata: 4 | name: section-project-deployment 5 | labels: 6 | app: console-project 7 | spec: 8 | replicas: 1 9 | selector: 10 | matchLabels: 11 | app: console-project 12 | template: 13 | metadata: 14 | labels: 15 | app: console-project 16 | spec: 17 | containers: 18 | - name: console-project 19 | image: $FULL_IMAGE_WITH_TAG 20 | imagePullPolicy: Always 21 | envFrom: 22 | - secretRef: 23 | name: console-project-env-secret 24 | resources: 25 | limits: 26 | cpu: 1000m 27 | memory: 2147483648 28 | requests: 29 | cpu: 50m 30 | memory: 50Mi 31 | ports: 32 | - containerPort: 80 33 | startupProbe: 34 | tcpSocket: 35 | port: 80 36 | initialDelaySeconds: 10 37 | periodSeconds: 5 38 | failureThreshold: 30 39 | readinessProbe: 40 | tcpSocket: 41 | port: 80 42 | initialDelaySeconds: 5 43 | periodSeconds: 5 44 | imagePullSecrets: 45 | - name: regcred 46 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | .wipe-reveal-right { 41 | overflow: hidden; 42 | position: relative; 43 | } 44 | 45 | .wipe-reveal-right::after { 46 | content: " "; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 100%; 51 | height: 100%; 52 | background: #fff; 53 | z-index: 2; 54 | transition: all 1s linear; 55 | } 56 | 57 | .wipe-reveal-right.animate::after { 58 | transform: translateX(100%); 59 | } 60 | 61 | .fade-disappear-up { 62 | transition: all 3s ease-in; 63 | } 64 | 65 | .fade-disappear-up.animate { 66 | transform: translateY(-100%); 67 | opacity: 0; 68 | } 69 | -------------------------------------------------------------------------------- /.github/workflows/cloudzilla/master/Dockerfile: -------------------------------------------------------------------------------- 1 | # Step 1: Use Node.js for building the app 2 | FROM node:21 AS builder 3 | 4 | # Set the working directory 5 | WORKDIR /app 6 | 7 | # Add `/app/node_modules/.bin` to PATH 8 | ENV PATH /app/node_modules/.bin:$PATH 9 | 10 | # This is a fix for this reported issue, can likely remove at some point in the future 11 | # https://github.com/nodejs/corepack/issues/612 12 | RUN npm install -g corepack@latest 13 | 14 | # Enable Corepack for managing pnpm and Yarn versions 15 | RUN corepack enable 16 | 17 | # Install dependencies 18 | COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ 19 | 20 | RUN if [ -f package-lock.json ]; then npm install; \ 21 | elif [ -f yarn.lock ]; then yarn install; \ 22 | elif [ -f pnpm-lock.yaml ]; then pnpm install; \ 23 | else echo "No lockfile found. Attempting install anyways with npm" && npm install; \ 24 | fi 25 | 26 | # Copy the app's source code and build it 27 | COPY . ./ 28 | RUN react-scripts build 29 | 30 | # Use a lightweight NGINX image for serving the app 31 | FROM nginx:alpine 32 | 33 | # Copy the built files from the previous stage 34 | COPY --from=builder /app/build /usr/share/nginx/html 35 | 36 | # Copy a custom NGINX configuration file 37 | COPY .github/workflows/cloudzilla/master/nginx.conf /etc/nginx/conf.d/default.conf 38 | 39 | # Expose port 80 40 | EXPOSE 80 41 | 42 | # Start NGINX 43 | CMD ["nginx", "-g", "daemon off;"] 44 | -------------------------------------------------------------------------------- /src/components/gameplay/ActiveGame.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RoundPhase, GameType, Team } from "../../state/GameState"; 3 | import { GiveClue } from "./GiveClue"; 4 | import { MakeGuess } from "./MakeGuess"; 5 | import { ViewScore } from "./ViewScore"; 6 | import { JoinTeam } from "./JoinTeam"; 7 | import { Scoreboard } from "./Scoreboard"; 8 | import { SetupGame } from "./SetupGame"; 9 | import { CounterGuess } from "./CounterGuess"; 10 | import { useContext } from "react"; 11 | import { GameModelContext } from "../../state/GameModelContext"; 12 | import { PreviousTurnResult } from "./PreviousTurnResult"; 13 | 14 | export function ActiveGame() { 15 | const { gameState, localPlayer } = useContext(GameModelContext); 16 | 17 | if (gameState.roundPhase === RoundPhase.SetupGame) { 18 | return ; 19 | } 20 | 21 | if ( 22 | gameState.gameType === GameType.Teams && 23 | (gameState.roundPhase === RoundPhase.PickTeams || 24 | localPlayer.team === Team.Unset) 25 | ) { 26 | return ; 27 | } 28 | 29 | return ( 30 | <> 31 | {gameState.roundPhase === RoundPhase.GiveClue && } 32 | {gameState.roundPhase === RoundPhase.MakeGuess && } 33 | {gameState.roundPhase === RoundPhase.CounterGuess && } 34 | {gameState.roundPhase === RoundPhase.ViewScore && } 35 | 36 | {gameState.previousTurn && ( 37 | 38 | )} 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/gameplay/PreviousTurnResult.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { TurnSummaryModel } from "../../state/GameState"; 3 | import { CenteredColumn } from "../common/LayoutElements"; 4 | import { Spectrum } from "../common/Spectrum"; 5 | 6 | import { useTranslation } from "react-i18next"; 7 | 8 | export function PreviousTurnResult(props: TurnSummaryModel) { 9 | const { t } = useTranslation(); 10 | const style: React.CSSProperties = { 11 | borderTop: "1px solid black", 12 | margin: 16, 13 | paddingTop: 16, 14 | }; 15 | 16 | const glassStyle: React.CSSProperties = { 17 | position: "absolute", 18 | zIndex: 10, 19 | left: 0, 20 | right: 0, 21 | top: 0, 22 | bottom: 0, 23 | backgroundColor: "rgba(255,255,255,0.5)", 24 | }; 25 | 26 | return ( 27 |

28 | 29 | {t("previousturnresult.previous_game")} 30 | 31 |

36 |

37 | 42 | 43 |

44 | {t("previousturnresult.player_clue", { 45 | givername: props.clueGiverName, 46 | })} 47 | : {props.clue} 48 |

49 | 50 |

51 |

52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /src/components/gameplay/SetupGame.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GameType, RoundPhase } from "../../state/GameState"; 3 | import { CenteredRow, CenteredColumn } from "../common/LayoutElements"; 4 | import { Button } from "../common/Button"; 5 | import { LongwaveAppTitle } from "../common/Title"; 6 | import { useContext } from "react"; 7 | import { GameModelContext } from "../../state/GameModelContext"; 8 | import { NewRound } from "../../state/NewRound"; 9 | 10 | import { useTranslation } from "react-i18next"; 11 | 12 | export function SetupGame() { 13 | const { t } = useTranslation(); 14 | const cardsTranslation = useTranslation("spectrum-cards"); 15 | const { gameState, setGameState, localPlayer } = useContext(GameModelContext); 16 | 17 | const startGame = (gameType: GameType) => { 18 | if (gameType === GameType.Teams) { 19 | setGameState({ 20 | roundPhase: RoundPhase.PickTeams, 21 | gameType, 22 | }); 23 | } else { 24 | setGameState({ 25 | ...NewRound(localPlayer.id, gameState, cardsTranslation.t), 26 | gameType, 27 | }); 28 | } 29 | }; 30 | 31 | return ( 32 | 33 | 34 | 35 |

72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/state/GameState.ts: -------------------------------------------------------------------------------- 1 | import { RandomSpectrumTarget } from "./RandomSpectrumTarget"; 2 | import { RandomFourCharacterString } from "./RandomFourCharacterString"; 3 | import { TFunction } from "i18next"; 4 | 5 | export enum RoundPhase { 6 | SetupGame, 7 | PickTeams, 8 | GiveClue, 9 | MakeGuess, 10 | CounterGuess, 11 | ViewScore, 12 | } 13 | 14 | export enum GameType { 15 | Teams, 16 | Cooperative, 17 | Freeplay, 18 | } 19 | 20 | export enum Team { 21 | Unset, 22 | Left, 23 | Right, 24 | } 25 | 26 | export function TeamReverse(team: Team) { 27 | if (team === Team.Left) { 28 | return Team.Right; 29 | } 30 | if (team === Team.Right) { 31 | return Team.Left; 32 | } 33 | return Team.Unset; 34 | } 35 | 36 | export function TeamName(team: Team, t: TFunction) { 37 | if (team === Team.Left) { 38 | return t("gamestate.left_brain"); 39 | } 40 | if (team === Team.Right) { 41 | return t("gamestate.right_brain"); 42 | } 43 | return t("gamestate.the_player"); 44 | } 45 | 46 | export type PlayersTeams = { 47 | [playerId: string]: { 48 | name: string; 49 | team: Team; 50 | }; 51 | }; 52 | 53 | export type TurnSummaryModel = { 54 | spectrumCard: [string, string]; 55 | clueGiverName: string; 56 | clue: string; 57 | spectrumTarget: number; 58 | guess: number; 59 | }; 60 | 61 | export interface GameState { 62 | gameType: GameType; 63 | roundPhase: RoundPhase; 64 | turnsTaken: number; 65 | deckSeed: string; 66 | deckIndex: number; 67 | spectrumTarget: number; 68 | clue: string; 69 | guess: number; 70 | counterGuess: "left" | "right"; 71 | players: PlayersTeams; 72 | clueGiver: string; 73 | leftScore: number; 74 | rightScore: number; 75 | coopScore: number; 76 | coopBonusTurns: number; 77 | previousTurn: TurnSummaryModel | null; 78 | deckLanguage: string | null; 79 | } 80 | 81 | export function InitialGameState(deckLanguage: string): GameState { 82 | return { 83 | gameType: GameType.Teams, 84 | roundPhase: RoundPhase.SetupGame, 85 | turnsTaken: -1, 86 | deckSeed: RandomFourCharacterString(), 87 | deckIndex: 0, 88 | spectrumTarget: RandomSpectrumTarget(), 89 | clue: "", 90 | guess: 0, 91 | counterGuess: "left", 92 | players: {}, 93 | clueGiver: "", 94 | leftScore: 0, 95 | rightScore: 0, 96 | coopScore: 0, 97 | coopBonusTurns: 0, 98 | previousTurn: null, 99 | deckLanguage: deckLanguage, 100 | }; 101 | } 102 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/gameplay/FakeRooms.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { GameModelContext } from "../../state/GameModelContext"; 3 | import { ActiveGame } from "./ActiveGame"; 4 | import { BuildGameModel } from "../../state/BuildGameModel"; 5 | import { CenteredRow, CenteredColumn } from "../common/LayoutElements"; 6 | import { 7 | InitialGameState, 8 | GameState, 9 | Team, 10 | GameType, 11 | RoundPhase, 12 | } from "../../state/GameState"; 13 | import { useTranslation } from "react-i18next"; 14 | 15 | export function FakeRooms() { 16 | const cardsTranslation = useTranslation("spectrum-cards"); 17 | 18 | const [gameState, setGameState] = useState({ 19 | ...InitialGameState(cardsTranslation.i18n.language), 20 | gameType: GameType.Teams, 21 | roundPhase: RoundPhase.PickTeams, 22 | players: { 23 | ul: { 24 | name: "Upper Left", 25 | team: Team.Left, 26 | }, 27 | ll: { 28 | name: "Lower Left", 29 | team: Team.Left, 30 | }, 31 | ur: { 32 | name: "Upper Right", 33 | team: Team.Right, 34 | }, 35 | lr: { 36 | name: "Lower Right", 37 | team: Team.Right, 38 | }, 39 | }, 40 | }); 41 | 42 | const setPartialGameState = (newState: Partial) => 43 | setGameState({ 44 | ...gameState, 45 | ...newState, 46 | }); 47 | 48 | const style: React.CSSProperties = { 49 | width: 500, 50 | margin: 4, 51 | padding: 4, 52 | border: "1px solid black", 53 | }; 54 | 55 | const renderGame = (playerId: string) => ( 56 |

57 | {} 64 | )} 65 | > 66 | 67 | 68 |

69 | ); 70 | 71 | return ( 72 | 75 | 81 | {renderGame("ul")} 82 | {renderGame("ll")} 83 | 84 | 90 | {renderGame("ur")} 91 | {renderGame("lr")} 92 | 93 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /src/components/gameplay/GameRoom.tsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import React from "react"; 3 | import { useStorageBackedState } from "../hooks/useStorageBackedState"; 4 | import { useNetworkBackedGameState } from "../hooks/useNetworkBackedGameState"; 5 | import { InputName } from "./InputName"; 6 | import { RandomFourCharacterString } from "../../state/RandomFourCharacterString"; 7 | import { GameModelContext } from "../../state/GameModelContext"; 8 | import { ActiveGame } from "./ActiveGame"; 9 | import { BuildGameModel } from "../../state/BuildGameModel"; 10 | import { RoomIdHeader } from "../common/RoomIdHeader"; 11 | import { FakeRooms } from "./FakeRooms"; 12 | import { useTranslation } from "react-i18next"; 13 | 14 | export function GameRoom() { 15 | const { roomId } = useParams<{ roomId: string }>(); 16 | if (roomId === undefined) { 17 | throw new Error("RoomId missing"); 18 | } 19 | 20 | const [playerName, setPlayerName] = useStorageBackedState("", "name"); 21 | 22 | const [playerId] = useStorageBackedState( 23 | RandomFourCharacterString(), 24 | "playerId" 25 | ); 26 | 27 | const [gameState, setGameState] = useNetworkBackedGameState( 28 | roomId, 29 | playerId, 30 | playerName 31 | ); 32 | 33 | const cardsTranslation = useTranslation("spectrum-cards"); 34 | 35 | if ( 36 | gameState.deckLanguage !== null && 37 | cardsTranslation.i18n.language !== gameState.deckLanguage 38 | ) { 39 | cardsTranslation.i18n.changeLanguage(gameState.deckLanguage); 40 | return null; 41 | } 42 | 43 | if (roomId === "MULTIPLAYER_TEST") { 44 | return ; 45 | } 46 | 47 | const gameModel = BuildGameModel( 48 | gameState, 49 | setGameState, 50 | playerId, 51 | cardsTranslation.t, 52 | setPlayerName 53 | ); 54 | 55 | if (playerName.length === 0) { 56 | return ( 57 | { 59 | setPlayerName(name); 60 | gameState.players[playerId].name = name; 61 | setGameState(gameState); 62 | }} 63 | /> 64 | ); 65 | } 66 | 67 | const searchParams = new URLSearchParams(window.location.search); 68 | if (searchParams.get("rocketcrab")) { 69 | const rocketcrabPlayerName = searchParams.get("name"); 70 | if (rocketcrabPlayerName !== null && rocketcrabPlayerName !== playerName) { 71 | setPlayerName(rocketcrabPlayerName); 72 | } 73 | } 74 | 75 | if (!gameState?.players?.[playerId]) { 76 | return null; 77 | } 78 | 79 | return ( 80 | 81 | 82 | 83 | 84 | ); 85 | } 86 | -------------------------------------------------------------------------------- /src/components/gameplay/JoinTeam.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, fireEvent, within, waitFor } from "@testing-library/react"; 2 | import { InitialGameState, GameState, Team } from "../../state/GameState"; 3 | import { JoinTeam } from "./JoinTeam"; 4 | import { TestContext } from "./TestContext"; 5 | 6 | jest.useFakeTimers(); 7 | 8 | test("Assigns player to the selected team", async () => { 9 | const gameState: GameState = { 10 | ...InitialGameState(), 11 | players: { 12 | player1: { 13 | name: "Player", 14 | team: Team.Unset, 15 | }, 16 | }, 17 | }; 18 | 19 | const setState = jest.fn(); 20 | const component = await render( 21 | 22 | 23 | 24 | ); 25 | 26 | let leftBrain: HTMLElement | null = null; 27 | 28 | await waitFor(() => { 29 | leftBrain = component.getByText("LEFT BRAIN"); 30 | return leftBrain; 31 | }); 32 | 33 | expect(leftBrain).toBeInTheDocument(); 34 | 35 | const button = leftBrain!.parentNode?.querySelector("input")!; 36 | 37 | expect(button.value).toEqual("Join"); 38 | 39 | await fireEvent.click(button); 40 | 41 | expect(setState).toHaveBeenCalledWith({ 42 | players: { 43 | player1: { 44 | id: "player1", 45 | name: "Player", 46 | team: Team.Left, 47 | }, 48 | }, 49 | }); 50 | }); 51 | 52 | test("Shows current team members", () => { 53 | const gameState: GameState = { 54 | ...InitialGameState(), 55 | players: { 56 | playerId: { 57 | name: "Player", 58 | team: Team.Unset, 59 | }, 60 | leftTeam1: { 61 | name: "Left Team 1", 62 | team: Team.Left, 63 | }, 64 | leftTeam2: { 65 | name: "Left Team 2", 66 | team: Team.Left, 67 | }, 68 | rightTeam1: { 69 | name: "Right Team 1", 70 | team: Team.Right, 71 | }, 72 | rightTeam2: { 73 | name: "Right Team 2", 74 | team: Team.Right, 75 | }, 76 | }, 77 | }; 78 | 79 | const component = render( 80 | 81 | 82 | 83 | ); 84 | 85 | const leftBrain = within(component.getByText("LEFT BRAIN").parentElement!); 86 | expect(leftBrain.getByText("Left Team 1")).toBeInTheDocument(); 87 | expect(leftBrain.getByText("Left Team 2")).toBeInTheDocument(); 88 | 89 | const rightBrain = within(component.getByText("RIGHT BRAIN").parentElement!); 90 | expect(rightBrain.getByText("Right Team 1")).toBeInTheDocument(); 91 | expect(rightBrain.getByText("Right Team 2")).toBeInTheDocument(); 92 | }); 93 | -------------------------------------------------------------------------------- /src/components/gameplay/JoinTeam.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CenteredRow, CenteredColumn } from "../common/LayoutElements"; 3 | import { RoundPhase, Team, TeamName } from "../../state/GameState"; 4 | import { Button } from "../common/Button"; 5 | import { LongwaveAppTitle } from "../common/Title"; 6 | import { useContext } from "react"; 7 | import { GameModelContext } from "../../state/GameModelContext"; 8 | import { NewTeamGame } from "../../state/NewGame"; 9 | 10 | import { useTranslation } from "react-i18next"; 11 | 12 | export function JoinTeam() { 13 | const { t } = useTranslation(); 14 | const cardsTranslation = useTranslation("spectrum-cards"); 15 | const { gameState, localPlayer, setGameState } = useContext(GameModelContext); 16 | 17 | const leftTeam = Object.keys(gameState.players).filter( 18 | (playerId) => gameState.players[playerId].team === Team.Left 19 | ); 20 | const rightTeam = Object.keys(gameState.players).filter( 21 | (playerId) => gameState.players[playerId].team === Team.Right 22 | ); 23 | 24 | const joinTeam = (team: Team) => { 25 | setGameState({ 26 | players: { 27 | ...gameState.players, 28 | [localPlayer.id]: { 29 | ...localPlayer, 30 | team, 31 | }, 32 | }, 33 | }); 34 | }; 35 | 36 | const startGame = () => 37 | setGameState( 38 | NewTeamGame( 39 | gameState.players, 40 | localPlayer.id, 41 | gameState, 42 | cardsTranslation.t 43 | ) 44 | ); 45 | 46 | return ( 47 | 48 | 49 |

{t("jointeam.join_team")}:

50 | 56 | 57 |

{TeamName(Team.Left, t)}

58 | {leftTeam.map((playerId) => ( 59 |

{gameState.players[playerId].name}

60 | ))} 61 |

62 |

67 | 68 | 69 |

{TeamName(Team.Right, t)}

70 | {rightTeam.map((playerId) => ( 71 |

{gameState.players[playerId].name}

72 | ))} 73 |

74 |

79 | 80 | 81 | {gameState.roundPhase === RoundPhase.PickTeams && ( 82 |