TestatVorlage/schere-stein-papier.html

@@ -31,7 +31,7 @@
 
 <div id="game">
   <label id="username-display"></label>
-  <div id="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

@@ -21,13 +21,16 @@ const historyTableBody = document.querySelector('#history');
 const usernameDisplay = document.querySelector('#username-display');
 
 let username = '';
+
 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) {
@@ -46,6 +49,8 @@ function handleOpponentPicked(userHand, opponentHand, gameEval) {
     }
 
     addToHistory(userHand, opponentHand, winText);
+
+    options.classList.replace(optionsDisabledClass, optionsEnabledClass);
 }
 
 function showRankings(rankings) {
@@ -75,6 +80,8 @@ function onOptionClick(event) {
         opponentHandLabel.classList.replace(wonClass, notWonClass);
     }
 
+    options.classList.replace(optionsEnabledClass, optionsDisabledClass);
+
     evaluateHand(username, userHand, ({
         systemHand,
         gameEval,

TestatVorlage/styles/global.css

@@ -60,3 +60,11 @@ td {
 .visible {
     display: block;
 }
+
+.options-disabled {
+    pointer-events: none;
+}
+
+.options-enabled {
+    pointer-events: auto;
+}