Merge pull request #326 from RobzLegz/staging

Staging

components/containers/leaderboard/Leaderboard.tsx

@@ -1,9 +1,35 @@
 import React from 'react'
+import { useSelector } from 'react-redux';
+import { selectRooms } from '../../../redux/slices/roomSlice';
+
+interface RoomUser{
+    username: string;
+    level: number;
+    points: number;
+    userId: string;
+}
+
+
+
+const Leaderboard: React.FC = () => {
+    const roomInfo = useSelector(selectRooms);
 
-function Leaderboard() {
     return (
-        <div>
-
+        <div className="leaderboard">
+            <h2>Leaderboard</h2>
+            {
+                [...roomInfo.roomUsers].sort((a: RoomUser, b: RoomUser) => {return b.points-a.points})
+                    .map((object: RoomUser, i: number) => (
+                        <div className={`leaderboard__object leaderboard__object__${object.level <= roomInfo.activeRoom.tasks.length ? "playing" : "done"}`} key={i}>
+                            <h4>#{i + 1}</h4>
+                            <strong>{object.username}</strong>
+                            <div className="leaderboard__object__points">
+                                <h4>{object.points}</h4>
+                                <img src="/png/coin.png" alt="yellow coin with star design on it" />
+                            </div>
+                        </div>
+                    ))
+            }
         </div>
     )
 }

components/containers/leaderboard/LeaderboardSmall.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useSelector } from 'react-redux';
 import { selectRooms } from '../../../redux/slices/roomSlice';
 
