app.js

// Server-side code (Node.js with Express and Socket.IO)
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const { v4: uuidv4 } = require('uuid');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

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

// Store sessions and their game lists
const sessions = {};

io.on('connection', (socket) => {
  console.log('A user connected');

  let currentSession = null;
  let username = null;

  // Gérer l'inscription à une session
    socket.on('join-session', (data) => {
        currentSession = data.sessionId;
        username = data.username; // Récupérer le nom d'utilisateur fourni par le client
        socket.join(data.sessionId);
        console.log(`User ${username} joined session: ${data.sessionId}`);
    });

    // Gérer les messages de chat
    socket.on('chat-message', (message) => {
        if (currentSession) {
            socket.to(currentSession).emit('chat-message', {
                userId: username || socket.id, // Utiliser le nom d'utilisateur si disponible
                message,
                isSender: false,
            });

            // Émettre un message pour l'expéditeur uniquement
            socket.emit('chat-message', {
                userId: 'You', // Identifie le message comme venant de l'utilisateur
                message,
                isSender: true,
            });
        }
    });


  // Assign username
  socket.on('setUsername', (data) => {
    username = data.username;
    currentSession = data.sessionId;

    if (!sessions[currentSession]) {
      sessions[currentSession] = { creator: socket.id, users: {}, games: [] };
    }

    sessions[currentSession].users[socket.id] = { username, isCreator: socket.id === sessions[currentSession].creator };
    socket.join(currentSession);
    io.to(currentSession).emit('updateUsers', sessions[currentSession].users);
    socket.emit('updateList', sessions[currentSession].games);
  });

  // Add a game
  socket.on('addGame', (game) => {
    if (currentSession && sessions[currentSession]) {
      sessions[currentSession].games.push(game);
      io.to(currentSession).emit('updateList', sessions[currentSession].games);
    }
  });

  // Remove a game
  socket.on('removeGame', (gameIndex) => {
    if (currentSession && sessions[currentSession] && sessions[currentSession].creator === socket.id) {
      sessions[currentSession].games.splice(gameIndex, 1);
      io.to(currentSession).emit('updateList', sessions[currentSession].games);
    }
  });

  // Clear game list
  socket.on('clearGames', () => {
    if (currentSession && sessions[currentSession] && sessions[currentSession].creator === socket.id) {
      sessions[currentSession].games = [];
      io.to(currentSession).emit('updateList', sessions[currentSession].games);
    }
  });

  // Pick a random game
  socket.on('pickRandom', () => {
    if (currentSession && sessions[currentSession] && sessions[currentSession].creator === socket.id) {
      const games = sessions[currentSession].games;
      if (games.length > 0) {
        const randomGame = games[Math.floor(Math.random() * games.length)];
        io.to(currentSession).emit('randomPicked', randomGame);
      }
    }
  });

  // Handle user disconnection
  socket.on('disconnect', () => {
    if (currentSession && sessions[currentSession]) {
      delete sessions[currentSession].users[socket.id];

      if (sessions[currentSession].creator === socket.id) {
        const remainingUsers = Object.keys(sessions[currentSession].users);
        if (remainingUsers.length > 0) {
          const newCreator = remainingUsers[0];
          sessions[currentSession].creator = newCreator;
          sessions[currentSession].users[newCreator].isCreator = true;
        } else {
          delete sessions[currentSession];
        }
      }

      io.to(currentSession).emit('updateUsers', sessions[currentSession]?.users || {});
    }
  });
});

// Start the server
const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log('Server running on http://localhost:' + PORT);
});

