Merge pull request #318 from RobzLegz/266-logic

266 logic
RobzLegz · Nov 2, 2021 · a2fc21c · a2fc21c
2 parents 14eef8b + cb1cd9d
commit a2fc21c
Show file tree

Hide file tree

Showing 41 changed files with 489 additions and 73 deletions.
diff --git a/components/containers/leaderboard/Leaderboard.tsx b/components/containers/leaderboard/Leaderboard.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Leaderboard() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default Leaderboard
diff --git a/components/containers/leaderboard/LeaderboardSmall.tsx b/components/containers/leaderboard/LeaderboardSmall.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux';
+import { selectRooms } from '../../../redux/slices/roomSlice';
+
+interface RoomUser{
+    username: string;
+    level: number;
+    points: number;
+    userId: string;
+}
+
+
+
+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
+                    .map((object: RoomUser, i: number) => (
+                        <div className="leaderboardSmall__object" key={i}>
+                            <h4>#{i + 1}</h4>
+                            <strong>{object.username}</strong>
+                        </div>
+                    ))
+            }
+        </div>
+    )
+}
+
+export default LeaderboardSmall
diff --git a/components/containers/levels/ActiveLevel.tsx b/components/containers/levels/ActiveLevel.tsx
@@ -28,7 +28,7 @@ function ActiveLevel() {
                 <button className="button" onClick={() => setNeedHelp(!needHelp)}>help?</button>
             </header>
 
-            <DisplayLevelFromType needHelp={needHelp} setNeedHelp={setNeedHelp} />
+            <DisplayLevelFromType needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={false} />
         </div>
     )
 }

diff --git a/components/containers/levels/MultiplayerActiveLevel.tsx b/components/containers/levels/MultiplayerActiveLevel.tsx
@@ -0,0 +1,25 @@
+import { useRouter } from 'next/dist/client/router';
+import React, { useState } from 'react'
+import DisplayMultiplayerTask from '../../../hooks/DisplayMultiplayerTask';
+import LeaderboardSmall from '../leaderboard/LeaderboardSmall';
+
+function MultiplayerActiveLevel() {
+    const router = useRouter();
+
+    const [needHelp, setNeedHelp] = useState<boolean>(false);
+
+    return (
+        <div className="activeLevel">
+            <LeaderboardSmall />
+
+            <header className="activeLevel__header">
+                <button className="button" onClick={() => router.push("/levels")}>Exit</button>
+                <button className="button" onClick={() => setNeedHelp(!needHelp)}>help?</button>
+            </header>
+
+            <DisplayMultiplayerTask needHelp={needHelp} setNeedHelp={setNeedHelp} />
+        </div>
+    )
+}
+
+export default MultiplayerActiveLevel
diff --git a/components/containers/rooms/NewRoomContainer.tsx b/components/containers/rooms/NewRoomContainer.tsx
@@ -56,11 +56,10 @@ function NewRoomContainer() {
                     <label htmlFor="new_room_stages">Total stages</label>
                     <select name="new_room_stages" id="new_room_stages" onChange={(e) => setTotalStages(e.target.value)}>
                         <option></option>
-                        <option>5</option>
                         <option>10</option>
+                        <option>15</option>
                         <option>20</option>
-                        <option>30</option>
-                        <option>40</option>
+                        {/* <option>30</option> */}
                     </select>
                 </div>
                 <div className="newRoom__container__form__opt">

diff --git a/components/containers/rooms/RoomContainer.tsx b/components/containers/rooms/RoomContainer.tsx
@@ -118,7 +118,7 @@ const RoomContainer: React.FC = () => {
                                 className={`${roomInfo.roomUsers.filter((u: User) => u.roomId === room._id).length === room.maxPlayers ? "full" : "aviable"}`}
                                 onClick={() => {
                                     if(!userInfo.loggedIn || !userInfo.token){
-                                        return dispatch(setNotification({type: "error", message: "You must be logged in to join room"}))
+                                        return dispatch(setNotification({type: "error", message: "You must be logged in to join room"}));
                                     }else if(roomInfo.roomUsers.filter((u: User) => u.roomId === room._id).length < room.maxPlayers){
                                         router.push(`/rooms/${room._id}`);
                                     }}

diff --git a/components/containers/rooms/state/GameRoom.tsx b/components/containers/rooms/state/GameRoom.tsx
@@ -1,9 +1,35 @@
 import React from 'react'
+import { useSelector } from 'react-redux';
+import { selectRooms } from '../../../../redux/slices/roomSlice';
+import { selectUser } from '../../../../redux/slices/userSlice';
+import MultiplayerActiveLevel from '../../levels/MultiplayerActiveLevel';
+
+interface RoomUser{
+    username: string;
+    level: number;
+    points: number;
+    userId: string;
+}
 
 function GameRoom() {
+    const userInfo = useSelector(selectUser);
+    const roomInfo = useSelector(selectRooms);
+
+    if(!userInfo.info || !roomInfo.roomUsers || !roomInfo.activeRoom){
+        return null;
+    }
+
+    if(!roomInfo.roomUsers.some((user: RoomUser) => user.userId === userInfo.info._id)){
+        return null;
+    }
+
+    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__game">
-
+        <div className="level">
+            <MultiplayerActiveLevel />
         </div>
     )
 }

diff --git a/components/containers/rooms/state/WaitingRoom.tsx b/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)}}}
+                                    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!"}))}}}
                                 >
                                     Start game
                                 </button>

