Further improvements on the "ready" functionality (#322)

backend/src/game.ts

@@ -374,8 +374,10 @@ export default (io: Server) => {
   ) => {
     if (checkUser(userIds, socket)) {
       const ready = await toggleReady(sessionId, userIds.userId);
+      const user = await getUser(userIds.userId);
       sendToAll<WsUserReadyPayload>(socket, sessionId, RECEIVE_USER_READY, {
         userId: userIds.userId,
+        name: user ? user.name : 'Somebody',
         ready,
       });
     }

common/src/ws.ts

@@ -57,6 +57,7 @@ export interface WsSaveTemplatePayload {
 export interface WsUserReadyPayload {
   userId: string;
   ready: boolean;
+  name: string;
 }
 
 export type WsErrorType =

frontend/src/components/EditableLabel.tsx

@@ -124,6 +124,7 @@ const ViewMode = styled.span`
   &:hover {
     > svg {
       color: ${colors.purple[500]};
+      cursor: pointer;
     }
   }
 `;

frontend/src/translations/ar.ts

@@ -111,6 +111,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/de.ts

@@ -116,6 +116,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/en.ts

@@ -151,6 +151,7 @@ export default {
     maxPostsReached: `You have reached the maximum number of posts set by the moderator.`,
     iAmDone: "I'm done!",
     iAmNotDoneYet: "I'm not done yet...",
+    userIsReady: (user) => `${user} is ready!`,
   },
   GameMenu: {
     board: 'Board',

frontend/src/translations/es.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/fr.ts

@@ -153,6 +153,7 @@ export default {
     maxPostsReached: `Vous avez atteint le nombre de posts maximum prévu par le modérateur.`,
     iAmDone: "J'ai fini !",
     iAmNotDoneYet: "Je n'ai pas encore fini...",
+    userIsReady: (user) => `${user} est prêt !`,
   },
   GameMenu: {
     board: 'Board', // Si qqn à une suggestion de traduction...

frontend/src/translations/hu.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/it.ts

@@ -120,6 +120,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: 'Board',

frontend/src/translations/ja.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/nl.ts

@@ -120,6 +120,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: 'Bord',

frontend/src/translations/pl.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/pt-br.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/ru.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: 'Записи',

frontend/src/translations/types.ts

@@ -114,6 +114,7 @@ export interface Translation {
     maxPostsReached?: string;
     iAmDone?: string;
     iAmNotDoneYet?: string;
+    userIsReady?: (userName: string) => string;
   };
   GameMenu: {
     board?: string;

frontend/src/translations/zh-cn.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/translations/zh-tw.ts

@@ -112,6 +112,7 @@ export default {
     maxPostsReached: undefined,
     iAmDone: undefined,
     iAmNotDoneYet: undefined,
+    userIsReady: undefined,
   },
   GameMenu: {
     board: undefined,

frontend/src/views/game/Participants.tsx

@@ -1,5 +1,12 @@
-import { Cancel, Check, CheckCircle } from '@mui/icons-material';
-import { AvatarGroup, Badge, Button, colors } from '@mui/material';
+import { Check, CheckCircle, Create } from '@mui/icons-material';
+import {
+  AvatarGroup,
+  Badge,
+  Button,
+  colors,
+  IconButton,
+  useMediaQuery,
+} from '@mui/material';
 import CustomAvatar from '../../components/Avatar';
 import useParticipants from './useParticipants';
 import useSession from './useSession';
@@ -17,6 +24,7 @@ function Participants({ onReady }: ParticipantsProps) {
   const user = useUser();
   const { PostBoard: translations } = useTranslation();
   const isUserReady = !!user && !!session && session.ready.includes(user.id);
+  const fullScreen = useMediaQuery('(min-width:600px)');
   return (
     <Container>
       <AvatarGroup
@@ -46,19 +54,30 @@ function Participants({ onReady }: ParticipantsProps) {
             );
           })}
       </AvatarGroup>
-      <Button
-        onClick={onReady}
-        variant="outlined"
-        endIcon={
-          isUserReady ? (
-            <Cancel htmlColor={colors.red[500]} />
+      {user && !fullScreen ? (
+        <IconButton onClick={onReady}>
+          {isUserReady ? (
+            <Create htmlColor={colors.orange[500]} />
           ) : (
             <Check htmlColor={colors.green[500]} />
-          )
-        }
-      >
-        {isUserReady ? translations.iAmNotDoneYet : translations.iAmDone}
-      </Button>
+          )}
+        </IconButton>
+      ) : null}
+      {user && fullScreen ? (
+        <Button
+          onClick={onReady}
+          variant="outlined"
+          endIcon={
+            isUserReady ? (
+              <Create htmlColor={colors.orange[500]} />
+            ) : (
+              <Check htmlColor={colors.green[500]} />
+            )
+          }
+        >
+          {isUserReady ? translations.iAmNotDoneYet : translations.iAmDone}
+        </Button>
+      ) : null}
     </Container>
   );
 }

frontend/src/views/game/board/post/Post.tsx

@@ -404,8 +404,9 @@ const BlurOverlay = styled.div`
   height: 100%;
   background-color: rgba(255, 255, 255, 0.9);
   z-index: 2;
-  @supports (backdrop-filter: blur(3px)) {
+  @supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
     background-color: rgba(255, 255, 255, 0.3);
+    -webkit-backdrop-filter: blur(3px);
     backdrop-filter: blur(3px);
   }
 `;
@@ -422,7 +423,7 @@ const LabelContainer = styled.div<{ blurred: boolean }>`
     content: '(hidden for now)';
   }
 
-  @supports (backdrop-filter: blur(3px)) {
+  @supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
     > * {
       display: block;
     }

frontend/src/views/game/useGame.ts

@@ -375,11 +375,16 @@ const useGame = (sessionId: string) => {
 
     socket.on(
       Actions.RECEIVE_USER_READY,
-      ({ userId, ready }: WsUserReadyPayload) => {
+      ({ userId: readyUserId, ready, name }: WsUserReadyPayload) => {
         if (debug) {
-          console.log('Receive user ready: ', userId);
+          console.log('Receive user ready: ', readyUserId);
+        }
+        userReady(readyUserId, ready);
+        if (userId !== readyUserId && ready) {
+          enqueueSnackbar(translations.PostBoard.userIsReady!(name), {
+            variant: 'success',
+          });
         }
-        userReady(userId, ready);
       }
     );
   }, [
@@ -405,6 +410,7 @@ const useGame = (sessionId: string) => {
     enqueueSnackbar,
     setUnauthorised,
     userReady,
+    userId,
   ]);
 
   const [previousParticipans, setPreviousParticipants] = useState(participants);