Added docs folder

alexandrawaas · Feb 23, 2024 · f653004 · f653004
1 parent c017183
commit f653004
Show file tree

Hide file tree

Showing 13 changed files with 553 additions and 0 deletions.
diff --git a/docs/game/game.html b/docs/game/game.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>TicTacYo!</title>
+  <link rel="stylesheet" type="text/css" href="../../css/style.css">
+  <script src="./gameController.js" type="module" defer></script>
+  <script src="./gameViewController.js" type="module" defer></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div id="headline" class="grid-item">
+    <h2>Welcome to</h2>
+    <h1>TicTacYo!</h1>
+  </div>
+  <div id="scoreboard" class="grid-item">
+    <label id="labelPlayer1" class="pink">Player 1:</label><label id="scorePlayer1" class="score">0</label>
+    <label id="labelPlayer2" class="blue">Player 2:</label><label id="scorePlayer2" class="score">0</label>
+  </div>
+  <div class="grid-item" id="table-container">
+      <div class="table">
+        <div class="row" id="row1">
+          <div class="cell" id="cell1"></div>
+          <div class="cell" id="cell2"></div>
+          <div class="cell" id="cell3"></div>
+        </div>
+        <div class="row" id="row2">
+          <div class="cell" id="cell4"></div>
+          <div class="cell" id="cell5"></div>
+          <div class="cell" id="cell6"></div>
+        </div>
+        <div class="row" id="row3">
+          <div class="cell" id="cell7"></div>
+          <div class="cell" id="cell8"></div>
+          <div class="cell" id="cell9"></div>
+        </div>
+      </div>
+    </div>
+  <footer class="grid-item"></footer>
+</body>
+</html>
diff --git a/docs/game/gameController.js b/docs/game/gameController.js
@@ -0,0 +1,62 @@
+import * as viewController from "./gameViewController.js";
+let currentRound = 1;
+let currentPlayerIndex = 0;
+let url = new URL(document.URL);
+let rounds = (url.searchParams.get("rounds") == null) ? 1 : Number(url.searchParams.get("rounds"));
+let scores = [0, 0];
+let fieldValues = new Array(9);
+function test(o) { }
+test({ age: 2 });
+function nextRoundButtonListener() {
+    currentRound++;
+    viewController.resetGameField();
+    fieldValues = new Array(9);
+    currentPlayerIndex = 0;
+}
+viewController.setFieldClickListener((index) => {
+    fieldValues[index] = currentPlayerIndex;
+    checkForWin();
+    currentPlayerIndex == 0 ? currentPlayerIndex++ : currentPlayerIndex = 0;
+});
+function checkForWin() {
+    if (checkForRoundWin() || checkForTie()) {
+        if (checkForRoundWin()) {
+            scores[currentPlayerIndex]++;
+            viewController.onRoundWon(currentPlayerIndex, scores);
+        }
+        else if (checkForTie()) {
+            viewController.onRoundTie();
+        }
+        if (currentRound < rounds) {
+            viewController.addNextRoundButton();
+            document.getElementById("nextRoundButton").addEventListener("click", nextRoundButtonListener);
+        }
+        else {
+            setTimeout(function () { viewController.showWinner(scores); }, 3000);
+        }
+    }
+}
+function checkForTie() {
+    let isAllFilled = true;
+    for (let index = 0; index < fieldValues.length; index++) {
+        if (fieldValues[index] === undefined)
+            isAllFilled = false;
+    }
+    return isAllFilled;
+}
+function checkForRoundWin() {
+    for (let index = 0; index < fieldValues.length; index += 3) {
+        if (fieldValues[index] != undefined && fieldValues[index] == fieldValues[index + 1] && fieldValues[index] == fieldValues[index + 2]) {
+            return true;
+        }
+    }
+    for (let index = 0; index < 3; index++) {
+        if (fieldValues[index] != undefined && fieldValues[index] == fieldValues[index + 3] && fieldValues[index] == fieldValues[index + 6]) {
+            return true;
+        }
+    }
+    if (fieldValues[0] != undefined && fieldValues[0] == fieldValues[4] && fieldValues[0] == fieldValues[8]) {
+        return true;
+    }
+    return fieldValues[2] != undefined && fieldValues[2] == fieldValues[4] && fieldValues[2] == fieldValues[6];
+}
diff --git a/docs/game/gameController.ts b/docs/game/gameController.ts
@@ -0,0 +1,81 @@
+import * as viewController from "./gameViewController.js"
+
+let currentRound: number = 1;
+let currentPlayerIndex: number = 0;
+let url = new URL(document.URL);
+let rounds: number = (url.searchParams.get("rounds")==null)? 1 : Number(url.searchParams.get("rounds"))!;
+let scores: [number, number] = [0,0];
+let fieldValues:Array<number> = new Array<number>(9);
+
+function test<T extends object>(o:T){}
+test<{age:number}>({age: 2})
+
+function nextRoundButtonListener() {
+    currentRound++;
+    viewController.resetGameField();
+    fieldValues = new Array<number>(9);
+    currentPlayerIndex = 0;
+}
+
+viewController.setFieldClickListener((index: number) =>
+    {
+        fieldValues[index] = currentPlayerIndex;
+        checkForWin();
+        currentPlayerIndex == 0? currentPlayerIndex++ : currentPlayerIndex = 0;
+    });
+
+function checkForWin() {
+    if (checkForRoundWin() || checkForTie()) {
+
+            if(checkForRoundWin())
+            {
+                scores[currentPlayerIndex]++;
+                viewController.onRoundWon(currentPlayerIndex, scores);
+            }
+            else if (checkForTie())
+            {
+                viewController.onRoundTie();
+            }
+        if (currentRound < rounds)
+        {
+            viewController.addNextRoundButton();
+            document.getElementById("nextRoundButton")!.addEventListener("click", nextRoundButtonListener);
+        }
+        else {
+            setTimeout(function () {viewController.showWinner(scores);}, 3000)
+        }
+    }
+}
+
+function checkForTie()
+{
+    let isAllFilled:boolean=true;
+    for(let index = 0; index < fieldValues.length; index++)
+    {
+        if(fieldValues[index] === undefined) isAllFilled = false;
+    }
+    return isAllFilled;
+}
+
+function checkForRoundWin() {
+    for (let index = 0; index < fieldValues.length; index += 3) {
+        if (fieldValues[index] != undefined && fieldValues[index] == fieldValues[index+1] && fieldValues[index] == fieldValues[index+2]) {
+            return true;
+        }
+    }
+    for (let index = 0; index < 3; index++) {
+        if (fieldValues[index] != undefined && fieldValues[index] == fieldValues[index+3] && fieldValues[index] == fieldValues[index+6]) {
+            return true;
+        }
+    }
+
+    if (fieldValues[0] != undefined && fieldValues[0] == fieldValues[4] && fieldValues[0] == fieldValues[8]) {
+        return true;
+    }
+
+    return fieldValues[2] != undefined && fieldValues[2] == fieldValues[4] && fieldValues[2] == fieldValues[6];
+}
+
+
+
+
diff --git a/docs/game/gameViewController.js b/docs/game/gameViewController.js
@@ -0,0 +1,91 @@
+let url = new URL(document.URL);
+let fieldClickListener;
+let playerNames = [((url.searchParams.get("namePlayer1") == null) ? "Player 1" : url.searchParams.get("namePlayer1")),
+    ((url.searchParams.get("namePlayer2") == null) ? "Player 1" : url.searchParams.get("namePlayer2"))];
+let fields = document.getElementsByClassName("cell");
+let footer = document.getElementsByTagName("footer").item(0);
+let scoreFields = [document.getElementById("scorePlayer1"),
+    document.getElementById("scorePlayer2")];
+let tableContainer = document.getElementById("table-container");
+let labelPlayer1 = document.getElementById("labelPlayer1");
+let labelPlayer2 = document.getElementById("labelPlayer2");
+labelPlayer1.textContent = playerNames[0] + ":";
+labelPlayer2.textContent = playerNames[1] + ":";
+let currentSymbol = "X";
+addFieldListeners();
+function resetFields() {
+    for (let index = 0; index < fields.length; index++) {
+        fields.item(index).textContent = "";
+        fields.item(index).classList.remove("blue", "pink", "pinkFlicker", "blueFlicker");
+    }
+}
+export function onRoundWon(playerIndex, scores) {
+    scoreFields[playerIndex].textContent = String(scores[playerIndex]);
+    removeFieldListeners();
+    footer.textContent = playerNames[playerIndex] + " has won this round.";
+    currentSymbol = "X";
+}
+export function onRoundTie() {
+    footer.textContent = "Tie! Nobody wins this round.";
+    removeFieldListeners();
+    currentSymbol = "X";
+}
+export function addNextRoundButton() {
+    footer.innerHTML += `<button id="nextRoundButton">next Round</button>`;
+}
+export function resetGameField() {
+    resetFooter();
+    resetFields();
+    addFieldListeners();
+}
+export function setFieldClickListener(callback) {
+    fieldClickListener = callback;
+}
+export function addFieldListeners() {
+    for (let index = 0; index < fields.length; index++) {
+        fields.item(index).addEventListener("click", fieldListener);
+    }
+}
+function removeFieldListeners() {
+    for (let index = 0; index < fields.length; index++) {
+        fields.item(index).removeEventListener("click", fieldListener);
+    }
+}
+function fieldListener() {
+    if (this.textContent === "") {
+        this.textContent = currentSymbol;
+        (currentSymbol === "X") ? this.classList.add("pink", "pinkFlicker") : this.classList.add("blue", "blueFlicker");
+        this.removeEventListener("click", fieldListener);
+    }
+    (currentSymbol === "X") ? currentSymbol = "O" : currentSymbol = "X";
+    if (fieldClickListener) {
+        fieldClickListener((Number(this.id.substring(4)) - 1));
+    }
+}
+function resetFooter() {
+    footer.innerHTML = "";
+}
+export function showWinner(scores) {
+    if (scores[0] > scores[1]) {
+        footer.textContent = playerNames[0] + " has won the game!";
+    }
+    else if (scores[0] < scores[1]) {
+        footer.textContent = playerNames[1] + " has won the game!";
+    }
+    else {
+        footer.textContent = "Tie! Nobody wins.";
+    }
+    tableContainer.children[0].remove();
+    tableContainer.innerHTML = (`<button id="playAgainButton">Play again</button><br><button id="backToMenuButton">Back to Menu</button>`);
+    addEndButtonListeners();
+}
+function addEndButtonListeners() {
+    document.getElementById("playAgainButton").addEventListener("click", reload);
+    document.getElementById("backToMenuButton").addEventListener("click", goToMenu);
+}
+function goToMenu() {
+    open("http://localhost:63342/TicTacYo/docs/index.html", "_self");
+}
+function reload() {
+    open(url, "_self");
+}