From 51d45a535cd30bb64ed5d93ecca6d6bca4e84cc0 Mon Sep 17 00:00:00 2001 From: Shaochang Tan <478710209@qq.com> Date: Wed, 15 May 2024 00:25:21 +0200 Subject: [PATCH 01/16] don't render empty and GAMEOVER room Signed-off-by Shaochang Tan <478710209@qq.com> --- src/components/views/Lobby.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 9a63e2c..301f152 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -382,7 +382,7 @@ const Lobby = () => { if (Room.roomPlayersList.length === Room.roomMaxNum) { showToast("Room is Full, please enter another room!", "error"); - } else if (Room.status === "In Game") { + } else if (Room.status !== "WAITING") { showToast("Game is already started, please enter another room!", "error"); } else { navigate(`/rooms/${Room.roomId}`); @@ -422,6 +422,11 @@ const Lobby = () => { } } + // don't render the room if there is no player in the room or the game is over + if (Room.roomPlayersList.length === 0 || Room.status === "GAMEOVER") { + return ; + } + return (
From e1859ac359b831eec920000b742910c9dcbb0d81 Mon Sep 17 00:00:00 2001 From: Shaochang Tan <478710209@qq.com> Date: Wed, 15 May 2024 00:28:02 +0200 Subject: [PATCH 02/16] Remove disable option for create room, let error hint user the correct syntax. Signed-off-by Shaochang Tan <478710209@qq.com> --- src/components/views/Lobby.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 301f152..1b7d0ff 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -565,8 +565,8 @@ const Lobby = () => { -
+ + +
)} +
Kaeps
i
@@ -494,6 +495,7 @@ const Lobby = () => { > Edit + ) } > diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index 70a4d5f..2ac767e 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -513,25 +513,27 @@ Button { justify-content: center; height: auto; width: 100%; - bottom: 1.5%; - left: 0%; margin-top: 10px; flex-grow: 1; font-family: sans-serif; - .logout-btn { - bottom: 1%; - min-width: fit-content; - width: 20%; - min-height: 50px; - display: flex; - justify-items: center; - align-items: center; - justify-content: center; - align-content: center; - font-size: 1.3em; - background-color: $classicYellow; - color: white; - text-transform: none; - font-weight: bolder; - } } + +.logout-btn { + position: absolute; + left: 20px; + bottom: 20px; + min-width: fit-content; + width: 30px; + min-height: 50px; + display: flex; + justify-items: center; + align-items: center; + justify-content: center; + align-content: center; + font-size: 1.3em; + background-color: $classicYellow; + color: white; + text-transform: none; + font-weight: bolder; +} + From 357e72883bb97f516eed281629dd0b2f66bdea68 Mon Sep 17 00:00:00 2001 From: Haaaan1 Date: Wed, 15 May 2024 10:13:37 +0200 Subject: [PATCH 05/16] Update guide for microphone privacy informing #107 --- src/components/views/Lobby.tsx | 2 +- src/styles/views/Lobby.scss | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index bd05094..62c222e 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -636,7 +636,7 @@ const Lobby = () => {
  • Turns: The game is played in rounds. Each round has one speaker and several challengers. Players alternate roles as the Speaker to ensure fairness.

    • Click GUIDE for more detailed instructions.

    -

    Join a room or create one to play with friends!

    +

    Before you start, please enable your browser's microphone privacy settings.

    diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index 2ac767e..4aa7711 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -348,7 +348,7 @@ Button { cursor: pointer; } .intro-cnt { - width: 450px; + width: 550px; max-width: 40vw; ul { padding-left: 1rem; @@ -537,3 +537,13 @@ Button { font-weight: bolder; } +.important-note { + font-weight: bold; + color: white; + font-size: 1.2em; + background-color: $classicYellow; + padding: 10px; + border: 2px solid red; + border-radius: 5px; + text-align: center; +} From cbb4e447b5527c4b1abc6690d7d683aeefa6c162 Mon Sep 17 00:00:00 2001 From: Haaaan1 Date: Wed, 15 May 2024 10:17:19 +0200 Subject: [PATCH 06/16] Add jelly animation for info button --- src/components/views/Lobby.tsx | 3 --- src/styles/views/Lobby.scss | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 62c222e..4ea8514 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -456,9 +456,6 @@ const Lobby = () => { cursor: "pointer" }} />
    {user.username}
    - - - )} diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index 4aa7711..a4e4c31 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -346,7 +346,24 @@ Button { background: $classicYellow; border-radius: 50%; cursor: pointer; + animation: jelly 1s infinite; } + +@keyframes jelly { + 0%, 100% { + transform: scale(1, 1); + } + 25% { + transform: scale(1.1, 0.9); + } + 50% { + transform: scale(0.9, 1.1); + } + 75% { + transform: scale(1.05, 0.95); + } +} + .intro-cnt { width: 550px; max-width: 40vw; From d1d26a56277f4dc944679c08f90c79bd53bd58d4 Mon Sep 17 00:00:00 2001 From: Haaaan1 Date: Wed, 15 May 2024 15:46:49 +0200 Subject: [PATCH 07/16] Add custom number input components --- src/components/ui/CustomNumberInput.tsx | 47 +++++++++++++++++++++++++ src/styles/ui/CustomNumberInput.scss | 32 +++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 src/components/ui/CustomNumberInput.tsx create mode 100644 src/styles/ui/CustomNumberInput.scss diff --git a/src/components/ui/CustomNumberInput.tsx b/src/components/ui/CustomNumberInput.tsx new file mode 100644 index 0000000..788091b --- /dev/null +++ b/src/components/ui/CustomNumberInput.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import "../../styles/ui/CustomNumberInput.scss"; + +interface CustomNumberInputProps { + min: number; + max: number; + value: number; + onChange: (value: number) => void; +} + +const CustomNumberInput: React.FC = ({ min, max, value, onChange }) => { + const handleDecrement = () => { + if (value > min) { + onChange(value - 1); + } + }; + + const handleIncrement = () => { + if (value < max) { + onChange(value + 1); + } + }; + + const handleChange = (e: React.ChangeEvent) => { + const newValue = parseInt(e.target.value, 10); + if (!isNaN(newValue) && newValue >= min && newValue <= max) { + onChange(newValue); + } + }; + + return ( +
    + + + +
    + ); +}; + +export default CustomNumberInput; diff --git a/src/styles/ui/CustomNumberInput.scss b/src/styles/ui/CustomNumberInput.scss new file mode 100644 index 0000000..cd971d1 --- /dev/null +++ b/src/styles/ui/CustomNumberInput.scss @@ -0,0 +1,32 @@ +@import "../theme"; +.custom-number-input { + display: flex; + align-items: center; + margin-top: 10px; + + button { + width: 30px; + height: 30px; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + background-color: $classicYellow; // 使用预定义的变量 + border: none; + border-radius: 50%; // 使按钮变为圆形 + cursor: pointer; + color: white; // 设置按钮文字颜色为白色 + + &:disabled { + background-color: #eee; + cursor: not-allowed; + } + } + + input { + width: 60px; // 设置数字输入框的宽度 + text-align: center; + font-size: 18px; + margin: 0 5px; + } +} From bb7477bd3be681971f80ee75aa10f3e7f723aae9 Mon Sep 17 00:00:00 2001 From: Haaaan1 Date: Wed, 15 May 2024 15:46:59 +0200 Subject: [PATCH 08/16] Modified number input in room creation #107 --- src/components/views/Lobby.tsx | 21 ++++------ src/styles/views/Lobby.scss | 74 +++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 15 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 4ea8514..07ba3a6 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useRef, useEffect, useState } from "react"; import { api } from "helpers/api"; +import CustomNumberInput from "components/ui/CustomNumberInput"; import { Button } from "components/ui/Button"; import { throttle } from "lodash"; import { useNavigate } from "react-router-dom"; @@ -286,7 +287,6 @@ const Lobby = () => { : changeAvatarPopRef.current.showModal(); }; - const toggleInfoPop = () => { // if the ref is not set, do nothing if (!infoPopRef.current) { @@ -569,24 +569,19 @@ const Lobby = () => { placeholder="Max. 10" value={roomName} onChange={(e) => { - const inputValue = e.target.value; // 获取输入值 - if (inputValue.length <= MAX_ROOM_NAME_LENGTH) { // 检查输入值的长度 - setRoomName(inputValue); // 如果长度小于或等于15，更新状态 + const inputValue = e.target.value; + if (inputValue.length <= MAX_ROOM_NAME_LENGTH) { + setRoomName(inputValue); } }} />
    Number of Maximum Players:
    - { - const value = parseInt(e.target.value); - // console.error("Value:", value); - SetMaxRoomPlayers(value); - }} + Date: Thu, 16 May 2024 19:24:35 +0200 Subject: [PATCH 09/16] Change room empty place remaining display and cursor on the "plus" icon #107 --- src/components/views/Lobby.tsx | 19 ++++++++++++++----- src/styles/views/Lobby.scss | 22 ++++++++++++++++++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 07ba3a6..6a22f63 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -402,21 +402,30 @@ const Lobby = () => { return rooms.map((Room) => { const playerSlots = []; - // 生成玩家头像或空白框，总数等于房间最大玩家数 + // generate players avatar for (let i = 0; i < Room.roomMaxNum; i++) { if (i < Room.roomPlayersList.length) { const user = Room.roomPlayersList[i]; playerSlots.push(
    - +
    {user.userName}
    ); } else { - // 空白框 + // plus avatar playerSlots.push( -
    - +
    +
    ); } diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index 5e5129d..a473169 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -240,6 +240,28 @@ Button { font-size: 0.8em; } } + +.plus-player { + background: rgba(217, 217, 217, 1); + border-radius: 20px; + width: 85px; + height: 85px; + aspect-ratio: 1; + margin-right: 10px; + margin-left: 10px; + text-align: center; + cursor: pointer; + .player-avatar { + width: 60.8px; + height: 60.8px; + border-radius: 50%; + background-color: #D9D9D9; // Default background color + } + .player-username { + font-size: 0.8em; + } +} + .room-players { align-items: flex-start; // Align the players to the start of the flex container flex: 1 1 auto; // Allow both children to grow and take up equal space From 220ce159d3dcdf4d05391613d66eb0c00a23d5b0 Mon Sep 17 00:00:00 2001 From: Han Date: Thu, 16 May 2024 19:55:30 +0200 Subject: [PATCH 10/16] eslint fixing --- src/components/ui/CustomNumberInput.tsx | 2 +- src/components/views/Lobby.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ui/CustomNumberInput.tsx b/src/components/ui/CustomNumberInput.tsx index 788091b..7b74f4c 100644 --- a/src/components/ui/CustomNumberInput.tsx +++ b/src/components/ui/CustomNumberInput.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import "../../styles/ui/CustomNumberInput.scss"; interface CustomNumberInputProps { diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 6a22f63..f4ff591 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -409,10 +409,10 @@ const Lobby = () => { playerSlots.push(
    {user.userName}
    From fd927027098df4088410374e4c1845249bf7f591 Mon Sep 17 00:00:00 2001 From: Han Date: Fri, 17 May 2024 09:22:44 +0200 Subject: [PATCH 11/16] Add special characters and spaces in register name and password fields --- src/components/views/Login.tsx | 22 ++++++++++++++-------- src/components/views/Register.tsx | 22 ++++++++++++++-------- src/constants/constants.ts | 2 ++ 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/components/views/Login.tsx b/src/components/views/Login.tsx index 94d88fd..0d86766 100644 --- a/src/components/views/Login.tsx +++ b/src/components/views/Login.tsx @@ -1,12 +1,12 @@ import React, { useState } from "react"; -import { api, handleError } from "helpers/api"; +import { api } from "helpers/api"; import User from "models/User"; import {Link, useNavigate} from "react-router-dom"; import { Button } from "components/ui/Button"; import "styles/views/Login.scss"; import BaseContainer from "components/ui/BaseContainer"; import PropTypes from "prop-types"; -import { MAX_USERNAME_LENGTH, HTTP_STATUS } from "../../constants/constants"; +import { MAX_USERNAME_LENGTH, MAX_PASSWORD_LENGTH, HTTP_STATUS } from "../../constants/constants"; import { showToast} from "../../helpers/toastService"; /* @@ -24,7 +24,7 @@ const FormField = (props) => { placeholder="enter here.." value={props.value} type={props.type} - onChange={(e) => props.onChange(e.target.value)} + onChange={(e) => props.onChange(e)} />
    ); @@ -58,7 +58,7 @@ const Login = () => { showToast("Login successful!", "success"); navigate("/lobby"); } catch (error) { - let message = "An unexpected error occurred during login."; + let message; if (error.response) { switch (error.response.status) { case HTTP_STATUS.NOT_FOUND: @@ -87,16 +87,22 @@ const Login = () => { label="Username" value={username} type="text" - onChange={(un: string) => { - if (un.length <= MAX_USERNAME_LENGTH) setUsername(un) + onChange={(e) => { + const inputValue = e.target.value.replace(/[^\w\s]/gi, ""); + if (inputValue.length <= MAX_USERNAME_LENGTH) { + setUsername(inputValue); + } }} /> { - if (n.length <= MAX_USERNAME_LENGTH) setPassword(n) + onChange={(e) => { + const inputValue = e.target.value.replace(/[^\w\s]/gi, ""); + if (inputValue.length <= MAX_PASSWORD_LENGTH) { + setPassword(inputValue); + } }} />
    diff --git a/src/components/views/Register.tsx b/src/components/views/Register.tsx index b4f36f5..faf5a4d 100644 --- a/src/components/views/Register.tsx +++ b/src/components/views/Register.tsx @@ -1,12 +1,12 @@ import React, { useState } from "react"; -import { api, handleError } from "helpers/api"; +import { api } from "helpers/api"; import User from "models/User"; import {Link, useNavigate} from "react-router-dom"; import { Button } from "components/ui/Button"; import "styles/views/Register.scss"; import BaseContainer from "components/ui/BaseContainer"; import PropTypes from "prop-types"; -import { MAX_USERNAME_LENGTH, HTTP_STATUS } from "../../constants/constants"; +import { MAX_USERNAME_LENGTH, MAX_PASSWORD_LENGTH, HTTP_STATUS } from "../../constants/constants"; import { showToast} from "../../helpers/toastService"; /* It is possible to add multiple components inside a single file, @@ -24,7 +24,7 @@ const FormField = (props) => { placeholder="enter here.." value={props.value} type={props.type} - onChange={(e) => props.onChange(e.target.value)} + onChange={(e) => props.onChange(e)} />
    ); @@ -58,7 +58,7 @@ const Register = () => { showToast("Register successful!\nWelcome to this guide for newbies!", "success"); navigate("/guide"); } catch (error) { - let message = "An unexpected error occurred during Register."; + let message; if (error.response) { switch (error.response.status) { case HTTP_STATUS.CONFLICT: @@ -84,16 +84,22 @@ const Register = () => { label="Username" value={username} type="text" - onChange={(un: string) => { - if (un.length <= MAX_USERNAME_LENGTH) setUsername(un); + onChange={(e) => { + const inputValue = e.target.value.replace(/[^\w\s]/gi, ""); + if (inputValue.length <= MAX_USERNAME_LENGTH) { + setUsername(inputValue); + } }} /> { - if (n.length <= MAX_USERNAME_LENGTH) setPassword(n) + onChange={(e) => { + const inputValue = e.target.value.replace(/[^\w\s]/gi, ""); + if (inputValue.length <= MAX_PASSWORD_LENGTH) { + setPassword(inputValue); + } }} />
    diff --git a/src/constants/constants.ts b/src/constants/constants.ts index d0c3ab0..9c5e6cb 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -2,6 +2,8 @@ export const MAX_USERNAME_LENGTH = 10; +export const MAX_PASSWORD_LENGTH = 20; + export const MAX_ROOM_NAME_LENGTH = 10; export const DEFAULT_TIMEOUT = 1500; From 71e83e7dc703faa2286214a8a62d5daa82015a41 Mon Sep 17 00:00:00 2001 From: yixuan-zhou-uzh Date: Fri, 17 May 2024 09:45:11 +0200 Subject: [PATCH 12/16] [style] align the logout button --- src/styles/views/Lobby.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index 3a75fde..d1a6990 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -630,8 +630,8 @@ Button { .logout-btn { position: absolute; - left: 20px; - bottom: 20px; + left: 3%; + bottom: 10%; min-width: fit-content; width: 30px; min-height: 50px; From a07c534ee5624fcf2a7948ae5c14a7b47db46e7a Mon Sep 17 00:00:00 2001 From: yixuan-zhou-uzh Date: Fri, 17 May 2024 09:49:50 +0200 Subject: [PATCH 13/16] [style] login ui changed --- src/styles/views/Login.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/views/Login.scss b/src/styles/views/Login.scss index 286afe4..55f6f9f 100644 --- a/src/styles/views/Login.scss +++ b/src/styles/views/Login.scss @@ -20,11 +20,11 @@ padding-top: 30px; padding-left: 37px; padding-right: 37px; - background-color: #C9D7DD; + background-color: $lightYellow; transition: opacity 0.5s ease, transform 0.5s ease; box-shadow: $dropShadow; border-radius: 1.5em; - border: 20px solid $stroke; + border: 20px solid $classicYellow; } &.field { display: flex; @@ -38,7 +38,7 @@ border: none; border-radius: 0.75em; margin-bottom: 20px; - background: transparentize(white, 0.85); + background: $whiteYellow; color: $textColor; } &.label { From 2ce16b0b8a7733a88af7c80af8494e12247ddb50 Mon Sep 17 00:00:00 2001 From: yixuan-zhou-uzh Date: Fri, 17 May 2024 09:52:09 +0200 Subject: [PATCH 14/16] [style] uniform the ui of register and login page --- src/components/views/Register.tsx | 2 +- src/styles/views/Register.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/Register.tsx b/src/components/views/Register.tsx index faf5a4d..6a31da1 100644 --- a/src/components/views/Register.tsx +++ b/src/components/views/Register.tsx @@ -105,7 +105,7 @@ const Register = () => {