From c775caf021c65fd895dea915ea8869788ef204d4 Mon Sep 17 00:00:00 2001
From: "U:Bodigat" <Bodigat2@gmail.com>
Date: Sun, 15 Dec 2024 22:27:48 +0100
Subject: [PATCH] 15.12.2024 | Memory anpassung

---
 games/memory/index.html | 87 ++++++++++++++++++++++++++++++++---------
 games/memory/style.css  | 87 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 156 insertions(+), 18 deletions(-)

diff --git a/games/memory/index.html b/games/memory/index.html
index 84cd631..eb37ab4 100644
--- a/games/memory/index.html
+++ b/games/memory/index.html
@@ -80,9 +80,14 @@
     </nav>
 
     <main>
-        <div id="game-board">
-            <!-- Erste Zeile -->
+        <div id="player-setup">
+            <h5>Wähle die Anzahl der Spieler:</h5>
+            <input type="number" id="player-count" min="1" max="10" value="1">
+            <button id="start-button">Start</button>
+        </div>
+        <div id="game-board" style="display: none;">
             <div class="card-row">
+                <!-- Erste Zeile -->
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
@@ -94,8 +99,8 @@
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
             </div>
-            <!-- Zweite Zeile -->
             <div class="card-row">
+                <!-- Zweite Zeile -->
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
@@ -107,8 +112,8 @@
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
             </div>
-            <!-- Dritte Zeile -->
             <div class="card-row">
+                <!-- Dritte Zeile -->
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
                 <div class="card"><span class="emoji"></span></div>
@@ -121,21 +126,42 @@
                 <div class="card"><span class="emoji"></span></div>
             </div>
         </div>
-        <div id="score">
-            <h5>Score:</h5>
-            <span>0</span>
+        <div id="scores" style="display: none;">
+            <h5>Scores:</h5>
+            <div id="player-scores"></div>
+        </div>
+        <div id="current-player" style="display: none;">
+            <h5>Aktueller Spieler:</h5>
+            <span id="current-player-name"></span>
         </div>
-        <button id="reset-button">Zurücksetzen</button>
+        <button id="reset-button" style="display: none;">Zurücksetzen</button>
         <script>
             const emojis = ['😻', '🙂', '🫡', '🤑', '🐶', '🐱', '🍎', '🍌', '🍒', '☀️', '🫂', '✨', '🗺️', '💤', '🚁']; // Weitere Emojis hinzufügen
 
             const shuffledEmojis = emojis.concat(emojis).sort(() => Math.random() - 0.5);
-
             const cards = Array.from(document.querySelectorAll('.card'));
-
             let flippedCards = [];
             let foundPairs = 0;
             let isProcessing = false;
+            let currentPlayer = 0;
+            let playerScores = [];
+            let totalPlayers = 1;
+
+            document.getElementById('start-button').addEventListener('click', () => {
+                totalPlayers = parseInt(document.getElementById('player-count').value, 10);
+                for (let i = 0; i < totalPlayers; i++) {
+                    playerScores.push(0);
+                }
+
+                document.getElementById('player-setup').style.display = 'none';
+                document.getElementById('game-board').style.display = 'block';
+                document.getElementById('scores').style.display = 'block';
+                document.getElementById('current-player').style.display = 'block';
+                document.getElementById('reset-button').style.display = 'block';
+
+                updateScores();
+                updateCurrentPlayer();
+            });
 
             cards.forEach((card, i) => {
                 card.addEventListener('click', () => {
@@ -168,15 +194,14 @@ <h5>Score:</h5>
                             if (card1.emoji === card2.emoji) {
                                 card1.element.style.visibility = 'hidden';
                                 card2.element.style.visibility = 'hidden';
-                                foundPairs++;
-                                if (foundPairs === emojis.length) {
-                                    alert('Glückwunsch! Du hast alle Paare gefunden.');
-                                }
+                                playerScores[currentPlayer]++;
                             } else {
                                 card1.element.style.transition = 'transform 0.00s ease-in-out';
                                 card1.element.style.transform = 'rotateY(0deg)';
                                 card2.element.style.transition = 'transform 0.00s ease-in-out';
                                 card2.element.style.transform = 'rotateY(0deg)';
+
+                                currentPlayer = (currentPlayer + 1) % totalPlayers; // Spieler wechseln nur, wenn sie kein Paar gefunden haben
                             }
 
                             flippedCards.forEach(card => {
@@ -187,8 +212,8 @@ <h5>Score:</h5>
                             flippedCards = [];
                             isProcessing = false;
 
-                            const scoreElement = document.getElementById('score').querySelector('span');
-                            scoreElement.textContent = foundPairs;
+                            updateScores();
+                            updateCurrentPlayer();
                         }, 2000);
                     }
                 });
@@ -206,10 +231,36 @@ <h5>Score:</h5>
                 flippedCards = [];
                 foundPairs = 0;
                 isProcessing = false;
+                currentPlayer = 0;
+                playerScores = [];
+                totalPlayers = 1;
+
+                const playerCountInput = document.getElementById('player-count');
+                playerCountInput.value = 1;
+
+                updateScores();
+                updateCurrentPlayer();
 
-                const scoreElement = document.getElementById('score').querySelector('span');
-                scoreElement.textContent = foundPairs;
+                document.getElementById('player-setup').style.display = 'block';
+                document.getElementById('game-board').style.display = 'none';
+                document.getElementById('scores').style.display = 'none';
+                document.getElementById('current-player').style.display = 'none';
+                document.getElementById('reset-button').style.display = 'none';
             });
+
+            function updateScores() {
+                const scoreElement = document.getElementById('player-scores');
+                scoreElement.innerHTML = '';
+                playerScores.forEach((score, index) => {
+                    const scoreDiv = document.createElement('div');
+                    scoreDiv.textContent = `Spieler ${index + 1}: ${score}`;
+                    scoreElement.appendChild(scoreDiv);
+                });
+            }
+
+            function updateCurrentPlayer() {
+                document.getElementById('current-player-name').textContent = `Spieler ${currentPlayer + 1}`;
+            }
         </script>
     </main>
 
diff --git a/games/memory/style.css b/games/memory/style.css
index bd50c47..6479813 100644
--- a/games/memory/style.css
+++ b/games/memory/style.css
@@ -279,4 +279,91 @@ body {
     background-color: #00ff0d;
     color: #575757;
     font-weight: 700;
+}
+
+main {
+    background-color: #11111198;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px #00000099;
+    padding: 20px;
+}
+
+h5 {
+    margin: 10px 0;
+    color: #9e9e9e;
+}
+
+#player-setup {
+    margin-bottom: 20px;
+}
+
+#player-count {
+    padding: 10px;
+    font-size: 16px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100px;
+    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+#player-count:focus {
+    border-color: #4caf50;
+    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+    outline: none;
+}
+
+#start-button,
+#reset-button {
+    background-color: #4caf50;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#start-button:hover,
+#reset-button:hover {
+    background-color: #45a049;
+}
+
+.card-row {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+
+.card {
+    background-color: #2929297e;
+    border-radius: 5px;
+    color: white;
+    font-size: 30px;
+    width: 90px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    perspective: 1000px;
+}
+
+.card.face-up {
+    background-color: #707070;
+    color: #505050;
+}
+
+#scores {
+    margin: 20px 0;
+    color: #fff;
+}
+
+#current-player {
+    color: #fff;
+    margin: 10px 0;
+    font-size: 18px;
+    font-weight: bold;
 }
\ No newline at end of file