// Client-side code (public/index.html)
const htmlContent = `
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Game Picker</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
      background-color: #212121;
      color: #333;
      overflow-x: hidden;
    }

    h1 {
      margin-top: 20px;
      font-size: 2.5rem;
      color: #4CAF50;
    }
	
	h2 {
		color: #e6e6e6;
	}

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }

    input, button {
      padding: 10px;
      margin: 10px;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
    }

    input {
      width: 250px;
      border: 1px solid #ccc;
    }

    button {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
    
    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
      opacity: 0.7;
    }

    button:hover:not(:disabled) {
      background-color: #45a049;
    }
	
	.buttonBlue {
	      background-color: #046bda;
	}
	.buttonBlue:hover:not(:disabled) {
	      background-color: #0351a6;
	}

	.buttonRed {
	      background-color: #da0704;
	}
	.buttonRed:hover:not(:disabled) {
	      background-color: #a60503;
	}
	
    #game-list {
      margin: 20px auto;
      padding: 0;
      max-width: 400px;
    }

    #game-list li {
      list-style: none;
      margin: 5px 0;
      padding: 10px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
    }

    #game-list li span {
      cursor: pointer;
      color: red;
      font-weight: bold;
    }

    #selected-game {
      margin-top: 20px;
      font-size: 1.5rem;
      font-weight: bold;
      color: #4CAF50;
      transition: all 0.3s ease;
    }

    .session {
      margin-top: 20px;
    }

    .session input {
      width: 200px;
    }

    #user-list {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 10px;
      border-radius: 5px;
      font-size: 0.9rem;
      text-align: left;
      min-width: 150px;
    }

    #user-list h3 {
      margin: 0 0 10px;
      font-size: 1rem;
      color: #fff;
    }
	
	.logo-container {
	  text-align: center;
	  margin: 20px 0;
	}

	.logo {
	  max-width: 230px;
	  height: auto;
	  border-radius: 10px;
	}
	
	.toCenter {
		text-align: center;
	}

    .shake {
      animation: shake 0.5s;
    }

    @keyframes shake {
      0%, 100% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-5px);
      }
      50% {
        transform: translateX(5px);
      }
      75% {
        transform: translateX(-5px);
      }
    }
    
    /* Fireworks Animation Styles */
    .firework-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  pointer-events: none;
	  z-index: 10001;
	}

	.firework {
	  position: absolute;
	  width: 6px;
	  height: 6px;
	  border-radius: 50%;
	  box-shadow: 0 0 10px 4px;
	  animation: explode 1.5s ease-out forwards;
	}

	.particle {
	  position: absolute;
	  width: 4px;
	  height: 4px;
	  border-radius: 50%;
	  box-shadow: 0 0 8px 3px;
	  animation: spread 1.5s ease-out forwards;
	}

	@keyframes explode {
	  0% {
		transform: translate(0, 100vh);
		opacity: 1;
	  }
	  20% {
		opacity: 1;
	  }
	  30% {
		opacity: 0.8;
	  }
	  100% {
		transform: translate(0, 30vh);
		opacity: 0;
	  }
	}

	@keyframes spread {
	  0% {
		opacity: 1;
	  }
	  40% {
		opacity: 0.8;
	  }
	  100% {
		transform: translate(var(--tx), var(--ty));
		opacity: 0;
	  }
	}
    
    .highlight-selection {
      animation: highlight 1.5s ease-in-out;
    }
    
    @keyframes highlight {
      0% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
      }
      50% {
        transform: scale(1.3);
        text-shadow: 0 0 20px #4CAF50, 0 0 40px #4CAF50;
      }
      100% {
        transform: scale(1);
        text-shadow: 0 0 10px #4CAF50;
      }
    }
    
    /* Styles pour le décompte */
    #countdown {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      font-size: 6rem;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    
    /* Styles pour la popup */
    .popup-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 10000;
      justify-content: center;
      align-items: center;
    }
    
    .popup {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      max-width: 80%;
      text-align: center;
      box-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
    }
    
    .popup h2 {
      color: #4CAF50;
      margin-top: 0;
    }
    
    .popup p {
      font-size: 1.8rem;
      margin: 20px 0;
    }
    
    .popup button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 1.2rem;
      cursor: pointer;
    }
    
    .popup button:hover {
      background-color: #45a049;
    }
	
	.share-button {
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  background-color: #4CAF50;
	  color: white;
	  border: none;
	  border-radius: 50%;
	  width: 50px;
	  height: 50px;
	  font-size: 24px;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	  z-index: 1000;
	}

	.share-button:hover {
	  background-color: #45a049;
	}

	.copy-button {
	  background-color: #046bda;
	  color: white;
	  border: none;
	  border-radius: 5px;
	  padding: 5px 10px;
	  font-size: 0.8rem;
	  cursor: pointer;
	  margin-left: 5px;
	}

	.copy-button:hover {
	  background-color: #0351a6;
	}

	.copy-success {
	  position: fixed;
	  top: 20px;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #4CAF50;
	  color: white;
	  padding: 10px 20px;
	  border-radius: 5px;
	  z-index: 2000;
	  display: none;
	  animation: fadeInOut 2s ease-in-out;
	}

	@keyframes fadeInOut {
	  0% { opacity: 0; }
	  10% { opacity: 1; }
	  90% { opacity: 1; }
	  100% { opacity: 0; }
	}
	
	.input-with-button {
	  position: relative;
	  display: inline-block;
	  width: 200px;
	}

	.input-with-button input {
	  padding-right: 40px; /* Espace pour le bouton à droite */
	  width: 100%;
	  box-sizing: border-box;
	}

	.input-with-button button {
	  position: absolute;
	  right: -10px;
	  top: 11px;
	  height: 65%;
	  width: 35px;
	  background-color: transparent;
	  border: none;
	  border-left: 0px solid #ccc;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 0;
	  padding: 0;
	  border-radius: 0 5px 5px 0;
	}

	.input-with-button button:hover {
	  background-color: #f0f0f0;
	  color: #046bda;
	}
	
	#chat-container {
		position: absolute;
		bottom: 10px;
		left: 10px;
		width: 300px;
		background: rgba(0, 0, 0, 0.6);
		color: white;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	#chat-box {
		text-align: left;
		height: 200px;
	    overflow-y: auto;
	    margin-bottom: 10px;
	    padding: 5px;
	    border: 1px solid #cccccc21;
	    border-radius: 5px;
	    background: #ffffff1c;
	    color: #e6e6e6;
	}

	#chat-input {
		flex: 1;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}
	.txt_chat_user {
		font-weight: bold;
		color: #53a6ff;
	}
	.txt_chat_user_me {
		font-weight: bold;
		color: #ffffff;
	}
  </style>
</head>
<body>
  <div class="logo-container">
    <img src="/img/logo.png" alt="Game Picker Logo" class="logo">
  </div>
  
	<!-- Notification de copie réussie -->
	<div id="copy-success" class="copy-success">Copié !</div>

	<!-- Bouton de partage -->
	<button id="share-button" class="share-button" title="Partager la session">
	  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
		<circle cx="18" cy="5" r="3"></circle>
		<circle cx="6" cy="12" r="3"></circle>
		<circle cx="18" cy="19" r="3"></circle>
		<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
		<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
	  </svg>
	</button>

	<!-- Popup de partage -->
	<div class="popup-container" id="share-popup">
	  <div class="popup">
		<h2>Partager cette session</h2>
		<p>Copiez ce lien pour inviter d'autres joueurs :</p>
		<input type="text" id="share-link" readonly style="width: 100%; margin-bottom: 15px; padding: 8px;">
		<button id="copy-share-link">Copier le lien</button>
		<button id="close-share-popup" style="margin-left: 10px;">Fermer</button>
	  </div>
	</div>
  
  
  <!--<h1>Game Picker</h1>-->
  <div class="container">
    <div class="session">
	  <input id='username' type='text' placeholder='Enter your username' />
	  <div class="input-with-button">
		<input id='session-id' type='text' placeholder='Enter session ID' />
		<button id="copy-session-id" title="Copier l'ID">📋</button>
	  </div>
	  <button class="buttonBlue" id='join-session' style='margin-left: 28px;'>Join/Create Session</button>
	</div>
    <div id='main-content' style='display: none;'>
      <input id='game-input' type='text' placeholder='Enter a game' />
      <button id='add-game'>Add Game</button>
      <button class="buttonRed" id='clear-games'>Clear List</button>
      <button id='pick-random'>Pick Random</button>

      <h2>Game List</h2>
      <ul id='game-list'></ul>

      <h2 id='selected-game'></h2>
    </div>
  </div>

	<div id="chat-container">
		<div id="chat-box"></div>
		<form id="chat-form">
			<input id="chat-input" type="text" placeholder="Type your message..." />
			<button type="submit">Send</button>
		</form>
	</div>

  <div id="user-list">
    <h3 class="toCenter">Participants</h3>
	<hr>
  </div>
  
  <!-- Élément de décompte -->
  <div id="countdown"></div>
  
  <!-- Popup pour afficher le résultat -->
  <div class="popup-container" id="result-popup">
    <div class="popup">
      <h2>Game Selected!</h2>
      <p id="popup-game"></p>
      <button id="close-popup">OK</button>
    </div>
  </div>

  <script src='/socket.io/socket.io.js'></script>
  <script>
    const socket = io();

    const usernameInput = document.getElementById('username');
    const sessionIdInput = document.getElementById('session-id');
    const joinSessionButton = document.getElementById('join-session');
    const mainContent = document.getElementById('main-content');

    const gameInput = document.getElementById('game-input');
    const addGameButton = document.getElementById('add-game');
    const clearGamesButton = document.getElementById('clear-games');
    const pickRandomButton = document.getElementById('pick-random');
    const gameList = document.getElementById('game-list');
    const selectedGame = document.getElementById('selected-game');

    const userList = document.getElementById('user-list');
    const countdown = document.getElementById('countdown');
    const resultPopup = document.getElementById('result-popup');
    const popupGame = document.getElementById('popup-game');
    const closePopupButton = document.getElementById('close-popup');
    
    //Ajouter les sons
	const beepSound = '/assets/sounds/beep.mp3';
	const finalSound = '/assets/sounds/final.mp3';	
	const fireworkExplodeSound = [
		'/assets/sounds/firework.mp3',
		'/assets/sounds/firework2.mp3',
		'/assets/sounds/firework3.mp3'
	];

    let currentSession = '';
    let isCreator = false;
    let countdownActive = false;

	// Fonction pour jouer un son spécifique
	function playSound(src, vol) {
	  const audio = new Audio(src);
	  audio.volume = vol;
	  audio.play();
	}  

    // Generate random session ID
    function generateSessionId() {
      return Math.random().toString(36).substring(2, 10);
    }

    // Shake element
    function shakeElement(element) {
      element.classList.add('shake');
      element.style.borderColor = 'red';
      setTimeout(() => {
        element.classList.remove('shake');
        element.style.borderColor = '';
      }, 500);
    }

    // Handle join session button click
    joinSessionButton.addEventListener('click', () => {
      const username = usernameInput.value.trim();
      let sessionId = sessionIdInput.value.trim();

      if (!username) {
        shakeElement(usernameInput);
        return;
      }

      if (!sessionId) {
        sessionId = generateSessionId();
        sessionIdInput.value = sessionId; // Update input field with the generated session ID
      }

      currentSession = sessionId;
	  
	  // Joindre une session (assurez-vous que sessionId est défini)
	  socket.emit('join-session', { sessionId, username });
	
      socket.emit('setUsername', { username, sessionId });
      mainContent.style.display = 'block';
      //sessionIdInput.disabled = true;
      //joinSessionButton.disabled = true;
      //usernameInput.disabled = true;
    });
	
	
	
	
	
	

	// Envoyer un message de chat
	const chatInput = document.getElementById('chat-input');
	const chatForm = document.getElementById('chat-form');

	chatForm.addEventListener('submit', (e) => {
		e.preventDefault();
		const message = chatInput.value;
		if (message) {
			socket.emit('chat-message', message);
			chatInput.value = '';
		}
	});

	// Recevoir un message de chat
	const chatBox = document.getElementById('chat-box');

	socket.on('chat-message', (data) => {
		const messageElement = document.createElement('div');
		const messageElement_User = document.createElement('span');
		if (data.isSender) {
			messageElement_User.classList.add('txt_chat_user_me');
		} else {
			messageElement_User.classList.add('txt_chat_user');
		}
		const messageElement_Msg = document.createElement('span');
		
		messageElement_User.textContent = data.userId;
		messageElement_Msg.textContent = ' : ' + data.message;
		
		messageElement.appendChild(messageElement_User);
		messageElement.appendChild(messageElement_Msg);
		
		chatBox.appendChild(messageElement);
		chatBox.scrollTop = chatBox.scrollHeight; // Faire défiler vers le bas
	});
	
	
	
	
	

    // Update game list
    socket.on('updateList', (games) => {
      gameList.innerHTML = '';
      games.forEach((game, index) => {
        const li = document.createElement('li');
        li.textContent = game;

        if (isCreator) {
          const removeButton = document.createElement('span');
          removeButton.textContent = '❌';
          removeButton.addEventListener('click', () => {
            if (!countdownActive) {
              socket.emit('removeGame', index);
            }
          });
          li.appendChild(removeButton);
        }
        
        gameList.appendChild(li);
      });
    });

    // Update user list
    socket.on('updateUsers', (users) => {
      userList.innerHTML = '<h3 class="toCenter">Participants</h3><hr>';
      isCreator = false;
      
      for (const userId in users) {
        const user = users[userId];
        const userItem = document.createElement('div');
        userItem.textContent = user.username;
        if (user.isCreator) {
          userItem.textContent += ' ★';
          if (socket.id === userId) {
            isCreator = true;
          }
        }
        userList.appendChild(userItem);
      }
      
      // Mettre à jour l'interface en fonction du rôle de l'utilisateur
      updateUserInterface();
    });
    
    // Mettre à jour l'interface en fonction du rôle de l'utilisateur
    function updateUserInterface() {
      // Activer/désactiver les contrôles en fonction du rôle
      //addGameButton.disabled = !isCreator || countdownActive;
      clearGamesButton.disabled = !isCreator || countdownActive;
      pickRandomButton.disabled = !isCreator || countdownActive;
      //gameInput.disabled = !isCreator || countdownActive;
    }
    
    // Fonction de décompte
    function startCountdown(callback) {
      countdownActive = true;
      updateUserInterface();
      
      countdown.style.display = 'flex';
      let count = 3;
      
      countdown.textContent = count;
      playSound(beepSound, 0.1);
      
      const interval = setInterval(() => {
        count--;
        countdown.textContent = count;
        
        if (count > 0) {
          playSound(beepSound, 0.1);
        } else {
          clearInterval(interval);
          playSound(finalSound, 1);
          countdown.style.display = 'none';
          countdownActive = false;
          if (callback) callback();
        }
      }, 1000);
    }

    // Create fireworks animation
    function createFireworks() {
	  const fireworkContainer = document.createElement('div');
	  fireworkContainer.className = 'firework-container';
	  fireworkContainer.style.zIndex = '10001'; // Assurez-vous que le z-index est supérieur à celui de la popup (10000)
	  document.body.appendChild(fireworkContainer);
	  
	  // Créer plusieurs feux d'artifice avec des délais différents
	  for (let i = 0; i < 12; i++) {
		setTimeout(() => {
		  launchFirework(fireworkContainer);
		}, i * 300);
	  }
	  
	  // Supprimer le conteneur après la fin des animations
	  setTimeout(() => {
		fireworkContainer.remove();
	  }, 8000);
	}

	function launchFirework(container) {
	  // Créer le feu d'artifice principal
	  const firework = document.createElement('div');
	  firework.className = 'firework';
	  
	  // Position aléatoire
	  const xPos = Math.random() * 80 + 10; // 10-90% de la largeur de l'écran
	  firework.style.left = xPos + "%";
	  
	  // Couleur aléatoire
	  const hue = Math.floor(Math.random() * 360);
	  const saturation = 90 + Math.floor(Math.random() * 10);
	  const lightness = 50 + Math.floor(Math.random() * 10);
	  
	  firework.style.backgroundColor = 'hsl('+hue+', '+saturation+'%, '+lightness+'%)';
	  firework.style.boxShadow = '0 0 10px 4px hsl('+hue+', '+saturation+'%, '+lightness+'%)';
	  
	  container.appendChild(firework);
	  
	  // Créer des particules pour l'effet d'explosion
	  setTimeout(() => {
		const x = firework.offsetLeft;
		const y = firework.offsetTop;
		
		// Créer plusieurs particules avec des formes et tailles variées
		const particleCount = 50 + Math.floor(Math.random() * 30);
		
		for (let i = 0; i < particleCount; i++) {
		  const particle = document.createElement('div');
		  particle.className = 'particle';
		  
		  // Direction aléatoire
		  const angle = Math.random() * Math.PI * 2;
		  const distance = Math.random() * 150 + 80;
		  const tx = Math.cos(angle) * distance;
		  const ty = Math.sin(angle) * distance;
		  
		  // Variation de taille pour chaque particule
		  const size = 2 + Math.random() * 4;
		  particle.style.width = size + 'px';
		  particle.style.height = size + 'px';
		  
		  particle.style.setProperty('--tx', tx + "px");
		  particle.style.setProperty('--ty', ty + "px");
		  
		  // Couleur aléatoire de la même famille de teinte
		  const particleHue = hue + Math.random() * 40 - 20;
		  const particleSat = saturation + Math.floor(Math.random() * 10);
		  const particleLit = lightness + Math.floor(Math.random() * 30);
		  
		  particle.style.backgroundColor = 'hsl('+particleHue+', '+particleSat+'%, '+particleLit+'%)';
		  particle.style.boxShadow = '0 0 8px 3px hsl('+particleHue+', '+particleSat+'%, '+particleLit+'%)';
		  
		  // Position au point d'explosion du feu d'artifice
		  particle.style.left = x + "px";
		  particle.style.top = y + "px";
		  
		  container.appendChild(particle);
		}
		
		// Supprimer le feu d'artifice principal après l'explosion
		playSound(fireworkExplodeSound[Math.floor(Math.random() * fireworkExplodeSound.length)], 0.1);
		firework.remove();
	  }, 800);
	}

    // Display random picked game with popup
    socket.on('randomPicked', (game) => {
      if (countdownActive) return;
      
      // Démarrer le décompte
      startCountdown(() => {
        // Après le décompte, afficher la popup
        popupGame.textContent = game;
        resultPopup.style.display = 'flex';
		resultPopup.classList.add('highlight-selection');
        createFireworks();
        
        // Mettre à jour le texte en-dessous aussi
        selectedGame.textContent = 'Selected Game: ' + game;
        //selectedGame.classList.add('highlight-selection');
        
        setTimeout(() => {
          //selectedGame.classList.remove('highlight-selection');
          resultPopup.classList.remove('highlight-selection');
        }, 1500);
      });
    });
    
    // Fermer la popup et réactiver les contrôles
    closePopupButton.addEventListener('click', () => {
      resultPopup.style.display = 'none';
      countdownActive = false;
      updateUserInterface();
    });

    // Add game to list
    addGameButton.addEventListener('click', () => {
      if (countdownActive) return;
      
      const game = gameInput.value.trim();
      if (game) {
        socket.emit('addGame', game);
        gameInput.value = '';
      }
    });

    // Clear game list
    clearGamesButton.addEventListener('click', () => {
      if (!isCreator || countdownActive) return;
      socket.emit('clearGames');
    });

    // Pick random game
    pickRandomButton.addEventListener('click', () => {
      if (!isCreator || countdownActive) return;
      socket.emit('pickRandom');
    });
    
    // Add key event listener for quick game addition
    gameInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter' && !countdownActive) {
        const game = gameInput.value.trim();
        if (game) {
          socket.emit('addGame', game);
          gameInput.value = '';
        }
      }
    });
	
	
	const shareButton = document.getElementById('share-button');
	const sharePopup = document.getElementById('share-popup');
	const shareLink = document.getElementById('share-link');
	const copyShareLink = document.getElementById('copy-share-link');
	const closeSharePopup = document.getElementById('close-share-popup');
	const copySessionId = document.getElementById('copy-session-id');
	const copySuccess = document.getElementById('copy-success');

	// Afficher la popup de partage
	shareButton.addEventListener('click', () => {
	  const sessionId = sessionIdInput.value.trim();
	  if (sessionId) {
		const fullUrl = window.location.origin + '?session=' + sessionId;
		shareLink.value = fullUrl;
		sharePopup.style.display = 'flex';
	  } else {
		alert("Veuillez d'abord rejoindre ou créer une session.");
	  }
	});

	// Fermer la popup de partage
	closeSharePopup.addEventListener('click', () => {
	  sharePopup.style.display = 'none';
	});

	// Copier le lien de partage
	copyShareLink.addEventListener('click', () => {
	  shareLink.select();
	  document.execCommand('copy');
	  showCopySuccess();
	});

	// Copier l'ID de session
	copySessionId.addEventListener('click', () => {
	  if (sessionIdInput.value.trim()) {
		sessionIdInput.select();
		document.execCommand('copy');
		showCopySuccess();
	  }
	});

	// Afficher la notification de copie réussie
	function showCopySuccess() {
	  copySuccess.style.display = 'block';
	  setTimeout(() => {
		copySuccess.style.display = 'none';
	  }, 2000);
	}

	// Vérifier si on arrive avec un paramètre de session dans l'URL
	window.addEventListener('load', () => {
	  const urlParams = new URLSearchParams(window.location.search);
	  const sessionParam = urlParams.get('session');
	  
	  if (sessionParam) {
		sessionIdInput.value = sessionParam;
	  }
	});
  </script>
</body>
</html>
`;

const fs = require('fs');
fs.mkdirSync('public', { recursive: true });
fs.writeFileSync('public/index.html', htmlContent);