Merge branch 'zzzooloozzz-dev' into fix-warnings

# Conflicts:
#	frontend/src/component/Game/CenterPanel.jsx

backend/Room.js

@@ -2,19 +2,21 @@ const utils = require('./utils')
 const _ = require('lodash');
 
 function Room(id) {
+  this.id = id;
+  this.name = "";
+  this.players = [];
+  this.numberOfPlayer = 0;
+  this.gameMaster = null;
+  this.settings = this.getDefaultSettings();
   this.team1Player = 0;
   this.team2Player = 0;
-  this.name = "";
-  this.id = id;
   this.gifUrl = "";
-  this.players = [];
   this.wordToGuess = ""
   this.words = [];
   this.wordsPerPlayer = {};
   this.wordsOfRound = [];
   this.wordsValidated = [];
   this.teams = [];
-  this.gameMaster = null;
   this.round = 0;
   this.roundDescription = [];
   this.set = 1;
@@ -25,9 +27,7 @@ function Room(id) {
   this.setFinished = false;
   this.scoreFirstTeam = 0;
   this.scoreSecondTeam = 0;
-  this.numberOfPlayer = 0;
   this.lastActivity = Date.now();
-  this.settings = this.getDefaultSettings();
 }
 
 Room.prototype = {
@@ -80,6 +80,13 @@ Room.prototype = {
     });
     delete this.wordsPerPlayer[id];
     this.numberOfPlayer = this.players.length;
+    if (id == this.gameMaster){
+      if (this.numberOfPlayer > 0){
+        this.setGameMaster(this.players[0].id);
+      } else {
+        this.setGameMaster(null);
+      }
+    }
   },
   addWord: function(word, playerId) {
     this.updateActivity();
@@ -167,8 +174,8 @@ Room.prototype = {
     this.team1Player = 0;
     this.team2Player = 0;
     this.gifUrl = "";
-    this.words = [];
     this.wordToGuess = "";
+    this.words = [];
     let wordsPerPlayer = {};
     this.players.map(function(player){
       wordsPerPlayer[player.id] = [];

backend/timesUpGame.js

@@ -125,33 +125,19 @@ function createRoom(ws, obj) {
 function joinRoom(ws, obj) {
   let roomId = obj.roomId;
   let room = rooms.get(roomId);
-  if (room !== undefined) { // room already exists
-    ws.roomId = roomId;
-    addPlayerToRoom(ws, room);
-    let response = {
-      type: 'updateState',
-      global: {
-        joinedRoom: true,
-      },
-      room: room.serialize()
-    };
-    broadcast(response, room);
-    broadcastRoomsInfo();
-  } else { // room does not exist - can happen if trying to access deleted room URL
-    console.log(`Player ${ws.playerName} tried to join room that does not exist anymore`);
-    let response = {
-      type: 'updateState',
-      global: {
-        joinedRoom: false,
-      },
-      room: {
-        id: ''
-      }
-    };
-    ws.roomId = '';
-    ws.send(JSON.stringify(response));
-  }
+  if (room === undefined){ return; }
+  ws.roomId = roomId;
+  addPlayerToRoom(ws, room);
+  let response = {
+    type: 'updateState',
+    global: {
+      joinedRoom: true,
+    },
+    room: room.serialize()
+  };
   notifyGameMaster(room);
+  broadcast(response, room);
+  broadcastRoomsInfo();
 }
 
 /**
@@ -170,50 +156,36 @@ function leaveRoom(ws, obj) {
   let room = rooms.get(roomId);
   let gameMaster = room.gameMaster;
   room.removePlayer(clientId);
+  client = getClient(clientId);
+  client.roomId = '';
   console.log(`Player ${ws.playerName} left room ${room.id}`);
 
-  // If room empty, delete it.
-  if (room.players.length === 0){
-    console.log(`No more players in room. Deleting room ${room.id}`);
-    rooms.delete(room.id);
-  }
+  // Send individual response to client to disconnect from room
   let response = {
     type: 'updateState',
     global: {
       joinedRoom: false,
-      rooms: serializeRooms()
-    },
-    room: {
-      id: ''
     }
   };
   sendMessage(response, clientId);
 
-  let response2 = {
-    type:'updateState',
-    room: {
-      players: room.players
-    }
-  };
-  // If player leaving is the game master, appoint a new game master
-  // If no more players are left, set gameMaster to null.
-  if (clientId == gameMaster) {
-    if (room.players.length > 0) {
-      newGameMaster = room.players[0].id;
-      console.log("Game master left the room. Appointing " + newGameMaster + " as gameMaster.");
-      room.setGameMaster(newGameMaster);
-      response2.room.gameMaster = newGameMaster;
-    } else {
-      console.log("No more players in room. Room gameMaster set to null.")
-      room.setGameMaster(null);
-      response2.room.gameMaster = null;
+  // Send broadcast response to other clients.
+  if (room.players.length === 0){ // no players left in room, delete room
+    console.log(`No more players in room. Deleting room ${room.id}`);
+    rooms.delete(room.id);
+    broadcastRoomsInfo();
+  } else {
+    console.log(`Updating players in room and broadcasting to clients.`);
+    let response2 = {
+      type:'updateState',
+      room: {
+        players: room.players
+      }
     }
-  }
-  broadcast(response2, room);
-  if (room.gameMaster){
     notifyGameMaster(room);
-  }
-  broadcastRoomsInfo();
+    broadcast(response2, room);
+    broadcastRoomsInfo();
+  };
 }
 
 /**

frontend/package.json

@@ -8,6 +8,7 @@
     "@giphy/react-components": "^1.0.2",
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.50",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.1",
     "@testing-library/user-event": "^7.2.1",

frontend/src/component/Chat/Chat.jsx

@@ -27,7 +27,7 @@ function Chat (props) {
     if (props.incomingChatMessage) {
       setMessages(messages.concat(props.incomingChatMessage));
     }
-
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.incomingChatMessage]);
 
   useEffect(() => {
@@ -37,7 +37,7 @@ function Chat (props) {
 
 
   const submitMessage = function (messageString) {
-      if(messageString !== '') {
+      if (messageString !== '') {
           props.sendChatMessage(messageString);
       }
   }

frontend/src/component/Game/CenterPanel.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import {makeStyles} from '@material-ui/core/styles';
 import Paper from "@material-ui/core/Paper";
+import Slide from "@material-ui/core/Slide";
+import Snackbar from "@material-ui/core/Snackbar";
 import PlayerActivePanel from "./PlayerActivePanel";
 import PlayerInactivePanel from "./PlayerInactivePanel";
 import TopInformation from "./TopInformation";
 import Grid from "@material-ui/core/Grid";
 import WordInput from "./WordInput";
 
+function TransitionRight(props) {
+  return <Slide {...props} direction="right" />;
+}
+
 const useStyles = makeStyles((theme) => ({
   paper: {
     width: '100%',
@@ -17,11 +23,24 @@ const useStyles = makeStyles((theme) => ({
   },
   grid: {
     display :'grid',
+  },
+  snackbar: {
+    textAlign: 'center'
   }
 }));
 
 function CenterPanel(props) {
   const classes = useStyles();
+  const isActivePlayer = props.currentPlayer.id === props.activePlayer.id;
+  const [open, setOpen] = React.useState(isActivePlayer);
+  const handleClose = (event, reason) => {
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    setOpen(isActivePlayer);
+  }, [isActivePlayer]);
+
   return (<React.Fragment>
     <Paper className={classes.paper} elevation={3}>
       {/* <p>props.currentPlayer {JSON.stringify(props.currentPlayer)}</p> */}
@@ -33,7 +52,7 @@ function CenterPanel(props) {
         roomSettings={props.roomSettings}
         startTimer={props.startTimer}
         playSound={props.playSound}/>
-      {props.currentPlayer.id === props.activePlayer.id && <React.Fragment>
+      {isActivePlayer && <React.Fragment>
         <PlayerActivePanel
           currentPlayer={props.currentPlayer}
           gameMaster={props.gameMaster}
@@ -46,7 +65,7 @@ function CenterPanel(props) {
           wordToGuess={props.wordToGuess}/>
         </React.Fragment>
       }
-      {props.currentPlayer.id !== props.activePlayer.id && <React.Fragment>
+      {!isActivePlayer && <React.Fragment>
         <PlayerInactivePanel
           currentPlayer={props.currentPlayer}
           gameMaster={props.gameMaster}
@@ -80,6 +99,14 @@ function CenterPanel(props) {
         </Paper>
       </Grid>
         }
+      <Snackbar
+        className={classes.snackbar}
+        anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
+        open={open}
+        autoHideDuration={1000}
+        onClose={handleClose}
+        TransitionComponent={TransitionRight}
+        message="It's your turn !"/>
     </Paper>
   </React.Fragment>);
 }

frontend/src/component/Game/TeamPanel.jsx

@@ -41,20 +41,22 @@ function TeamPanel(props) {
   const teamMembers1 = teams[0].map(player => {
     return (<React.Fragment key={player.name}>
       <Grid item>
-      <PlayerAvatar
-        player = {player}
-        gameMaster = {props.gameMaster}
-        currentPlayer = {props.currentPlayer}/>
+        <PlayerAvatar
+          player = {player}
+          gameMaster = {props.gameMaster}
+          displayPlayerName = {true}
+          currentPlayer = {props.currentPlayer}/>
       </Grid>
     </React.Fragment>);
   });
   const teamMembers2 = teams[1].map(player => {
     return (<React.Fragment key={player.name}>
       <Grid item>
         <PlayerAvatar
-            player = {player}
-            gameMaster = {props.gameMaster}
-            currentPlayer = {props.currentPlayer}/>
+          player = {player}
+          gameMaster = {props.gameMaster}
+          displayPlayerName = {true}
+          currentPlayer = {props.currentPlayer}/>
       </Grid>
     </React.Fragment>);
   });

frontend/src/component/Player/PlayerAvatar.jsx

@@ -7,7 +7,6 @@ import IconButton from '@material-ui/core/IconButton';
 import TextField from '@material-ui/core/TextField';
 import EditIcon from '@material-ui/icons/Edit';
 import CheckIcon from '@material-ui/icons/Check';
-import './PlayerAvatar.css'
 
 const useStyles = makeStyles(({ palette }) => ({
   header: {
@@ -69,7 +68,7 @@ function PlayerAvatar(props){
         </Avatar>
       }
       {isGameMaster &&
-        <Avatar src='https://api.iconify.design/mdi-crown.svg' style={{'backgroundColor': 'yellow'}} className={classes.avatar}/>
+        <Avatar src='https://api.iconify.design/mdi-crown.svg' className={classes.avatar} style={{'backgroundColor': 'yellow'}}/>
       }
       </React.Fragment>);
   };
@@ -112,14 +111,20 @@ function PlayerAvatar(props){
     </Typography>);
   };
 
-  return (
+  return (<React.Fragment>
+    {props.displayPlayerName &&
     <CardHeader
       className={classes.header}
       avatar={getAvatar(props.player, props.isGameMaster)}
       title={getDisplayName(props.player, props.isCurrentPlayer, editMode)}
       subheader={props.player.status}
       titleTypographyProps={{className: classes.noPadding}}/>
-  );
+    }
+    {!props.displayPlayerName && <React.Fragment>
+      {getAvatar(props.player, props.isGameMaster)}
+      </React.Fragment>
+    }
+    </React.Fragment>);
 };
 
 

frontend/src/component/Player/Players.jsx

@@ -42,6 +42,7 @@ function Players(props) {
                 isCurrentPlayer={p.id === currentPlayer.id}
                 isGameMaster={p.id === gameMaster}
                 gameMaster={gameMaster}
+                displayPlayerName={true}
                 onSendUsername={props.onSendUsername}/>
             </TableCell>
             <TableCell align="left">

frontend/src/component/Room/RoomSettings.jsx

@@ -5,7 +5,6 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import {makeStyles} from '@material-ui/core/styles';
 import SettingsIcon from '@material-ui/icons/Settings';
 import TextIcon from '../TextIcon/TextIcon';
-import './Rooms.css'
 
 const useStyles = makeStyles((theme) => ({
   root: {