Site :

- Add Lobby functionality

site/lobby/index.html

@@ -19,6 +19,28 @@
         </div>
     </div>
     <div class="main">
+        <div id="loginPopup" class="popup">
+            <div class="popup-content">
+                <span id="closePopupBtn" class="close"></span>
+                <h1>Select your game mode</h1>
+                <div id="choose">
+                    <div class="select-card">
+                        <p>Multiplayer local</p>
+                    </div>
+                    <div class="select-card">
+                        <p>Matchmaking</p>
+                    </div>
+                    <div class="select-card">
+                        <p>Ranked</p>
+                    </div>
+                    <div class="select-card">
+                        <p>Tournament</p>
+                    </div>
+                </div>
+                </form>
+            </div>
+        </div>
+    
         <div class="game-mode">
             <div class="mode-card">
                 <p>Multiplayer local</p>
@@ -31,6 +53,11 @@
             <div id="goal">
                 
             </div>
+            <div class="switch">
+                <input id="checkbox1" class="look" type="checkbox">
+                <label for="checkbox1"></label>
+                <p>Fix the camera on the bar</p>
+            </div>
         </div>
     </div>
 </body>

site/lobby/main.js

@@ -0,0 +1,53 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   main.js                                            :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
+/*   Updated: 2024/08/22 19:15:25 by madegryc         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+/* 
+
+    INFORMATION :
+
+    id 0 = Multiplayer local
+    id 1 = Matchmaking
+    id 2 = Ranked
+    id 3 = Tournament
+*/
+
+let gameMode = 0;
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
+        document.getElementById('loginPopup').style.display = 'flex';
+        console.log('Popup opened');
+    });
+    
+    document.getElementById('closePopupBtn').addEventListener('click', function() {
+        document.getElementById('loginPopup').style.display = 'none';
+    });
+    
+    // Fermer la popup si on clique en dehors du contenu
+    window.addEventListener('click', function(event) {
+        if (event.target == document.getElementById('loginPopup')) {
+            document.getElementById('loginPopup').style.display = 'none';
+        }
+    });
+    
+
+    const listSelectCard = document.getElementsByClassName('select-card');
+    console.log('listSelectCard', listSelectCard);
+	for(let i = 0; i < listSelectCard.length; i++) {
+        listSelectCard[i].addEventListener('click', function() {
+            console.log('Card selected:', listSelectCard[i].id);
+            document.getElementById('loginPopup').style.display = 'none';
+            document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[i].innerHTML;
+            gameMode = i;
+        });
+    }
+});

site/lobby/style.css

@@ -10,6 +10,26 @@
 /*                                                                            */
 /* ************************************************************************** */
 
+@keyframes anim1 {
+	0% {
+		transform: translate(0, -150%);
+	}
+	100% {
+		transform: translateY(0, 0);
+	}
+}
+
+@keyframes anim2 {
+	0% {
+		backdrop-filter: blur(0px);
+		background-color: rgba(0, 0, 0, 0);
+	}
+	100% {
+		backdrop-filter: blur(5px);
+		background-color: rgba(0, 0, 0, 0.8);
+	}
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -40,6 +60,103 @@ body {
     width: 40%;
 }
 
+.popup {
+    display: none; /* La popup est masquée par défaut */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popup-content {
+    background-color: white;
+    padding: 20px;
+    text-align: center;
+    width: 40%;
+    position: relative;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+}
+
+.popup-content form {
+    display: flex;
+    flex-direction: column;
+}
+
+.choose{
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+.select-card{
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background-color: #d3d3d3;
+    color: #000;
+    height: 90px;
+    font-size: 1.2em;
+    transition: transform 0.3s ease;
+}
+
+.select-card:hover {
+    transform: scale(1.05);
+}
+
+.switch {
+    position: relative;
+}
+
+.switch p{
+    color: white;
+    font-size: 1.2em;
+}
+
+.switch label {
+    width: 59px;
+    height: 28px;
+    background-color: #999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50px;
+}
+
+.switch input[type="checkbox"] {
+    visibility: hidden;
+}
+
+.switch label:after {
+    content: '';
+    margin-top: 2px;
+    margin-left: 2px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    transition: 200ms;
+    background-color: white;
+}
+
+.switch .look:checked + label:after {
+    left: 32px;
+}
+
+.switch .look:checked + label {
+    background-color: rgb(18, 223, 96);
+}
+
 #bar{
     margin: 15px;
     width: 250px;