@@ -14,26 +14,20 @@ interface RoomUser{
 const LeaderboardSmall: React.FC = () => {
     const roomInfo = useSelector(selectRooms);
 
-    const [leaders, setLeaders] = useState<RoomUser[] | null>(null);
-
-    useEffect(() => {
-        if(roomInfo && roomInfo.roomUsers){
-            setLeaders([...roomInfo.roomUsers].sort((a: RoomUser, b: RoomUser) => {return a.points-b.points}))
-        }
-    }, [roomInfo.roomUsers, roomInfo]);
-
-    if(!leaders){
-        return null;
-    }
-
     return (
         <div className="leaderboardSmall">
             {
-                leaders
+                [...roomInfo.roomUsers].sort((a: RoomUser, b: RoomUser) => {return b.points-a.points})
                     .map((object: RoomUser, i: number) => (
-                        <div className="leaderboardSmall__object" key={i}>
-                            <h4>#{i + 1}</h4>
-                            <strong>{object.username}</strong>
+                        <div className={`leaderboardSmall__object leaderboardSmall__object__${object.level <= roomInfo.activeRoom.tasks.length ? "playing" : "done"}`} key={i}>
+                            <div className="leaderboardSmall__object__left">
+                                <h4>#{i + 1}</h4>
+                                <strong>{object.username}</strong>
+                            </div>
+                            <div className="leaderboardSmall__object__points">
+                                <h4>{object.points}</h4>
+                                <img src="/png/coin.png" alt="yellow coin with star design on it" />
+                            </div>
                         </div>
                     ))
             }

components/containers/rooms/state/GameRoom.tsx

@@ -1,7 +1,10 @@
+import { useRouter } from 'next/dist/client/router';
 import React from 'react'
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { selectRooms } from '../../../../redux/slices/roomSlice';
 import { selectUser } from '../../../../redux/slices/userSlice';
+import { disbandRoom } from '../../../../requests/rooms/requests';
+import Leaderboard from '../../leaderboard/Leaderboard';
 import MultiplayerActiveLevel from '../../levels/MultiplayerActiveLevel';
 
 interface RoomUser{
@@ -12,6 +15,9 @@ interface RoomUser{
 }
 
 function GameRoom() {
+    const router = useRouter();
+    const dispatch = useDispatch();
+
     const userInfo = useSelector(selectUser);
     const roomInfo = useSelector(selectRooms);
 
@@ -24,7 +30,16 @@ function GameRoom() {
     }
 
     if(roomInfo.roomUsers.find((user: RoomUser) => user.userId === userInfo.info._id).level > roomInfo.activeRoom.tasks.length){
-        return null; //leaderboard will go here
+        return(
+            <div className="gameRoom__active">
+                <Leaderboard />
+                {roomInfo.activeRoom.admin === userInfo.info._id ? (
+                    <button className="gameRoom__active__disband" onClick={() => disbandRoom(roomInfo.activeRoom._id, userInfo.token, dispatch, router)}>Disband room</button>
+                ) : (
+                    null
+                )}
+            </div>
+        )
     }
 
     return (

components/containers/rooms/state/WaitingRoom.tsx

@@ -113,7 +113,7 @@ function WaitingRoom() {
                                 </button>
                                 <button
                                     className="gameRoom__waiting__inner__buttons__purple"
-                                    onClick={() => {if(roomInfo.roomUsers.filter((user: RoomUser) => user.roomId === id).length > 0){startGame(id, userInfo.token, dispatch)}else{dispatch(setNotification({type: "error", message: "There should be at least 2 people in this room!"}))}}}
+                                    onClick={() => {if(roomInfo.roomUsers.filter((user: RoomUser) => user.roomId === id).length >= 2){startGame(id, userInfo.token, dispatch)}else{dispatch(setNotification({type: "error", message: "There should be at least 2 people in this room!"}))}}}
                                 >
                                     Start game
                                 </button>

pages/rooms/[id].tsx

@@ -11,6 +11,7 @@ import { joinRoom } from "../../socket/options";
 import { getSocket, selectSocket, setSocket } from "../../redux/slices/socketSlice";
 import Notification from "../../components/notifications/Notification";
 import GameBackground from "../../components/background/GameBackground";
+import { setNotification } from "../../redux/slices/notificationSlice";
 
 interface Message{
     roomID: string;
@@ -68,6 +69,7 @@ function room() {
                 });
 
                 socket.on("removeRoom", (roomId: string) => {
+                    dispatch(setNotification({type: "error", message: "Admin disbanded the room"}));
                     dispatch(removeRoom(roomId));
                     router.push("/rooms");
                 });

socket/options.ts

@@ -133,7 +133,7 @@ const completeSocketLevel = (passed: boolean, dispatch: any) => {
 
     if(passed){
         socket.emit("completeLevel");
-        dispatch(setNotification({type: "success", message: "Congrats, You passed this level!"}));
+        dispatch(setNotification({type: "success", message: "Congrats, You answered correctly!"}));
     }else{
         socket.emit("failLevel");
         dispatch(setNotification({type: "error", message: "Wrong answer!"}));

styles/components/leaderboard/leaderboard.scss

@@ -1,18 +1,84 @@
+@import "../../variables.scss";
+
+.leaderboard{
+    width: 400px;
+    height: 500px;
+    overflow-y: scroll;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    border-radius: 10px;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    background-color: $mathRoomContainerBG;
+
+    h2{
+        padding: 10px 20px;
+        margin: 20px 0;
+        border-radius: 5px;
+        color: $mathRoomContainerBG;
+        background-color: $mathRoomGrey;
+    }
+
+    &__object{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 20px;
+
+        &__points{
+            display: flex;
+            align-items: center;
+
+            h4{
+                margin: 0 5px 0 0;
+            }
+
+            img{
+                width: 20px;
+                height: 20px;
+                object-fit: cover;
+            }
+        }
+
+        &:hover{
+            background-color: $mathRoomLightGrey;
+        }
+
+        &__done{
+            background-color: $levelGreen;
+
+            &:hover{
+                background-color: $levelGreen;
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .leaderboardSmall{
     width: 100%;
     height: 40px;
     position: absolute;
     top: -60px;
     display: flex;
-
+    overflow-x: scroll;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
     background-color: $mathRoomContainerBG;
 
     &__object{
         height: 100%;
         width: 200px;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         padding: 0 10px;
 
         h4{
@@ -22,5 +88,36 @@
         &:hover{
             background-color: $mathRoomLightGrey;
         }
+
+        &__left{
+            display: flex;
+        }
+
+        &__points{
+            display: flex;
+            align-items: center;
+
+            h4{
+                margin: 0 5px 0 0;
+            }
+
+            img{
+                width: 20px;
+                height: 20px;
+                object-fit: cover;
+            }
+        }
+
+        &__done{
+            background-color: $levelGreen;
+
+            &:hover{
+                background-color: $levelGreen;
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
     }
 }

styles/rooms/gameRoom.scss

@@ -12,7 +12,7 @@
         align-items: center;
         justify-content: flex-start;
         padding: 50px 300px;
-        background-color: $mathRoomBG;
+        background-color: $mathRoomDarkerPurple;
 
         &__inner{
             width: 100%;
@@ -186,4 +186,29 @@
             }
         }
     }
+
+    &__active{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-family: $roomFont;
+        background-color: $mathRoomDarkerPurple;
+
+        &__disband{
+            margin: 20px 0 0;
+            width: 200px;
+            height: 50px;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            border-radius: 5px;
+            font-family: $roomFont;
+            font-size: $buttonText;
+            color: $mathRoomContainerBG;
+            background-color: $mathRoomRed;
+        }
+    }
 }