OLD =======
### server.js

```javascript
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const fs = require('fs');
const path = require('path');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// Store rooms in memory (we'll move to JSON file later)
let rooms = {};

// Serve static files
app.use(express.static('public'));

// WebSocket connection handling
wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        const data = JSON.parse(message);
        
        switch(data.type) {
            case 'CREATE_ROOM':
                const roomId = generateRoomId();
                rooms[roomId] = {
                    id: roomId,
                    creator: data.username,
                    players: [{
                        username: data.username,
                        ws: ws
                    }],
                    isStarted: false
                };
                ws.roomId = roomId;
                ws.send(JSON.stringify({
                    type: 'ROOM_CREATED',
                    roomId: roomId
                }));
                break;

            case 'JOIN_ROOM':
                const room = rooms[data.roomId];
                if (!room) {
                    ws.send(JSON.stringify({
                        type: 'ERROR',
                        message: 'Room not found'
                    }));
                    return;
                }
                if (room.isStarted) {
                    ws.send(JSON.stringify({
                        type: 'ERROR',
                        message: 'Game already started'
                    }));
                    return;
                }
                room.players.push({
                    username: data.username,
                    ws: ws
                });
                ws.roomId = data.roomId;
                
                // Notify all players in the room
                broadcastToRoom(room, {
                    type: 'PLAYER_JOINED',
                    players: room.players.map(p => p.username)
                });
                break;

            case 'START_GAME':
                const gameRoom = rooms[ws.roomId];
                if (gameRoom && gameRoom.creator === data.username) {
                    gameRoom.isStarted = true;
                    broadcastToRoom(gameRoom, {
                        type: 'GAME_STARTED'
                    });
                }
                break;
        }
    });

    ws.on('close', () => {
        if (ws.roomId && rooms[ws.roomId]) {
            const room = rooms[ws.roomId];
            room.players = room.players.filter(p => p.ws !== ws);
            if (room.players.length === 0) {
                delete rooms[ws.roomId];
            } else {
                broadcastToRoom(room, {
                    type: 'PLAYER_LEFT',
                    players: room.players.map(p => p.username)
                });
            }
        }
    });
});

function generateRoomId() {
    return Math.random().toString(36).substring(2, 8).toUpperCase();
}

function broadcastToRoom(room, message) {
    room.players.forEach(player => {
        player.ws.send(JSON.stringify(message));
    });
}

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
```

### index.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Card Bluff & Shoot - Lobby</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .section {
            background: #333;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input, button {
            padding: 10px;
            margin: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
        #playersList {
            margin-top: 20px;
        }
        .player {
            padding: 10px;
            background: #444;
            margin: 5px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="loginSection" class="section">
            <h2>Welcome to Card Bluff & Shoot</h2>
            <input type="text" id="username" placeholder="Enter your username">
            <button onclick="setUsername()">Continue</button>
        </div>

        <div id="roomSection" class="section" style="display: none;">
            <button onclick="createRoom()">Create New Room</button>
            <div>
                <input type="text" id="roomId" placeholder="Enter Room ID">
                <button onclick="joinRoom()">Join Room</button>
            </div>
        </div>

        <div id="waitingRoom" class="section" style="display: none;">
            <h3>Room: <span id="roomDisplay"></span></h3>
            <div id="playersList"></div>
            <button id="startGameBtn" onclick="startGame()" style="display: none;">Start Game</button>
        </div>
    </div>

    <script>
        let ws;
        let username;
        let isCreator = false;

        // Connect to WebSocket server
        function connectWebSocket() {
            ws = new WebSocket('ws://localhost:3000');
            
            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                handleWebSocketMessage(data);
            };

            ws.onclose = () => {
                console.log('WebSocket connection closed');
            };
        }

        function handleWebSocketMessage(data) {
            switch(data.type) {
                case 'ROOM_CREATED':
                    document.getElementById('roomSection').style.display = 'none';
                    document.getElementById('waitingRoom').style.display = 'block';
                    document.getElementById('roomDisplay').textContent = data.roomId;
                    document.getElementById('startGameBtn').style.display = 'block';
                    isCreator = true;
                    break;

                case 'PLAYER_JOINED':
                    updatePlayersList(data.players);
                    break;

                case 'PLAYER_LEFT':
                    updatePlayersList(data.players);
                    break;

                case 'GAME_STARTED':
                    alert('Game is starting!');
                    // We'll handle game initialization later
                    break;

                case 'ERROR':
                    alert(data.message);
                    break;
            }
        }

        function setUsername() {
            username = document.getElementById('username').value.trim();
            if (username) {
                document.getElementById('loginSection').style.display = 'none';
                document.getElementById('roomSection').style.display = 'block';
                connectWebSocket();
            }
        }

        function createRoom() {
            ws.send(JSON.stringify({
                type: 'CREATE_ROOM',
                username: username
            }));
        }

        function joinRoom() {
            const roomId = document.getElementById('roomId').value.trim();
            if (roomId) {
                ws.send(JSON.stringify({
                    type: 'JOIN_ROOM',
                    roomId: roomId,
                    username: username
                }));
            }
        }

        function startGame() {
            if (isCreator) {
                ws.send(JSON.stringify({
                    type: 'START_GAME',
                    username: username
                }));
            }
        }

        function updatePlayersList(players) {
            const list = document.getElementById('playersList');
            list.innerHTML = '<h4>Players in room:</h4>';
            players.forEach(player => {
                const div = document.createElement('div');
                div.className = 'player';
                div.textContent = player;
                list.appendChild(div);
            });
        }
    </script>
</body>
</html>
```

NEW =======

### server.js

```javascript
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const fs = require('fs');
const path = require('path');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// Store rooms in memory (we'll move to JSON file later)
let rooms = {};

