From f90195239415a783ed905c8f78acf30c9b75526d Mon Sep 17 00:00:00 2001 From: Whykioh Date: Mon, 30 Mar 2026 20:41:02 +0200 Subject: [PATCH] add game lists --- yahtzee/css/index.css | 63 +++++++++++++++++++++++++++++++++++++++++++ yahtzee/js/index.js | 42 +++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+) diff --git a/yahtzee/css/index.css b/yahtzee/css/index.css index 98eb48f..ca0cd4f 100644 --- a/yahtzee/css/index.css +++ b/yahtzee/css/index.css @@ -136,4 +136,67 @@ body { @media (max-width: 600px) { .yahtzee-table { border-radius: 40px; padding: 20px; } .neon-dice { font-size: 2.2rem; } +} + +/* Style des lignes de parties */ +.game-item-row { + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(26, 42, 108, 0.4); /* Bleu nuit transparent */ + border: 1px solid rgba(212, 175, 55, 0.3); /* Bordure dorée subtile */ + margin-bottom: 15px; + padding: 15px 25px; + border-radius: 15px; + transition: all 0.3s ease; +} + +.game-item-row:hover { + background: rgba(26, 42, 108, 0.7); + transform: translateX(5px); + border-color: var(--gold, #d4af37); + box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); +} + +.game-info { + display: flex; + flex-direction: column; + text-align: left; +} + +.game-name { + font-size: 1.2rem; + font-weight: bold; + color: #fff; + text-transform: uppercase; +} + +.game-players-count { + font-size: 0.9rem; + color: var(--gold, #d4af37); +} + +/* Bouton rejoindre */ +.btn-join { + background: transparent; + border: 2px solid #ff3131; /* Rouge néon */ + color: #ff3131; + padding: 8px 20px; + border-radius: 20px; + cursor: pointer; + font-weight: bold; + text-transform: uppercase; + transition: all 0.3s; +} + +.btn-join:hover { + background: #ff3131; + color: #fff; + box-shadow: 0 0 15px rgba(255, 49, 49, 0.6); +} + +.placeholder-text { + font-style: italic; + opacity: 0.5; + padding: 20px; } \ No newline at end of file diff --git a/yahtzee/js/index.js b/yahtzee/js/index.js index e69de29..1f1809e 100644 --- a/yahtzee/js/index.js +++ b/yahtzee/js/index.js @@ -0,0 +1,42 @@ +async function SqlRequest(action, params = {}) { + try { + const response = await fetch('RequestsHandler.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: action, params: params }) + }); + return await response.json(); + } catch (erreur) { + console.error("Erreur de communication :", erreur); + } +} + +document.addEventListener('DOMContentLoaded', async () => { + const gamesListContainer = document.getElementById('games_list'); + + // On récupère les parties via le handler + const result = await SqlRequest('get_all_games'); + + if (result && result.success && result.games.length > 0) { + // On vide le placeholder + gamesListContainer.innerHTML = ''; + + result.games.forEach(game => { + const gameElement = document.createElement('div'); + gameElement.className = 'game-item-row'; + + gameElement.innerHTML = ` +
+ ${game.game_name} + ${game.nb_players} Joueurs +
+ + `; + gamesListContainer.appendChild(gameElement); + }); + } else { + gamesListContainer.innerHTML = '

Aucune table ouverte pour le moment...

'; + } +}); \ No newline at end of file