needs to be exactly like the mechanics and graphics and gameplay as wormate.io, save it as wormate.io

README.md

@@ -1,10 +1,13 @@
 ---
-title: Wormate Io Clone
-emoji: 🌖
-colorFrom: pink
-colorTo: green
+title: Wormate.io Clone  🐛
+colorFrom: green
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/game-footer.js

@@ -0,0 +1,100 @@
+class GameFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: linear-gradient(145deg, #166534, #14532d);
+                    color: white;
+                    padding: 2rem 1rem;
+                    margin-top: 3rem;
+                }
+                
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                
+                .footer-section h3 {
+                    font-size: 1.2rem;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .footer-section h3 i {
+                    margin-right: 0.5rem;
+                }
+                
+                .footer-section p {
+                    margin-bottom: 0.5rem;
+                    opacity: 0.8;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-link {
+                    color: white;
+                    transition: all 0.3s;
+                }
+                
+                .social-link:hover {
+                    transform: translateY(-3px);
+                }
+                
+                .copyright {
+                    text-align: center;
+                    margin-top: 2rem;
+                    padding-top: 1rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    opacity: 0.7;
+                }
+                
+                @media (max-width: 640px) {
+                    .footer-container {
+                        grid-template-columns: 1fr;
+                    }
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-container">
+                    <div class="footer-section">
+                        <h3><i data-feather="info"></i> About</h3>
+                        <p>Wiggly Worm Warriors is a fun game for kids of all ages. Grow your worm by eating colorful dots!</p>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3><i data-feather="help-circle"></i> Help</h3>
+                        <p>Use arrow keys to move</p>
+                        <p>Eat dots to grow longer</p>
+                        <p>Avoid walls and yourself</p>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3><i data-feather="heart"></i> Made For</h3>
+                        <p>Special edition for 8-year-old worm lovers!</p>
+                        <div class="social-links">
+                            <a href="#"><i data-feather="facebook"></i></a>
+                            <a href="#"><i data-feather="twitter"></i></a>
+                            <a href="#"><i data-feather="youtube"></i></a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="copyright">
+                    &copy; ${new Date().getFullYear()} Wiggly Worm Warriors - All rights reserved
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('game-footer', GameFooter);

components/game-nav.js

@@ -0,0 +1,96 @@
+class GameNav extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: linear-gradient(145deg, #22c55e, #16a34a);
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                }
+                
+                .nav-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem 2rem;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-weight: bold;
+                    font-size: 1.5rem;
+                    color: white;
+                    text-decoration: none;
+                }
+                
+                .logo-icon {
+                    margin-right: 0.5rem;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 600;
+                    transition: all 0.3s;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .nav-link:hover {
+                    transform: translateY(-2px);
+                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                }
+                
+                .nav-link-icon {
+                    margin-right: 0.3rem;
+                }
+                
+                @media (max-width: 640px) {
+                    .nav-container {
+                        flex-direction: column;
+                        padding: 1rem;
+                    }
+                    
+                    .nav-links {
+                        margin-top: 1rem;
+                        gap: 1rem;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="nav-container">
+                    <a href="#" class="logo">
+                        <i data-feather="wind" class="logo-icon"></i>
+                        Wiggly Worms
+                    </a>
+                    
+                    <div class="nav-links">
+                        <a href="#" class="nav-link">
+                            <i data-feather="home" class="nav-link-icon"></i>
+                            Home
+                        </a>
+                        <a href="#" class="nav-link">
+                            <i data-feather="award" class="nav-link-icon"></i>
+                            Scores
+                        </a>
+                        <a href="#" class="nav-link">
+                            <i data-feather="settings" class="nav-link-icon"></i>
+                            Settings
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('game-nav', GameNav);

components/wormate-nav.js

@@ -0,0 +1,78 @@
+class WormateNav extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: #1a1a2e;
+                    color: white;
+                    padding: 1rem;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 100;
+                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+                }
+                
+                .nav-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                
+                .logo {
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 1.2rem;
+                    color: #ff6b6b;
+                    text-decoration: none;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.8rem;
+                    transition: all 0.3s;
+                }
+                
+                .nav-link:hover {
+                    color: #ff6b6b;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-container {
+                        flex-direction: column;
+                        gap: 1rem;
+                    }
+                    
+                    .nav-links {
+                        gap: 1rem;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="nav-container">
+                    <a href="#" class="logo">WORMATE.IO</a>
+                    
+                    <div class="nav-links">
+                        <a href="#" class="nav-link">HOME</a>
+                        <a href="#" class="nav-link">PLAY</a>
+                        <a href="#" class="nav-link">SKINS</a>
+                        <a href="#" class="nav-link">LEADERBOARD</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('wormate-nav', WormateNav);

index.html

@@ -1,19 +1,30 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wormate.io Clone</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
+    <script src="components/wormate-nav.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+    </style>
+</head>
+<body>
+    <wormate-nav></wormate-nav>
+    
+    <div id="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <div id="game-ui">
+            <div id="score-display">Score: 0</div>
+            <div id="leaderboard"></div>
+            <button id="play-btn" class="wormate-btn">PLAY</button>
+        </div>
+    </div>
+
+    <script src="wormate.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,160 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Set canvas size
+    canvas.width = canvas.parentElement.clientWidth;
+    canvas.height = canvas.parentElement.clientHeight;
+    
+    // Game variables
+    const gridSize = 20;
+    const tileCount = canvas.width / gridSize;
+    let speed = 7;
+    let score = 0;
+    
+    // Worm
+    let worm = [];
+    worm[0] = {x: Math.floor(tileCount/2) * gridSize, y: Math.floor(tileCount/2) * gridSize};
+    
+    // Food
+    let food = {
+        x: Math.floor(Math.random() * tileCount) * gridSize,
+        y: Math.floor(Math.random() * tileCount) * gridSize,
+        color: getRandomColor()
+    };
+    
+    // Direction
+    let xVelocity = 0;
+    let yVelocity = 0;
+    
+    // Game loop
+    function gameLoop() {
+        // Clear canvas
+        ctx.fillStyle = '#f0fdf4';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // Move worm
+        let head = {x: worm[0].x + xVelocity, y: worm[0].y + yVelocity};
+        worm.unshift(head);
+        
+        // Check if worm eats food
+        if(head.x === food.x && head.y === food.y) {
+            score++;
+            food = {
+                x: Math.floor(Math.random() * tileCount) * gridSize,
+                y: Math.floor(Math.random() * tileCount) * gridSize,
+                color: getRandomColor()
+            };
+        } else {
+            worm.pop();
+        }
+        
+        // Draw worm
+        for(let i = 0; i < worm.length; i++) {
+            ctx.fillStyle = i === 0 ? '#22c55e' : '#4ade80';
+            ctx.beginPath();
+            ctx.arc(worm[i].x + gridSize/2, worm[i].y + gridSize/2, gridSize/2, 0, Math.PI*2);
+            ctx.fill();
+            
+            // Add eyes to head
+            if(i === 0) {
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(worm[i].x + gridSize/3, worm[i].y + gridSize/3, gridSize/8, 0, Math.PI*2);
+                ctx.arc(worm[i].x + 2*gridSize/3, worm[i].y + gridSize/3, gridSize/8, 0, Math.PI*2);
+                ctx.fill();
+                
+                ctx.fillStyle = 'black';
+                ctx.beginPath();
+                ctx.arc(worm[i].x + gridSize/3, worm[i].y + gridSize/3, gridSize/12, 0, Math.PI*2);
+                ctx.arc(worm[i].x + 2*gridSize/3, worm[i].y + gridSize/3, gridSize/12, 0, Math.PI*2);
+                ctx.fill();
+            }
+        }
+        
+        // Draw food
+        ctx.fillStyle = food.color;
+        ctx.beginPath();
+        ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2, 0, Math.PI*2);
+        ctx.fill();
+        
+        // Check collision with walls
+        if(head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
+            gameOver();
+        }
+        
+        // Check collision with self
+        for(let i = 1; i < worm.length; i++) {
+            if(head.x === worm[i].x && head.y === worm[i].y) {
+                gameOver();
+            }
+        }
+    }
+    
+    // Game controls
+    document.addEventListener('keydown', (e) => {
+        // Prevent reverse direction
+        switch(e.key) {
+            case 'ArrowUp':
+                if(yVelocity === 0) {
+                    xVelocity = 0;
+                    yVelocity = -gridSize;
+                }
+                break;
+            case 'ArrowDown':
+                if(yVelocity === 0) {
+                    xVelocity = 0;
+                    yVelocity = gridSize;
+                }
+                break;
+            case 'ArrowLeft':
+                if(xVelocity === 0) {
+                    xVelocity = -gridSize;
+                    yVelocity = 0;
+                }
+                break;
+            case 'ArrowRight':
+                if(xVelocity === 0) {
+                    xVelocity = gridSize;
+                    yVelocity = 0;
+                }
+                break;
+        }
+    });
+    
+    // Game over function
+    function gameOver() {
+        clearInterval(gameInterval);
+        
+        // Show game over screen
+        const gameOverDiv = document.createElement('div');
+        gameOverDiv.className = 'game-over';
+        gameOverDiv.innerHTML = `
+            <h2 class="text-4xl font-bold text-white mb-4">Game Over!</h2>
+            <p class="text-2xl text-white mb-6">Your score: ${score}</p>
+            <button onclick="location.reload()" class="game-button text-xl">
+                Play Again <i data-feather="refresh-cw" class="ml-2"></i>
+            </button>
+        `;
+        canvas.parentElement.appendChild(gameOverDiv);
+        feather.replace();
+    }
+    
+    // Random color generator for food
+    function getRandomColor() {
+        const colors = [
+            '#ef4444', '#f97316', '#f59e0b', '#10b981', 
+            '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899'
+        ];
+        return colors[Math.floor(Math.random() * colors.length)];
+    }
+    
+    // Start game
+    let gameInterval = setInterval(gameLoop, 1000/speed);
+    
+    // Responsive canvas
+    window.addEventListener('resize', () => {
+        canvas.width = canvas.parentElement.clientWidth;
+        canvas.height = canvas.parentElement.clientHeight;
+    });
+});

style.css

@@ -1,28 +1,93 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: 'Press Start 2P', cursive;
+    background-color: #0f0f1a;
+    color: white;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#game-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#gameCanvas {
+    display: block;
+    width: 100%;
+    height: 100%;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+#game-ui {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 1rem;
+    pointer-events: none;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#score-display {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    color: #ff6b6b;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
+
+#leaderboard {
+    background: rgba(26, 26, 46, 0.8);
+    padding: 1rem;
+    border-radius: 5px;
+    max-width: 200px;
+}
+
+#leaderboard h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.8rem;
+    color: #ff6b6b;
+}
+
+.player-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
+    font-size: 0.7rem;
+}
+
+.player-row.you {
+    color: #69f0ae;
+}
+
+.wormate-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 1rem 2rem;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 1rem;
+    background: #ff6b6b;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    pointer-events: auto;
+    transition: all 0.3s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.wormate-btn:hover {
+    background: #ff5252;
+    transform: translate(-50%, -50%) scale(1.05);
+}
+
+/* Animations */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.pulse {
+    animation: pulse 1s infinite;
+}

