Tic-Tac-Toe

TIC-TAC-TOE/JavaScript/app.js

@@ -0,0 +1,48 @@
+const gameData = [
+    [0,0,0],
+    [0,0,0],
+    [0,0,0],
+];
+
+let currentRound =1;
+let editedPlayer = 0
+let activePlayer = 0;
+let gameIsOver = false;
+
+const players = [
+    {name: '',
+    Symbol:'X'
+    },
+    {
+        name:'',
+        Symbol:'0'
+    }
+];
+
+const playerConfigoverlay = document.getElementById('config-overlay');
+const backdropElement = document.getElementById('backdrop');
+const formElement = document.querySelector('form');
+const errorOutputs = document.getElementById('config-error');
+const gameArea = document.getElementById('active-game');
+const activePlayerName = document.getElementById('active-player-name');
+const InputField = document.getElementById('playername');
+const gameOverElement = document.getElementById('game-over');
+
+const editPlayer1Btn = document.getElementById('edit-player-1');
+const editPlayer2Btn = document.getElementById('edit-player-2');
+const cancelConfigBtn = document.getElementById('cancel-config');
+const startNewGameBtn = document.getElementById('start-game-btn');
+const gamePlaceHolder = document.getElementById('game-board');
+const gameFieldElements = document.querySelectorAll('#game-board li');
+
+editPlayer1Btn.addEventListener('click',openPlayerConfig);
+editPlayer2Btn.addEventListener('click',openPlayerConfig);
+cancelConfigBtn.addEventListener('click',closePlayerConfig);
+backdropElement.addEventListener('click',closePlayerConfig);
+formElement.addEventListener('submit',savePlayerConfig);
+startNewGameBtn.addEventListener('click',startNewGame);
+
+
+for(const gameFieldElement of gameFieldElements){
+    gameFieldElement.addEventListener('click',selectGameField);
+}

TIC-TAC-TOE/JavaScript/config.js

@@ -0,0 +1,29 @@
+function openPlayerConfig(event) {
+    playerConfigoverlay.style.display = 'block';
+    backdropElement.style.display = 'block';
+    editedPlayer = +event.target.dataset.playerid;  //+ will conver string to number
+}
+
+function closePlayerConfig() {
+    playerConfigoverlay.style.display = 'none';
+    backdropElement.style.display = 'none';
+    errorOutputs.textContent = '';
+    InputField.value = '';
+
+}
+
+function savePlayerConfig(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const enteredPlayername = formData.get('playername').trim();  //removes space before or after test
+
+    if(!enteredPlayername){
+        errorOutputs.textContent = 'Please Enter a valid Name !';
+        return;
+    }
+
+    const updatedPlayerData = document.getElementById('player-'+editedPlayer+'-data');
+    updatedPlayerData.children[1].textContent = enteredPlayername;
+    players[editedPlayer - 1].name=enteredPlayername;
+    closePlayerConfig();
+}

TIC-TAC-TOE/JavaScript/game.js

@@ -0,0 +1,106 @@
+function startNewGame() {
+    if(players[0].name ==='' || players[1].name===''){
+        alert('please add a valid playername for both players');
+        return;
+    }
+    resetGame();
+    gameArea.style.display = 'block';
+    activePlayerName.textContent = players[activePlayer].name;
+}
+
+function switchPlayer() {
+    if(activePlayer == 0){
+        activePlayer = 1;
+    }
+    else{
+        activePlayer = 0;
+    }
+
+    activePlayerName.textContent = players[activePlayer].name;
+}
+
+function selectGameField(event) {
+    if(gameIsOver){
+        console.log(gameIsOver);
+        return;
+    }
+
+    const selectedColumn = +event.target.dataset.col - 1;
+    const selectedRow = +event.target.dataset.row - 1;
+
+    if(gameData[selectedRow][selectedColumn]>0){
+        alert('please select an empty field');
+        return;
+    }
+    event.target.textContent = players[activePlayer].Symbol;
+    event.target.classList.add('disabled');
+
+    gameData[selectedRow][selectedColumn] = activePlayer+1;
+    console.log(gameData);
+
+    const winnerID = checkForGameOver();
+    if(winnerID !=0){
+        endGame(winnerID);
+    }
+    console.log(winnerID)
+
+    currentRound++;
+    switchPlayer();
+}
+
+function checkForGameOver(){
+    //checking the reows for equality
+    for(let i=0;i<3;i++){
+        if(gameData[i][0]>0 && gameData[i][0]===gameData[i][1] && gameData[i][1]===gameData[i][2]){
+            return gameData[i][0];
+        }
+    }
+    //checking the columns for euality
+    for(let i=0;i<3;i++){
+        if(gameData[0][i]>0 && gameData[0][i]===gameData[1][i] && gameData[1][i]===gameData[2][i]){
+            return gameData[0][i];
+        }
+    }
+
+    if(gameData[0][0]>0 && gameData[0][0]===gameData[1][1] && gameData[1][1]===gameData[2][2]){
+        return gameData[0][0];
+    }
+
+    if(gameData[0][2]>0 && gameData[0][2]===gameData[1][1] && gameData[1][1]===gameData[2][0]){
+        return gameData[0][0];
+    }
+
+    if(currentRound === 9){
+        return -1;
+    }
+    return 0;
+}
+
+function endGame(winnerID){
+    gameIsOver = true;
+    gameOverElement.style.display = 'block';
+
+    if(winnerID>0){
+        gameOverElement.firstElementChild.firstElementChild.textContent = players[winnerID-1].name;
+    }
+    else{
+        gameOverElement.firstElementChild.textContent = "It's a Draw !! ";
+    }
+}
+
+function resetGame(){
+    activePlayer = 0;
+    currentRound = 1;
+    gameOverElement.firstElementChild.innerHTML = 'You Won ,<span id="winner-name">PLAYERNAME</span>!';
+    gameOverElement.style.display = 'none';
+    let gameBoardIndex = 0;
+    for(let i=0;i<3;i++){
+        for(let j=0;j<3;j++){
+            gameData[i][j]=0;
+            gamePlaceHolder.children[gameBoardIndex].textContent = '';
+            gamePlaceHolder.children[gameBoardIndex].classList.remove('disabled');
+            gameBoardIndex++;
+        }
+    }
+    gameIsOver = false;
+}

