TestatVorlage/schere-stein-papier.html

@@ -11,7 +11,7 @@
 
 <div id="login">
   <form id="login-form">
-    <label for="username">Username:</label>
+    <label for="username-input">Username:</label>
     <input id="username-input" placeholder="Please enter an username">
     <button type="submit">Let's Go!</button>
   </form>
@@ -31,7 +31,7 @@
 
 <div id="game">
   <label id="username-display"></label>
-  <div class="options">
+  <div id="options" class="options-enabled">
     <button class="option" id="rock">Rock</button>
     <button class="option" id="paper">Paper</button>
     <button class="option" id="scissors">Scissors</button>

TestatVorlage/scripts/main.js

@@ -7,12 +7,7 @@ import {getRankings, evaluateHand, createUserIfNotExists} from './game-service.j
 const loginScreen = document.querySelector('#login');
 const gameScreen = document.querySelector('#game');
 
-const rockButton = document.querySelector('#rock');
-const paperButton = document.querySelector('#paper');
-const scissorsButton = document.querySelector('#scissors');
-const wellButton = document.querySelector('#well');
-const matchstickButton = document.querySelector('#matchstick');
-const optionsButtons = [rockButton, paperButton, scissorsButton, wellButton, matchstickButton];
+const options = document.querySelector('#options');
 
 const loginForm = document.querySelector('#login-form');
 const usernameInput = document.querySelector('#username-input');
@@ -26,29 +21,36 @@ const historyTableBody = document.querySelector('#history');
 const usernameDisplay = document.querySelector('#username-display');
 
 let username = '';
-const notWonColor = 'black';
+
+const notWonClass = 'lost-draw-color';
+const wonClass = 'win-color';
+const visibleClass = 'visible';
+const hiddenClass = 'hidden';
+const optionsDisabledClass = 'options-disabled';
+const optionsEnabledClass = 'options-enabled';
 
 function addToHistory(userHand, opponentHand, winText) {
-    historyTableBody.innerHTML += `<tr><td>${winText}</td>\t<td>${userHand}</td>\t<td>${opponentHand}\n</td></tr>`;
+    historyTableBody.innerHTML = `<tr><td>${winText}</td>\t<td>${userHand}</td>\t<td>${opponentHand}\n</td></tr>${historyTableBody.innerHTML}`;
 }
 
 function handleOpponentPicked(userHand, opponentHand, gameEval) {
     opponentHandLabel.innerText = opponentHand;
-    const winColor = 'green';
 
     let winText;
     // eslint-disable-next-line @web-and-design/wed/use-action-map
     if (gameEval < 0) {
         winText = 'Lost';
-        opponentHandLabel.style.borderColor = winColor;
+        opponentHandLabel.classList.replace(notWonClass, wonClass);
     } else if (gameEval > 0) {
         winText = 'Won';
-        playerHandLabel.style.borderColor = winColor;
+        playerHandLabel.classList.replace(notWonClass, wonClass);
     } else {
         winText = 'Draw';
     }
 
     addToHistory(userHand, opponentHand, winText);
+
+    options.classList.replace(optionsDisabledClass, optionsEnabledClass);
 }
 
 function showRankings(rankings) {
@@ -64,13 +66,21 @@ function showRankings(rankings) {
     rankingTable.innerHTML = rankingsHtml;
 }
 
-function onOptionClick() {
-    const userHand = this.innerText;
+function onOptionClick(event) {
+    const userHand = event.target.innerText;
     playerHandLabel.innerText = userHand;
     opponentHandLabel.innerText = '\n';
 
-    playerHandLabel.style.borderColor = notWonColor;
-    opponentHandLabel.style.borderColor = notWonColor;
+    // eslint-disable-next-line @web-and-design/wed/use-action-map
+    if (playerHandLabel.classList.contains(wonClass)) {
+        playerHandLabel.classList.replace(wonClass, notWonClass);
+    }
+
+    if (opponentHandLabel.classList.contains(wonClass)) {
+        opponentHandLabel.classList.replace(wonClass, notWonClass);
+    }
+
+    options.classList.replace(optionsEnabledClass, optionsDisabledClass);
 
     evaluateHand(username, userHand, ({
         systemHand,
@@ -78,24 +88,40 @@ function onOptionClick() {
     }) => handleOpponentPicked(userHand, systemHand, gameEval));
 }
 
+// used to switch between login screen and game screen
 function setScreenVisible(enablePlayScreen) {
-    const hidden = 'none';
-    const visible = 'block';
-
     if (enablePlayScreen) {
-        loginScreen.style.display = hidden;
-        gameScreen.style.display = visible;
+        // eslint-disable-next-line @web-and-design/wed/use-action-map
+        if (loginScreen.classList.contains(visibleClass)) {
+            loginScreen.classList.remove(visibleClass);
+        }
+
+        if (gameScreen.classList.contains(hiddenClass)) {
+            gameScreen.classList.remove(hiddenClass);
+        }
+
+        loginScreen.classList.add(hiddenClass);
+        gameScreen.classList.add(visibleClass);
     } else {
-        gameScreen.style.display = hidden;
-        loginScreen.style.display = visible;
+        // eslint-disable-next-line @web-and-design/wed/use-action-map
+        if (loginScreen.classList.contains(hiddenClass)) {
+            loginScreen.classList.remove(hiddenClass);
+        }
+
+        if (gameScreen.classList.contains(visibleClass)) {
+            gameScreen.classList.remove(visibleClass);
+        }
+
+        loginScreen.classList.add(visibleClass);
+        gameScreen.classList.add(hiddenClass);
     }
 }
 
 function resetGameScreen() {
     historyTableBody.innerText = '';
 
-    playerHandLabel.style.borderColor = notWonColor;
-    opponentHandLabel.style.borderColor = notWonColor;
+    playerHandLabel.classList.add(notWonClass);
+    opponentHandLabel.classList.add(notWonClass);
 
     playerHandLabel.innerText = '';
     opponentHandLabel.innerText = '';
@@ -124,7 +150,7 @@ function onMainMenuClick() {
     getRankings(showRankings);
 }
 
-optionsButtons.forEach((button) => button.addEventListener('click', onOptionClick));
+options.addEventListener('click', (event) => onOptionClick(event));
 loginForm.addEventListener('submit', onLoginClick);
 mainMenuButton.addEventListener('click', onMainMenuClick);
 

TestatVorlage/styles/global.css

-.options {
+#options {
     display: flex;
     width: 50vw;
     justify-content: space-evenly;
@@ -44,3 +44,27 @@ td {
 #game-table {
     margin: auto;
 }
+
+.win-color {
+    border-color: green;
+}
+
+.lost-draw-color {
+    border-color: black;
+}
+
+.hidden {
+    display: none;
+}
+
+.visible {
+    display: block;
+}
+
+.options-disabled {
+    pointer-events: none;
+}
+
+.options-enabled {
+    pointer-events: auto;
+}