diff --git a/client/src/components/Game.tsx b/client/src/components/Game.tsx index 9b4567b..f56e2e4 100644 --- a/client/src/components/Game.tsx +++ b/client/src/components/Game.tsx @@ -51,7 +51,7 @@ const Game = ({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
{/* Desktop */} -
+

Players

{players.map((player:Player) => ( @@ -71,7 +71,7 @@ const Game = ({sendJsonMessage, lastMessageJson}: {sendJsonMessage: any, lastMes
{/* Mobile */} -
+
{({ open }) => ( diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 6daf53d..15365a7 100644 --- 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 (
@@ -13,7 +19,7 @@ const Header = ({roomCode}: {roomCode:string}) => {
{roomCode !== "" && -
+
copyRoomCode()}>

Room Code:
{roomCode}

}
diff --git a/client/src/components/InputVerify.ts b/client/src/components/InputVerify.ts index 0cd5880..0b5b270 100644 --- 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 index 654e7be..2e331f2 100644 --- 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 index fb3c74c..34cbdef 100644 --- a/client/src/components/Lobby.tsx +++ b/client/src/components/Lobby.tsx @@ -24,19 +24,19 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
-

Select your icon:

-
+

Select your icon:

+
{Object.keys(iconMap).map((iconName: string, idx:number) => { if (remainingIcons.includes(iconName)) { return ( -
selectIcon(iconName)}> - +
selectIcon(iconName)}> +
) } else { return ( -
- +
+
)} })} @@ -44,9 +44,9 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
{isHost && -
- -
+
+ +
} {!isHost && diff --git a/client/src/components/PlayerIcon.tsx b/client/src/components/PlayerIcon.tsx index a2f70c2..731a291 100644 --- 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 index 5a1f1f6..05b2c22 100644 --- 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 index 18127b1..0b02a0d 100644 --- 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) => {