Add monkey and share room code

andyplank · Jan 14, 2024 · be3d94a · be3d94a
1 parent c6a4d2d
commit be3d94a
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 18 deletions.
diff --git a/client/src/components/Game.tsx b/client/src/components/Game.tsx
@@ -51,7 +51,7 @@ const Game = ({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
         <div className="grow">
 
             {/* Desktop */}
-            <div className='grid grid-cols-4 gap-4 h-full hidden sm:grid'>
+            <div className='grid grid-cols-4 gap-4 h-full hidden lg:grid'>
                 <div className='bg-light-purple pb-4 pr-4'>
                     <h3 className='p-4'>Players</h3>
                     {players.map((player:Player) => (
@@ -71,7 +71,7 @@ const Game = ({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
             </div>  
 
             {/* Mobile */}
-            <div className='sm:hidden'>
+            <div className='lg:hidden'>
                 <div className='bg-light-purple'>
                     <Disclosure>
                         {({ open }) => (

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -1,5 +1,11 @@
 const Header = ({roomCode}: {roomCode:string}) => {
 
+  const copyRoomCode = () => {
+    const url = window.location.href;
+    const copy = url.split('?')[0] + "?room=" + roomCode;
+    navigator.clipboard.writeText(copy)
+  }
+
   return (
       <header>
         <div className="flex justify-between h-100">             
@@ -13,7 +19,7 @@ const Header = ({roomCode}: {roomCode:string}) => {
               </a>
           </div>
           {roomCode !== "" && 
-          <div className="flex justify-end">
+          <div className="flex justify-end cursor-pointer" onClick={() => copyRoomCode()}>
             <p className='self-end pb-1 pr-2 md:pb-4 md:pr-3 text-center'>Room Code:<br/> {roomCode}</p>
           </div>}
         </div>

diff --git a/client/src/components/InputVerify.ts b/client/src/components/InputVerify.ts
@@ -1,4 +1,5 @@
-const verifyInput = (inStr: string, maxLength:number) => {
+const verifyInput = (inStr: string | null | undefined, maxLength:number) => {
+    if (inStr === null || inStr === undefined) return false
     if (inStr.length > maxLength) return false
     for (let i = 0, len = inStr.length; i < len; i++) {
         const code = inStr.charCodeAt(i);

diff --git a/client/src/components/Join.tsx b/client/src/components/Join.tsx
@@ -1,9 +1,17 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import verifyInput from './InputVerify';
 
 const Join = ({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, roomCode: any, setRoomCode: any}) => {
 
     const [username, setUsername] = useState('');
+
+    useEffect(() => {
+        const queryParameters = new URLSearchParams(window.location.search)
+        window.history.pushState({}, document.title, "/")
+        const roomParam = queryParameters.get("room")
+        if (roomParam !== null && roomParam !== undefined && verifyInput(roomParam, 6)) 
+            setRoomCode(roomParam.toLocaleUpperCase());
+    });
 
     const createRoom = () => {
         sendJsonMessage(({

diff --git a/client/src/components/Lobby.tsx b/client/src/components/Lobby.tsx
@@ -24,29 +24,29 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
         <div>
             <div className="px-5 py-2 md:p-10 shadow-xl rounded-2xl w-full">
                 <div className='pb-2'>
-                    <h3 className='pb-4 md:pb-10'>Select your icon:</h3>
-                    <div className='grid grid-cols-3 gap-2 md:grid-cols-7'>
+                    <h3 className='pb-4 lg:pb-10'>Select your icon:</h3>
+                    <div className='grid grid-cols-3 gap-2 lg:grid-cols-5'>
                     {Object.keys(iconMap).map((iconName: string, idx:number) => {
                         if (remainingIcons.includes(iconName)) {
                             return (
-                                <div key={iconName+idx} className='hover:scale-110 duration-500 p-2 lg:p-4 cursor-pointer' onClick={() => selectIcon(iconName)}> 
-                                    <PlayerIcon iconName={iconName}/>
+                                <div key={iconName+idx} className='hover:scale-110 duration-500 p-2 cursor-pointer lg:max-w-[175px] 3xl:max-w-[225px]' onClick={() => selectIcon(iconName)}> 
+                                    <PlayerIcon iconName={iconName} />
                                 </div>
                             ) 
                         } else {
                         return  (
-                            <div key={iconName+idx} className='filter grayscale p-2 lg:p-4 brightness-75'> 
-                                <PlayerIcon iconName={iconName}/>
+                            <div key={iconName+idx} className='filter grayscale p-2 brightness-75 lg:max-w-[175px] 3xl:max-w-[225px]'> 
+                                <PlayerIcon iconName={iconName} />
                             </div>
                         )}
                     })}
                     </div>
                 </div>
             </div>
             {isHost && 
-            <div className='text-center pb-4 pt-8 md:pt-15'>
-                <button className='button-orange hover:scale-110 duration-500 p-2 pr-8 pl-8' onClick={startGame}><h3>Start Game!</h3></button>
-            </div>
+                <div className='text-center pb-4 pt-8 md:pt-15'>
+                    <button className='button-orange hover:scale-110 duration-500 p-2 pr-8 pl-8' onClick={startGame}><h3>Start Game!</h3></button>
+                </div>
             }
 
             {!isHost &&

diff --git a/client/src/components/PlayerIcon.tsx b/client/src/components/PlayerIcon.tsx
@@ -12,7 +12,8 @@ export const iconMap:any = {
     horse: "horse.svg",
     pig: "pig.svg",
     sheep: "sheep.svg",
-    cow: "cow.svg"
+    cow: "cow.svg",
+    monkey: "monkey.svg",
 }
 
 const PlayerIcon = ({iconName, customClass}: {iconName: string, customClass?: string}) => {

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        '3xl': '2000px',
+      },
+    },
     colors: {
       main: '#93C5FD',  
       mainlight: '#E3F0FF',

diff --git a/server/src/util.ts b/server/src/util.ts
@@ -164,7 +164,7 @@ function createRoom(data: any, userId: any) {
         currQuestion: "",
         currPlayerId: host.id,
         remainingAnswers: [],
-        remainingIcons: new Set(["cat", "chicken", "cow", "dog", "fox", "horse", "lion", "mouse", "panda", "pig", "sheep", "snake", "tiger"]),
+        remainingIcons: new Set(["cat", "chicken", "cow", "dog", "fox", "horse", "lion", "mouse", "panda", "pig", "sheep", "snake", "tiger", "monkey"]),
         roundNumber: -1,
         guessing: false,
         pastQuestions: new Set([]),
@@ -384,7 +384,9 @@ function getRoom(code: string): Room | null{
     if (code in rooms === false) {
         return null;
     }
-    return rooms[code];
+    const room = rooms[code];
+    if (room === undefined) return null;
+    return room;
 }
 
 const getPlayer = (room: Room, userId: string) => {