diff --git a/data/tasks.ts b/data/tasks.ts
@@ -1,6 +1,6 @@
 const tasks = [
     {type: "age"},
-    {type:"time sum"},
+    {type: "time sum"},
     {type: "time difference"},
     {type: "time difference minutes"},
     {type: "time difference minutes2"},

diff --git a/hooks/DisplayLevelFromType.tsx b/hooks/DisplayLevelFromType.tsx
@@ -31,34 +31,35 @@ interface Task{
 interface Props{
     needHelp: boolean;
     setNeedHelp: any;
+    multiplayer: boolean;
 }
 
-const renderActiveTaskFromType = (type: string, needHelp: boolean, setNeedHelp: any) => {
-    if(type === "age") return <TypeAge needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time sum") return <TimeSum needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time difference") return <TimeDifference needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time difference minutes") return <TimeDifferenceMinutes needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time difference minutes2") return <TimeDifferenceMinutesSecond needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "month amount") return <MonthAmount needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "day amount") return <DayAmount needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "second amount") return <SecondAmount needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "roman numerals") return <RomanNumerals needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "kilometers apart") return <KilometersApart needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "road calculation") return <RoadCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "road calculation2") return <RoadCalculationSecond needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time calculation") return <TimeCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "m/min to m/h") return <MminToMh needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "speed calculation") return <SpeedCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "acceleration calculation") return <AccelerationCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "uniformly slow motion") return <UniformlySlowMotion needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "time from acceleration + distance") return <TimeAccelerationDistance needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "average speed") return <AverageSpeed needHelp={needHelp} setNeedHelp={setNeedHelp} />;
-    else if(type === "distance between2") return <DistanceBetween2 needHelp={needHelp} setNeedHelp={setNeedHelp} />;
+const renderActiveTaskFromType = (type: string, needHelp: boolean, setNeedHelp: any, multiplayer: boolean) => {
+    if(type === "age") return <TypeAge needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time sum") return <TimeSum needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time difference") return <TimeDifference needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time difference minutes") return <TimeDifferenceMinutes needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time difference minutes2") return <TimeDifferenceMinutesSecond needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "month amount") return <MonthAmount needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "day amount") return <DayAmount needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "second amount") return <SecondAmount needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "roman numerals") return <RomanNumerals needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "kilometers apart") return <KilometersApart needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "road calculation") return <RoadCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "road calculation2") return <RoadCalculationSecond needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time calculation") return <TimeCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "m/min to m/h") return <MminToMh needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "speed calculation") return <SpeedCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "acceleration calculation") return <AccelerationCalculation needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "uniformly slow motion") return <UniformlySlowMotion needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "time from acceleration + distance") return <TimeAccelerationDistance needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "average speed") return <AverageSpeed needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
+    else if(type === "distance between2") return <DistanceBetween2 needHelp={needHelp} setNeedHelp={setNeedHelp} multiplayer={multiplayer} />;
 
     return null;
 }
 
-const DisplayLevelFromType: React.FC<Props> = ({needHelp, setNeedHelp}) => {
+const DisplayLevelFromType: React.FC<Props> = ({needHelp, setNeedHelp, multiplayer}) => {
     const [foundTask, setFoundTask] = useState<boolean>(false);
     const [activeTask, setActiveTask] = useState<null | Task>(null);
     const [prevLevel, setPrevLevel] = useState<null | string>(null);
@@ -92,7 +93,8 @@ const DisplayLevelFromType: React.FC<Props> = ({needHelp, setNeedHelp}) => {
         return null;
     }
 
-    return renderActiveTaskFromType(activeTask.type, needHelp, setNeedHelp);
+    return renderActiveTaskFromType(activeTask.type, needHelp, setNeedHelp, multiplayer);
 }
 
-export default DisplayLevelFromType;
+export default DisplayLevelFromType;
+export {renderActiveTaskFromType};
diff --git a/hooks/DisplayMultiplayerTask.tsx b/hooks/DisplayMultiplayerTask.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux';
+import tasks from '../data/tasks';
+import { selectRooms } from '../redux/slices/roomSlice';
+import { selectUser } from '../redux/slices/userSlice';
+import { renderActiveTaskFromType } from './DisplayLevelFromType';
+
+interface Task{
+    type: string;
+}
+
+interface RoomUser{
+    username: string;
+    level: number;
+    points: number;
+    userId: string;
+}
+
+interface Props{
+    needHelp: boolean;
+    setNeedHelp: any;
+}
+
+const DisplayMultiplayerTask: React.FC<Props> = ({needHelp, setNeedHelp}) => {
+    const userInfo = useSelector(selectUser);
+    const roomInfo = useSelector(selectRooms);
+
+    const [activeTask, setActiveTask] = useState<null | Task>(null);
+
+    useEffect(() => {
+        if(userInfo.info && roomInfo.roomUsers && roomInfo.roomUsers.some((user: RoomUser) => user.userId === userInfo.info._id)){
+            let user: RoomUser = roomInfo.roomUsers.find((rUser: RoomUser) => rUser.userId === userInfo.info._id);
+            setActiveTask(tasks[user.level])
+        }
+    }, [userInfo.info, roomInfo.roomUsers, activeTask]);
+
+    if(!activeTask){
+        return null;
+    }
+
+    return renderActiveTaskFromType(activeTask.type, needHelp, setNeedHelp, true);
+}
+
+export default DisplayMultiplayerTask
diff --git a/levels/AccelerationCalculation.tsx b/levels/AccelerationCalculation.tsx
@@ -4,13 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setNotification } from '../redux/slices/notificationSlice';
 import { selectUser } from '../redux/slices/userSlice';
 import { nextLevel } from '../requests/levels/requests';
