Refactor code structure for improved readability and maintainability

src/components/Gameboard/Map/Map.jsx

@@ -33,7 +33,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             cursorX = event.clientX - rect.left,
             cursorY = event.clientY - rect.top;
         for (const pawn of pawns) {
-            if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
+            if (pawn.touchableArea && ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
                 if (canPawnMove(pawn, rolledNumber)) socket.emit('game:move', pawn._id);
             }
         }
@@ -50,11 +50,14 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
         canvas.style.cursor = 'default';
         for (const pawn of pawns) {
             if (
+                pawn.touchableArea &&
                 ctx.isPointInPath(pawn.touchableArea, x, y) &&
                 player.color === pawn.color &&
                 canPawnMove(pawn, rolledNumber)
             ) {
                 const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
+                console.log('previous position:', pawn.position);
+                console.log('Hovered pawn can move to position:', pawnPosition);
                 if (pawnPosition) {
                     canvas.style.cursor = 'pointer';
                     if (hintPawn && hintPawn.id === pawn._id) return;

src/components/LoginPage/JoinServer/JoinServer.jsx

@@ -20,12 +20,23 @@ const JoinServer = () => {
     useEffect(() => {
         socket.emit('room:rooms');
         socket.on('room:rooms', () => {
+            console.log('✅ Room list updated');
             setIsLoading(false);
         });
+        socket.on('error:deleteRoom', (error) => {
+            console.error('❌ Delete error:', error);
+            alert('Failed to delete server: ' + error);
+            getRooms();
+        });
+        return () => {
+            socket.off('error:deleteRoom');
+            socket.off('room:rooms');
+        };
     }, [socket]);
 
     const getRooms = () => {
         setRooms([]);
+        setIsLoading(true);
         socket.emit('room:rooms');
     };
 
@@ -34,6 +45,15 @@ const JoinServer = () => {
         setJoining(true);
     };
 
+    const handleDeleteClick = roomId => {
+        if (window.confirm('Are you sure you want to delete this server?')) {
+            console.log('🗑️ Deleting room:', roomId);
+            setIsLoading(true);
+            setRooms([]); // Clear the list immediately
+            socket.emit('room:delete', roomId);
+        }
+    };
+
     const ServersTableWithLoading = withLoading(ServersTable);
 
     return (
@@ -51,6 +71,7 @@ const JoinServer = () => {
                             isLoading={isLoading}
                             rooms={rooms}
                             handleJoinClick={handleJoinClick}
+                            handleDeleteClick={handleDeleteClick}
                         />
                     </div>
                 }

src/components/LoginPage/JoinServer/ServersTable/ServersTable.jsx

@@ -1,7 +1,7 @@
 import lock from '../../../../images/login-page/lock.png';
 import styles from './ServersTable.module.css';
 
-const ServerListTable = ({ rooms, handleJoinClick }) => {
+const ServerListTable = ({ rooms, handleJoinClick, handleDeleteClick }) => {
     return (
         <table className={styles.rooms}>
             <thead>
@@ -23,6 +23,9 @@ const ServerListTable = ({ rooms, handleJoinClick }) => {
                             <td>{room.isStarted ? 'started' : 'waiting'}</td>
                             <td className={styles.lastColumn}>
                                 <button onClick={() => handleJoinClick(room)}>Join</button>
+                                <button onClick={() => handleDeleteClick(room._id)} className={styles.deleteBtn}>
+                                        Delete
+                                    </button>
                             </td>
                         </tr>
                     );

src/components/LoginPage/JoinServer/ServersTable/ServersTable.module.css

@@ -36,8 +36,18 @@
 }
 
 .lastColumn {
-    width: 70px;
+    width: 130px;
 }
 .firstColumn {
     width: 40px;
 }
+
+.deleteBtn {
+    margin-left: 5px;
+    background-color: #ff4444;
+    color: white;
+    border: none;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+}