Add app Peer-Tac-Toe

package.json

@@ -17,6 +17,7 @@
     "@reduxjs/toolkit": "^1.9.7",
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",
+    "peerjs": "^1.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",

src/components/AppBar/Images.ts

@@ -1,5 +1,6 @@
 const IMAGES = {
   firefox: new URL("/app-icons/firefox-icon.png", import.meta.url).href,
+  peerTacToe: new URL("/app-icons/peer-tac-toe-icon.svg", import.meta.url).href,
   libreOffice: new URL("/app-icons/libre-office-icon.png", import.meta.url).href,
   rhythmBox: new URL("/app-icons/rhythmbox-icon.png", import.meta.url).href,
   settings: new URL("/app-icons/settings-icon.png", import.meta.url).href,

src/components/Apps/Apps.ts

@@ -2,11 +2,13 @@ import { JSX } from "react";
 import Settings from "./Settings/Settings.tsx";
 import DefaultApp from "./Default/DefaultApp.tsx";
 import MfTest from "src/components/Apps/MicrofrontendTest/MfTest.tsx";
+import PeerTacToe from "src/components/Apps/TicTacToe/PeerTacToe.tsx";
 
 export const APPS: { [key: string]: () => JSX.Element } = {
   defaultApp: DefaultApp,
   settings: Settings,
-  mfTest: MfTest
+  mfTest: MfTest,
+  peerTacToe: PeerTacToe
 };
 
 export type AppKey = keyof typeof APPS;

src/components/Apps/TicTacToe/PeerTacToe.css

@@ -0,0 +1,72 @@
+#tic-tac-toe {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    height: calc(100% - 20px);
+    padding: 10px;
+}
+
+#ttt-game {
+    height: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    aspect-ratio: 1/1 !important;
+}
+
+#ttt-game td {
+    border: 1px white solid;
+    aspect-ratio: 1/1 !important;
+}
+
+#ttt-game tbody tr:last-child td {
+    border-bottom: none;
+}
+
+#ttt-game tbody tr:first-child td {
+    border-top: none;
+}
+
+#ttt-game tr td:first-child {
+    border-left: none;
+}
+
+#ttt-game tr td:last-child {
+    border-right: none;
+}
+
+#ttt-game tbody{
+    aspect-ratio: 1/1 !important;
+}
+
+#ttt-game tr{
+    aspect-ratio: 1/3 !important;
+}
+
+.ttt-btn {
+    height: 100%;
+    width: 100%;
+    font-size: xxx-large;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: transparent;
+    aspect-ratio: 1/1 !important;
+}
+
+.ttt-btn:disabled {
+    cursor: not-allowed;
+    border: none;
+    color: white;
+    aspect-ratio: 1/1 !important;
+}
+
+.ttt-btn:hover{
+    color: white;
+    aspect-ratio: 1/1 !important;
+}
+
+.ttt-btn-svg{
+    height: 5rem;
+    aspect-ratio: 1/1 !important;
+}

src/components/Apps/TicTacToe/PeerTacToe.tsx

@@ -0,0 +1,30 @@
+import "./PeerTacToe.css";
+import { useState } from "react";
+import { TTTGame } from "./components/TTTGame.tsx";
+import { TTTLogin } from "./components/TTTLogin.tsx";
+import { DataConnection, Peer } from "peerjs";
+
+export default function PeerTacToe() {
+  const [peer, setPeer] = useState<Peer | undefined>(undefined);
+  const [conn, setConn] = useState<DataConnection | undefined>(undefined);
+  const [playerNum, setPlayerNum] = useState(0);
+  const [username, setUsername] = useState("");
+  const [oppUsername, setOppUsername] = useState("");
+  const [gameOn, setGameOn] = useState(false)
+
+  return (
+    <div id={"tic-tac-toe"}>
+      {gameOn && conn
+        ? (<TTTGame conn={conn} setConn={setConn}
+                    playerNum={playerNum} setPlayerNum={setPlayerNum}
+                    setGameOn={setGameOn}/>)
+        : (<TTTLogin setConn={setConn}
+                     peer={peer} setPeer={setPeer}
+                     setPlayerNum={setPlayerNum} playerNum={playerNum}
+                     username={username} setUsername={setUsername}
+                     oppUsername={oppUsername} setOppUsername={setOppUsername}
+                     setGameOn={setGameOn}/>)
+      }
+    </div>
+  );
+}

src/components/Apps/TicTacToe/components/Circle.tsx

