TestatVorlage/scripts/game-service.js

@@ -17,9 +17,9 @@ const playerStats = {
   },
 };
 
-function getRankingsFromPlayerStats() {
+function getRankingsFromPlayerStats(stats) {
   const ranking = [];
-  const playerValues = Object.values(playerStats);
+  const playerValues = Object.values(stats);
   playerValues.sort((a, b) => b.win - a.win);
 
   for (const playerValue of playerValues) {
@@ -51,8 +51,15 @@ export function isConnected() {
 }
 
 export function getRankings(rankingsCallbackHandlerFn) {
-  const rankingsArray = getRankingsFromPlayerStats();
-  setTimeout(() => rankingsCallbackHandlerFn(rankingsArray), DELAY_MS);
+  if (isConnected()) {
+    fetch('https://stone.sifs0005.infs.ch/ranking')
+      .then((res) => res.json())
+      .then((json) => getRankingsFromPlayerStats(json))
+      .then((rankings) => rankingsCallbackHandlerFn(rankings));
+  } else {
+    const rankings = getRankingsFromPlayerStats(playerStats);
+    rankingsCallbackHandlerFn(rankings);
+  }
 }
 
 const evalLookup = {
@@ -93,21 +100,39 @@ const evalLookup = {
   },
 };
 
+const translationLookup = {
+  Rock: 'Stein',
+  Paper: 'Papier',
+  Scissors: 'Schere',
+  Well: 'Quelle',
+  Matchstick: 'Streichholz',
+};
+
+function enDeTranslation(key) {
+  return translationLookup[key];
+}
+
+function deEnTranslation(key) {
+  const reversed = {};
+  for (const k of Object.keys(translationLookup)) {
+    reversed[translationLookup[k]] = k;
+  }
+  return reversed[key];
+}
+
 function getGameEval(playerHand, systemHand) {
   return evalLookup[playerHand.toLowerCase()][systemHand.toLowerCase()];
 }
 
-export function evaluateHand(playerName, playerHand, gameRecordHandlerCallbackFn) {
-  const systemHand = HANDS[Math.floor(Math.random() * 5)];
-  const gameEval = getGameEval(playerHand, systemHand);
-
-  // eslint-disable-next-line @web-and-design/wed/use-action-map
-  if (gameEval > 0) {
-    playerStats[playerName].win += 1;
-  } else if (gameEval < 0) {
-    playerStats[playerName].lost += 1;
+function reevaluateHandsFromServer(playerHand, systemHand, gameEval) {
+  // if gameEval === false => player has lost OR draw
+  if (!gameEval) {
+    return getGameEval(playerHand, systemHand);
   }
+  return 1; // if gameEval === true => player has won
+}
 
+function evaluateGame(playerHand, systemHand, gameEval, gameRecordHandlerCallbackFn) {
   setTimeout(() => gameRecordHandlerCallbackFn({
     playerHand,
     systemHand,
@@ -115,6 +140,35 @@ export function evaluateHand(playerName, playerHand, gameRecordHandlerCallbackFn
   }), DELAY_MS);
 }
 
+function evaluateFromServer(playerHand, systemHand, gameEval, gameRecordHandlerCallbackFn) {
+  const gameEvalAsNumber = reevaluateHandsFromServer(playerHand, systemHand, gameEval);
+  evaluateGame(playerHand, systemHand, gameEvalAsNumber, gameRecordHandlerCallbackFn);
+}
+
+export function evaluateHand(playerName, playerHand, gameRecordHandlerCallbackFn) {
+  // eslint-disable-next-line @web-and-design/wed/use-action-map
+  if (isConnected()) {
+    const translatedPlayerHand = enDeTranslation(playerHand);
+    const url = `https://stone.sifs0005.infs.ch/play?playerName=${playerName}&playerHand=${translatedPlayerHand}`;
+    fetch(url)
+        .then((res) => res.json())
+        .then((json) => evaluateFromServer(playerHand, deEnTranslation(json.choice),
+            json.win, gameRecordHandlerCallbackFn));
+  } else {
+    const systemHand = HANDS[Math.floor(Math.random() * 5)];
+    const gameEval = getGameEval(playerHand, systemHand);
+
+    // eslint-disable-next-line @web-and-design/wed/use-action-map
+    if (gameEval > 0) {
+      playerStats[playerName].win += 1;
+    } else if (gameEval < 0) {
+      playerStats[playerName].lost += 1;
+    }
+
+    evaluateGame(playerHand, systemHand, gameEval, gameRecordHandlerCallbackFn);
+  }
+}
+
 export function createUserIfNotExists(username) {
   if (playerStats[username] === undefined) {
     playerStats[username] = {user: username, win: 0, lost: 0};

TestatVorlage/scripts/main.js

@@ -2,13 +2,14 @@
 README, as well as source code, can be found at https://git.420joos.dev/ost/we1/testat-rockpaperscissoirs/-/blob/dev/README.md
  */
 
-import {getRankings, evaluateHand, createUserIfNotExists} from './game-service.js';
+import {getRankings, evaluateHand, createUserIfNotExists, isConnected, setConnected} from './game-service.js';
 
 const loginScreen = document.querySelector('#login');
 const gameScreen = document.querySelector('#game');
 
 const options = document.querySelector('#options');
 
+const changeModeButton = document.querySelector('#change-online-mode');
 const loginForm = document.querySelector('#login-form');
 const usernameInput = document.querySelector('#username-input');
 const rankingTable = document.querySelector('#ranking-table');
@@ -60,7 +61,9 @@ function showRankings(rankings) {
         for (let i = 0; i < ranking.players.length - 1; i++) {
             rankingsHtml += `${ranking.players[i]}, `;
         }
-        rankingsHtml += `${ranking.players[ranking.players.length - 1]}</td></tr>`;
+        let playerName = ranking.players[ranking.players.length - 1];
+        playerName = playerName.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        rankingsHtml += `${playerName}</td></tr>`;
     }
 
     rankingTable.innerHTML = rankingsHtml;
@@ -150,9 +153,26 @@ function onMainMenuClick() {
     getRankings(showRankings);
 }
 
+function updateOnlineButton() {
+    const preText = 'Change to';
+    if (isConnected()) {
+        changeModeButton.innerText = `${preText} local`;
+    } else {
+        changeModeButton.innerText = `${preText} online`;
+    }
+}
+
+function triggerOnlineState() {
+    setConnected(!isConnected());
+    updateOnlineButton();
+    getRankings(showRankings);
+}
+
 options.addEventListener('click', (event) => onOptionClick(event));
 loginForm.addEventListener('submit', onLoginClick);
 mainMenuButton.addEventListener('click', onMainMenuClick);
+changeModeButton.addEventListener('click', triggerOnlineState);
 
 window.addEventListener('DOMContentLoaded', () => setScreenVisible(false));
 window.addEventListener('DOMContentLoaded', () => getRankings(showRankings));
+window.addEventListener('DOMContentLoaded', updateOnlineButton);