// Serve static files
app.use(express.static('public'));

// WebSocket connection handling
wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        const data = JSON.parse(message);
        
        switch(data.type) {
            case 'CREATE_ROOM':
                const roomId = generateRoomId();
                rooms[roomId] = {
                    id: roomId,
                    creator: data.username,
                    players: [{
                        username: data.username,
                        ws: ws
                    }],
                    isStarted: false
                };
                ws.roomId = roomId;
                ws.send(JSON.stringify({
                    type: 'ROOM_CREATED',
                    roomId: roomId
                }));
                break;

            case 'JOIN_ROOM':
                const room = rooms[data.roomId];
                if (!room) {
                    ws.send(JSON.stringify({
                        type: 'ERROR',
                        message: 'Room not found'
                    }));
                    return;
                }
                if (room.isStarted) {
                    ws.send(JSON.stringify({
                        type: 'ERROR',
                        message: 'Game already started'
                    }));
                    return;
                }
                room.players.push({
                    username: data.username,
                    ws: ws
                });
                ws.roomId = data.roomId;
                
                // Notify all players in the room
                broadcastToRoom(room, {
                    type: 'PLAYER_JOINED',
                    players: room.players.map(p => p.username)
                });
                break;

            case 'START_GAME':
                const gameRoom = rooms[ws.roomId];
                if (gameRoom && gameRoom.creator === data.username) {
                    gameRoom.isStarted = true;
                    broadcastToRoom(gameRoom, {
                        type: 'GAME_STARTED'
                    });
                }
                break;
        }
    });

    ws.on('close', () => {
        if (ws.roomId && rooms[ws.roomId]) {
            const room = rooms[ws.roomId];
            room.players = room.players.filter(p => p.ws !== ws);
            if (room.players.length === 0) {
                delete rooms[ws.roomId];
            } else {
                broadcastToRoom(room, {
                    type: 'PLAYER_LEFT',
                    players: room.players.map(p => p.username)
                });
            }
        }
    });
});

function generateRoomId() {
    return Math.random().toString(36).substring(2, 8).toUpperCase();
}

function broadcastToRoom(room, message) {
    room.players.forEach(player => {
        player.ws.send(JSON.stringify(message));
    });
}

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});
```

### index.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Card Bluff & Shoot - Lobby</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .section {
            background: #333;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input, button {
            padding: 10px;
            margin: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
        #playersList {
            margin-top: 20px;
        }
        .player {
            padding: 10px;
            background: #444;
            margin: 5px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="loginSection" class="section">
            <h2>Welcome to Card Bluff & Shoot</h2>
            <input type="text" id="username" placeholder="Enter your username">
            <button onclick="setUsername()">Continue</button>
        </div>

        <div id="roomSection" class="section" style="display: none;">
            <button onclick="createRoom()">Create New Room</button>
            <div>
                <input type="text" id="roomId" placeholder="Enter Room ID">
                <button onclick="joinRoom()">Join Room</button>
            </div>
        </div>

        <div id="waitingRoom" class="section" style="display: none;">
            <h3>Room: <span id="roomDisplay"></span></h3>
            <div id="playersList"></div>
            <button id="startGameBtn" onclick="startGame()" style="display: none;">Start Game</button>
        </div>
    </div>

    <script>
        let ws;
        let username;
        let isCreator = false;

        // Connect to WebSocket server
        function connectWebSocket() {
            ws = new WebSocket('ws://localhost:3000');
            
            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                handleWebSocketMessage(data);
            };

            ws.onclose = () => {
                console.log('WebSocket connection closed');
            };
        }

        function handleWebSocketMessage(data) {
            switch(data.type) {
                case 'ROOM_CREATED':
                    document.getElementById('roomSection').style.display = 'none';
                    document.getElementById('waitingRoom').style.display = 'block';
                    document.getElementById('roomDisplay').textContent = data.roomId;
                    document.getElementById('startGameBtn').style.display = 'block';
                    isCreator = true;
                    break;

                case 'PLAYER_JOINED':
                    updatePlayersList(data.players);
                    break;

                case 'PLAYER_LEFT':
                    updatePlayersList(data.players);
                    break;

                case 'GAME_STARTED':
                    alert('Game is starting!');
                    // We'll handle game initialization later
                    break;

                case 'ERROR':
                    alert(data.message);
                    break;
            }
        }

        function setUsername() {
            username = document.getElementById('username').value.trim();
            if (username) {
                document.getElementById('loginSection').style.display = 'none';
                document.getElementById('roomSection').style.display = 'block';
                connectWebSocket();
            }
        }

        function createRoom() {
            ws.send(JSON.stringify({
                type: 'CREATE_ROOM',
                username: username
            }));
        }

        function joinRoom() {
            const roomId = document.getElementById('roomId').value.trim();
            if (roomId) {
                ws.send(JSON.stringify({
                    type: 'JOIN_ROOM',
                    roomId: roomId,
                    username: username
                }));
            }
        }

        function startGame() {
            if (isCreator) {
                ws.send(JSON.stringify({
                    type: 'START_GAME',
                    username: username
                }));
            }
        }

        function updatePlayersList(players) {
            const list = document.getElementById('playersList');
            list.innerHTML = '<h4>Players in room:</h4>';
            players.forEach(player => {
                const div = document.createElement('div');
                div.className = 'player';
                div.textContent = player;
                list.appendChild(div);
            });
        }
    </script>
</body>
</html>
```

I'm going from the old version, to a multiplayer version. Now, I need you set up the logic that when the room's created, each player gets their hand, and is displayed the game UI correctly. Yet, don't implement the game's rules logic, limit to this. Do it well, make sure everything it's correctly, avoid any mistake or assumption, and follow what we already build on the new version.