Winning Player Name on Screen Board

muqaddasazahra · Feb 11, 2024 · 886ffcc · 886ffcc
1 parent 59e4b74
commit 886ffcc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 21 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,11 @@ import Player from "./components/Player"
 import { WINNING_COMBINATIONS } from "./winning-combinations";
 import { useState } from "react"
 
+const PLAYER={
+  "X":"Player 1",
+  "O":"Player 2"
+}
+const INITIAL_GAME_BOARD=[[null,null,null],[null,null,null],[null,null,null]];
 
 function getActivePlayer(gameTurns)
 {
@@ -16,23 +21,9 @@ function getActivePlayer(gameTurns)
   return currentPlayer;
 }
 
-function App() {
-  // const [activePlayer, setActivePlayer]=useState("X");
-  const [gameTurns, setGameTurns]=useState([]);
-
-
- let activePlayer=getActivePlayer(gameTurns);
-
- const initialGameBoard=[[null,null,null],[null,null,null],[null,null,null]];
- let  gameBoard=[...initialGameBoard.map(array=>[...array])];
-
- for(const turn of gameTurns)
- {
-     const {square, player}=turn;
-     const {row, col}=square;
-     gameBoard[row][col]=player;
- }
- let winner;
+function deriveWinner(gameBoard,players)
+{
+  let winner;
  for(const combination of WINNING_COMBINATIONS)
  {
   const firstSquareSymbol=gameBoard[combination[0].row][combination[0].column];
@@ -41,9 +32,37 @@ function App() {
 
   if(firstSquareSymbol && firstSquareSymbol===secondSquareSymbol && firstSquareSymbol===thirdSquareSymbol)
   {
-     winner = firstSquareSymbol;
+     winner = players[firstSquareSymbol];
   }
  }
+ return winner;
+}
+
+function deriveGameBoard(gameTurns)
+{
+
+  let  gameBoard=[...INITIAL_GAME_BOARD.map(array=>[...array])];
+
+  for(const turn of gameTurns)
+  {
+      const {square, player}=turn;
+      const {row, col}=square;
+      gameBoard[row][col]=player;
+  }
+
+  return gameBoard;
+}
+
+function App() {
+  // const [activePlayer, setActivePlayer]=useState("X");
+  const [gameTurns, setGameTurns]=useState([]);
+  const [players, setPlayers]=useState(PLAYER)
+
+
+ let activePlayer=getActivePlayer(gameTurns);
+ const gameBoard=deriveGameBoard(gameTurns);
+ const winner=deriveWinner(gameBoard,players);
+
  const hasDraw= (gameTurns.length===9 && !winner);
  function handleRematch()
  {
@@ -66,12 +85,21 @@ function App() {
 
   }
 
+  function handlePlayerNameChange(symbol, newName)
+  {
+    setPlayers((prevPlayers)=>
+    { return{
+      ...prevPlayers,
+      [symbol]:newName
+    }})
+  }
+
   return (
     <main>
       <div id="game-container">
        <ol id="players" className="highlight-player">
-       <Player name="Player 1" symbol="X" isActive={activePlayer==="X"}></Player>
-       <Player name="Player 2" symbol="O" isActive={activePlayer==="O"}/>
+       <Player name={PLAYER.X} symbol="X" isActive={activePlayer==="X"} onChangeName={handlePlayerNameChange}></Player>
+       <Player name={PLAYER.O} symbol="O" isActive={activePlayer==="O"} onChangeName={handlePlayerNameChange}/>
        </ol>
 
        {(winner||hasDraw) && <GameOver winner={winner} onRestart={handleRematch}/>}

diff --git a/src/components/Player.jsx b/src/components/Player.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function Player({name, symbol, isActive})
+export default function Player({name, symbol, isActive, onChangeName})
 {   
     const [isEditing, setIsEditing]=useState(false);
     const [Player_Name, setPlayer_Name]=useState(name);
@@ -16,6 +16,10 @@ export default function Player({name, symbol, isActive})
     function handleClick()
     {
     setIsEditing((editing)=>!editing);
+    if(isEditing)
+    {
+        onChangeName(symbol,Player_Name)
+    }
     }
     return (
         <li className={(isActive)? "active": undefined} >