@@ -0,0 +1,22 @@
+export function Circle() {
+  return (
+    <svg className="ttt-btn-svg" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280.000000 1280.000000"
+         preserveAspectRatio="xMidYMid meet">
+      <metadata>
+        Created by potrace 1.15, written by Peter Selinger 2001-2017
+      </metadata>
+      <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+         fill="#000000" stroke="none">
+        <path d="M6180 11089 c-921 -38 -1841 -368 -2584 -926 -356 -267 -701 -614
+-961 -963 -907 -1222 -1165 -2801 -694 -4250 127 -389 329 -804 561 -1149 987
+-1473 2722 -2269 4468 -2050 966 121 1831 515 2559 1165 1571 1403 2010 3690
+1070 5574 -418 836 -1056 1515 -1869 1985 -608 352 -1377 582 -2040 610 -283
+12 -330 12 -510 4z m555 -719 c1327 -114 2497 -871 3146 -2035 484 -870 622
+-1920 378 -2895 -175 -702 -530 -1330 -1039 -1840 -329 -330 -687 -585 -1095
+-781 -545 -261 -1114 -389 -1725 -389 -641 0 -1227 139 -1795 425 -760 383
+-1377 1001 -1760 1763 -588 1171 -560 2582 74 3717 648 1160 1815 1918 3131
+2034 139 12 546 12 685 1z" />
+      </g>
+    </svg>
+  )
+}

src/components/Apps/TicTacToe/components/Cross.tsx

@@ -0,0 +1,23 @@
+export function Cross() {
+  return (
+    <svg className="ttt-btn-svg" version="1.0" xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 1280.000000 1280.000000"
+         preserveAspectRatio="xMidYMid meet">
+      <metadata>
+        Created by potrace 1.15, written by Peter Selinger 2001-2017
+      </metadata>
+      <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+         fill="#000000" stroke="none">
+        <path d="M4609 8719 c-26 -4 -57 -13 -70 -19 -40 -21 -409 -392 -432 -435 -29
+-53 -30 -173 -3 -225 10 -19 378 -395 817 -835 l799 -800 -796 -795 c-462
+-462 -804 -812 -817 -835 -33 -62 -31 -175 5 -235 39 -66 394 -414 442 -434
+49 -20 152 -21 202 0 29 11 255 231 842 817 l802 802 803 -802 c586 -586 812
+-806 841 -817 50 -21 153 -20 202 0 48 20 403 368 442 434 36 60 38 173 5 235
+-13 23 -355 373 -817 835 l-796 795 799 800 c439 440 807 816 817 835 27 52
+26 172 -3 225 -32 59 -399 420 -448 441 -51 21 -148 21 -200 -1 -30 -12 -249
+-225 -842 -818 l-803 -802 -802 802 c-464 464 -816 807 -833 814 -47 19 -106
+25 -156 18z" />
+      </g>
+    </svg>
+  );
+}

src/components/Apps/TicTacToe/components/Empty.tsx

@@ -0,0 +1,14 @@
+export function Empty() {
+  return (
+    <svg className="ttt-btn-svg" version="1.0" xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 1280.000000 1280.000000"
+         preserveAspectRatio="xMidYMid meet">
+      <metadata>
+        Created by potrace 1.15, written by Peter Selinger 2001-2017
+      </metadata>
+      <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+         fill="#000000" stroke="none">
+      </g>
+    </svg>
+  );
+}

src/components/Apps/TicTacToe/components/TTTBtn.tsx

@@ -0,0 +1,21 @@
+type TTTBtnProps = {
+  btnIndex: number;
+  isBtnDisabled: (index: number) => boolean;
+  isBtnHidden: (index: number) => boolean;
+  getBtnState: (index: number) => string | JSX.Element;
+  setField: (index: number) => void;
+}
+
+export function TTTBtn(props: TTTBtnProps) {
+
+  return (
+    <td>
+      <button className={"ttt-btn " + props.btnIndex}
+              disabled={props.isBtnDisabled(props.btnIndex)}
+              onClick={() => props.setField(props.btnIndex)}
+              hidden={false}>
+        {props.getBtnState(props.btnIndex)}
+      </button>
+    </td>
+  );
+}

src/components/Apps/TicTacToe/components/TTTGame.tsx