wormate.js

@@ -0,0 +1,242 @@
+// Wormate.io clone game logic
+const socket = io('https://wormate.io'); // Connect to wormate.io server
+
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreDisplay = document.getElementById('score-display');
+const leaderboard = document.getElementById('leaderboard');
+const playBtn = document.getElementById('play-btn');
+
+// Set canvas to full window size
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+// Game state
+let gameStarted = false;
+let playerId = null;
+let players = {};
+let foods = [];
+let powerUps = [];
+let score = 0;
+
+// Player controls
+const keys = {
+    ArrowUp: false,
+    ArrowDown: false,
+    ArrowLeft: false,
+    ArrowRight: false
+};
+
+// Handle keyboard input
+window.addEventListener('keydown', (e) => {
+    if (keys.hasOwnProperty(e.key)) {
+        keys[e.key] = true;
+        e.preventDefault();
+    }
+});
+
+window.addEventListener('keyup', (e) => {
+    if (keys.hasOwnProperty(e.key)) {
+        keys[e.key] = false;
+        e.preventDefault();
+    }
+});
+
+// Socket event handlers
+socket.on('connect', () => {
+    playerId = socket.id;
+    console.log('Connected to server with ID:', playerId);
+});
+
+socket.on('gameState', (gameState) => {
+    players = gameState.players;
+    foods = gameState.foods;
+    powerUps = gameState.powerUps;
+    
+    if (players[playerId]) {
+        score = players[playerId].score;
+        scoreDisplay.textContent = `Score: ${score}`;
+    }
+    
+    updateLeaderboard();
+    renderGame();
+});
+
+socket.on('playerDied', (data) => {
+    if (data.playerId === playerId) {
+        gameStarted = false;
+        playBtn.style.display = 'block';
+        alert(`Game Over! Your score: ${score}`);
+    }
+});
+
+// Game loop
+function gameLoop() {
+    if (gameStarted) {
+        const direction = getDirection();
+        socket.emit('playerInput', direction);
+    }
+    requestAnimationFrame(gameLoop);
+}
+gameLoop();
+
+// Helper functions
+function getDirection() {
+    if (keys.ArrowUp) return 'up';
+    if (keys.ArrowDown) return 'down';
+    if (keys.ArrowLeft) return 'left';
+    if (keys.ArrowRight) return 'right';
+    return null;
+}
+
+function updateLeaderboard() {
+    const sortedPlayers = Object.values(players).sort((a, b) => b.score - a.score);
+    leaderboard.innerHTML = '<h3>Leaderboard</h3>' + 
+        sortedPlayers.map(p => 
+            `<div class="player-row ${p.id === playerId ? 'you' : ''}">
+                <span class="player-name">${p.name}</span>
+                <span class="player-score">${p.score}</span>
+            </div>`
+        ).join('');
+}
+
+function renderGame() {
+    // Clear canvas
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw foods
+    foods.forEach(food => {
+        ctx.fillStyle = food.color;
+        ctx.beginPath();
+        ctx.arc(food.x, food.y, food.radius, 0, Math.PI * 2);
+        ctx.fill();
+    });
+    
+    // Draw power-ups
+    powerUps.forEach(powerUp => {
+        ctx.save();
+        ctx.translate(powerUp.x, powerUp.y);
+        ctx.rotate(Date.now() / 200);
+        ctx.fillStyle = powerUp.color;
+        ctx.fillRect(-powerUp.size/2, -powerUp.size/2, powerUp.size, powerUp.size);
+        ctx.restore();
+    });
+    
+    // Draw players
+    Object.values(players).forEach(player => {
+        // Draw worm segments
+        player.segments.forEach((segment, i) => {
+            const gradient = ctx.createRadialGradient(
+                segment.x, segment.y, 0,
+                segment.x, segment.y, segment.radius
+            );
+            gradient.addColorStop(0, player.color);
+            gradient.addColorStop(1, darkenColor(player.color, 0.3));
+            
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(segment.x, segment.y, segment.radius, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Draw eyes on head
+            if (i === 0) {
+                const angle = Math.atan2(
+                    player.segments[1].y - segment.y,
+                    player.segments[1].x - segment.x
+                );
+                
+                const eyeRadius = segment.radius * 0.3;
+                const eyeOffset = segment.radius * 0.6;
+                
+                // Left eye
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(
+                    segment.x + Math.cos(angle + Math.PI/2) * eyeOffset,
+                    segment.y + Math.sin(angle + Math.PI/2) * eyeOffset,
+                    eyeRadius, 0, Math.PI * 2
+                );
+                ctx.fill();
+                
+                // Right eye
+                ctx.beginPath();
+                ctx.arc(
+                    segment.x + Math.cos(angle - Math.PI/2) * eyeOffset,
+                    segment.y + Math.sin(angle - Math.PI/2) * eyeOffset,
+                    eyeRadius, 0, Math.PI * 2
+                );
+                ctx.fill();
+                
+                // Pupils
+                ctx.fillStyle = 'black';
+                ctx.beginPath();
+                ctx.arc(
+                    segment.x + Math.cos(angle + Math.PI/2) * eyeOffset + Math.cos(angle) * eyeRadius/2,
+                    segment.y + Math.sin(angle + Math.PI/2) * eyeOffset + Math.sin(angle) * eyeRadius/2,
+                    eyeRadius/2, 0, Math.PI * 2
+                );
+                ctx.fill();
+                
+                ctx.beginPath();
+                ctx.arc(
+                    segment.x + Math.cos(angle - Math.PI/2) * eyeOffset + Math.cos(angle) * eyeRadius/2,
+                    segment.y + Math.sin(angle - Math.PI/2) * eyeOffset + Math.sin(angle) * eyeRadius/2,
+                    eyeRadius/2, 0, Math.PI * 2
+                );
+                ctx.fill();
+            }
+        });
+        
+        // Draw player name
+        if (player.segments.length > 0) {
+            const head = player.segments[0];
+            ctx.fillStyle = 'white';
+            ctx.font = '12px "Press Start 2P", cursive';
+            ctx.textAlign = 'center';
+            ctx.fillText(player.name, head.x, head.y - head.radius - 10);
+        }
+    });
+}
+
+function darkenColor(color, amount) {
+    // Convert hex to RGB
+    let r = parseInt(color.substr(1, 2), 16);
+    let g = parseInt(color.substr(3, 2), 16);
+    let b = parseInt(color.substr(5, 2), 16);
+    
+    // Darken each component
+    r = Math.max(0, Math.floor(r * (1 - amount)));
+    g = Math.max(0, Math.floor(g * (1 - amount)));
+    b = Math.max(0, Math.floor(b * (1 - amount)));
+    
+    // Convert back to hex
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+// Start game
+playBtn.addEventListener('click', () => {
+    const playerName = prompt('Enter your name:', 'Player' + Math.floor(Math.random() * 1000));
+    if (playerName) {
+        socket.emit('joinGame', {
+            name: playerName,
+            color: getRandomColor()
+        });
+        gameStarted = true;
+        playBtn.style.display = 'none';
+    }
+});
+
+function getRandomColor() {
+    const colors = [
+        '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', 
+        '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
+        '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41',
+        '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+}