.env

@@ -1,5 +1,5 @@
 # MongoDB connection for backend
-CONNECTION_URI=mongodb://admin:adminpassword@192.168.0.197:27017/ludo?authSource=admin&replicaSet=rs0
+CONNECTION_URI=mongodb://admin:adminpassword@mongo:27017/ludo?authSource=admin&replicaSet=rs0
 
 # Backend port
 PORT=18081

Dockerfile

@@ -103,7 +103,7 @@ RUN chmod +x wait-for-mongo.sh
 # Default fallback values (can be overridden by Compose)
 ENV NODE_ENV=production
 ENV PORT=8080
-ENV CONNECTION_URI=mongodb://192.168.0.197:27017/ludo?replicaSet=rs0
+ENV CONNECTION_URI=mongodb://mongo:27017/ludo?replicaSet=rs0
 
 EXPOSE 18081
 

backend/.env

@@ -1,5 +0,0 @@
-PORT=8080
-# MongoDB connection for backend
-CONNECTION_URI=mongodb://admin:adminpassword@192.168.0.197:27017/ludo?authSource=admin&replicaSet=rs0
-
-NODE_ENV="development"

backend/.env.example

@@ -0,0 +1,3 @@
+PORT=8080
+CONNECTION_URI=your_mongodb_connection_uri
+NODE_ENV="development"

backend/config/database.js

