Zarebin · sfahmadzadeh · May 6, 2023 · May 30, 2023 · May 30, 2023
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/.dockerignore b/front/projects/01-tic-tac-toe/Ahmadzadeh/.dockerignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/Dockerfile b/front/projects/01-tic-tac-toe/Ahmadzadeh/Dockerfile
@@ -0,0 +1,15 @@
+#stage1: node
+FROM node:12.22.9  AS builder
+WORKDIR /workspace/tic-tac-toe-app
+COPY * ./
+RUN npm install
+RUN npm run build
+
+#stage2: nginx
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=builder /workspace/tic-tac-toe-app/dist ./
+COPY --from=builder /workspace/tic-tac-toe-app/nginx.conf ./etc/nginx
+EXPOSE 80
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/api/Dockerfile b/front/projects/01-tic-tac-toe/Ahmadzadeh/api/Dockerfile
@@ -0,0 +1,6 @@
+FROM node:12.22.9
+WORKDIR /workspace/tic-tac-toe-api-app AS builder
+COPY * ./
+RUN npm install
+EXPOSE 3000
+CMD [ "node", "board-size-api.js" ]
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/api/board-size-api.js b/front/projects/01-tic-tac-toe/Ahmadzadeh/api/board-size-api.js
@@ -0,0 +1,23 @@
+const express = require('express')
+const bodyParser = require('body-parser');
+const cors = require('cors');
+
+const app = express();
+const port = 3000;
+
+let randSize = Math.random();
+randSize = Math.floor( randSize * 3) + 3;
+
+let boardSize= {
+    size: randSize
+};
+
+app.use(cors());
+
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json());
+
+app.get('/', (req, res) => {
+    res.json(boardSize);
+});
+app.listen(port, () => console.log(`listening on port ${port}!`));
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/api/package.json b/front/projects/01-tic-tac-toe/Ahmadzadeh/api/package.json
@@ -0,0 +1,7 @@
+{
+    "dependencies": {
+        "express": "^4.18.2",
+        "body-parser": "^1.20.2",
+        "cors": "^2.8.5"
+    }
+}
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/board-size-api.js b/front/projects/01-tic-tac-toe/Ahmadzadeh/board-size-api.js
@@ -0,0 +1,23 @@
+const express = require('express')
+const bodyParser = require('body-parser');
+const cors = require('cors');
+
+const app = express();
+const port = 3000;
+
+let randSize = Math.random();
+randSize = Math.floor( randSize * 3) + 3;
+
+let boardSize= {
+    size: randSize
+};
+
+app.use(cors());
+
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json());
+
+app.get('/', (req, res) => {
+    res.json(boardSize);
+});
+app.listen(port, () => console.log(`listening on port ${port}!`));
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/index.html b/front/projects/01-tic-tac-toe/Ahmadzadeh/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta content="tic-tac-toe game"/>
+    </head>
+
+    <body>
+        <div id="board" class="board" size="0" gameActivity="active"></div>
+        <h2 id="gameStatus"></h2>
+
+        <script src="dist/main.js"></script>
+
+    </body>
+</html>
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/nginx.conf b/front/projects/01-tic-tac-toe/Ahmadzadeh/nginx.conf
@@ -0,0 +1,9 @@
+events { worker_connections 1024; }
+
+http {
+    server {
+        listen 80;
+        root /usr/share/nginx/html;
+        index index.html;
+    }
+}
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/src/index.js b/front/projects/01-tic-tac-toe/Ahmadzadeh/src/index.js
@@ -0,0 +1,183 @@
+import axios from "axios";
+import "./css/style.scss";
+import '@components/board-row.js';
+import '@components/board-row-cell.js';
+
+let turn = "X";
+let active = true;
+let boardSize;
+let gameState;
+
+function updateGameStatus(status){
+    if(status === "win"){
+        document.getElementById("gameStatus").innerHTML = `Congratulations ${turn}! You won!`;
+    }
+    else if(status === "terminated"){
+        document.getElementById("gameStatus").innerHTML = "Game finished without a winner.";
+    }
+    else{
+        changePlayer();
+        document.getElementById("gameStatus").innerHTML = `It's ${turn}'s turn.`;
+    }
+}
+
+function checkWinningInRow(currentPlayedCell){
+    let winned = true;
+    let row = parseInt(currentPlayedCell / boardSize);
+    for(let i = 0; i < boardSize; i++){
+        if(gameState[boardSize * row + i] === turn)
+            continue;
+        winned = false;
+        break;
+    }
+    if(winned){
+        for(let i = 0; i < boardSize; i++){
+            let element = document.getElementById((boardSize * row + i).toString());
+            element.setAttribute("winnedCell", "true");
+        }
+    }
+    return winned;
+}
+
+function checkWinningInColumn(currentPlayedCell){
+    let winned = true;
+    let column = currentPlayedCell % boardSize;
+    for(let i = 0; i < boardSize; i++){
+        if(gameState[boardSize * i + column] === turn)
+            continue;
+        winned = false;
+        break;
+    }
+    if(winned){
+        for(let i = 0; i < boardSize; i++){
+            let element = document.getElementById((boardSize * i + column).toString());
+            element.setAttribute("winnedCell", "true");
+        }
+    }
+    return winned;
+}
+
+function checkFirstDiagonalWinning(currentPlayedCell){
+    let winned = false;
+    if(parseInt(currentPlayedCell / boardSize) === currentPlayedCell % boardSize){
+        winned = true;
+        for(let i = 0; i < boardSize; i++){
+            if(gameState[boardSize * i + i] === turn){
+                continue;
+            }
+            winned = false;
+        }
+        if(winned){
+            for(let i = 0; i < boardSize; i++){
+                let element = document.getElementById((boardSize * i + i).toString());
+                element.setAttribute("winnedCell", "true");
+            }
+        }
+        return winned;
+    }
+}
+
+function checkSecondDiagonalWinning(currentPlayedCell){
+    let winned = false;
+    if((parseInt(currentPlayedCell / boardSize)) + (currentPlayedCell % boardSize) === boardSize - 1){
+        winned = true;
+        for(let i = 0; i < boardSize; i++){
+            if(gameState[boardSize * i + (boardSize - i - 1)] === turn)
+                continue;
+            winned = false;
+        }
+        if(winned){
+            for(let i = 0; i < boardSize; i++){
+                let element = document.getElementById((boardSize * i + (boardSize - i - 1)).toString());
+                element.setAttribute("winnedCell", "true");
+            }
+        }
+        return winned;
+    }
+}
+
+function checkTermination(currentPlayedCell){
+    let cellIndex = parseInt(currentPlayedCell.getAttribute("id"));
+    if(checkFirstDiagonalWinning(cellIndex) || checkSecondDiagonalWinning(cellIndex) || checkWinningInColumn(cellIndex) || checkWinningInRow(cellIndex)){
+        active = false;
+        updateGameStatus("win");
+    }
+    else if(!gameState.includes("")){
+        active = false;
+        document.getElementById("board").setAttribute("gameActivity", "inactive");
+        updateGameStatus("terminated");
+    }
+    else{
+        updateGameStatus("continue");
+    }
+}
+
+function changePlayer(){
+    if (turn === "X"){
+        turn = "O";
+    }
+    else{
+        turn = "X";
+    }
+}
+
+function handleCellClick(event){
+    let clickedCell = event.target;
+    let cellIndex = parseInt(clickedCell.getAttribute("id"));
+    if (gameState[cellIndex] === "" && active){
+        gameState[cellIndex] = turn;
+        clickedCell.innerHTML = turn;
+        checkTermination(clickedCell);
+    }
+}
+
+function setCellBorders(row,indexInRow, cellElement){
+    row != 0 ? cellElement.setAttribute("border", "Top") : cellElement.setAttribute("border", "");
+    row != boardSize - 1 ? cellElement.setAttribute("border", cellElement.getAttribute("border") + "Bottom"): cellElement.setAttribute("border", cellElement.getAttribute("border")) ;
+    indexInRow != 0 ? cellElement.setAttribute("border", cellElement.getAttribute("border") + "Left"): cellElement.setAttribute("border", cellElement.getAttribute("border")) ;
+    indexInRow != boardSize - 1 ? cellElement.setAttribute("border", cellElement.getAttribute("border") + "Right"): cellElement.setAttribute("border", cellElement.getAttribute("border")) ;
+}
+
+function createRow(row){
+    const rowElement = document.createElement("board-row");
+    rowElement.setAttribute("class", "board__row");
+    for(let i = 0; i < boardSize; i++){
+        const cellElement = document.createElement("board-row-cell");
+        cellElement.setAttribute("class", "board__row__cell");
+        cellElement.setAttribute("id", (boardSize * row + i).toString());
+        setCellBorders(row, i, cellElement);
+        rowElement.appendChild(cellElement);
+    }
+    return rowElement;
+}
+
+function createBoard(){
+    const board = document.getElementById("board");
+    for(let i = 0; i < boardSize; i++){
+        board.appendChild(createRow(i));
+    }
+}
+
+async function getBoardSize(){
+    const config = {
+        method: 'get',
+        url: 'http://localhost:3000/'
+    };
+    let res = await axios(config);
+    boardSize = parseInt(res.data["size"]);
+}
+
+async function setupGame(){
+    await getBoardSize();
+    createBoard();
+    document.getElementById("gameStatus").innerHTML = "It's X's turn.";
+
+    let cells = document.getElementsByClassName("board__row__cell");
+
+    gameState = Array(boardSize * boardSize).fill("");
+    Array.prototype.forEach.call(cells, function(cell) {
+        cell.addEventListener('click', handleCellClick);
+    });
+}
+
+setupGame();
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row-cell.js b/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row-cell.js
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row-cell.ts b/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row-cell.ts
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row.js b/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row.js
diff --git a/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row.ts b/front/projects/01-tic-tac-toe/Ahmadzadeh/src/node_modules/@components/board-row.ts