score is now saved in gamestate. this allows an easy new game by givi…

…ng the old scores as optional parameter in Game() constructor
seroteunine · Nov 30, 2023 · 65f6a08 · 65f6a08
1 parent cfbc00a
commit 65f6a08
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 74 deletions.
diff --git a/client/src/components/host/EndHost.tsx b/client/src/components/host/EndHost.tsx
@@ -1,58 +1,53 @@
-import { useEffect, useState } from "react";
-import { getScore } from "../../service/SocketService";
-import socket from "../../socket";
+import { useState } from "react";
+import { sendAnotherRound } from "../../service/SocketService";
 import { useNameContext } from "../../context/NamesContext";
-
-type ScoreDTO = Record<string, number>;
+import { useRoom } from "../../context/RoomContext";
 
 function EndHost() {
 
+    const { roomDTO } = useRoom();
     const { nameMap } = useNameContext();
-    const [finalScore, setFinalScore] = useState<Record<string, number>>();
-
-    useEffect(() => {
-        socket.on('host:score', (scoreDTO: ScoreDTO) => {
-            setFinalScore(scoreDTO);
-        })
-
-        getScore();
+    const finalScore = roomDTO!.game!.score;
 
-        return () => {
-            socket.off('host:score');
-        }
-    }, [])
+    const handleAnotherRound = () => {
+        sendAnotherRound();
+    }
 
     return (
         <div className="container">
             {!finalScore ?
                 <h2>Score is loading...</h2>
                 :
-                <table className="container table table-bordered w-50">
-                    <thead className="table-success">
-                        <tr>
-                            <th>Player</th>
-                            <th>Score</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {Object.entries(finalScore).sort((a, b) => b[1] - a[1]).map(([playerID, score], index, array) => {
-                            const reverseIndex = array.length - 1 - index;
-                            return (
-                                <tr key={playerID}>
-                                <td>
-                                    <span className="caption-enter" style={{ animationDelay: `${reverseIndex * 1}s` }}>
-                                        {nameMap.get(playerID) || playerID}
-                                    </span>
-                                </td>
-                                <td>
-                                    <span className="caption-enter" style={{ animationDelay: `${reverseIndex * 1}s` }}>
-                                        {score}
-                                    </span>
-                                </td>
-                            </tr>)
-                        })}
-                    </tbody>
-                </table>
+                <div className="container text-center">
+                    <table className="container table table-bordered w-50 mb-5">
+                        <thead className="table-success">
+                            <tr>
+                                <th>Player</th>
+                                <th>Score</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {Object.entries(finalScore).sort((a, b) => b[1] - a[1]).map(([playerID, score], index, array) => {
+                                const reverseIndex = array.length - 1 - index;
+                                return (
+                                    <tr key={playerID}>
+                                        <td>
+                                            <span className="caption-enter" style={{ animationDelay: `${reverseIndex * 1}s` }}>
+                                                {nameMap.get(playerID) || playerID}
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <span className="caption-enter" style={{ animationDelay: `${reverseIndex * 1}s` }}>
+                                                {score}
+                                            </span>
+                                        </td>
+                                    </tr>)
+                            })}
+                        </tbody>
+                    </table>
+
+                    <button onClick={handleAnotherRound} className="btn btn-success">Play another round</button>
+                </div>
             }
         </div>
     )

diff --git a/client/src/context/RoomContext.tsx b/client/src/context/RoomContext.tsx
@@ -19,6 +19,7 @@ type GameDTO = {
     captions: Caption[];
     votes: { [k: string]: Vote[] };
     votingRound: number;
+    score: { [k: string]: number };
 }
 
 type RoomDTO = {

diff --git a/client/src/service/SocketService.ts b/client/src/service/SocketService.ts
@@ -44,4 +44,8 @@ export function sendVote(captionID: number) {
 
 export function getScore() {
     socket.emit('host:get-score', sessionStorage.getItem('roomID'));
+}
+
+export function sendAnotherRound() {
+    socket.emit('host:another-round', sessionStorage.getItem('roomID'));
 }
diff --git a/server/domain/game.ts b/server/domain/game.ts
@@ -27,21 +27,38 @@ export class Game {
     captions: Caption[];
     votes: Map<number, Vote[]>;
     votingRound: number;
+    score: Map<string, number>;
 
-    constructor(playerIDs: Set<string>) {
+    constructor(playerIDs: Set<string>, initialScores?: Map<string, number>) {
         this.gamePhase = Phase.PHOTO_UPLOAD;
         this.playerIDs = playerIDs;
         this.photos = new Map<string, ArrayBuffer>();
         this.captions = [];
         this.votes = new Map<number, Vote[]>();
         this.votingRound = 1;
+        this.score = new Map<string, number>();
 
-        const numberOfRounds = playerIDs.size;
-        for (let round = 1; round <= numberOfRounds; round++) {
-            this.votes.set(round, []);
+        this.initVotingRounds();
+
+        this.score = initialScores ? new Map(initialScores) : new Map();
+        if (!initialScores) {
+            this.initScore();
         }
+
     };
 
+    initVotingRounds() {
+        for (let round = 1; round <= this.playerIDs.size; round++) {
+            this.votes.set(round, []); //Same amount of voting rounds as amount of players
+        }
+    }
+
+    initScore() {
+        for (let player of this.playerIDs) {
+            this.score.set(player, 0);
+        }
+    }
+
     getPlayers() {
         return this.playerIDs;
     }
@@ -146,6 +163,7 @@ export class Game {
         const vote = { playerID, captionID };
         if (!this.playerHasAlreadyVotedThisRound(playerID)) {
             votes?.push(vote);
+            this.addPoint(caption.authorPlayerID);
         }
     }
 
@@ -167,22 +185,11 @@ export class Game {
         return this.votingRound === this.votes.size + 1;
     }
 
-    getScore() {
-        const scores: Record<string, number> = {};
-        this.playerIDs.forEach(playerID => {
-            scores[playerID] = 0;
-        });
-
-        this.votes.forEach((votesInRound) => {
-            votesInRound.forEach(vote => {
-                const caption = this.captions.find(caption => caption.ID === vote.captionID);
-                if (caption) {
-                    scores[caption.authorPlayerID] += POINTS_PER_VOTE;
-                }
-            });
-        });
-
-        return scores;
+    addPoint(playerID: string) {
+        if (this.score.has(playerID)) {
+            let currentValue = this.score.get(playerID)!;
+            this.score.set(playerID, currentValue + POINTS_PER_VOTE);
+        }
     }
 
     getGameDTO() {
@@ -192,7 +199,8 @@ export class Game {
             photos: Object.fromEntries(this.photos.entries()),
             captions: this.captions,
             votes: Object.fromEntries(this.votes.entries()),
-            votingRound: this.votingRound
+            votingRound: this.votingRound,
+            score: Object.fromEntries(this.score.entries()),
         }
     }
 

diff --git a/server/domain/room.ts b/server/domain/room.ts
@@ -1,4 +1,4 @@
-import { Game, Phase } from "./game";
+import { Game } from "./game";
 
 export class Room {
 
@@ -50,4 +50,14 @@ export class Room {
         return this.game ? true : false;
     }
 
+    createNextGame() {
+        const score = this.game?.score;
+        if (score) {
+            this.game = new Game(this.playerIDs, score);
+        } else {
+            this.game = new Game(this.playerIDs);
+        }
+        this.datetime_created = Date.now();
+    }
+
 }
diff --git a/server/main.ts b/server/main.ts
@@ -43,6 +43,7 @@ type GameDTO = {
     captions: Caption[];
     votes: { [k: string]: Vote[] };
     votingRound: number;
+    score: { [k: string]: number };
 }
 
 type RoomDTO = {
@@ -52,10 +53,6 @@ type RoomDTO = {
     game: GameDTO | undefined
 }
 
-type captionsForVotingDTO = {
-    owner: string,
-    captions: { authorPlayerID: string, captionText: string }[]
-}
 
 //Mongo DB for logging
 import connectToDB from './database/setup';
@@ -249,12 +246,11 @@ io.on('connection', (socket_before) => {
         }
     })
 
-    socket.on('host:get-score', (roomID) => {
+    socket.on('host:another-round', (roomID) => {
         const room = roomMap.get(roomID);
-        if (room && room.hasGame()) {
-            const game = room.game!;
-            const scoreDTO = game.getScore();
-            socket.emit('host:score', scoreDTO);
+        if (room && room.hasGame() && room.game!.gamePhase === Phase.END) {
+            room.createNextGame();
+            sendEveryoneRoomDTO(room);
         }
     })