TIC-TAC-TOE/README.md

@@ -0,0 +1,12 @@
+
+# Tic-Tac-Toe
+This is a  basic tic-tac-toe game developed in HTML, CSS and JavaScript.
+The website was made by me for Frontend practice in my initial phase with the help of tutorials.
+
+Two players can play this game locally from one pc or laptop. Players can enter their name and click on start game to start the game.
+
+## Snapshot
+![tic tac toe](https://user-images.githubusercontent.com/97377330/194387040-30d0cb94-4e8f-4ff3-a6b9-0fa3e851d04e.png)
+
+
+# [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com)

TIC-TAC-TOE/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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=Open+Sans:wght@400;700&family=Raleway:wght@700&display=swap"
+        rel="stylesheet">
+        <link rel="stylesheet" href="/styles/styles.css">
+        <link rel="stylesheet" href="/styles/overlays.css">
+        <link rel="stylesheet" href="/styles/configuration.css">
+        <link rel="stylesheet" href="./styles/game.css">
+        <script src="/JavaScript/config.js" defer></script>
+        <script src="/JavaScript/game.js" defer></script>
+        <script src="/JavaScript/app.js" defer></script>
+        <title>TIC TAC TOE</title>
+</head>
+
+<body>
+    <div id="backdrop"></div>
+    <header>
+        <h1>Play TIC TAC TOE</h1>
+        <p>Built with HTML , CSS , JavaScript and - of course - lots of love - By Me(Samarth) !! </p>
+    </header>
+    <main>
+        <aside class="modal" id="config-overlay">
+            <h2>Choose Your Name</h2>
+            <form>
+                <div class="form-control">
+                    <label for="playername">
+                        Player Name
+                    </label>
+                    <input type="text" name="playername" id="playername">
+                </div>
+                <p id="config-error"></p>
+                <div>
+                    <button type="reset" class="btn btn-alt" id="cancel-config">Cancel</button>
+                    <button type="submit" class="btn">Confirm</button>
+                </div>
+            </form>
+        </aside>
+        <section id="game-configuration">
+            <ol>
+                <li>
+                    <article id="player-1-data">
+                        <h2>Player 1</h2>
+                        <h3>Player Name</h3>
+                        <p class="player-symbol">X</p>
+                        <button class="btn btn-alt" id="edit-player-1" data-playerid="1">Edit</button>
+                    </article>
+                </li>
+                <li>
+                    <article id="player-2-data">
+                        <h2>Player 2</h2>
+                        <h3>Player Name</h3>
+                        <p class="player-symbol">0</p>
+                        <button class="btn btn-alt" id="edit-player-2" data-playerid="2">Edit</button>
+                    </article>
+                </li>
+            </ol>
+            <button class="btn" id="start-game-btn">Start New Game</button>
+        </section>
+        <section id="active-game">
+            <article id="game-over"> 
+                <h3>You Won ,<span id="winner-name">PLAYERNAME</span>!</h3>
+                <p>Click "Start New Game " to start a new game</p>
+            </article> 
+            <p>It's your turn <span id="active-player-name">PLAYER NAME</span>!</p>
+            <ol id="game-board">
+                <li data-col="1" data-row="1"></li>
+                <li data-col="2" data-row="1"></li>
+                <li data-col="3" data-row="1"></li>
+
+                <li data-col="1" data-row="2"></li>
+                <li data-col="2" data-row="2"></li>
+                <li data-col="3" data-row="2"></li>
+
+                <li data-col="1" data-row="3"></li>
+                <li data-col="2" data-row="3"></li>
+                <li data-col="3" data-row="3"></li>
+            </ol>
+        </section>
+    </main>
+</body>
+
+</html>

TIC-TAC-TOE/styles/configuration.css

@@ -0,0 +1,80 @@
+.modal{
+    text-align: center;
+}
+
+.modal h2{
+    margin: 0.5rem 0;
+}
+
+.form-control{
+    margin: 0.5rem 0;
+}
+
+.form-control label{
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+.form-control input{
+    font:inherit;
+    border:1px solid rgb(204, 204, 204);
+    width: 15rem;
+    padding: 0.35rem;
+}
+
+#game-configuration {
+    width: 90%;
+    max-width: 40rem;
+    margin:3rem auto;
+    text-align: center;
+}
+
+#game-configuration ol{
+    list-style:none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+#game-configuration li{
+    margin: 1rem;
+    padding: 1rem;
+    width: 50%;
+    background-color: rgb(243, 227, 255);
+    border-radius: 5px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+#game-configuration h2{
+    font-size: 1rem;
+    margin: 0.5rem 0;
+}
+
+#game-configuration h3{
+    font-size: 1.5rem;
+    margin:0.5rem 0;
+    color: rgb(94, 4, 167);
+}
+
+.player-symbol{
+    font-size: 2rem;
+    font-weight: bold;
+    color: rgb(47, 4, 82);
+}
+
+@media (max-width:48rem){
+    .form-control input{
+        width: 10rem;
+    }
+    #game-configuration ol{
+        flex-direction: column;
+        align-items: center;
+    }
+    #game-configuration li{
+        margin: 1rem;
+        padding: 1rem;
+        width: 70%;
+
+    }
+}