add functionality to menu

NEET64 · Oct 20, 2023 · eee54bb · eee54bb
2 parents 4127de3 + 4f72cdb
commit eee54bb
Show file tree

Hide file tree

Showing 5 changed files with 393 additions and 76 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,37 @@
 </head>
 <body>
     <div class="game">
-        <div class="right-section"></div>
+        <div class="right-section">
+            <div class="game-menu">
+                <div class="choices">
+                    <div class="choice p selected btn">1 vs 1</div>
+                    <div class="choice c btn">Computer</div>
+                </div>
+
+                <div class="player-options">
+                    <input type="text" class="name wname btn" placeholder="Player 1"></intput>
+                    <input type="text" class="name bname btn" placeholder="Player 2"></intput>
+                    <div class="timers">
+                        <div class="time btn">1:00</div>
+                        <div class="time btn">5:00</div>
+                        <div class="time btn">10:00</div>
+                    </div>
+                </div>
+                <div class="computer">
+                    <div class="difficulty">
+                        Difficulty
+                        <input class="slider" type="range" min="1" max="10" step="1" value="5">
+                    </div>
+                    <input type="text" class="name btn" placeholder="Player Name"></intput>
+                    <div class="color-choice">
+                        <div class="cube w btn"></div>
+                        <div class="cube b btn"></div>
+                    </div>
+                </div>
+
+                <button class="play btn">Play!</button>
+            </div>
+        </div>
         <div class="chess">     
             <div class="winnerDialog">
                 <div class="dialogcontent">
@@ -21,7 +51,7 @@
                     </div>
                 </div>
             </div>
-            <div class="info" id="white">
+            <div class="info" id="black">
                 <div class="player-image">
                     <div class="profile"><i class="fa-solid fa-user"></i></div>
                 </div>
@@ -30,7 +60,7 @@
                 <div class="killed-pieces"></div>
             </div>
             <div class="chessboard"></div>
-            <div class="info" id="black">
+            <div class="info" id="white">
                 <div class="player-image">
                     <div class="profile"><i class="fa-solid fa-user"></i></div>
                 </div>

diff --git a/javascript/chess.js b/javascript/chess.js
@@ -2,14 +2,29 @@
 let chessboard = document.querySelector(".chess .chessboard");
 let stockfish = new Worker('javascript/stockfish.js');
 
