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>

TestatVorlage/scripts/main.js

@@ -26,7 +26,10 @@ 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';
 
 function addToHistory(userHand, opponentHand, winText) {
     historyTableBody.innerHTML += `<tr><td>${winText}</td>\t<td>${userHand}</td>\t<td>${opponentHand}\n</td></tr>`;
@@ -34,16 +37,15 @@ function addToHistory(userHand, opponentHand, winText) {
 
 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';
     }
@@ -69,8 +71,14 @@ function onOptionClick() {
     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);
+    }
 
     evaluateHand(username, userHand, ({
         systemHand,
@@ -78,24 +86,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 = '';

TestatVorlage/styles/global.css

@@ -44,3 +44,19 @@ td {
 #game-table {
     margin: auto;
 }
+
+.win-color {
+    color: green;
+}
+
+.lost-draw-color {
+    color: black;
+}
+
+.hidden {
+    display: none;
+}
+
+.visible {
+    display: block;
+}