photo state gets updated but isnt displayed correctly for some reason…

…. TODO: Fix
seroteunine · Dec 4, 2023 · ec342ec · ec342ec
1 parent 6a101ce
commit ec342ec
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 14 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -6,6 +6,7 @@ import Player from './pages/Player';
 import socket from './socket';
 import { useRoom } from './context/RoomContext';
 import { useNameContext } from './context/NamesContext';
+import { useImagesContext } from './context/ImagesContext';
 
 function App() {
 
@@ -14,6 +15,7 @@ function App() {
 
   const { roomDTO, setRoomDTO } = useRoom();
   const { setNameMap } = useNameContext();
+  const { setPhotos } = useImagesContext();
 
   useEffect(() => {
 
@@ -25,10 +27,18 @@ function App() {
       setNameMap((nameMap) => !Array.from(nameMap.values()).includes(username) ? new Map<string, string>(nameMap).set(playerID, username) : nameMap);
     });
 
+    socket.on('host:photo-update', (photoDTO) => {
+      setPhotos(photoDTO);
+    })
+
     socket.on('player:room-update', (roomDTO) => {
       setRoomDTO(roomDTO);
     })
 
+    socket.on('player:photo-update', (photoDTO) => {
+      setPhotos(photoDTO);
+    })
+
     socket.on('host:invalid-gamestart', () => {
       alert('Game could not be started.')
     })

diff --git a/client/src/components/host/PhotoUploadHost.tsx b/client/src/components/host/PhotoUploadHost.tsx
@@ -1,17 +1,17 @@
+import { useImagesContext } from "../../context/ImagesContext";
 import { useNameContext } from "../../context/NamesContext";
-import { useRoom } from "../../context/RoomContext";
 import ImageComponent from "./ImageComponentHost";
 
 function PhotoUploadHost() {
 
-    const { roomDTO } = useRoom();
     const { nameMap } = useNameContext();
+    const { photos } = useImagesContext();
 
     return (
         <div className="photo-container">
             <h2>Photo uploading phase</h2>
             <div className="row">
-                {Object.entries(roomDTO!.game!.photos).map(([ownerID, value]) => (
+                {Object.entries(photos).map(([ownerID, value]) => (
                     <div key={ownerID} className="col-3 m-3" title={nameMap.get(ownerID) || ownerID}>
                         <ImageComponent arrayBuffer={value}></ImageComponent>
                     </div>

diff --git a/client/src/components/host/VotingHost.tsx b/client/src/components/host/VotingHost.tsx
@@ -1,13 +1,14 @@
+import { useImagesContext } from "../../context/ImagesContext";
 import { useRoom } from "../../context/RoomContext";
 import ImageComponent from "./ImageComponentHost";
 
 function VotingHost() {
 
     const { roomDTO } = useRoom();
-    const photos = Object.entries(roomDTO!.game!.photos);
+    const { photos } = useImagesContext();
     const votingRound = roomDTO!.game!.votingRound;
 
-    const [currentPlayerID, currentPhotoArrayBuffer] = photos[votingRound - 1];
+    const [currentPlayerID, currentPhotoArrayBuffer] = Object.entries(photos)[votingRound - 1];
     const captions = roomDTO!.game!.captions.filter((caption) => caption.photoOwnerPlayerID === currentPlayerID);
 
     return (

diff --git a/client/src/components/player/CaptionPlayer.tsx b/client/src/components/player/CaptionPlayer.tsx
@@ -2,20 +2,22 @@ import { useState } from "react";
 import { useRoom } from "../../context/RoomContext";
 import ImageComponent from "../player/ImageComponentPlayer";
 import { sendCaption } from "../../service/SocketService";
+import { useImagesContext } from "../../context/ImagesContext";
 
 
 function CaptionPlayer() {
 
     const { roomDTO } = useRoom();
+    const { photos } = useImagesContext();
     const playerID = sessionStorage.getItem('playerID')!;
 
     const [caption, setCaption] = useState('');
 
     const captionCountOfThisPlayer = roomDTO!.game?.captions.filter(caption => caption.authorPlayerID === playerID).length || 0;
     const currentPhotoIndex = captionCountOfThisPlayer;
 
-    const photos = Object.entries(roomDTO!.game!.photos).filter(([key]) => playerID !== key);
-    const [key, value] = photos[currentPhotoIndex] || [undefined, undefined];
+    const photos_excludeSelf = Object.entries(photos).filter(([key]) => playerID !== key);
+    const [key, value] = photos_excludeSelf[currentPhotoIndex] || [undefined, undefined];
 
     const submitCaption = (e: React.FormEvent) => {
         e.preventDefault();
@@ -28,7 +30,7 @@ function CaptionPlayer() {
         <div>
             <h1>Captioning phase</h1>
 
-            {(captionCountOfThisPlayer === photos.length) ?
+            {(captionCountOfThisPlayer === photos_excludeSelf.length) ?
                 <h2>Wait for the others to finish.</h2>
                 :
                 <div key={key}>

diff --git a/client/src/components/player/VotingPlayer.tsx b/client/src/components/player/VotingPlayer.tsx
@@ -1,10 +1,12 @@
+import { useImagesContext } from "../../context/ImagesContext";
 import { useRoom } from "../../context/RoomContext";
 import { sendVote } from "../../service/SocketService";
 
 
 function VotingPlayer() {
 
     const { roomDTO } = useRoom();
+    const { photos } = useImagesContext();
     const ownPlayerID = sessionStorage.getItem('playerID');
     const votingRound = roomDTO!.game!.votingRound;
 
@@ -13,8 +15,7 @@ function VotingPlayer() {
         sendVote(ID);
     };
 
-    const photos = Object.entries(roomDTO!.game!.photos);
-    const [playerID] = photos[votingRound - 1];
+    const [playerID] = Object.entries(photos)[votingRound - 1];
 
     const captions = roomDTO!.game!.captions.filter((caption) => caption.photoOwnerPlayerID === playerID && caption.authorPlayerID != ownPlayerID);
 

diff --git a/client/src/context/ImagesContext.tsx b/client/src/context/ImagesContext.tsx
@@ -0,0 +1,26 @@
+import React, { Dispatch, SetStateAction, createContext, useContext, useState } from 'react';
+
+type ImagesContextType = {
+    photos: { [k: string]: ArrayBuffer };
+    setPhotos: Dispatch<SetStateAction<{ [k: string]: ArrayBuffer }>>;
+};
+
+const ImagesContext = createContext<ImagesContextType | undefined>(undefined);
+
+export const ImageProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+    const [photos, setPhotos] = useState<{ [k: string]: ArrayBuffer }>({});
+
+    return (
+        <ImagesContext.Provider value={{ photos, setPhotos }}>
+            {children}
+        </ImagesContext.Provider>
+    );
+};
+
+export const useImagesContext = () => {
+    const context = useContext(ImagesContext);
+    if (!context) {
+        throw new Error('useImages must be used within a ImageProvider');
+    }
+    return context;
+};
diff --git a/client/src/context/RoomContext.tsx b/client/src/context/RoomContext.tsx
@@ -17,7 +17,6 @@ type Phase = "PHOTO_UPLOAD" | "CAPTION" | "VOTING" | "END";
 type GameDTO = {
     phase: Phase;
     playerIDs: string[];
-    photos: { [k: string]: ArrayBuffer };
     captions: Caption[];
     votes: { [k: string]: Vote[] };
     votingRound: number;

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -2,12 +2,15 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import { RoomProvider } from './context/RoomContext.tsx'
 import { NameProvider } from './context/NamesContext.tsx'
+import { ImageProvider } from './context/ImagesContext.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
 
   <RoomProvider>
     <NameProvider>
-      <App />
+      <ImageProvider>
+        <App />
+      </ImageProvider>
     </NameProvider>
   </RoomProvider>
 

diff --git a/server/domain/game.ts b/server/domain/game.ts
@@ -182,12 +182,17 @@ export class Game {
         return {
             phase: this.gamePhase.toString(),
             playerIDs: Array.from(this.playerIDs),
-            photos: Object.fromEntries(this.photos.entries()),
             captions: this.captions,
             votes: Object.fromEntries(this.votes.entries()),
             votingRound: this.votingRound,
             score: Object.fromEntries(this.score.entries()),
         }
     }
 
+    getPhotosDTO() {
+        return {
+            photos: Object.fromEntries(this.photos.entries())
+        }
+    }
+
 };
diff --git a/server/main.ts b/server/main.ts
@@ -34,10 +34,13 @@ type Vote = {
     captionID: number;
 }
 
+type PhotosDTO = {
+    photos: { [k: string]: ArrayBuffer };
+}
+
 type GameDTO = {
     phase: string;
     playerIDs: string[];
-    photos: { [k: string]: ArrayBuffer };
     captions: Caption[];
     votes: { [k: string]: Vote[] };
     votingRound: number;
@@ -87,6 +90,21 @@ function sendPlayersRoomDTO(room: Room) {
     }
 }
 
+function sendEveryonePhotos(room: Room) {
+    if (room.hasGame()) {
+        const photosDTO: PhotosDTO = room.game!.getPhotosDTO();
+        const hostID = room.getHostID();
+        const hostSocketID = socketIDMap.get(hostID);
+        io.to(hostSocketID || '').emit('host:photo-update', photosDTO);
+        const players = room.getPlayers();
+        for (const playerID of players.keys()) {
+            const playerSocketID = socketIDMap.get(playerID);
+            io.to(playerSocketID || '').emit('player:photo-update', photosDTO);
+        }
+    }
+
+}
+
 function sendEveryoneRoomDTO(room: Room) {
     sendHostRoomDTO(room);
     sendPlayersRoomDTO(room);
@@ -112,6 +130,8 @@ function resendRoomIfExists(socket: CustomSocket) {
     }
 }
 
+
+
 //Remove rooms and sockets that have been inactive 
 // (otherwise the roommap and socketIDmap will get crowded and increase collision)
 function removeRoomAndSockets(roomID: string) {
@@ -216,6 +236,7 @@ io.on('connection', (socket_before) => {
             socket.emit('player:photo-received');
             game.tryNextPhase();
             sendEveryoneRoomDTO(room);
+            sendEveryonePhotos(room);
         }
     });