+let defaultBoard = new Board();
+let p1  = {
+    name: "",
+    id: 1,
+    color: "white",
+    isComputer: false
+};
+let p2  = {
+    name: "",
+    id: 2,
+    color: "black",
+    isComputer: false
+};
 class Chess {
-    constructor() {
+    constructor(p1, p2) {
         this.data = {
             turn: null,
             timer: 5,
             players: [],
             board: null
         };
+        this.p1 = p1;
+        this.p2 = p2;
     }
 
     async init(callback) {
@@ -29,8 +44,14 @@ class Chess {
 
     async assignPlayers() {
         return new Promise((resolve) => {
-			const player1 = new Player("Luffy", 1, "white", false);
-			const player2 = new Player("Zoro", 2, "black", true);
+			const player1 = new Player(this.p1);
+			const player2 = new Player(this.p2);
+
+            let p1 = document.querySelector("#white .player-title");
+            let p2 = document.querySelector("#black .player-title");
+
+            p1.innerHTML = player1.data.name;
+            p2.innerHTML = player2.data.name;
 
 			this.data.players = [player1, player2];
 
@@ -64,11 +85,7 @@ class Chess {
     }
 }
 
-const Game = new Chess();
-
-Game.init(function () {
-    this.start();
-});
+let Game; 
 
 function getStockfishMove(positionFEN, callback) {
     stockfish.postMessage('position fen ' + positionFEN);
@@ -82,6 +99,51 @@ function getStockfishMove(positionFEN, callback) {
     };
 }
 
+
+let choice = document.querySelectorAll(".choice");
+
+let c = document.querySelector(".computer");
+let p = document.querySelector(".player-options");
+
+choice.forEach(element => {
+    element.addEventListener("click", function () {
+        choice.forEach(e => {
+            e.classList.remove("selected");
+        });
+        element.classList.add("selected");
+        if(element.classList.contains("p")) {
+            p.style.display = "block";
+            c.style.display = "none";
+        }else {
+            c.style.display = "block";
+            p.style.display = "none";
+        }
+    })
+});
+
+let timers = document.querySelectorAll(".time")
+
+timers.forEach(element => {
+    element.addEventListener("click", function () {
+        timers.forEach(e => {
+            e.classList.remove("selected");
+        });
+        element.classList.add("selected");
+    })
+});
+
+let cubes = document.querySelectorAll(".cube")
+
+cubes.forEach(element => {
+    element.addEventListener("click", function () {
+        cubes.forEach(e => {
+            e.classList.remove("selected");
+        });
+        element.classList.add("selected");
+    })
+});
+
+
 let close = document.querySelector(".close");
 let share = document.querySelector(".share");
 let playagain = document.querySelector(".playagain");
@@ -97,4 +159,30 @@ share.addEventListener('click', function () {
 
 playagain.addEventListener('click', function () {
     console.log("close");
+});
+
+
+let play = document.querySelector(".play");
+
+play.addEventListener("click", function () {
+    let w = document.querySelector(".w");
+    if(document.querySelector(".p").classList.contains("selected")){
+        p1.name = document.querySelector(".wname").value;
+        p2.name = document.querySelector(".bname").value;
+    }else {
+        if(w.classList.contains("selected")) {
+            p1.name = document.querySelector(".computer > .name").value;
+            p2.name = "Computer";
+            p2.isComputer = true;
+        }else {
+            p2.name = document.querySelector(".computer > .name").value;
+            p1.name = "Computer";
+            p1.isComputer = true;
+        }
+    }
+    chessboard.innerHTML = "";
+    Game = new Chess(p1, p2);
+    Game.init(function () {
+        this.start();
+    });
 });
diff --git a/javascript/piece.js b/javascript/piece.js
@@ -138,7 +138,7 @@ class Piece {
             opponent.removePiece(enimyPi);
             enimySq.piece = null;
             targetSq.data.enPassant = false;
-            this.showEatedPiece(opponent, enimyPi);
+            this.showEatedPiece(player, enimyPi);
         }
         this.moveTo(cordinates);
 
@@ -201,7 +201,7 @@ class Piece {
 
             otherPlayer.removePiece(eatedPiece);
 
-            this.showEatedPiece(otherPlayer, eatedPiece);
+            this.showEatedPiece(player, eatedPiece);
         }
 
         prevSq.piece = null;
@@ -216,8 +216,8 @@ class Piece {
         board.removeAllPossibilities();
     }
 
-    showEatedPiece(otherPlayer, eatedPiece) {
-        let id = otherPlayer.data.color;
+    showEatedPiece(player, eatedPiece) {
+        let id = player.data.color;
         let title = document.querySelector(`#${id} .player-title`);
         title.style.gridRow = "span 1";
         let eated = document.querySelector(`#${id} .killed-pieces`);

diff --git a/javascript/player.js b/javascript/player.js
@@ -1,12 +1,12 @@
 class Player {
-    constructor(name, id, color, isComputer) {
+    constructor(ob) {
         this.data = {
             isWinner: false,
             isTimeout: false,
             isReady: false,
-            name,
-            id,
-            color,
+            name : ob.name,
+            id : ob.id,
+            color : ob.color,
             total_moves: 0,
 			timer: { m: null, s: null },
 			piecesData: {},
@@ -15,7 +15,7 @@ class Player {
 			moves: [],
 			currentPiece: null, 
         };
-        this.isComputer = isComputer;
+        this.isComputer = ob.isComputer;
         this.game = null;
     }