@@ -0,0 +1,142 @@
+import { TTTRow } from "./TTTRow.tsx";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import { DataConnection } from "peerjs";
+
+type TTTGameProps = {
+  setConn: Dispatch<SetStateAction<DataConnection | undefined>>;
+  conn: DataConnection;
+  setPlayerNum: Dispatch<SetStateAction<number>>;
+  playerNum: number;
+  setGameOn: Dispatch<SetStateAction<boolean>>;
+}
+
+export function TTTGame(props: TTTGameProps) {
+  const [gameState, setGameState] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  const [newGameState, setNewGameState] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+  const inputType = useRef(0);
+
+  useEffect(() => {
+    props.conn.on("data", function(data) {
+      inputType.current = 2;
+      console.log("recv", data);
+      setNewGameState(data as number[]);
+    });
+    props.conn.on("close", function() {
+      props.setGameOn(false);
+      props.setConn(undefined);
+    });
+  }, [props.conn]);
+
+  function setField(index: number) {
+    setNewGameState(newGameState => {
+      const tmpGameState = [...newGameState];
+      tmpGameState[index] = props.playerNum;
+      inputType.current = 1;
+      props.conn.send(tmpGameState);
+      return tmpGameState;
+    });
+  }
+
+  useEffect(() => {
+    console.log("use-effect-new", newGameState);
+    if (inputType.current > 0) {
+      evaluate(newGameState, gameState);
+      setGameState(newGameState);
+      inputType.current = 0;
+    }
+  }, [newGameState]);
+
+  function endGame(status: number) {
+    console.log("exit-game", status);
+    props.setPlayerNum(status);
+    props.setGameOn(false);
+  }
+
+  function checkIfWon(num1: number, num2: number, num3: number, newGameState: number[]) {
+    if (newGameState[num1] == newGameState[num2] && newGameState[num2] == newGameState[num3]) {
+      if (newGameState[num1] == 0) {
+        return;
+      } else if (newGameState[num1] == props.playerNum) {
+        endGame(3);
+      } else {
+        endGame(4);
+      }
+    }
+  }
+
+  function evaluate(newGameState: number[], oldGameState: number[]) {
+    console.log("=============evaluate==========");
+    console.log("old", oldGameState);
+    console.log("new", newGameState);
+    //Check if player can do move
+    if ((gameState.filter(state => state == 0).length % 2 == props.playerNum - 1) && inputType.current == 1) {
+      console.log("player not at turn");
+      endGame(5);
+    }
+
+    //Check if not more than on field has been changed
+
+    //Check if field has not already been set
+    for (let i = 0; i < oldGameState.length - 1; i++) {
+      if (newGameState[i] != 0 && oldGameState[i] != 0 && newGameState[i] != oldGameState[i]) {
+        console.log("field already set");
+        endGame(5);
+      }
+    }
+
+    //Check if someone has won
+    //horizontal
+    for (let i = 1; i <= 3; i++) {
+      checkIfWon(i * 3 - 1, i * 3 - 2, i * 3 - 3, newGameState);
+    }
+    //vertical
+    for (let i = 6; i <= 8; i++) {
+      checkIfWon(i, i - 3, i - 6, newGameState);
+    }
+    //diagonal
+    checkIfWon(0, 4, 8, newGameState);
+    checkIfWon(2, 4, 6, newGameState);
+    console.log("=============ev done==========");
+    return;
+  }
+
+
+  function isBtnDisabled(index: number): boolean {
+    return gameState.filter(state => state == 0).length % 2 == props.playerNum - 1 || gameState[index] != 0;
+  }
+
+  function getBtnState(index: number): JSX.Element | string {
+    switch (gameState[index]) {
+      case 1:
+        return "X";
+      case 2:
+        return "O";
+    }
+    if (gameState.filter(state => state == 0).length % 2 != props.playerNum - 1) {
+      switch (props.playerNum) {
+        case 1:
+          return "X";
+        case 2:
+          return "O";
+      }
+    }
+    return "C";
+  }
+
+  function isBtnHidden(index: number): boolean {
+    return getBtnState(index) == "C";
+  }
+
+  return (
+    <table id={"ttt-game"}>
+      <tbody>
+        <TTTRow rowIndex={1} isBtnDisabled={isBtnDisabled} isBtnHidden={isBtnHidden} getBtnState={getBtnState}
+                setField={setField} />
+        <TTTRow rowIndex={2} isBtnDisabled={isBtnDisabled} isBtnHidden={isBtnHidden} getBtnState={getBtnState}
+                setField={setField} />
+        <TTTRow rowIndex={3} isBtnDisabled={isBtnDisabled} isBtnHidden={isBtnHidden} getBtnState={getBtnState}
+                setField={setField} />
+      </tbody>
+    </table>
+  );
+}