From 89f2c3a0212e7f037b83abab1481f599434f8533 Mon Sep 17 00:00:00 2001
From: Shaochang Tan <478710209@qq.com>
Date: Thu, 28 Mar 2024 14:35:01 +0100
Subject: [PATCH] 1.add 'npm run lint' cmd to fix eslint warnning 2.turn the
 compile option sourceMap on for debugging

---
 .gitignore                     |  3 +++
 package.json                   |  3 ++-
 src/components/views/Lobby.tsx | 37 +++++++++++++++++-----------------
 tsconfig.json                  |  5 ++++-
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/.gitignore b/.gitignore
index 76c922a..aa03e53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# vscode
+.vscode
+
 # dependencies
 /node_modules
 /.pnp
diff --git a/package.json b/package.json
index d6099bc..f0c14ec 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "build": "react-scripts build",
     "gcp-build": "",
     "eject": "react-scripts eject",
-    "test": "react-scripts test --env=jsdom"
+    "test": "react-scripts test --env=jsdom",
+    "lint": "eslint --fix src/**/*.ts src/**/*.tsx src/**/*.js"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx
index c7e6de5..2a993b5 100644
--- a/src/components/views/Lobby.tsx
+++ b/src/components/views/Lobby.tsx
@@ -18,7 +18,7 @@ type RoomListProps = {
 };
 const Player: React.FC<PlayerProps> = ({ user }) => (
   <div className="player">
-    <img src={`https://twemoji.maxcdn.com/v/latest/72x72/1f604.png`} alt={user.username} className="player-avatar" />
+    <img src={"https://twemoji.maxcdn.com/v/latest/72x72/1f604.png"} alt={user.username} className="player-avatar" />
     <div className="player-username">{user.username}</div>
   </div>
 );
@@ -50,28 +50,28 @@ Player.propTypes = {
 };
 
 const mockRoomPlayers: User[] = [
-  { id: 1, username: 'Alice', avatar: 'https://twemoji.maxcdn.com/v/latest/72x72/1f604.png', name: 'Alice Wonderland', status: 'ONLINE', registerDate: new Date('2021-08-01'), birthday: new Date('1990-01-01') },
-  { id: 2, username: 'Bob', avatar: 'https://twemoji.maxcdn.com/v/latest/72x72/1f602.png', name: 'Bob Builder', status: 'OFFLINE', registerDate: new Date('2021-09-01'), birthday: new Date('1985-02-02') },
+  { id: 1, username: "Alice", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f604.png", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
+  { id: 2, username: "Bob", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f602.png", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
 ];
 
 const mockRooms: Room[] = [
   {
-    id: '1',
-    roomOwnerId: '1',
+    id: "1",
+    roomOwnerId: "1",
     roomPlayersList: [mockRoomPlayers[0]],
-    theme: 'Advanced',
-    status: 'In Game',
+    theme: "Advanced",
+    status: "In Game",
     maxPlayersNum: 4,
     alivePlayersList: [mockRoomPlayers[0]],
     currentPlayerIndex: 0,
     playToOuted: false,
   },
   {
-    id: '2',
-    roomOwnerId: '2',
+    id: "2",
+    roomOwnerId: "2",
     roomPlayersList: [mockRoomPlayers[1]],
-    theme: 'Food',
-    status: 'Free',
+    theme: "Food",
+    status: "Free",
     maxPlayersNum: 4,
     alivePlayersList: [mockRoomPlayers[1]],
     currentPlayerIndex: 1,
@@ -149,14 +149,15 @@ const Lobby = () => {
           ROOM #{room.id}
           <div>{room.theme}</div>
 
-            <span className={`room-status ${room.status === 'In Game' ? 'in-game' : 'free'}`}>
-              {room.status}
-            </span>
+          <span className={`room-status ${room.status === "In Game" ? "in-game" : "free"}`}>
+            {room.status}
+          </span>
 
         </div>
       </div>
     ));
   };
+  
   return (
 
     <BaseContainer>
@@ -169,10 +170,10 @@ const Lobby = () => {
         Kaeps
       </div>
       <div className='information'> i </div>
-        <div className="lobby room-list">
-          <h1>Rooms</h1>
-          {renderRoomLists()}
-        </div>
+      <div className="lobby room-list">
+        <h1>Rooms</h1>
+        {renderRoomLists()}
+      </div>
 
     </BaseContainer>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 5827516..0450c72 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "outDir": "build",
+    "target": "es5",
+    "sourceMap": true, // Enable source maps for debugging
   },
   "include": [
     "src"