@@ -1,11 +1,6 @@
 module.exports = async function (mongoose) {
     try {
-        console.log('🔌 Attempting to connect with URI:', process.env.CONNECTION_URI);
+        await mongoose.connect(process.env.CONNECTION_URI);
-        await mongoose.connect(process.env.CONNECTION_URI, {
-            useNewUrlParser: true,
-            useUnifiedTopology: true,
-            directConnection: true,
-        });
         console.log('✅ MongoDB connected');
     } catch (err) {
         console.error('❌ MongoDB connection error:', err);

backend/config/session.js

@@ -1,41 +1,10 @@
 const session = require('express-session');
 const MongoDBStore = require('connect-mongodb-session')(session);
 
-console.log('📋 Session.js - CONNECTION_URI:', process.env.CONNECTION_URI);
+const store = new MongoDBStore({
-
+    uri: process.env.CONNECTION_URI,
-// Parse the connection URI to extract connection options
-const uriString = process.env.CONNECTION_URI;
-const uriUrl = new URL(uriString);
-
-// Extract individual components
-const baseUri = `${uriUrl.protocol}//${uriUrl.username}:${uriUrl.password}@${uriUrl.hostname}:${uriUrl.port}${uriUrl.pathname}`;
-const replicaSet = uriUrl.searchParams.get('replicaSet');
-const authSource = uriUrl.searchParams.get('authSource');
-
-console.log('📋 Base URI:', baseUri);
-console.log('📋 ReplicaSet:', replicaSet);
-console.log('📋 AuthSource:', authSource);
-
-// Build connection options with directConnection to bypass replica set discovery
-const connectionOptions = {
-    useNewUrlParser: true,
-    useUnifiedTopology: true,
-    directConnection: true, // Force direct connection to specified server
-};
-
-if (authSource) {
-    connectionOptions.authSource = authSource;
-}
-
-const storeOptions = {
-    uri: baseUri,
     collection: 'sessions',
-    connectionOptions: connectionOptions,
+});
-};
-
-console.log('📋 Store options:', JSON.stringify(storeOptions, null, 2));
-
-const store = new MongoDBStore(storeOptions);
 const sessionMiddleware = session({
     store: store,
     credentials: true,

backend/server.js

@@ -3,14 +3,11 @@ const cors = require('cors');
 const path = require('path');
 const cookieParser = require('cookie-parser');
 const mongoose = require('mongoose');
-require('dotenv').config({ path: path.join(__dirname, '.env') });
+require('dotenv').config();
 const { sessionMiddleware } = require('./config/session');
 
 const PORT = process.env.PORT || 5000;
 
-console.log('🔍 Environment loaded from:', path.join(__dirname, '.env'));
-console.log('📍 Connection URI:', process.env.CONNECTION_URI);
-
 const app = express();
 
 app.use(cookieParser());

backend/test-connection-no-replica.js

@@ -1,22 +0,0 @@
-const mongodb = require('mongodb');
-require('dotenv').config({ path: require('path').join(__dirname, '.env') });
-
-// Try without replicaSet
-const uri = 'mongodb://admin:adminpassword@192.168.0.197:27017/ludo?authSource=admin';
-console.log('Testing without replicaSet:', uri);
-
-mongodb.MongoClient.connect(uri, {
-    useNewUrlParser: true,
-    useUnifiedTopology: true,
-    authSource: 'admin',
-    serverSelectionTimeoutMS: 5000,
-}, (err, client) => {
-    if (err) {
-        console.error('❌ Connection error:', err.message);
-        process.exit(1);
-    } else {
-        console.log('✅ Connected successfully!');
-        client.close();
-        process.exit(0);
-    }
-});

backend/test-connection.js

@@ -1,27 +0,0 @@
-const mongodb = require('mongodb');
-require('dotenv').config({ path: require('path').join(__dirname, '.env') });
-
-const uri = process.env.CONNECTION_URI;
-console.log('Testing with URI:', uri);
-
-const uriUrl = new URL(uri);
-console.log('URL components:');
-console.log('  hostname:', uriUrl.hostname);
-console.log('  port:', uriUrl.port);
-console.log('  pathname:', uriUrl.pathname);
-console.log('  searchParams:', Object.fromEntries(uriUrl.searchParams));
-
-// Try to connect directly
-mongodb.MongoClient.connect(uri, {
-    useNewUrlParser: true,
-    useUnifiedTopology: true,
-    replicaSet: 'rs0',
-    authSource: 'admin'
-}, (err, client) => {
-    if (err) {
-        console.error('Connection error:', err.message);
-    } else {
-        console.log('✅ Connected successfully!');
-        client.close();
-    }
-});

backend/test-mongo-debug.js

@@ -1,23 +0,0 @@
-process.env.DEBUG = 'mongodb:*';
-
-const mongodb = require('mongodb');
-
-const uri = 'mongodb://admin:adminpassword@192.168.0.197:27017/ludo?authSource=admin';
-console.log('Connecting to:', uri);
-
-const client = new mongodb.MongoClient(uri, {
-    useNewUrlParser: true,
-    useUnifiedTopology: true,
-    authSource: 'admin',
-    serverSelectionTimeoutMS: 3000,
-    loggerLevel: 'debug',
-});
-
-client.connect((err) => {
-    if (err) {
-        console.error('❌ Connection error:', err);
-    } else {
-        console.log('✅ Connected!');
-        client.close();
-    }
-});

backend/test-network.js

@@ -1,34 +0,0 @@
-const mongodb = require('mongodb');
-const net = require('net');
-const dns = require('dns').promises;
-
-async function test() {
-    // Test DNS resolution
-    console.log('Testing DNS resolution...');
-    try {
-        const res = await dns.resolve4('192.168.0.197');
-        console.log('DNS resolve4(192.168.0.197):', res);
-    } catch (e) {
-        console.log('DNS error:', e.message);
-    }
-
-    try {
-        const res = await dns.resolve4('mongo');
-        console.log('DNS resolve4(mongo):', res);
-    } catch (e) {
-        console.log('DNS mongo error:', e.message);
-    }
-
-    // Test direct socket connection
-    console.log('\nTesting direct TCP connection...');
-    const socket = net.createConnection(27017, '192.168.0.197');
-    socket.on('connect', () => {
-        console.log('✅ TCP connection successful to 192.168.0.197:27017');
-        socket.destroy();
-    });
-    socket.on('error', (err) => {
-        console.log('❌ TCP connection error:', err.message);
-    });
-}
-
-test();

package-lock.json

@@ -26,7 +26,6 @@
         "web-vitals": "^3.5.0"
       },
       "devDependencies": {
-        "@babel/plugin-transform-private-property-in-object": "^7.16.7",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^14.1.2",
         "cypress": "^13.6.1"

src/App.js

@@ -13,7 +13,7 @@ function App() {
     const [playerSocket, setPlayerSocket] = useState();
     const [redirect, setRedirect] = useState();
     useEffect(() => {
-        const socket = io(`http://${window.location.hostname}:8080`, { withCredentials: true });
+        const socket = io(`${window.location.protocol}//${window.location.host}`, { withCredentials: true });
         socket.on('player:data', data => {
             data = JSON.parse(data);
             setPlayerData(data);
@@ -72,5 +72,3 @@ function App() {
         </SocketContext.Provider>
     );
 }
-
-export default App;

src/components/Gameboard/Gameboard.module.css

@@ -1,82 +1,20 @@
 .winnerContainer {
     display: flex;
     flex-direction: column;
-    padding: 30px 20px;
+    padding: 40px;
-    width: 90vw;
+    width: 300px;
-    max-width: 320px;
+    height: 250px;
     background: radial-gradient(circle, rgba(0, 138, 255, 1) 5%, rgba(9, 9, 121, 1) 81%);
     color: white;
     border: 1px solid white;
     border-radius: 8px;
-    margin: 20px auto;
+    margin: 20px;
     z-index: 2;
     justify-content: center;
     text-align: center;
     cursor: default;
-    gap: 15px;
 }
-
-.winnerContainer > img {
-    max-width: 80px;
-    height: auto;
-    margin: 0 auto;
-}
-
-.winnerContainer > h1 {
-    font-size: 24px;
-    margin: 10px 0;
-    word-break: break-word;
-}
-
 .winnerContainer > button {
     align-self: center;
-    width: 100%;
+    width: 200px;
-    max-width: 180px;
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.winnerContainer > button:hover {
-    background-color: #0056b3;
-}
-
-.winnerContainer > button:active {
-    transform: scale(0.98);
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .winnerContainer {
-        padding: 25px 15px;
-        max-width: 280px;
-    }
-
-    .winnerContainer > h1 {
-        font-size: 20px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .winnerContainer {
-        width: 85vw;
-        padding: 20px 15px;
-        max-width: 100%;
-    }
-
-    .winnerContainer > h1 {
-        font-size: 18px;
-    }
-
-    .winnerContainer > button {
-        max-width: 150px;
-        font-size: 14px;
-        padding: 8px 16px;
-    }
 }

src/components/Gameboard/Map/Map.jsx

@@ -6,7 +6,6 @@ import positionMapCoords from '../positions';
 import pawnImages from '../../../constants/pawnImages';
 import canPawnMove from './canPawnMove';
 import getPositionAfterMove from './getPositionAfterMove';
-import styles from './Map.module.css';
 
 const Map = ({ pawns, nowMoving, rolledNumber }) => {
     const player = useContext(PlayerDataContext);
@@ -87,16 +86,14 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
     }, [hintPawn, pawns]);
 
     return (
-        <div className={styles.canvasContainer}>
+        <canvas
-            <canvas
+            className='canvas-container'
-                className={styles.canvas}
+            width={460}
-                width={460}
+            height={460}
-                height={460}
+            ref={canvasRef}
-                ref={canvasRef}
+            onClick={handleCanvasClick}
-                onClick={handleCanvasClick}
+            onMouseMove={handleMouseMove}
-                onMouseMove={handleMouseMove}
+        />
-            />
-        </div>
     );
 };
 export default Map;

src/components/Gameboard/Map/Map.module.css

@@ -1,4 +0,0 @@
-.canvasContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;\n    width: 100%;\n    height: 100%;\n    padding: 10px;\n    box-sizing: border-box;\n}\n\ncanvas.canvas {\n    border-radius: 15px;\n    border: 2px solid black;\n    width: 460px;\n    height: 460px;\n    max-width: 100%;\n    height: auto;\n    aspect-ratio: 1 / 1;\n    touch-action: none;\n}\n\n/* Tablet (768px - 1024px) */\n@media (max-width: 1024px) {\n    .canvasContainer {\n        padding: 8px;\n    }\n\n    canvas.canvas {\n        width: 400px;\n        max-width: 90vw;\n    }\n}\n\n/* Mobile (less than 768px) */\n@media (max-width: 767px) {\n    .canvasContainer {\n        padding: 5px;\n    }\n\n    canvas.canvas {\n        width: 90vw;\n        max-width: 460px;\n    }\n}\n\n/* Small Mobile (less than 480px) */\n@media (max-width: 479px) {\n    canvas.canvas {\n        width: 95vw;\n        max-width: 100%;\n    }\n}\n

src/components/LoginPage/AddServer/AddServer.module.css

@@ -4,91 +4,12 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    gap: 10px;
-}
-
-.formContainer > input,
-.formContainer > button {
-    width: 90%;
-    max-width: 350px;
-    padding: 8px 12px;
-    font-size: 14px;
-    border: 1px solid white;
-    border-radius: 4px;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
-}
-
-.formContainer > input::placeholder {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.formContainer > input:focus,
-.formContainer > button:focus {
-    outline: none;
-    border-color: #007bff;
-    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-}
-
-.formContainer > button {
-    background-color: #007bff;
-    cursor: pointer;
-    font-weight: 600;
-    margin-top: 5px;
-}
-
-.formContainer > button:hover {
-    background-color: #0056b3;
-}
-
-.formContainer > button:active {
-    transform: scale(0.98);
 }
 
 .privateContainer {
-    width: 90%;
+    margin-left: 10px;
-    max-width: 350px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
+    width: 100%;
-    padding: 5px 10px;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.privateContainer > label {
-    color: white;
-    font-weight: 500;
-    font-size: 14px;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .formContainer > input,
-    .formContainer > button,
-    .privateContainer {
-        max-width: 300px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .formContainer {
-        gap: 8px;
-    }
-
-    .formContainer > input,
-    .formContainer > button,
-    .privateContainer {
-        max-width: 100%;
-        font-size: 13px;
-    }
-
-    .formContainer > input,
-    .formContainer > button {
-        padding: 6px 10px;
-    }
 }

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

@@ -1,50 +1,20 @@
 .serversTableContainer {
     display: flex;
-    overflow: auto;
+    overflow: scroll;
-    max-height: 500px;
+    height: 500px;
     width: 100%;
-    -webkit-overflow-scrolling: touch;
 }
-
 .refresh {
     display: flex;
     margin-left: auto;
     justify-content: center;
     align-items: center;
-    min-width: 40px;
     width: 40px;
     height: 100%;
     border: 1px solid white;
-    padding: 0 5px;
-    cursor: pointer;
 }
-
 .refresh > img {
     width: 20px;
     height: 20px;
     cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.refresh > img:hover {
-    transform: rotate(180deg);
-}
-
-.refresh > img:active {
-    transform: rotate(180deg) scale(0.9);
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .serversTableContainer {
-        max-height: 400px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .serversTableContainer {
-        max-height: 300px;
-        width: 100%;
-    }
 }

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

@@ -3,34 +3,32 @@ import styles from './ServersTable.module.css';
 
 const ServerListTable = ({ rooms, handleJoinClick }) => {
     return (
-        <div className={styles.tableContainer}>
+        <table className={styles.rooms}>
-            <table className={styles.rooms}>
+            <thead>
-                <thead>
+                <tr>
-                    <tr>
+                    <th className={styles.firstColumn}></th>
-                        <th className={styles.firstColumn} aria-label="Private"></th>
+                    <th>Server</th>
-                        <th>Server</th>
+                    <th>#/#</th>
-                        <th>Players</th>
+                    <th>Status</th>
-                        <th>Status</th>
+                    <th className={styles.lastColumn}></th>
-                        <th className={styles.lastColumn} aria-label="Action"></th>
+                </tr>
-                    </tr>
+            </thead>
-                </thead>
+            <tbody>
-                <tbody>
+                {rooms.map((room, index) => {
-                    {rooms.map((room, index) => {
+                    return room.started ? null : (
-                        return room.started ? null : (
+                        <tr key={index}>
-                            <tr key={index}>
+                            <td>{room.private ? <img src={lock} alt='private' /> : null}</td>
-                                <td data-label="Private">{room.private ? <img src={lock} alt='private' /> : null}</td>
+                            <td className={styles.roomName}>{room.name}</td>
-                                <td className={styles.roomName} data-label="Server">{room.name}</td>
+                            <td>{`${room.players.length}/4`}</td>
-                                <td data-label="Players">{`${room.players.length}/4`}</td>
+                            <td>{room.isStarted ? 'started' : 'waiting'}</td>
-                                <td data-label="Status">{room.isStarted ? 'started' : 'waiting'}</td>
+                            <td className={styles.lastColumn}>
-                                <td className={styles.lastColumn} data-label="Action">
+                                <button onClick={() => handleJoinClick(room)}>Join</button>
-                                    <button onClick={() => handleJoinClick(room)}>Join</button>
+                            </td>
-                                </td>
+                        </tr>
-                            </tr>
+                    );
-                        );
+                })}
-                    })}
+            </tbody>
-                </tbody>
+        </table>
-            </table>
-        </div>
     );
 };
 

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

@@ -1,48 +1,3 @@
-.tableContainer {
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    border-radius: 4px;
-}
-
-.rooms {
-    border-collapse: collapse;
-    width: 100%;
-    height: fit-content;
-    background-color: #fff;
-}
-
-.rooms > thead > tr {
-    background-color: #f5f5f5;
-}
-
-.rooms > th {
-    padding: 10px 8px;
-    text-align: center;
-    height: auto;
-    font-weight: 600;
-    font-size: 13px;
-    border-bottom: 2px solid #ddd;
-    color: #333;
-}
-
-.rooms > thead > tr :nth-child(2) {
-    text-align: left;
-}
-
-.rooms > tbody > tr > td {
-    padding: 10px 8px;
-    text-align: center;
-    height: auto;
-    border-bottom: 1px solid #e9e9e9;
-    font-size: 13px;
-    color: #333;
-}
-
-.rooms > tbody > tr:hover {
-    background-color: #fafafa;
-}
-
 .roomName {
     max-width: 150px;
     overflow: hidden;
@@ -50,162 +5,39 @@
     white-space: nowrap;
     text-align: left !important;
 }
-
+.rooms > thead > tr :nth-child(2) {
+    text-align: left;
+}
 .rooms > tbody > tr > td > img {
     margin-right: 5px;
-    width: 18px;
+    width: 20px;
-    height: 18px;
+    height: 20px;
+}
+
+.rooms > th {
+    padding: 8px;
+    text-align: center;
+    height: 50px;
+}
+.rooms > tbody > tr > td {
+    padding: 4px;
+    text-align: center;
+    height: 50px;
+}
+.rooms > tbody > tr > td {
+    max-height: 50px;
+    height: 10px;
+}
+
+.rooms {
+    border-collapse: collapse;
+    width: 100%;
+    height: fit-content;
 }
 
 .lastColumn {
     width: 70px;
 }
-
 .firstColumn {
     width: 40px;
 }
-
-.rooms button {
-    padding: 6px 12px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: 600;
-    transition: background-color 0.3s ease;
-}
-
-.rooms button:hover {
-    background-color: #0056b3;
-}
-
-.rooms button:active {
-    transform: scale(0.98);
-}
-
-/* Tablet (768px - 1024px) */
-@media (max-width: 1024px) {
-    .rooms > th,
-    .rooms > tbody > tr > td {
-        padding: 8px 6px;
-        font-size: 12px;
-    }
-
-    .lastColumn {
-        width: 60px;
-    }
-
-    .roomName {
-        max-width: 120px;
-    }
-
-    .rooms button {
-        padding: 5px 10px;
-        font-size: 11px;
-    }
-}
-
-/* Mobile (less than 768px) */
-@media (max-width: 767px) {
-    .tableContainer {
-        margin: 0 -5px;
-        border-radius: 0;
-    }
-
-    .rooms {
-        display: block;
-        width: 100%;
-    }
-
-    .rooms > thead {
-        display: none;
-    }
-
-    .rooms > tbody {
-        display: block;
-        width: 100%;
-    }
-
-    .rooms > tbody > tr {
-        display: block;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        margin-bottom: 10px;
-        padding: 12px;
-        background-color: #fff;
-    }
-
-    .rooms > tbody > tr:hover {
-        background-color: #fff;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .rooms > tbody > tr > td {
-        display: grid;
-        grid-template-columns: 90px 1fr;
-        align-items: center;
-        padding: 8px 0;
-        text-align: right;
-        border-bottom: 1px solid #f0f0f0;
-        gap: 10px;
-    }
-
-    .rooms > tbody > tr > td:last-child {
-        border-bottom: none;
-        padding-top: 12px;
-        padding-bottom: 0;
-    }
-
-    .rooms > tbody > tr > td:first-child {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding-bottom: 8px;
-        grid-template-columns: none;
-    }
-
-    .rooms > tbody > tr > td:before {
-        content: attr(data-label);
-        font-weight: 600;
-        color: #666;
-        min-width: 85px;
-        text-align: left;
-        font-size: 12px;
-    }
-
-    .roomName {
-        max-width: 100%;
-        text-align: right !important;
-        white-space: normal;
-        word-break: break-word;
-    }
-
-    .roomName:before {
-        display: none;
-    }
-
-    .rooms > tbody > tr > td:first-child:before {
-        display: none;
-    }
-
-    .lastColumn {
-        width: 100%;
-        grid-column: 1 / -1;
-    }
-
-    .lastColumn button {
-        width: 100%;
-        padding: 10px 12px;
-        font-size: 13px;
-    }
-
-    .firstColumn {
-        width: auto;
-    }
-
-    .rooms > tbody > tr > td > img {
-        margin-right: 0;
-    }
-}

src/components/LoginPage/LoginPage.module.css

@@ -3,27 +3,6 @@
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
-    height: 100%;
+    height: 50%;
     width: 100%;
-    gap: 20px;
-    padding: 20px 10px;
-    overflow: auto;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        gap: 15px;
-        padding: 15px 10px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        flex-direction: column;
-        gap: 10px;
-        padding: 10px 5px;
-        align-items: center;
-    }
 }

src/components/LoginPage/NameInput/NameInput.module.css

@@ -1,90 +1,20 @@
 .container {
     display: flex;
     flex-direction: column;
-    padding: 20px 15px;
+    padding: 10px 20px 60px 20px;
-    width: 90vw;
+    width: 300px;
-    max-width: 340px;
     background: radial-gradient(circle, rgba(0, 138, 255, 1) 5%, rgba(9, 9, 121, 1) 81%);
     border: 1px solid white;
     border-radius: 8px;
-    margin: 20px auto;
+    margin: 20px;
     z-index: 2;
-    gap: 10px;
 }
-
-.container > input {
-    padding: 10px 12px;
-    margin-top: 5px;
-    font-size: 14px;
-    border: 1px solid white;
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.3);
-    color: white;
-    transition: all 0.3s ease;
-}
-
-.container > input::placeholder {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.container > input:focus {
-    outline: none;
-    border-color: #007bff;
-    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-}
-
 .container > button {
     margin-top: 5px;
-    padding: 10px 16px;
     text-align: center;
     width: 100px;
     align-self: center;
-    font-size: 14px;
-    font-weight: 600;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
 }
-
+.container > input {
-.container > button:hover {
+    margin-top: 10px;
-    background-color: #0056b3;
-}
-
-.container > button:active {
-    transform: scale(0.98);
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        max-width: 300px;
-        padding: 18px 12px;
-    }
-
-    .container > input {
-        font-size: 13px;
-    }
-
-    .container > button {
-        font-size: 13px;
-        padding: 8px 14px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        width: 85vw;
-        max-width: 100%;
-        padding: 15px 12px;
-    }
-
-    .container > button {
-        width: 90px;
-        padding: 8px 12px;
-        font-size: 12px;
-    }
 }

src/components/LoginPage/WindowLayout/WindowLayout.module.css

@@ -1,12 +1,11 @@
 .container {
+    margin: 50px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 90vw;
+    width: 500px;
-    max-width: 500px;
     color: white;
-    margin: 10px auto;
 }
 
 .title {
@@ -15,22 +14,19 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    min-height: 40px;
+    height: 40px;
     border: 1px solid white;
     border-radius: 2px;
     transform: scaleX(1.02);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding: 0 10px;
+    padding-left: 10px;
     text-align: center;
-    gap: 10px;
 }
 
 .title > h1 {
     width: 100%;
     margin: 0;
     padding: 0;
-    font-size: 20px;
-    word-break: break-word;
 }
 
 .content {
@@ -39,47 +35,12 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    padding: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 10px;
     background-color: rgba(0, 0, 0, 0.5);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     border-left: 1px solid black;
     border-right: 1px solid black;
     border-bottom: 1px solid black;
-    border-radius: 0 0 2px 2px;
-    gap: 8px;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        max-width: 450px;
-        margin: 8px auto;
-    }
-
-    .title > h1 {
-        font-size: 18px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        width: 95vw;
-        max-width: 100%;
-        margin: 5px auto;
-    }
-
-    .title {
-        min-height: 35px;
-        padding: 0 8px;
-    }
-
-    .title > h1 {
-        font-size: 16px;
-    }
-
-    .content {
-        padding: 8px;
-        gap: 6px;
-    }
 }

src/components/Navbar/Dice/Dice.module.css

@@ -1,47 +1,11 @@
 .container {
-    display: flex;
+    margin-left: 20px;
-    align-items: center;
+    margin-right: 20px;
-    justify-content: center;
-    margin: 5px 10px;
     width: 50px;
-    min-width: 50px;
     height: 50px;
-    min-height: 50px;
 }
-
 .container > img {
     width: 100%;
     height: 100%;
     cursor: pointer;
-    transition: transform 0.1s ease;
-}
-
-.container > img:hover {
-    transform: scale(1.05);
-}
-
-.container > img:active {
-    transform: scale(0.95);
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        margin: 4px 8px;
-        width: 45px;
-        min-width: 45px;
-        height: 45px;
-        min-height: 45px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        margin: 3px 6px;
-        width: 40px;
-        min-width: 40px;
-        height: 40px;
-        min-height: 40px;
-    }
 }

src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.module.css

@@ -7,17 +7,4 @@
     opacity: 0.9;
     animation: timerAnimation 15s linear infinite;
     transition-duration: 15s;
-    border-radius: 5px;
-}
-
-@keyframes timerAnimation {
-    0% {
-        box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
-    }
-    50% {
-        box-shadow: 0 0 20px rgba(255, 215, 0, 1);
-    }
-    100% {
-        box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
-    }
 }

src/components/Navbar/NameContainer/NameContainer.module.css

@@ -1,46 +1,13 @@
 .container {
     position: relative;
+    min-width: 100px;
+    min-height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 80px;
-    min-height: 50px;
-    padding: 5px 10px;
     border: 2px solid white;
     border-radius: 5px;
     color: white;
     font-weight: bold;
     text-align: center;
-    font-size: 14px;
-    transition: all 0.2s ease;
-    word-break: break-word;
-    overflow: hidden;
-}
-
-.container > p {
-    margin: 0;
-    white-space: normal;
-    max-width: 100%;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        min-width: 70px;
-        min-height: 45px;
-        font-size: 13px;
-        padding: 4px 8px;
-        border-width: 1.5px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        min-width: 60px;
-        min-height: 40px;
-        font-size: 12px;
-        padding: 3px 6px;
-        border-width: 1px;
-    }
 }

src/components/Navbar/Navbar.module.css

@@ -1,47 +1,28 @@
 .playerContainer {
     display: flex;
     align-items: center;
-    justify-content: center;
     flex-direction: row;
-    flex-wrap: wrap;
     width: 100%;
-    padding: 10px;
-    gap: 10px;
-    min-height: 70px;
 }
-
 .red {
-    order: 1;
+    margin-bottom: 50px;
+    grid-column: 1;
+    grid-row: 1;
 }
-
 .yellow {
-    order: 2;
+    margin-bottom: 50px;
-    flex-direction: row-reverse;
+    flex-flow: row-reverse;
+    grid-column: 2;
+    grid-row: 1;
 }
-
 .blue {
-    order: 3;
+    margin-top: 50px;
+    grid-column: 1;
+    grid-row: 4;
 }
-
 .green {
-    order: 4;
+    margin-top: 50px;
-    flex-direction: row-reverse;
+    flex-flow: row-reverse;
-}
+    grid-column: 2;
-
+    grid-row: 4;
-/* Tablet (768px - 1024px) */
-@media (max-width: 1024px) {
-    .playerContainer {
-        padding: 8px;
-        gap: 8px;
-        min-height: 60px;
-    }
-}
-
-/* Mobile (less than 768px) */
-@media (max-width: 767px) {
-    .playerContainer {
-        padding: 6px;
-        gap: 6px;
-        min-height: 50px;
-    }
 }

src/components/Navbar/ReadyButton/ReadyButton.module.css

@@ -2,54 +2,16 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 8px 5px;
+    margin: 10px;
     flex-direction: column;
     flex-flow: row-reverse;
-    background-color: #666;
+    background-color: grey;
-    border-radius: 8px;
+    border-radius: 10px;
     border: 2px solid white;
-    padding: 6px 10px;
-    gap: 6px;
-    transition: all 0.3s ease;
 }
-
-.container:hover {
-    background-color: #777;
-}
-
 .container > label {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100px;
     color: white;
-    font-weight: 600;
-    font-size: 13px;
-    text-align: center;
-    min-width: 80px;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
-    .container {
-        margin: 6px 4px;
-        padding: 5px 8px;
-        gap: 4px;
-    }
-
-    .container > label {
-        font-size: 12px;
-        min-width: 70px;
-    }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-    .container {
-        margin: 4px 3px;
-        padding: 4px 6px;
-        gap: 3px;
-        border-width: 1px;
-    }
-
-    .container > label {
-        font-size: 11px;
-        min-width: 60px;
-    }
 }

src/components/Overlay/Overlay.module.css

@@ -1,5 +1,5 @@
 .container {
-    position: fixed;
+    position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -8,14 +8,6 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 100;
+    z-index: 1;
     cursor: pointer;
-    padding: 20px;
-    overflow: auto;
-}
-
-@media (max-width: 767px) {
-    .container {
-        padding: 10px;
-    }
 }

src/index.css

@@ -1,9 +1,3 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 body {
     background: radial-gradient(
         circle,
@@ -13,53 +7,36 @@ body {
         rgba(9, 9, 121, 1) 81%
     );
     overflow: hidden;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-        sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
-
 #root {
     display: flex;
     justify-content: center;
     flex-direction: column;
     height: 100vh;
     width: 100vw;
-    overflow: hidden;
 }
 
 canvas {
     border-radius: 15px;
     border: 2px solid black;
-    max-width: 100%;
-    height: auto;
 }
-
 .navbar-container {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: space-around;
-    width: 100%;
 }
 
 .timer {
     background-color: darkblue;
     color: white;
     position: relative;
+    bottom: 60px;
+    left: 82px;
     border: 1px solid white;
-    padding: 4px 8px;
+    padding: 1px;
-    min-width: 40px;
+    width: 30px;
-    min-height: 24px;
+    height: 20px;
     border-radius: 5px;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
-
 .overlay {
     width: 100%;
     height: 100%;
@@ -70,16 +47,7 @@ canvas {
     animation: timerAnimation 15s linear infinite;
     transition-duration: 15s;
 }
-
+#root {
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-}
     display: flex;
     flex-direction: column;
     align-items: center;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App.js';
+import App from './App';
 
 const container = document.getElementById('root');
 const root = ReactDOM.createRoot(container);