diff --git a/site/interface/site/node_modules/.vite/deps/_metadata.json b/site/interface/site/node_modules/.vite/deps/_metadata.json index 90294ee..af62033 100644 --- a/site/interface/site/node_modules/.vite/deps/_metadata.json +++ b/site/interface/site/node_modules/.vite/deps/_metadata.json @@ -1,19 +1,19 @@ { - "hash": "ea0e6e05", - "configHash": "d101c033", + "hash": "c14d87d3", + "configHash": "5e1f4c84", "lockfileHash": "7685a2f8", - "browserHash": "108e50fa", + "browserHash": "80c73e8e", "optimized": { "three": { "src": "../../three/build/three.module.js", "file": "three.js", - "fileHash": "53e4e226", + "fileHash": "7ba8d136", "needsInterop": false }, "three/addons/loaders/GLTFLoader.js": { "src": "../../three/examples/jsm/loaders/GLTFLoader.js", "file": "three_addons_loaders_GLTFLoader__js.js", - "fileHash": "6c89dd42", + "fileHash": "38fc56e7", "needsInterop": false } }, diff --git a/site/interface/site/style/ball3D2.png b/site/interface/site/style/ball3D2.png index 1f46f40..6ec3445 100644 Binary files a/site/interface/site/style/ball3D2.png and b/site/interface/site/style/ball3D2.png differ diff --git a/site/interface/site/style/ball3D3.png b/site/interface/site/style/ball3D3.png index f9baa7e..f36b571 100644 Binary files a/site/interface/site/style/ball3D3.png and b/site/interface/site/style/ball3D3.png differ diff --git a/site/lobby/index.html b/site/lobby/index.html index 0634e20..163bcf9 100644 --- a/site/lobby/index.html +++ b/site/lobby/index.html @@ -19,6 +19,28 @@
+ +

Multiplayer local

@@ -31,6 +53,11 @@
+
+ + +

Fix the camera on the bar

+
\ No newline at end of file diff --git a/site/lobby/main.js b/site/lobby/main.js new file mode 100644 index 0000000..07e4a00 --- /dev/null +++ b/site/lobby/main.js @@ -0,0 +1,53 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* main.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: madegryc +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* 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; + }); + } +}); diff --git a/site/lobby/style.css b/site/lobby/style.css index a8659fb..a3bd30a 100644 --- a/site/lobby/style.css +++ b/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;