Compare commits
No commits in common. "task/responsive-ui" and "main" have entirely different histories.
task/respo
...
main
2
.env
2
.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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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"
|
||||
3
backend/.env.example
Normal file
3
backend/.env.example
Normal file
@ -0,0 +1,3 @@
|
||||
PORT=8080
|
||||
CONNECTION_URI=your_mongodb_connection_uri
|
||||
NODE_ENV="development"
|
||||
@ -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, {
|
||||
useNewUrlParser: true,
|
||||
useUnifiedTopology: true,
|
||||
directConnection: true,
|
||||
});
|
||||
await mongoose.connect(process.env.CONNECTION_URI);
|
||||
console.log('✅ MongoDB connected');
|
||||
} catch (err) {
|
||||
console.error('❌ MongoDB connection error:', err);
|
||||
|
||||
@ -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);
|
||||
|
||||
// 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,
|
||||
const store = new MongoDBStore({
|
||||
uri: process.env.CONNECTION_URI,
|
||||
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,
|
||||
|
||||
@ -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());
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
@ -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();
|
||||
1
package-lock.json
generated
1
package-lock.json
generated
@ -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"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,82 +1,20 @@
|
||||
.winnerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30px 20px;
|
||||
width: 90vw;
|
||||
max-width: 320px;
|
||||
padding: 40px;
|
||||
width: 300px;
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@ -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
|
||||
className={styles.canvas}
|
||||
className='canvas-container'
|
||||
width={460}
|
||||
height={460}
|
||||
ref={canvasRef}
|
||||
onClick={handleCanvasClick}
|
||||
onMouseMove={handleMouseMove}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Map;
|
||||
|
||||
@ -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
|
||||
@ -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%;
|
||||
max-width: 350px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,50 +1,20 @@
|
||||
.serversTableContainer {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
overflow: scroll;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,26 +3,25 @@ import styles from './ServersTable.module.css';
|
||||
|
||||
const ServerListTable = ({ rooms, handleJoinClick }) => {
|
||||
return (
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.rooms}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={styles.firstColumn} aria-label="Private"></th>
|
||||
<th className={styles.firstColumn}></th>
|
||||
<th>Server</th>
|
||||
<th>Players</th>
|
||||
<th>#/#</th>
|
||||
<th>Status</th>
|
||||
<th className={styles.lastColumn} aria-label="Action"></th>
|
||||
<th className={styles.lastColumn}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rooms.map((room, index) => {
|
||||
return room.started ? null : (
|
||||
<tr key={index}>
|
||||
<td data-label="Private">{room.private ? <img src={lock} alt='private' /> : null}</td>
|
||||
<td className={styles.roomName} data-label="Server">{room.name}</td>
|
||||
<td data-label="Players">{`${room.players.length}/4`}</td>
|
||||
<td data-label="Status">{room.isStarted ? 'started' : 'waiting'}</td>
|
||||
<td className={styles.lastColumn} data-label="Action">
|
||||
<td>{room.private ? <img src={lock} alt='private' /> : null}</td>
|
||||
<td className={styles.roomName}>{room.name}</td>
|
||||
<td>{`${room.players.length}/4`}</td>
|
||||
<td>{room.isStarted ? 'started' : 'waiting'}</td>
|
||||
<td className={styles.lastColumn}>
|
||||
<button onClick={() => handleJoinClick(room)}>Join</button>
|
||||
</td>
|
||||
</tr>
|
||||
@ -30,7 +29,6 @@ const ServerListTable = ({ rooms, handleJoinClick }) => {
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,90 +1,20 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 15px;
|
||||
width: 90vw;
|
||||
max-width: 340px;
|
||||
padding: 10px 20px 60px 20px;
|
||||
width: 300px;
|
||||
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 > button:hover {
|
||||
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;
|
||||
}
|
||||
.container > input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
.container {
|
||||
margin: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90vw;
|
||||
max-width: 500px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,47 +1,11 @@
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
flex-direction: row-reverse;
|
||||
margin-bottom: 50px;
|
||||
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;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
margin-top: 50px;
|
||||
flex-flow: row-reverse;
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
border-radius: 8px;
|
||||
background-color: grey;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
min-width: 40px;
|
||||
min-height: 24px;
|
||||
padding: 1px;
|
||||
width: 30px;
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user