From bb7477bd3be681971f80ee75aa10f3e7f723aae9 Mon Sep 17 00:00:00 2001
From: Haaaan1 <YangHan991123@gmail.com>
Date: Wed, 15 May 2024 15:46:59 +0200
Subject: [PATCH] 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);
               }
             }}
           />
           <div>Number of Maximum Players: </div>
-          <input
-            type="number"
-            placeholder={`Between ${DEFAULT_MIN_PLAYERS} and ${DEFAULT_MAX_PLAYERS}`}
-            value={maxRoomPlayers}
-            onChange={e => {
-              const value = parseInt(e.target.value);
-              // console.error("Value:", value);
-              SetMaxRoomPlayers(value);
-            }}
+          <CustomNumberInput
+            className="custom-number-input"
             min={DEFAULT_MIN_PLAYERS}
             max={DEFAULT_MAX_PLAYERS}
+            value={maxRoomPlayers}
+            onChange={SetMaxRoomPlayers}
           />
           <Dropdown
             className="theme-dropdown"
diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss
index a4e4c31..5e5129d 100644
--- a/src/styles/views/Lobby.scss
+++ b/src/styles/views/Lobby.scss
@@ -456,6 +456,36 @@ Button {
   // }
 
 }
+
+.custom-number-input {
+  display: flex;
+  align-items: center;
+}
+
+.custom-number-input button {
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
+  border: none;
+  cursor: pointer;
+}
+
+.custom-number-input button:disabled {
+  background-color: #eee;
+  cursor: not-allowed;
+}
+
+.custom-number-input input {
+  width: 60px;
+  text-align: center;
+  font-size: 18px;
+  margin: 0 5px;
+}
+
 .room-creation-popup {
   //height: 60%;
   &.content {
@@ -471,7 +501,7 @@ Button {
     }
     input {
       height: 20%;
-      width: 600px;
+      width: 400px;
       max-width: 60vw;
       padding-left: 1px;
       margin-left: 4px;
@@ -482,12 +512,52 @@ Button {
       color: $textColor;
     }
   }
+  .custom-number-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    justify-content: center;
+    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 {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+      }
+    }
+
+    input {
+      width: 60px;
+      text-align: center;
+      font-size: 18px;
+      margin: 0 5px;
+      -moz-appearance: textfield; /* Firefox */
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
+        margin: 0;
+      }
+    }
+  }
   .theme-dropdown {
     position: relative;
     display: flex;
     align-items: center;
     justify-items: center;
-    width: 600px;
+    width: 400px;
     max-width: 60vw;
     height: 60px;
     //margin-top: 20px;