+import { completeSocketLevel } from '../socket/options';
 
 interface Props{
     needHelp: boolean;
     setNeedHelp: any;
+    multiplayer: boolean;
 }
 
-const AccelerationCalculation: React.FC<Props> = ({needHelp, setNeedHelp}) => {
+const AccelerationCalculation: React.FC<Props> = ({needHelp, setNeedHelp, multiplayer}) => {
     const userInfo = useSelector(selectUser);
 
     const [selectedAge, setSelectedAge] = useState<number>(0);
@@ -28,6 +30,13 @@ const AccelerationCalculation: React.FC<Props> = ({needHelp, setNeedHelp}) => {
     const completeLevel = (e: any) => {
         e.preventDefault();
 
+        if(multiplayer){
+            if(selectedAge !== acceleration){
+                return completeSocketLevel(false, dispatch);
+            }
+            return completeSocketLevel(true, dispatch);
+        }
+
         if(selectedAge !== acceleration){
             return dispatch(setNotification({type: "error", message: "Incorrect answer!"}));
         }

diff --git a/levels/AverageSpeed.tsx b/levels/AverageSpeed.tsx
@@ -4,13 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setNotification } from '../redux/slices/notificationSlice';
 import { selectUser } from '../redux/slices/userSlice';
 import { nextLevel } from '../requests/levels/requests';
+import { completeSocketLevel } from '../socket/options';
 
 interface Props{
     needHelp: boolean;
     setNeedHelp: any;
+    multiplayer: boolean;
 }
 
-const AverageSpeed: React.FC<Props> = ({needHelp, setNeedHelp}) => {
+const AverageSpeed: React.FC<Props> = ({needHelp, setNeedHelp, multiplayer}) => {
     const userInfo = useSelector(selectUser);
 
     const [selectedAge, setSelectedAge] = useState<number>(10);
@@ -52,6 +54,13 @@ const AverageSpeed: React.FC<Props> = ({needHelp, setNeedHelp}) => {
         e.preventDefault();
         setChangeTask(true);
 
+        if(multiplayer){
+            if(selectedAge !== ((startingSpeed + acceleratedSpeed) / 2)){
+                return completeSocketLevel(false, dispatch);
+            }
+            return completeSocketLevel(true, dispatch);
+        }
+
         if(selectedAge !== ((startingSpeed + acceleratedSpeed) / 2)){
             setChangeTask(true);
             return dispatch(setNotification({type: "error", message: "Incorrect answer!"}));

diff --git a/levels/DayAmount.tsx b/levels/DayAmount.tsx
@@ -4,13 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setNotification } from '../redux/slices/notificationSlice';
 import { selectUser } from '../redux/slices/userSlice';
 import { nextLevel } from '../requests/levels/requests';
+import { completeSocketLevel } from '../socket/options';
 
 interface Props{
     needHelp: boolean;
     setNeedHelp: any;
+    multiplayer: boolean;
 }
 
-const DayAmount: React.FC<Props> = ({needHelp, setNeedHelp}) => {
+const DayAmount: React.FC<Props> = ({needHelp, setNeedHelp, multiplayer}) => {
     const userInfo = useSelector(selectUser);
 
     const [selectedAge, setSelectedAge] = useState<number>(0);
@@ -26,6 +28,13 @@ const DayAmount: React.FC<Props> = ({needHelp, setNeedHelp}) => {
     const completeLevel = (e: any) => {
         e.preventDefault();
 
+        if(multiplayer){
+            if(selectedAge !== ((weeks * 7) + days)){
+                return completeSocketLevel(false, dispatch);
+            }
+            return completeSocketLevel(true, dispatch);
+        }
+
         if(selectedAge !== ((weeks * 7) + days)){
             return dispatch(setNotification({type: "error", message: "Incorrect answer!"}));
         }