From b8ebfee9cc2247cb2d07ebbf0401ba9bafa52c69 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Mon, 1 Jan 2024 04:51:24 +0600
Subject: [PATCH 01/21] added game mechanics

---
 FrontendTemplate/src/components/GameBoard.jsx |  25 +--
 .../src/components/GutiButton.jsx             | 188 ++++++++++++++++--
 FrontendTemplate/src/components/ShakeHand.jsx |  17 +-
 FrontendTemplate/src/pages/ai_page/AIPage.jsx |  25 ++-
 4 files changed, 212 insertions(+), 43 deletions(-)

diff --git a/FrontendTemplate/src/components/GameBoard.jsx b/FrontendTemplate/src/components/GameBoard.jsx
index 287223d..cea177c 100644
--- a/FrontendTemplate/src/components/GameBoard.jsx
+++ b/FrontendTemplate/src/components/GameBoard.jsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Players from "./Players";
 import ShakeHand from "./ShakeHand";
 
-const GameBoard = () => {
+const GameBoard = ({scores, addScore, setScore}) => {
   const playerName = "Rafi"; // Replace with the actual player name
   const playerImage = "";
 
@@ -22,17 +22,15 @@ const GameBoard = () => {
         </div>
         <div className="player2n4">
           <div className="player2">
-            <div>
               <Players
                 playerName={playerName}
                 playerImage={playerImage}
                 playerScore={123}
                 isTopBtm={false}
               />
-            </div>
           </div>
           <div id="shake">
-            <ShakeHand />
+            <ShakeHand scores={scores} addScore = {addScore} setScore={setScore}/>
           </div>
           <div id="player4">
             <Players
@@ -67,19 +65,22 @@ const Wrapper = styled.section`
   .player2n4 {
     display: flex;
     flex-grow: 1;
-    justify-content: space-between;
   }
   .player2 {
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;    
   }
-  #shake {
-    display: grid;
-    place-items: center;
+  #shake {    
+    flex-grow: 1;    
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   #player4 {
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;    
   }
 
   .player1 {
diff --git a/FrontendTemplate/src/components/GutiButton.jsx b/FrontendTemplate/src/components/GutiButton.jsx
index c79d04a..a088377 100644
--- a/FrontendTemplate/src/components/GutiButton.jsx
+++ b/FrontendTemplate/src/components/GutiButton.jsx
@@ -5,24 +5,37 @@ import babu from "../assets/babu.png";
 import police from "../assets/police.png";
 import chor from "../assets/chor.png";
 import dakat from "../assets/dakat.png";
+import { Button } from "antd";
+
+const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
 
-const GutiButton = ({ shufArray }) => {
   const [showButton, setShowButton] = useState(true);
   const [showImage, setShowImage] = useState(false);
   const [selectedButton, setSelectedButton] = useState(null);
   const [policeState, setPoliceState] = useState(false);
+  const [lastState, setLastState] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null);
+  const [policeGuess, setPoliceGuess] = useState(-1);
   const gotImage = [chor, dakat, police, babu];
+  const bangla = ["চোর", "ডাকাত", "পুলিশ", "বাবু"];
+
   var selectedIndex;
 
   const myguti = 0;
   console.log(shufArray);
 
   const buttonClicking = (index) => {
-    console.log(shufArray[index]);
-    selectedIndex = shufArray[index];
+    //console.log("before " + shufArray);
+    //console.log("index : " + index);    
+    const tmp = shufArray[index];
+    shufArray[index] = shufArray[0];
+    shufArray[0] = tmp;
+    //console.log("after" + shufArray);
+    setSelectedImage(shufArray[0]);
+
     // TODO : DISTRIBUTE 3 to ai
-    // res: [0, 1, 3, 2] 
+    // res: [0, 1, 3, 2]
+    
 
     setShowButton(false);
     setShowImage(true);
@@ -30,18 +43,88 @@ const GutiButton = ({ shufArray }) => {
   };
 
   const imageClick = () => {
-    
     setShowImage(false);
     setPoliceState(true);
     // render new component
     // police_success = 0 / 1
+  };
+
+  function getPolice(x){
+    for(let i = 0; i < 4; i++){
+      if(shufArray[i] == x) return i;
+    }
   }
 
   return (
     <Wrapper>
       <div className="guti-buttons">
         <div className="gutis">
-          {policeState && (<div>hello</div>)}
+          {lastState && <div className="last-card">
+                পুলিশ সঠিক ধরেছেন <br />
+                চোর <span>+৪০</span> <br />
+                ডাকাত <span>+৬০</span> <br />
+                বাবু <span>+১০০</span> <br />
+                পুলিশ <span>+৮০</span> <br />
+                <Button onClick={() => {
+                    setLastState(false);
+                    setScore(addScore([80,80,80,80], scores));
+                    console.log(scores);
+                    restart();
+                }}> continue </Button>
+             </div>}
+          {policeState && (
+            <div className="police-state">
+              <div className="police-state-top">
+                <div className="police-state-top-left">
+                  <img src={gotImage[selectedImage]} alt="" />
+                </div>
+                <div className="police-state-top-right">
+                  <div>
+                    আপনি পেয়েছেনঃ &nbsp; <b>{bangla[selectedImage]}</b>
+                  </div>
+                  <div>
+                    {selectedImage != 2 && <span>পুলিশ হলোঃ &nbsp; <b>{getPolice(2)}</b></span>}
+                    {selectedImage == 2 && <span>বাবু হলোঃ &nbsp; <b>{getPolice(3)}</b></span>}
+                    
+                  </div>
+                </div>
+              </div>
+              <div className="police-state-btm">
+                {selectedImage == 2 && (
+                  <div classsName="police-state-btm">
+                    <Button
+                      className="jayga"
+                      onClick={() => {
+                        setLastState(true);
+                        setPoliceState(false);
+                      }}
+                    >
+                      Bot 1
+                    </Button>
+                    <Button
+                      className="jayga"
+                      onClick={() => {
+                        setLastState(true);
+                        setPoliceState(false);
+                      }}
+                    >
+                      Bot 2
+                    </Button>
+                  </div>
+                )}
+                {selectedImage != 2 && (
+                  <Button
+                    onClick={() => {
+                      setLastState(true);
+                      setPoliceState(false);
+                    }}
+                  >
+                    Continue
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
           <div className="guti-row">
             {Array.from({ length: 2 }, (_, index) => (
               <div key={index} className="guti">
@@ -54,9 +137,11 @@ const GutiButton = ({ shufArray }) => {
                   <img
                     id="shah"
                     //here put image source;
-                    src={gotImage[shufArray[index]]} // use the index to access the array element
+                    src={gotImage[selectedImage]} // use the index to access the array element
                     alt="Displayed Image"
-                    onClick={() => {imageClick()}}
+                    onClick={() => {
+                      imageClick();
+                    }}
                   />
                 )}
               </div>
@@ -73,9 +158,11 @@ const GutiButton = ({ shufArray }) => {
                 {showImage && selectedButton === index + 2 && (
                   <img
                     id="shah"
-                    src={gotImage[shufArray[index + 2]]}
+                    src={gotImage[selectedImage]}
                     alt="Displayed Image"
-                    onClick={() => {imageClick()}}
+                    onClick={() => {
+                      imageClick();
+                    }}
                   />
                 )}
               </div>
@@ -103,10 +190,61 @@ const Wrapper = styled.section`
     animation: shake 0.5s ease-in-out infinite;
   }
 
+  .last-card {
+    width: 300px;
+    font-size: 18px;
+    text-align: center;
+  }
+
+  .police-state-top-left img {
+    height: 100px;
+    width: 100px;
+    object-fit: cover;
+    animation: none;
+  }
+
   #shah {
     height: 100%;
     width: 100%;
   }
+
+  .police-state {
+  }
+
+  .police-state-top {
+    height: 200px;
+    width: 350px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .police-state-top-left {
+    width: 50%;
+  }
+
+  .police-state-top-left img {
+    width: 80% !important;
+    height: 100%;
+  }
+
+  .police-state-top-right {
+    width: 50%;
+  }
+
+  .jayga {
+    margin: 10px;
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+
+  .police-state-btm {
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   @media (max-width: 768px) {
     #shah {
       height: 200px;
@@ -117,14 +255,32 @@ const Wrapper = styled.section`
       width: 80px;
       object-fit: cover;
     }
+    .police-state-top {
+      height: 80px;
+      width: 170px;
+      font-size: 10px;
+    }
+    .jayga {
+      margin: 10px;
+    }
   }
   @keyframes shake {
-  0% { transform: translate(0); }
-  25% { transform: translate(0,-5px); }
-  50% { transform: translate(0, 5px); }
-  75% { transform: translate(0, -5px); }
-  100% { transform: translate(0); }
-}
+    0% {
+      transform: translate(0);
+    }
+    25% {
+      transform: translate(0, -5px);
+    }
+    50% {
+      transform: translate(0, 5px);
+    }
+    75% {
+      transform: translate(0, -5px);
+    }
+    100% {
+      transform: translate(0);
+    }
+  }
 `;
 
 export default GutiButton;
diff --git a/FrontendTemplate/src/components/ShakeHand.jsx b/FrontendTemplate/src/components/ShakeHand.jsx
index d839b42..5141172 100644
--- a/FrontendTemplate/src/components/ShakeHand.jsx
+++ b/FrontendTemplate/src/components/ShakeHand.jsx
@@ -5,7 +5,7 @@ import GutiButton from './GutiButton';
 
 
 
-const ShakeHand = () => {
+const ShakeHand = ({scores, addScore, setScore}) => {
 
 
 const [showButton, setShowButton] = useState(true);
@@ -45,7 +45,7 @@ const [showButton, setShowButton] = useState(true);
 
   return (
     <Wrapper>
-       <div className='shake'>
+       <div className='shakee'>
        {showButton && <button className='rounded-button1' onClick={handleButtonClick}>Guti Shake</button>}
       {showImage && (
         <img 
@@ -58,8 +58,7 @@ const [showButton, setShowButton] = useState(true);
 
             {showGuti && (
           <div className='guti-button'>
-            <GutiButton shufArray={shuffledArray}/>
-
+            <GutiButton shufArray={shuffledArray} scores={scores} addScore = {addScore} setScore={setScore} restart={()=>{setShowButton(true); setGuti(false)}}/>
           </div>
         )}
        </div>
@@ -90,6 +89,16 @@ const Wrapper = styled.section `
     transition: background-color 0.3s, transform 0.3s;
   }
 
+  .shakee {
+    width: 100%;
+    height: 100%;    
+  }
+
+  .guti-button{
+    width: 100%;
+    height: 100%;
+  }
+
   .rounded-button1:hover {
     background-color: #2980b9; /* Hover background color */
   }
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index fa1cb24..aa2cb60 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -8,9 +8,7 @@ import GameBoard from "../../components/GameBoard";
 import { addScore, getTotalScore } from "../../components/gameControllers";
 import { useLocation } from "react-router-dom";
 
-
 export default function AIPage() {
-
   const [isModalOpen, setIsModalOpen] = useState(false);
   const userData = useLocation().state;
   var initiated = false;
@@ -22,22 +20,25 @@ export default function AIPage() {
     ["Nafi", 0, 100, 80, 60],
   ]);
 
-  const round = [100, 0, 60, 40];  
+  const round = [100, 0, 60, 40];
   var totalScore = getTotalScore(scores);
-  console.log(totalScore);  
+  console.log(totalScore);
+
+  useEffect(()=>{
+    console.log("rerender");
+  }, [scores]);
 
-  function nice() {
-    const newScore = addScore(round, scores);  
-    setScore(newScore);
+  function update(new_score){
+    setScore(new_score);
   }
 
   function initiateGame() {
-    setScore([[userData.username],["bot-1"],["bot-2"],["bot-3"]]);
+    setScore([[userData.username], ["bot-1"], ["bot-2"], ["bot-3"]]);    
     initiated = true;
   }
 
   useEffect(() => {
-    if(!initiated) initiateGame();
+    if (!initiated) initiateGame();
   }, []);
 
   return (
@@ -45,11 +46,13 @@ export default function AIPage() {
       <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
       <FloatButton
         icon={<CommentOutlined />}
-        onClick={() => {setIsModalOpen(true); nice()}}
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
       />
       <div className="ai-canvas">
         <div className="ai-left">
-          <GameBoard />
+          <GameBoard scores={scores} addScore = {addScore} setScore={setScore} />
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>

From 1a2f9744c72fe2ec606457f4bdeeee5792503972 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Mon, 1 Jan 2024 06:53:33 +0600
Subject: [PATCH 02/21] finished aI

---
 .../src/components/GutiButton.jsx             | 113 +++++++++++++-----
 .../src/components/gameControllers.js         |  13 +-
 2 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/FrontendTemplate/src/components/GutiButton.jsx b/FrontendTemplate/src/components/GutiButton.jsx
index a088377..143337a 100644
--- a/FrontendTemplate/src/components/GutiButton.jsx
+++ b/FrontendTemplate/src/components/GutiButton.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import kagoj from "../assets/kagoj.png";
 import babu from "../assets/babu.png";
@@ -7,8 +7,7 @@ import chor from "../assets/chor.png";
 import dakat from "../assets/dakat.png";
 import { Button } from "antd";
 
-const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
-
+const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
   const [showButton, setShowButton] = useState(true);
   const [showImage, setShowImage] = useState(false);
   const [selectedButton, setSelectedButton] = useState(null);
@@ -16,17 +15,24 @@ const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
   const [lastState, setLastState] = useState(false);
   const [selectedImage, setSelectedImage] = useState(null);
   const [policeGuess, setPoliceGuess] = useState(-1);
+  const [isChor, setIsChor] = useState(true);
   const gotImage = [chor, dakat, police, babu];
-  const bangla = ["চোর", "ডাকাত", "পুলিশ", "বাবু"];
+  const bangla = ["চোর", "ডাকাত", "পুলিশ", "বাবু"];    
+  var curscore = [0, 0, 0, 0];
 
   var selectedIndex;
 
   const myguti = 0;
   console.log(shufArray);
 
+  useEffect(() => {
+    setIsChor(scores[0].length % 2 == 0);
+    console.log(isChor);
+  }, []);
+
   const buttonClicking = (index) => {
     //console.log("before " + shufArray);
-    //console.log("index : " + index);    
+    //console.log("index : " + index);
     const tmp = shufArray[index];
     shufArray[index] = shufArray[0];
     shufArray[0] = tmp;
@@ -35,7 +41,6 @@ const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
 
     // TODO : DISTRIBUTE 3 to ai
     // res: [0, 1, 3, 2]
-    
 
     setShowButton(false);
     setShowImage(true);
@@ -49,29 +54,71 @@ const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
     // police_success = 0 / 1
   };
 
-  function getPolice(x){
-    for(let i = 0; i < 4; i++){
-      if(shufArray[i] == x) return i;
+  function getPolice(x) {
+    for (let i = 0; i < 4; i++) {
+      if (shufArray[i] == x) return i;
     }
   }
 
+  function getChorDakat(){
+    var ans = [];
+    for(var i = 0; i < 4; i++){
+      if(shufArray[i] < 2) ans.push(i);
+    }
+    return ans;
+  }
+
+  function isPoliceCorrect(){
+    if(isChor && shufArray[policeGuess] == 0) return true;
+    else if(!isChor && shufArray[policeGuess] == 1) return true;
+    return false;
+  }
+
+  function getScore() {
+    const newScores = [0, 0, 0, 0]; // Create a new array to store the updated scores
+  
+    for (let i = 0; i < 4; i++) {
+      if (shufArray[i] === 3) newScores[i] = 100;
+      else if (shufArray[i] === 2 && isPoliceCorrect()) newScores[i] = 80;
+      else if (shufArray[i] === 1) {
+        if (isPoliceCorrect() && !isChor) {
+          // Do nothing, leave newScores[i] as 0
+        } else newScores[i] = 60;
+      } else if (shufArray[i] === 0) {
+        if (isPoliceCorrect() && isChor) {
+          // Do nothing, leave newScores[i] as 0
+        } else newScores[i] = 40;
+      }
+    }
+  
+    return newScores;
+  }
+  
+
   return (
     <Wrapper>
       <div className="guti-buttons">
         <div className="gutis">
-          {lastState && <div className="last-card">
-                পুলিশ সঠিক ধরেছেন <br />
-                চোর <span>+৪০</span> <br />
-                ডাকাত <span>+৬০</span> <br />
-                বাবু <span>+১০০</span> <br />
-                পুলিশ <span>+৮০</span> <br />
-                <Button onClick={() => {
-                    setLastState(false);
-                    setScore(addScore([80,80,80,80], scores));
-                    console.log(scores);
-                    restart();
-                }}> continue </Button>
-             </div>}
+          {lastState && (
+            <div className="last-card">
+              {isPoliceCorrect() ? "পুলিশ সঠিক ধরেছেন" : "পুলিশ ভূল ধরেছেন"} <br />
+              চোর <span>{isChor && isPoliceCorrect() ? "+০" : "+৪০"}</span> <br />                 
+              ডাকাত <span>{!isChor && isPoliceCorrect() ? "+০" : "+৬০"}</span> <br />
+              বাবু <span>+১০০</span> <br />
+              পুলিশ <span>{isPoliceCorrect() ? "+৮০" : "+০"}</span> <br />
+              <Button
+                onClick={() => {
+                  setLastState(false);
+                  curscore = getScore();                                    
+                  setScore(addScore(curscore, scores));                
+                  restart();
+                }}
+              >
+                {" "}
+                continue{" "}
+              </Button>
+            </div>
+          )}
           {policeState && (
             <div className="police-state">
               <div className="police-state-top">
@@ -83,12 +130,20 @@ const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
                     আপনি পেয়েছেনঃ &nbsp; <b>{bangla[selectedImage]}</b>
                   </div>
                   <div>
-                    {selectedImage != 2 && <span>পুলিশ হলোঃ &nbsp; <b>{getPolice(2)}</b></span>}
-                    {selectedImage == 2 && <span>বাবু হলোঃ &nbsp; <b>{getPolice(3)}</b></span>}
-                    
+                    {selectedImage != 2 && (
+                      <span>
+                        পুলিশ হলোঃ &nbsp; <b>{getPolice(2)}</b>
+                      </span>
+                    )}
+                    {selectedImage == 2 && (
+                      <span>
+                        বাবু হলোঃ &nbsp; <b>{getPolice(3)}</b>
+                      </span>
+                    )}
                   </div>
                 </div>
               </div>
+              <div> <center> {isChor == true ? "চোর কে ধরুন" : "ডাকাত কে ধরুন" } </center> </div>
               <div className="police-state-btm">
                 {selectedImage == 2 && (
                   <div classsName="police-state-btm">
@@ -96,19 +151,21 @@ const GutiButton = ({ shufArray , restart, scores, addScore, setScore }) => {
                       className="jayga"
                       onClick={() => {
                         setLastState(true);
-                        setPoliceState(false);
+                        setPoliceState(false);      
+                        setPoliceGuess((getChorDakat())[0]);
                       }}
                     >
-                      Bot 1
+                      {(getChorDakat())[0]}
                     </Button>
                     <Button
                       className="jayga"
                       onClick={() => {
                         setLastState(true);
                         setPoliceState(false);
+                        setPoliceGuess((getChorDakat())[1]);
                       }}
                     >
-                      Bot 2
+                      {(getChorDakat())[1]}
                     </Button>
                   </div>
                 )}
diff --git a/FrontendTemplate/src/components/gameControllers.js b/FrontendTemplate/src/components/gameControllers.js
index 0852659..4f922d9 100644
--- a/FrontendTemplate/src/components/gameControllers.js
+++ b/FrontendTemplate/src/components/gameControllers.js
@@ -1,10 +1,13 @@
 export function addScore(round, scores) {
-    var update = scores;
-    for (let i = 0; i < update.length; i++) {
-    update[i].push(round[i]);
+    // Create a new array by mapping over the existing scores array
+    const updatedScores = scores.map((score, index) => {
+      // Create a new array with the updated score for each player
+      return [...score, round[index]];
+    });
+  
+    return updatedScores; // Return the new array
   }
-  return update;
-}
+  
 
 export function getTotalScore(scores) {
   const totalScore = [0, 0, 0, 0];

From 619658c0129b630aaa3631975c8b1d286ee51552 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Mon, 1 Jan 2024 08:38:46 +0600
Subject: [PATCH 03/21] bug fixed

---
 FrontendTemplate/src/components/GameBoard.jsx | 14 ++++----
 .../src/components/GutiButton.jsx             | 17 +++++++---
 FrontendTemplate/src/components/ShakeHand.jsx |  4 +--
 FrontendTemplate/src/pages/ai_page/AIPage.jsx | 32 +++++++++++++++++--
 4 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/FrontendTemplate/src/components/GameBoard.jsx b/FrontendTemplate/src/components/GameBoard.jsx
index cea177c..6829a53 100644
--- a/FrontendTemplate/src/components/GameBoard.jsx
+++ b/FrontendTemplate/src/components/GameBoard.jsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import Players from "./Players";
 import ShakeHand from "./ShakeHand";
 
-const GameBoard = ({scores, addScore, setScore}) => {
-  const playerName = "Rafi"; // Replace with the actual player name
+const GameBoard = ({scores, addScore, setScore, playerName}) => {
+   // Replace with the actual player name
   const playerImage = "";
 
   return (
@@ -13,7 +13,7 @@ const GameBoard = ({scores, addScore, setScore}) => {
         <div className="player1">
           <div>
             <Players
-              playerName={playerName}
+              playerName={playerName[3]}
               playerImage={playerImage}
               playerScore={123}
               isTopBtm={true}
@@ -23,18 +23,18 @@ const GameBoard = ({scores, addScore, setScore}) => {
         <div className="player2n4">
           <div className="player2">
               <Players
-                playerName={playerName}
+                playerName={playerName[1]}
                 playerImage={playerImage}
                 playerScore={123}
                 isTopBtm={false}
               />
           </div>
           <div id="shake">
-            <ShakeHand scores={scores} addScore = {addScore} setScore={setScore}/>
+            <ShakeHand scores={scores} addScore = {addScore} setScore={setScore} playerName={playerName}/>
           </div>
           <div id="player4">
             <Players
-              playerName={playerName}
+              playerName={playerName[2]}
               playerImage={playerImage}
               playerScore={123}
               isTopBtm={false}
@@ -44,7 +44,7 @@ const GameBoard = ({scores, addScore, setScore}) => {
 
         <div className="player1">
           <Players
-            playerName={playerName}
+            playerName={playerName[0]}
             playerImage={playerImage}
             playerScore={123}
             isTopBtm={true}
diff --git a/FrontendTemplate/src/components/GutiButton.jsx b/FrontendTemplate/src/components/GutiButton.jsx
index 143337a..bb3d976 100644
--- a/FrontendTemplate/src/components/GutiButton.jsx
+++ b/FrontendTemplate/src/components/GutiButton.jsx
@@ -7,7 +7,7 @@ import chor from "../assets/chor.png";
 import dakat from "../assets/dakat.png";
 import { Button } from "antd";
 
-const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
+const GutiButton = ({ playerName, shufArray, restart, scores, addScore, setScore }) => {
   const [showButton, setShowButton] = useState(true);
   const [showImage, setShowImage] = useState(false);
   const [selectedButton, setSelectedButton] = useState(null);
@@ -56,7 +56,7 @@ const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
 
   function getPolice(x) {
     for (let i = 0; i < 4; i++) {
-      if (shufArray[i] == x) return i;
+      if (shufArray[i] == x) return playerName[i];
     }
   }
 
@@ -71,6 +71,15 @@ const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
   function isPoliceCorrect(){
     if(isChor && shufArray[policeGuess] == 0) return true;
     else if(!isChor && shufArray[policeGuess] == 1) return true;
+    else{
+      const currentTimestamp = new Date().getTime();
+    const randomValue = currentTimestamp % 2;
+
+      if(randomValue==0){
+         return true;
+      }
+      else return false;
+    }
     return false;
   }
 
@@ -132,12 +141,12 @@ const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
                   <div>
                     {selectedImage != 2 && (
                       <span>
-                        পুলিশ হলোঃ &nbsp; <b>{getPolice(2)}</b>
+                        পুলিশ হলোঃ &nbsp; <b> {getPolice(2)}</b>
                       </span>
                     )}
                     {selectedImage == 2 && (
                       <span>
-                        বাবু হলোঃ &nbsp; <b>{getPolice(3)}</b>
+                        বাবু হলোঃ &nbsp; <b> {getPolice(3)}</b>
                       </span>
                     )}
                   </div>
diff --git a/FrontendTemplate/src/components/ShakeHand.jsx b/FrontendTemplate/src/components/ShakeHand.jsx
index 5141172..a16fcf4 100644
--- a/FrontendTemplate/src/components/ShakeHand.jsx
+++ b/FrontendTemplate/src/components/ShakeHand.jsx
@@ -5,7 +5,7 @@ import GutiButton from './GutiButton';
 
 
 
-const ShakeHand = ({scores, addScore, setScore}) => {
+const ShakeHand = ({scores, addScore, setScore, playerName}) => {
 
 
 const [showButton, setShowButton] = useState(true);
@@ -58,7 +58,7 @@ const [showButton, setShowButton] = useState(true);
 
             {showGuti && (
           <div className='guti-button'>
-            <GutiButton shufArray={shuffledArray} scores={scores} addScore = {addScore} setScore={setScore} restart={()=>{setShowButton(true); setGuti(false)}}/>
+            <GutiButton playerName={playerName} shufArray={shuffledArray} scores={scores} addScore = {addScore} setScore={setScore} restart={()=>{setShowButton(true); setGuti(false)}}/>
           </div>
         )}
        </div>
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index aa2cb60..6cf6868 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -10,6 +10,7 @@ import { useLocation } from "react-router-dom";
 
 export default function AIPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedNames, setSelectedNames] = useState([]);
   const userData = useLocation().state;
   var initiated = false;
 
@@ -19,6 +20,7 @@ export default function AIPage() {
     ["Shawon", 0, 100, 80, 60],
     ["Nafi", 0, 100, 80, 60],
   ]);
+  const peopleNames = ["John", "Jane", "Alex", "Mark", "Ella", "Liam", "Lucy", "Finn", "Kate", "Ryan", "Emma", "Luke", "Rose", "Paul", "Lisa", "Jack", "Anna", "Eric", "Mia", "Jake"];
 
   const round = [100, 0, 60, 40];
   var totalScore = getTotalScore(scores);
@@ -28,12 +30,38 @@ export default function AIPage() {
     console.log("rerender");
   }, [scores]);
 
+  // useEffect(() => {
+    
+  //   const selectRandomNames = () => {
+  //     const shuffledNames = [...peopleNames];
+      
+  //     for (let i = shuffledNames.length - 1; i > 0; i--) {
+  //       const j = Math.floor(Math.random() * (i + 1));
+  //       [shuffledNames[i], shuffledNames[j]] = [shuffledNames[j], shuffledNames[i]];
+  //     }
+  //     return shuffledNames.slice(0, 2);
+  //   };
+
+  //   // Set selected names when component mounts
+  //   setSelectedNames(selectRandomNames());
+  // }, []);
+
   function update(new_score){
     setScore(new_score);
   }
 
   function initiateGame() {
-    setScore([[userData.username], ["bot-1"], ["bot-2"], ["bot-3"]]);    
+    //setScore([[userData.username], ["bot-1"], ["bot-1"],["bot-1"],  ]);   
+    const currentTimestamp = new Date().getTime();
+    const randomValue = currentTimestamp % 19;
+    const a = peopleNames[randomValue];
+    const b = peopleNames[randomValue+1];
+    const c = peopleNames[randomValue+2];
+
+    setSelectedNames([userData.username,a,b,c]);
+    
+    setScore([[userData.username], [a], [b],[c],  ]); 
+   
     initiated = true;
   }
 
@@ -52,7 +80,7 @@ export default function AIPage() {
       />
       <div className="ai-canvas">
         <div className="ai-left">
-          <GameBoard scores={scores} addScore = {addScore} setScore={setScore} />
+          <GameBoard scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>

From dcb5949e7b56e4bd8dbfba11c5b7e6988b3e02ca Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Mon, 1 Jan 2024 09:51:13 +0600
Subject: [PATCH 04/21] added lobby

---
 .../src/components/GutiButton.jsx             |  2 +-
 .../src/pages/friends_page/FriendsPage.jsx    | 75 +++++++++++++++++++
 .../src/pages/multiplayer_page/Lobby.css      | 36 +++++++++
 .../src/pages/multiplayer_page/Lobby.jsx      | 23 ++++++
 .../pages/multiplayer_page/Multiplayer.css    |  0
 .../pages/multiplayer_page/Multiplayer.jsx    | 71 ++++++++++++++++++
 FrontendTemplate/src/routes/routesLib.jsx     |  7 +-
 7 files changed, 212 insertions(+), 2 deletions(-)
 create mode 100644 FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
 create mode 100644 FrontendTemplate/src/pages/multiplayer_page/Lobby.css
 create mode 100644 FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
 create mode 100644 FrontendTemplate/src/pages/multiplayer_page/Multiplayer.css
 create mode 100644 FrontendTemplate/src/pages/multiplayer_page/Multiplayer.jsx

diff --git a/FrontendTemplate/src/components/GutiButton.jsx b/FrontendTemplate/src/components/GutiButton.jsx
index 143337a..1f59643 100644
--- a/FrontendTemplate/src/components/GutiButton.jsx
+++ b/FrontendTemplate/src/components/GutiButton.jsx
@@ -70,7 +70,7 @@ const GutiButton = ({ shufArray, restart, scores, addScore, setScore }) => {
 
   function isPoliceCorrect(){
     if(isChor && shufArray[policeGuess] == 0) return true;
-    else if(!isChor && shufArray[policeGuess] == 1) return true;
+    else if(!isChor && shufArray[policeGuess] == 1) return true;    
     return false;
   }
 
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
new file mode 100644
index 0000000..716150f
--- /dev/null
+++ b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
@@ -0,0 +1,75 @@
+import io from "socket.io-client";
+import { useState } from "react";
+import appLogo from "../../assets/appLogo.png";
+import avatars from "../../components/avatars";
+import { Input, Button } from "antd";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const socket = io.connect("http://localhost:3001");
+
+function FriendsPage() {
+  const [username, setUsername] = useState("");
+  const [room, setRoom] = useState("");
+  const userData = useLocation().state;
+  const navigate = useNavigate();
+
+  const joinRoom = () => {
+    if (username !== "" && room !== "") {
+      // jekono api call er jonno ei socket id "socket" or api address ta lagbe.
+      socket.emit("join_room", room); // "join_room" api link er sathe value send korbe
+      // NAVIGATE
+    }
+  };
+
+  return (
+    <>
+      <div className="landing-canvas">
+        <div className="landing-left">
+          <img src={appLogo} alt="Chor Dakat Babu Police" />
+        </div>
+        <div className="landing-right">
+          <div className="landing-avatar">
+            <img src={avatars[userData.avatar]} alt="avatar" />
+          </div>
+          <div>
+            <b>{userData.username}</b>
+          </div>
+          <Input
+            placeholder="Enter Room ID"
+            className="username-input"
+            onChange={(e) => setRoom(e.target.value)}
+          />
+          <Button
+            onClick={() => {
+              !room
+                ? alert("enter room id first")
+                : navigate("/lobby", {                  
+                    state: {
+                        ...userData,
+                      roomId: room,
+                    },
+                  });
+            }}
+          >
+            JOIN
+          </Button>
+          <br />
+          <Button
+            onClick={() => {              
+              navigate("/lobby", {
+                state: {
+                  ...userData,
+                  roomId: "RANDOM",
+                },
+              });
+            }}
+          >
+            CREATE
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default FriendsPage;
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Lobby.css b/FrontendTemplate/src/pages/multiplayer_page/Lobby.css
new file mode 100644
index 0000000..d1bb0cb
--- /dev/null
+++ b/FrontendTemplate/src/pages/multiplayer_page/Lobby.css
@@ -0,0 +1,36 @@
+.lobby-container{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.lobby-card{
+    width: 20vw;
+    height: 75vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.lobby-card img {
+    width: 100%;
+}
+
+.lobby-card span {
+    margin-top: -40px;
+    font-size: 20px;
+}
+
+.lobby-code {
+    font-size: 25px;
+}
+
+@media screen and (max-width: 768px) {
+    .lobby-card{
+        width: 40vw;
+        height: 40vh;
+        margin: 10px;
+    }
+}
\ No newline at end of file
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
new file mode 100644
index 0000000..de047c1
--- /dev/null
+++ b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
@@ -0,0 +1,23 @@
+import "./Lobby.css";
+import avatars from "../../components/avatars";
+import { Button } from "antd";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export default function Lobby() {
+
+    const userData = useLocation().state;
+    const navigate = useNavigate();
+
+    return <>
+        <center className="lobby-code">LOBBY CODE</center>
+        <center className="lobby-code">{userData.roomId}</center>
+        <div className="lobby-container">
+        <div className="lobby-card"><img src={avatars[userData.avatar]} alt="" /> <span> {userData.username} </span></div>
+        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
+        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
+        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
+        </div>   
+        <center><Button> Start Game </Button></center>
+    </>;
+
+}
\ No newline at end of file
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Multiplayer.css b/FrontendTemplate/src/pages/multiplayer_page/Multiplayer.css
new file mode 100644
index 0000000..e69de29
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Multiplayer.jsx b/FrontendTemplate/src/pages/multiplayer_page/Multiplayer.jsx
new file mode 100644
index 0000000..824fb25
--- /dev/null
+++ b/FrontendTemplate/src/pages/multiplayer_page/Multiplayer.jsx
@@ -0,0 +1,71 @@
+import "./Multiplayer.css";
+import { FloatButton } from "antd";
+import { CommentOutlined } from "@ant-design/icons";
+import ChatModal from "../../components/ChatModal";
+import { useEffect, useState } from "react";
+import GameBoard from "../../components/GameBoard";
+
+import { addScore, getTotalScore } from "../../components/gameControllers";
+import { useLocation } from "react-router-dom";
+
+export default function Multiplayer() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const userData = useLocation().state;
+  var initiated = false;
+
+  const [scores, setScore] = useState([
+    ["Player 1", 0, 100, 80, 60],
+    ["Player 2", 0, 100, 80, 60],
+    ["Shawon", 0, 100, 80, 60],
+    ["Nafi", 0, 100, 80, 60],
+  ]);
+
+  const round = [100, 0, 60, 40];
+  var totalScore = getTotalScore(scores);
+  console.log(totalScore);
+
+  useEffect(()=>{
+    console.log("rerender");
+  }, [scores]);
+
+  function initiateGame() {
+    setScore([[userData.username], ["bot-1"], ["bot-2"], ["bot-3"]]);    
+    initiated = true;
+  }
+
+  useEffect(() => {
+    if (!initiated) initiateGame();
+  }, []);
+
+  return (
+    <>
+      <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      <FloatButton
+        icon={<CommentOutlined />}
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      />
+      <div className="ai-canvas">
+        <div className="ai-left">
+          <GameBoard scores={scores} addScore = {addScore} setScore={setScore} />
+        </div>
+        <div className="ai-right">
+          <div>LEADERBOARD</div>
+          <div className="leaderboard-body">
+            {scores.map((score, index) => (
+              <div className="leaderboard-col" key={index}>
+                {score.map((point, idx) => (
+                  <span key={idx}>
+                    {point}
+                    <br />
+                  </span>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/FrontendTemplate/src/routes/routesLib.jsx b/FrontendTemplate/src/routes/routesLib.jsx
index c394c83..7926f85 100644
--- a/FrontendTemplate/src/routes/routesLib.jsx
+++ b/FrontendTemplate/src/routes/routesLib.jsx
@@ -4,6 +4,9 @@ import LandingPage from "../pages/landing_page/LandingPage";
 import HomePage from "../pages/home_page/HomePage";
 import AIPage from "../pages/ai_page/AIPage";
 import Friend_page from "../pages/friends_page/Friend_page";
+import FriendsPage from "../pages/friends_page/FriendsPage";
+import Multiplayer from "../pages/multiplayer_page/Multiplayer";
+import Lobby from "../pages/multiplayer_page/Lobby";
 
 function RoutesLib() {
   return (
@@ -13,7 +16,9 @@ function RoutesLib() {
           <Route path="/" element={<LandingPage />} />
           <Route path="/home" element={<HomePage />} />
           <Route path="/ai" element={<AIPage />} />
-          <Route path="/room" element={<Friend_page />} />
+          <Route path="/room" element={<FriendsPage />} />
+          <Route path="/lobby" element={<Lobby />} />
+          <Route path="/multiplayer" element={<Multiplayer />} />
         </Routes>
       </BrowserRouter>
     </>

From f909dcd0bcbe544b9cc0aacbd760a8348899c111 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Mon, 1 Jan 2024 10:17:31 +0600
Subject: [PATCH 05/21] added lobby

---
 .../src/pages/multiplayer_page/Lobby.jsx      | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
index de047c1..ad1ff77 100644
--- a/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
+++ b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
@@ -2,22 +2,36 @@ import "./Lobby.css";
 import avatars from "../../components/avatars";
 import { Button } from "antd";
 import { useLocation, useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 export default function Lobby() {
 
     const userData = useLocation().state;
     const navigate = useNavigate();
 
+    const [players , setPlayers] = useState([
+
+        {avatar: 1, username: "mehraj", isHost: true},
+        {avatar: 2, username: "amit", isHost: false},
+        {avatar: 3, username: "sakib", isHost: false},
+        {avatar: 4, username: "akib", isHost: false},
+
+    ]);
+
     return <>
         <center className="lobby-code">LOBBY CODE</center>
         <center className="lobby-code">{userData.roomId}</center>
         <div className="lobby-container">
-        <div className="lobby-card"><img src={avatars[userData.avatar]} alt="" /> <span> {userData.username} </span></div>
-        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
-        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
-        <div className="lobby-card"><img src={avatars[0]} alt="" /> <span> Mehraj </span> <Button onClick={() => {}}> Kick </Button></div>
+            {players.map((player) => {
+                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {player.username} </span> {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
+            })}        
         </div>   
-        <center><Button> Start Game </Button></center>
+        <center><Button onClick={
+            navigate("/multiplayer", {state : {
+                ...userData,
+                players: players,
+            }})
+        }> Start Game </Button></center>
     </>;
 
 }
\ No newline at end of file

From 6d971b99d9c2142b78d740f7fbcb0386b4ed018d Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Mon, 1 Jan 2024 13:27:10 +0600
Subject: [PATCH 06/21] total score updated

---
 FrontendTemplate/src/components/GameBoard.jsx | 10 +++++-----
 FrontendTemplate/src/pages/ai_page/AIPage.jsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/FrontendTemplate/src/components/GameBoard.jsx b/FrontendTemplate/src/components/GameBoard.jsx
index 6829a53..cfbe80c 100644
--- a/FrontendTemplate/src/components/GameBoard.jsx
+++ b/FrontendTemplate/src/components/GameBoard.jsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Players from "./Players";
 import ShakeHand from "./ShakeHand";
 
-const GameBoard = ({scores, addScore, setScore, playerName}) => {
+const GameBoard = ({totalScore, scores, addScore, setScore, playerName}) => {
    // Replace with the actual player name
   const playerImage = "";
 
@@ -15,7 +15,7 @@ const GameBoard = ({scores, addScore, setScore, playerName}) => {
             <Players
               playerName={playerName[3]}
               playerImage={playerImage}
-              playerScore={123}
+              playerScore={totalScore[3]}
               isTopBtm={true}
             />
           </div>
@@ -25,7 +25,7 @@ const GameBoard = ({scores, addScore, setScore, playerName}) => {
               <Players
                 playerName={playerName[1]}
                 playerImage={playerImage}
-                playerScore={123}
+                playerScore={totalScore[1]}
                 isTopBtm={false}
               />
           </div>
@@ -36,7 +36,7 @@ const GameBoard = ({scores, addScore, setScore, playerName}) => {
             <Players
               playerName={playerName[2]}
               playerImage={playerImage}
-              playerScore={123}
+              playerScore={totalScore[2]}
               isTopBtm={false}
             />
           </div>
@@ -46,7 +46,7 @@ const GameBoard = ({scores, addScore, setScore, playerName}) => {
           <Players
             playerName={playerName[0]}
             playerImage={playerImage}
-            playerScore={123}
+            playerScore={totalScore[0]}
             isTopBtm={true}
           />
         </div>
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index 6cf6868..87f3504 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -80,7 +80,7 @@ export default function AIPage() {
       />
       <div className="ai-canvas">
         <div className="ai-left">
-          <GameBoard scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
+          <GameBoard totalScore={totalScore} scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>

From 0fe6d2af8d07f70f64f4adcf95e780b875078152 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Mon, 1 Jan 2024 21:15:44 +0600
Subject: [PATCH 07/21] users in room added

---
 BakcendTemplate/app.js                        |  29 +++--
 .../src/pages/friends_page/Friend_page.jsx    |  19 ++-
 .../src/pages/friends_page/RoomLobby.jsx      | 111 ++++++++++++++++++
 .../src/pages/friends_page/chat.jsx           |   4 +-
 .../src/pages/multiplayer_page/DummyLobby.jsx |  47 ++++++++
 FrontendTemplate/src/routes/routesLib.jsx     |   4 +-
 6 files changed, 200 insertions(+), 14 deletions(-)
 create mode 100644 FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
 create mode 100644 FrontendTemplate/src/pages/multiplayer_page/DummyLobby.jsx

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index a42e4fb..3f5185f 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -6,7 +6,7 @@ const { Server } = require("socket.io");
 app.use(cors());
 
 const server = http.createServer(app);
-const connectedUsers = {};
+const connectedUsers = [];
 
 const io = new Server(server, {
   cors: {
@@ -14,25 +14,40 @@ const io = new Server(server, {
     methods: ["GET", "POST"],
   },
 });
-
+const usersInRoom = {};
 io.on("connection", (socket) => {
 
   
     socket.on("join_room", (data) => {
-      socket.join(data);
-    // console.log(data);
+      socket.join(data.room);
+
+      if (usersInRoom[data.room].length > 4) {
+        // Clear the array
+        usersInRoom[data.room] = [];
+        console.log(`Cleared users in room ${data.room}`);
+      }
+      usersInRoom[data.room].push({ id: socket.id, username: data.username });
+  
+     
+      // Emit the updated list of users to the frontend
+      io.to(data.room).emit("users_list", usersInRoom[data.room]);
+      
      
     });
 
+
+    socket.on("send_person", (data) => {
+      console.log(data);
+    
+      socket.to(data.room).emit("receive_message", data);
+    });
+
     socket.on("send_message", (data) => {
         console.log(data);
         socket.to(data.room).emit("receive_message", data);
       });
 
      
-
-  
-
   socket.on("disconnect", () => {
     console.log("User Disconnected", socket.id);
   });
diff --git a/FrontendTemplate/src/pages/friends_page/Friend_page.jsx b/FrontendTemplate/src/pages/friends_page/Friend_page.jsx
index e6a0a98..4b42556 100644
--- a/FrontendTemplate/src/pages/friends_page/Friend_page.jsx
+++ b/FrontendTemplate/src/pages/friends_page/Friend_page.jsx
@@ -2,6 +2,7 @@ import "./Friend_page.css";
 import io from "socket.io-client";
 import { useState } from "react";
 import Chat from "./chat.jsx";
+import RoomLobby from "./RoomLobby.jsx";
 
 const socket = io.connect("http://localhost:3001");
 
@@ -12,16 +13,24 @@ function Friend_page() {
 
   const joinRoom = () => {
     if (username !== "" && room !== "") {
+      const messageData = {
+        room: room,
+        username: username,
+        
+      };
       // jekono api call er jonno ei socket id "socket" or api address ta lagbe.
-      socket.emit("join_room", room); // "join_room" api link er sathe value send korbe
+      socket.emit("join_room", messageData); // "join_room" api link er sathe value send korbe
       setShowChat(true);
+
+      
     }
   };
 
+
   return (
     <div className="App">
-      {!showChat ? (
-        <div className="joinChatContainer">
+
+<div className="joinChatContainer">
           <h3>Join A Chat</h3>
           <input
             type="text"
@@ -39,8 +48,10 @@ function Friend_page() {
           />
           <button onClick={joinRoom}>Join A Room</button>
         </div>
+      {!showChat ? (
+        <div></div>
       ) : (
-        <Chat socket={socket} username={username} room={room} />
+        <RoomLobby socket={socket} username={username} room={room} />
       )}
     </div>
   );
diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
new file mode 100644
index 0000000..6fa5991
--- /dev/null
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import ScrollToBottom from "react-scroll-to-bottom";
+import styled from "styled-components";
+
+const RoomLobby = ({ socket, username, room }) => {
+    const [currentMessage, setCurrentMessage] = useState("");
+  const [messageList, setMessageList] = useState([]);
+  const [userval, setUserVal]= useState(false);
+  const [users, setUsers] = useState([]);
+
+  const sendMessage = async () => {
+    
+      const messageData = {
+        room: room,
+        author: username,
+        
+      };
+
+      await socket.emit("send_person", messageData);
+      
+      
+
+  };
+
+//   useEffect(() => {
+
+//     console.log(messageList);
+    
+// }, []);
+
+useEffect(() => {
+    if (socket) {
+      socket.on('users_list', (users) => {
+        console.log(users);
+        setUsers(users);
+      });
+    }
+    return () => {
+        if (socket) {
+          socket.off('users_list');
+        }
+      };
+  }, [socket]);
+
+  useEffect(() => {
+    if(!userval){
+        const messageData = {
+            room: room,
+            author: username,
+            
+          };
+          setMessageList((list) => [messageData]);
+          setUserVal(true);
+    }
+    
+    socket.on("receive_message", (data) => {
+      
+        const existingMessageIndex = messageList.findIndex(
+            (message) => message.author === username
+          );
+      
+          if (existingMessageIndex === -1) {
+            setMessageList((list) => [...list, data]);
+          }
+       // setMessageList((list) => [...list, data]);
+      
+      
+    });
+
+    return () => socket.removeListener('receive_message')
+  }, [socket]);
+
+  //joined room
+
+ 
+ 
+
+  
+  return (
+    <>
+    <div className="chat-window">
+      
+      <div className="persons-body">
+        
+          {
+          
+          users.map((messageContent) => {
+            
+            return (
+              
+                <div >
+                
+                  
+                  <div className="message-meta">
+                  <p id="author"></p>
+                    <p id="author">{messageContent.username}</p>
+                  </div>
+                </div>
+              
+            );
+          })}
+        
+      </div>
+     
+    </div>
+    
+    </>
+  )
+}
+
+export default RoomLobby
\ No newline at end of file
diff --git a/FrontendTemplate/src/pages/friends_page/chat.jsx b/FrontendTemplate/src/pages/friends_page/chat.jsx
index 00b07e4..1c1d75d 100644
--- a/FrontendTemplate/src/pages/friends_page/chat.jsx
+++ b/FrontendTemplate/src/pages/friends_page/chat.jsx
@@ -27,14 +27,14 @@ function Chat({ socket, username, room }) {
 
   useEffect(() => {
 
-    socket.emit("my_room", { room, username });
+    
     socket.on("receive_message", (data) => {
       setMessageList((list) => [...list, data]);
       
     });
 
     return () => socket.removeListener('receive_message')
-  }, [socket, room, username]);
+  }, [socket]);
 
   return (
     <Wrapper>
diff --git a/FrontendTemplate/src/pages/multiplayer_page/DummyLobby.jsx b/FrontendTemplate/src/pages/multiplayer_page/DummyLobby.jsx
new file mode 100644
index 0000000..964fc8a
--- /dev/null
+++ b/FrontendTemplate/src/pages/multiplayer_page/DummyLobby.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import io from "socket.io-client";
+import { useState } from "react";
+const socket = io.connect("http://localhost:3001");
+
+const DummyLobby = () => {
+
+    const [username, setUsername] = useState("");
+    const [room, setRoom] = useState("");
+    const [showChat, setShowChat] = useState(false);
+
+    const joinRoom = () => {
+        if (username !== "" && room !== "") {
+          
+          socket.emit("join_room", room); 
+          setShowChat(true);
+        }
+      };
+    
+ 
+    return (
+        <div className="joinChatContainer">
+        <h3>Join A Game Lobby</h3>
+        <input
+          type="text"
+          placeholder="hola..."
+          onChange={(event) => {
+            setUsername(event.target.value);
+          }}
+        />
+        <input
+          type="text"
+          placeholder="Room ID..."
+          onChange={(event) => {
+            setRoom(event.target.value);
+          }}
+        />
+        <button onClick={joinRoom}>Join A Room</button>
+
+        {!ShowChat ? <div>Hello</div> : <div>Nice</div>
+            
+        }
+      </div>
+  )
+}
+
+export default DummyLobby;
\ No newline at end of file
diff --git a/FrontendTemplate/src/routes/routesLib.jsx b/FrontendTemplate/src/routes/routesLib.jsx
index 7926f85..f117672 100644
--- a/FrontendTemplate/src/routes/routesLib.jsx
+++ b/FrontendTemplate/src/routes/routesLib.jsx
@@ -7,6 +7,7 @@ import Friend_page from "../pages/friends_page/Friend_page";
 import FriendsPage from "../pages/friends_page/FriendsPage";
 import Multiplayer from "../pages/multiplayer_page/Multiplayer";
 import Lobby from "../pages/multiplayer_page/Lobby";
+import DummyLobby from "../pages/multiplayer_page/DummyLobby";
 
 function RoutesLib() {
   return (
@@ -17,7 +18,8 @@ function RoutesLib() {
           <Route path="/home" element={<HomePage />} />
           <Route path="/ai" element={<AIPage />} />
           <Route path="/room" element={<FriendsPage />} />
-          <Route path="/lobby" element={<Lobby />} />
+          <Route path="/lobby" element={<Friend_page />} />
+
           <Route path="/multiplayer" element={<Multiplayer />} />
         </Routes>
       </BrowserRouter>

From 5870be33f62384014c54ba5c45e805514cc1efd6 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Mon, 1 Jan 2024 23:48:15 +0600
Subject: [PATCH 08/21] username to lobby

---
 .../src/pages/friends_page/FriendsPage.jsx    | 102 +++++++++---------
 .../src/pages/friends_page/RoomLobby.jsx      |  80 ++++++--------
 .../src/pages/multiplayer_page/Lobby.css      |   1 +
 .../src/pages/multiplayer_page/Lobby.jsx      |  22 ++--
 FrontendTemplate/src/routes/routesLib.jsx     |   4 +-
 5 files changed, 103 insertions(+), 106 deletions(-)

diff --git a/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
index 716150f..597ebca 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
@@ -4,70 +4,74 @@ import appLogo from "../../assets/appLogo.png";
 import avatars from "../../components/avatars";
 import { Input, Button } from "antd";
 import { useLocation, useNavigate } from "react-router-dom";
+import RoomLobby from "./RoomLobby";
 
 const socket = io.connect("http://localhost:3001");
 
 function FriendsPage() {
-  const [username, setUsername] = useState("");
+ // const [username, setUsername] = useState("");
   const [room, setRoom] = useState("");
+  const [showChat, setShowChat] = useState(false);
   const userData = useLocation().state;
   const navigate = useNavigate();
 
   const joinRoom = () => {
-    if (username !== "" && room !== "") {
+    if (userData.username !== "" && room !== "") {
+      const messageData = {
+        room: room,
+        username: userData.username,
+        
+      };
       // jekono api call er jonno ei socket id "socket" or api address ta lagbe.
-      socket.emit("join_room", room); // "join_room" api link er sathe value send korbe
-      // NAVIGATE
+      socket.emit("join_room", messageData); // "join_room" api link er sathe value send korbe
+      setShowChat(true);
+
+      
     }
   };
 
   return (
     <>
-      <div className="landing-canvas">
-        <div className="landing-left">
-          <img src={appLogo} alt="Chor Dakat Babu Police" />
-        </div>
-        <div className="landing-right">
-          <div className="landing-avatar">
-            <img src={avatars[userData.avatar]} alt="avatar" />
-          </div>
-          <div>
-            <b>{userData.username}</b>
-          </div>
-          <Input
-            placeholder="Enter Room ID"
-            className="username-input"
-            onChange={(e) => setRoom(e.target.value)}
-          />
-          <Button
-            onClick={() => {
-              !room
-                ? alert("enter room id first")
-                : navigate("/lobby", {                  
-                    state: {
-                        ...userData,
-                      roomId: room,
-                    },
-                  });
-            }}
-          >
-            JOIN
-          </Button>
-          <br />
-          <Button
-            onClick={() => {              
-              navigate("/lobby", {
-                state: {
-                  ...userData,
-                  roomId: "RANDOM",
-                },
-              });
-            }}
-          >
-            CREATE
-          </Button>
-        </div>
-      </div>
+    {!showChat ? (
+         <div className="landing-canvas">
+         <div className="landing-left">
+           <img src={appLogo} alt="Chor Dakat Babu Police" />
+         </div>
+         <div className="landing-right">
+           <div className="landing-avatar">
+             <img src={avatars[userData.avatar]} alt="avatar" />
+           </div>
+           <div>
+             <b>{userData.username}</b>
+           </div>
+           <Input
+             placeholder="Enter Room ID"
+             className="username-input"
+             onChange={(e) => setRoom(e.target.value)}
+           />
+           <Button onClick={joinRoom}>
+             JOIN
+           </Button>
+           <br />
+           <Button
+             onClick={() => {              
+               navigate("/lobby", {
+                 state: {
+                   ...userData,
+                   roomId: "RANDOM",
+                 },
+               });
+             }}
+           >
+             CREATE
+           </Button>
+         </div>
+       </div>
+      ) : (
+        <RoomLobby socket={socket} username={userData.username} room={room} />
+      )}
+    
+     
     </>
   );
 }
diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
index 6fa5991..8cb355c 100644
--- a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -1,38 +1,44 @@
 import React, { useEffect, useState } from "react";
 import ScrollToBottom from "react-scroll-to-bottom";
 import styled from "styled-components";
+import "../multiplayer_page/Lobby.css";
+import avatars from "../../components/avatars";
+import { Button } from "antd";
+import { useLocation, useNavigate } from "react-router-dom";
+
 
 const RoomLobby = ({ socket, username, room }) => {
     const [currentMessage, setCurrentMessage] = useState("");
   const [messageList, setMessageList] = useState([]);
   const [userval, setUserVal]= useState(false);
   const [users, setUsers] = useState([]);
+  const [player2, setPlayer2]= useState("Player 2");
+  const [player3, setPlayer3]= useState("Player 3");
+  const [player4, setPlayer4]= useState("Player 4");
 
-  const sendMessage = async () => {
-    
-      const messageData = {
-        room: room,
-        author: username,
-        
-      };
+  const [players , setPlayers] = useState([
 
-      await socket.emit("send_person", messageData);
-      
-      
+    {avatar: 1, username: username, isHost: true},
+    {avatar: 2, username: player2, isHost: false},
+    {avatar: 3, username: player3, isHost: false},
+    {avatar: 4, username: player4, isHost: false},
 
-  };
+]);
 
-//   useEffect(() => {
 
-//     console.log(messageList);
-    
-// }, []);
 
 useEffect(() => {
     if (socket) {
       socket.on('users_list', (users) => {
-        console.log(users);
+        console.log(users.length);
+        
         setUsers(users);
+        if(users.length >= 2){
+            // setPlayer2( users[1].username);
+            // console.log(player2);
+            
+            
+        }
       });
     }
     return () => {
@@ -42,35 +48,9 @@ useEffect(() => {
       };
   }, [socket]);
 
-  useEffect(() => {
-    if(!userval){
-        const messageData = {
-            room: room,
-            author: username,
-            
-          };
-          setMessageList((list) => [messageData]);
-          setUserVal(true);
-    }
-    
-    socket.on("receive_message", (data) => {
-      
-        const existingMessageIndex = messageList.findIndex(
-            (message) => message.author === username
-          );
-      
-          if (existingMessageIndex === -1) {
-            setMessageList((list) => [...list, data]);
-          }
-       // setMessageList((list) => [...list, data]);
-      
-      
-    });
 
-    return () => socket.removeListener('receive_message')
-  }, [socket]);
 
-  //joined room
+
 
  
  
@@ -78,7 +58,14 @@ useEffect(() => {
   
   return (
     <>
-    <div className="chat-window">
+    <center className="lobby-code">LOBBY CODE</center>
+        <center className="lobby-code">{room}</center>
+        <div className="lobby-container">
+            {players.map((player) => {
+                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {players.username} </span>
+                 {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
+            })}        
+        </div>  
       
       <div className="persons-body">
         
@@ -92,7 +79,7 @@ useEffect(() => {
                 
                   
                   <div className="message-meta">
-                  <p id="author"></p>
+                  
                     <p id="author">{messageContent.username}</p>
                   </div>
                 </div>
@@ -101,8 +88,9 @@ useEffect(() => {
           })}
         
       </div>
+      
      
-    </div>
+  
     
     </>
   )
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Lobby.css b/FrontendTemplate/src/pages/multiplayer_page/Lobby.css
index d1bb0cb..604fba2 100644
--- a/FrontendTemplate/src/pages/multiplayer_page/Lobby.css
+++ b/FrontendTemplate/src/pages/multiplayer_page/Lobby.css
@@ -3,6 +3,7 @@
     justify-content: space-evenly;
     align-items: center;
     flex-wrap: wrap;
+    
 }
 
 .lobby-card{
diff --git a/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
index ad1ff77..3dea167 100644
--- a/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
+++ b/FrontendTemplate/src/pages/multiplayer_page/Lobby.jsx
@@ -2,28 +2,31 @@ import "./Lobby.css";
 import avatars from "../../components/avatars";
 import { Button } from "antd";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
-export default function Lobby() {
+const Lobby = ({ socket, username, room }) => {
 
     const userData = useLocation().state;
     const navigate = useNavigate();
+    const [users, setUsers] = useState([]);
 
     const [players , setPlayers] = useState([
 
-        {avatar: 1, username: "mehraj", isHost: true},
+        {avatar: 1, username: username, isHost: true},
         {avatar: 2, username: "amit", isHost: false},
         {avatar: 3, username: "sakib", isHost: false},
         {avatar: 4, username: "akib", isHost: false},
 
     ]);
 
-    return <>
+    return (
+    <>
         <center className="lobby-code">LOBBY CODE</center>
-        <center className="lobby-code">{userData.roomId}</center>
+        <center className="lobby-code">{room}</center>
         <div className="lobby-container">
             {players.map((player) => {
-                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {player.username} </span> {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
+                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {player.username} </span>
+                 {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
             })}        
         </div>   
         <center><Button onClick={
@@ -32,6 +35,9 @@ export default function Lobby() {
                 players: players,
             }})
         }> Start Game </Button></center>
-    </>;
+    </>
+    )
 
-}
\ No newline at end of file
+}
+
+export default Lobby
\ No newline at end of file
diff --git a/FrontendTemplate/src/routes/routesLib.jsx b/FrontendTemplate/src/routes/routesLib.jsx
index f117672..7926f85 100644
--- a/FrontendTemplate/src/routes/routesLib.jsx
+++ b/FrontendTemplate/src/routes/routesLib.jsx
@@ -7,7 +7,6 @@ import Friend_page from "../pages/friends_page/Friend_page";
 import FriendsPage from "../pages/friends_page/FriendsPage";
 import Multiplayer from "../pages/multiplayer_page/Multiplayer";
 import Lobby from "../pages/multiplayer_page/Lobby";
-import DummyLobby from "../pages/multiplayer_page/DummyLobby";
 
 function RoutesLib() {
   return (
@@ -18,8 +17,7 @@ function RoutesLib() {
           <Route path="/home" element={<HomePage />} />
           <Route path="/ai" element={<AIPage />} />
           <Route path="/room" element={<FriendsPage />} />
-          <Route path="/lobby" element={<Friend_page />} />
-
+          <Route path="/lobby" element={<Lobby />} />
           <Route path="/multiplayer" element={<Multiplayer />} />
         </Routes>
       </BrowserRouter>

From 53b96f592765b2a716bf35a5a1350dc882296ec7 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Mon, 1 Jan 2024 23:51:58 +0600
Subject: [PATCH 09/21] dummy player name

---
 FrontendTemplate/src/pages/friends_page/RoomLobby.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
index 8cb355c..6a8d41e 100644
--- a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -33,11 +33,10 @@ useEffect(() => {
         console.log(users.length);
         
         setUsers(users);
-        if(users.length >= 2){
+        if(users.length === 2){
             // setPlayer2( users[1].username);
             // console.log(player2);
             
-            
         }
       });
     }
@@ -62,7 +61,7 @@ useEffect(() => {
         <center className="lobby-code">{room}</center>
         <div className="lobby-container">
             {players.map((player) => {
-                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {players.username} </span>
+                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {player.username} </span>
                  {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
             })}        
         </div>  

From d2b4dd69aaded79a70678cdc0c38077ad98c923b Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Tue, 2 Jan 2024 06:59:26 +0600
Subject: [PATCH 10/21] avatar added

---
 BakcendTemplate/app.js                        |  9 +++---
 FrontendTemplate/src/pages/ai_page/AIPage.jsx | 15 ----------
 .../src/pages/friends_page/RoomLobby.jsx      | 30 +++++++++----------
 3 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index 3f5185f..494ca26 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -20,14 +20,13 @@ io.on("connection", (socket) => {
   
     socket.on("join_room", (data) => {
       socket.join(data.room);
-
-      if (usersInRoom[data.room].length > 4) {
-        // Clear the array
+      if (!usersInRoom[data.room]) {
         usersInRoom[data.room] = [];
-        console.log(`Cleared users in room ${data.room}`);
       }
+
+      if(data.username !== ""){
       usersInRoom[data.room].push({ id: socket.id, username: data.username });
-  
+      }
      
       // Emit the updated list of users to the frontend
       io.to(data.room).emit("users_list", usersInRoom[data.room]);
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index 87f3504..d914f45 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -30,21 +30,6 @@ export default function AIPage() {
     console.log("rerender");
   }, [scores]);
 
-  // useEffect(() => {
-    
-  //   const selectRandomNames = () => {
-  //     const shuffledNames = [...peopleNames];
-      
-  //     for (let i = shuffledNames.length - 1; i > 0; i--) {
-  //       const j = Math.floor(Math.random() * (i + 1));
-  //       [shuffledNames[i], shuffledNames[j]] = [shuffledNames[j], shuffledNames[i]];
-  //     }
-  //     return shuffledNames.slice(0, 2);
-  //   };
-
-  //   // Set selected names when component mounts
-  //   setSelectedNames(selectRandomNames());
-  // }, []);
 
   function update(new_score){
     setScore(new_score);
diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
index 6a8d41e..8311e99 100644
--- a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -32,11 +32,12 @@ useEffect(() => {
       socket.on('users_list', (users) => {
         console.log(users.length);
         
-        setUsers(users);
-        if(users.length === 2){
+        
+        if(users.length <= 4){
             // setPlayer2( users[1].username);
             // console.log(player2);
-            
+
+            setUsers(users);
         }
       });
     }
@@ -59,34 +60,31 @@ useEffect(() => {
     <>
     <center className="lobby-code">LOBBY CODE</center>
         <center className="lobby-code">{room}</center>
-        <div className="lobby-container">
-            {players.map((player) => {
-                return <div className="lobby-card"><img src={avatars[player.avatar]} alt="" /> <span> {player.username} </span>
-                 {!player.isHost && (<Button onClick={() => {}}> Kick </Button>) }</div>;
-            })}        
-        </div>  
+        
+        
       
-      <div className="persons-body">
+      <div className="lobby-container">
         
           {
           
-          users.map((messageContent) => {
+          users.map((messageContent, index) => {
             
             return (
               
-                <div >
+                
                 
                   
-                  <div className="message-meta">
-                  
-                    <p id="author">{messageContent.username}</p>
+                  <div className="lobby-card" key={index}>
+                  <img src={avatars[index+1]} alt="" /> 
+                    <span id="author"> {messageContent.username}</span>
                   </div>
-                </div>
+                
               
             );
           })}
         
       </div>
+      <center><Button > Start Game </Button></center>
       
      
   

From 49991392cb63fe5c5bb1193ce5cd8506e9310207 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Tue, 2 Jan 2024 08:13:09 +0600
Subject: [PATCH 11/21] game board name updaed

---
 .../src/pages/friends_page/FriendsGame.css    | 46 +++++++++
 .../src/pages/friends_page/FriendsGame.jsx    | 98 +++++++++++++++++++
 .../src/pages/friends_page/RoomLobby.jsx      | 29 +++---
 FrontendTemplate/src/routes/routesLib.jsx     |  3 +-
 4 files changed, 159 insertions(+), 17 deletions(-)
 create mode 100644 FrontendTemplate/src/pages/friends_page/FriendsGame.css
 create mode 100644 FrontendTemplate/src/pages/friends_page/FriendsGame.jsx

diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.css b/FrontendTemplate/src/pages/friends_page/FriendsGame.css
new file mode 100644
index 0000000..872ff32
--- /dev/null
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.css
@@ -0,0 +1,46 @@
+.ai-canvas {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+}
+
+.ai-left {
+    width: 75vw;
+    height: 100%;
+}
+
+.ai-right {
+    text-align: center;
+    width: 25vw;    
+    background-color: rgb(209, 209, 209);
+}
+
+.leaderboard-body {
+    width: 100%;
+    display: flex;
+}
+
+.leaderboard-body::-webkit-scrollbar {
+    display: none;
+}
+
+.leaderboard-col {
+    width: 25%;
+    height: 100%;
+    border: 1px solid black;
+}
+
+@media (max-width: 768px) {
+    .ai-canvas{
+        flex-direction: column;        
+    }
+
+    .ai-left{
+        width: 100vw;
+        height: 75vh;
+    }
+
+    .ai-right {
+        width: 100vw;
+    }
+}
\ No newline at end of file
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
new file mode 100644
index 0000000..f2eca70
--- /dev/null
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -0,0 +1,98 @@
+
+import { FloatButton } from "antd";
+import { CommentOutlined } from "@ant-design/icons";
+import ChatModal from "../../components/ChatModal";
+import { useEffect, useState } from "react";
+import GameBoard from "../../components/GameBoard";
+
+import { addScore, getTotalScore } from "../../components/gameControllers";
+import { useLocation } from "react-router-dom";
+
+export default function FriensGame() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedNames, setSelectedNames] = useState([]);
+  const userData = useLocation().state;
+  var initiated = false;
+
+  const [scores, setScore] = useState([
+    ["Amit", 0, 100, 80, 60],
+    ["Mehraj", 0, 100, 80, 60],
+    ["Shawon", 0, 100, 80, 60],
+    ["Nafi", 0, 100, 80, 60],
+  ]);
+  const peopleNames = ["John", "Jane", "Alex", "Mark", "Ella", "Liam", "Lucy", "Finn", "Kate", "Ryan", "Emma", "Luke", "Rose", "Paul", "Lisa", "Jack", "Anna", "Eric", "Mia", "Jake"];
+
+  const round = [100, 0, 60, 40];
+  var totalScore = getTotalScore(scores);
+  console.log(totalScore);
+
+  useEffect(()=>{
+    console.log("rerender");
+    console.log(userData.players);
+  }, [scores]);
+
+
+  function update(new_score){
+    setScore(new_score);
+  }
+
+  function initiateGame() {
+    //setScore([[userData.username], ["bot-1"], ["bot-1"],["bot-1"],  ]);   
+    const currentTimestamp = new Date().getTime();
+    const randomValue = currentTimestamp % 19;
+    const a = userData.players[1];
+    const b = peopleNames[randomValue+1];
+    const c = peopleNames[randomValue+2];
+
+   // setSelectedNames([userData.username,a,b,c]);
+
+   const allPlayers = userData.players;
+const myName = userData.username;
+
+// Exclude the current user's name
+const otherPlayers = allPlayers.filter(player => player !== myName);
+
+// Set selectedNames with [myName, ...otherPlayers]
+setSelectedNames([myName, ...otherPlayers]);
+    
+    setScore([[userData.username], [a], [b],[c],  ]); 
+   
+    initiated = true;
+  }
+
+  useEffect(() => {
+    if (!initiated) initiateGame();
+  }, []);
+
+  return (
+    <>
+      <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      <FloatButton
+        icon={<CommentOutlined />}
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      />
+      <div className="ai-canvas">
+        <div className="ai-left">
+          <GameBoard totalScore={totalScore} scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
+        </div>
+        <div className="ai-right">
+          <div>LEADERBOARD</div>
+          <div className="leaderboard-body">
+            {scores.map((score, index) => (
+              <div className="leaderboard-col" key={index}>
+                {score.map((point, idx) => (
+                  <span key={idx}>
+                    {point}
+                    <br />
+                  </span>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
index 8311e99..8d679af 100644
--- a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -15,7 +15,10 @@ const RoomLobby = ({ socket, username, room }) => {
   const [player2, setPlayer2]= useState("Player 2");
   const [player3, setPlayer3]= useState("Player 3");
   const [player4, setPlayer4]= useState("Player 4");
+  const [gameStart, SetGameStart]= useState(false);
 
+  const userData = useLocation().state;
+  const navigate = useNavigate();
   const [players , setPlayers] = useState([
 
     {avatar: 1, username: username, isHost: true},
@@ -24,6 +27,15 @@ const RoomLobby = ({ socket, username, room }) => {
     {avatar: 4, username: player4, isHost: false},
 
 ]);
+const gameStarted = () => {
+  const usernames = users.map(user => user.username);
+
+   // Navigate to another page and pass usernames as state
+   navigate("/multiplayer", {state : {
+    ...userData,
+    players: usernames,
+}})
+};
 
 
 
@@ -48,13 +60,6 @@ useEffect(() => {
       };
   }, [socket]);
 
-
-
-
-
- 
- 
-
   
   return (
     <>
@@ -70,24 +75,16 @@ useEffect(() => {
           users.map((messageContent, index) => {
             
             return (
-              
-                
-                
-                  
                   <div className="lobby-card" key={index}>
                   <img src={avatars[index+1]} alt="" /> 
                     <span id="author"> {messageContent.username}</span>
                   </div>
-                
-              
             );
           })}
         
       </div>
-      <center><Button > Start Game </Button></center>
+      <center><Button onClick={gameStarted}> Start Game </Button></center>
       
-     
-  
     
     </>
   )
diff --git a/FrontendTemplate/src/routes/routesLib.jsx b/FrontendTemplate/src/routes/routesLib.jsx
index 7926f85..663c350 100644
--- a/FrontendTemplate/src/routes/routesLib.jsx
+++ b/FrontendTemplate/src/routes/routesLib.jsx
@@ -7,6 +7,7 @@ import Friend_page from "../pages/friends_page/Friend_page";
 import FriendsPage from "../pages/friends_page/FriendsPage";
 import Multiplayer from "../pages/multiplayer_page/Multiplayer";
 import Lobby from "../pages/multiplayer_page/Lobby";
+import FriensGame from "../pages/friends_page/FriendsGame";
 
 function RoutesLib() {
   return (
@@ -18,7 +19,7 @@ function RoutesLib() {
           <Route path="/ai" element={<AIPage />} />
           <Route path="/room" element={<FriendsPage />} />
           <Route path="/lobby" element={<Lobby />} />
-          <Route path="/multiplayer" element={<Multiplayer />} />
+          <Route path="/multiplayer" element={<FriensGame />} />
         </Routes>
       </BrowserRouter>
     </>

From 9e76fa82506baadcfd8de7f78dac93fd15acf8dd Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Tue, 2 Jan 2024 08:42:11 +0600
Subject: [PATCH 12/21] leader board name update

---
 FrontendTemplate/src/pages/friends_page/FriendsGame.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
index f2eca70..9987438 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -55,7 +55,7 @@ const otherPlayers = allPlayers.filter(player => player !== myName);
 // Set selectedNames with [myName, ...otherPlayers]
 setSelectedNames([myName, ...otherPlayers]);
     
-    setScore([[userData.username], [a], [b],[c],  ]); 
+    setScore([[userData.username], [otherPlayers[0]], [otherPlayers[1]],[otherPlayers[2]],  ]); 
    
     initiated = true;
   }

From 4aa70983731a214879e35ea27f89806289905177 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Tue, 2 Jan 2024 18:24:09 +0600
Subject: [PATCH 13/21] updated all

---
 BakcendTemplate/app.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index 494ca26..d4e986b 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -35,11 +35,11 @@ io.on("connection", (socket) => {
     });
 
 
-    socket.on("send_person", (data) => {
-      console.log(data);
-    
-      socket.to(data.room).emit("receive_message", data);
-    });
+  
+    //guti shake
+    // ke konta paise 
+    //police kare dhorse
+    //coninue
 
     socket.on("send_message", (data) => {
         console.log(data);

From 99b0c0804d7810a2d5ae975facf8b48ae0ac62cb Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Wed, 3 Jan 2024 03:28:49 +0600
Subject: [PATCH 14/21] added socket connection to custom game

---
 BakcendTemplate/app.js                        |  32 +-
 .../src/components/GameBoardOnline.jsx        | 124 ++++++
 .../src/components/GutiButtonOnline.jsx       | 371 ++++++++++++++++++
 .../src/components/ShakeHandOnline.jsx        | 146 +++++++
 .../src/pages/friends_page/FriendsGame.jsx    |  91 +++--
 .../src/pages/friends_page/FriendsPage.jsx    |   3 +-
 .../src/pages/friends_page/RoomLobby.jsx      | 145 ++++---
 7 files changed, 800 insertions(+), 112 deletions(-)
 create mode 100644 FrontendTemplate/src/components/GameBoardOnline.jsx
 create mode 100644 FrontendTemplate/src/components/GutiButtonOnline.jsx
 create mode 100644 FrontendTemplate/src/components/ShakeHandOnline.jsx

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index d4e986b..92acc55 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -14,7 +14,7 @@ const io = new Server(server, {
     methods: ["GET", "POST"],
   },
 });
-const usersInRoom = {};
+const usersInRoom = {}, curShuffle = {};
 io.on("connection", (socket) => {
 
   
@@ -30,13 +30,27 @@ io.on("connection", (socket) => {
      
       // Emit the updated list of users to the frontend
       io.to(data.room).emit("users_list", usersInRoom[data.room]);
-      
+      console.log(usersInRoom[data.room]);
      
     });
 
 
-  
+    socket.on("notify_others_to_start", (data) => {
+      const isStart = true;
+      curShuffle[data.room] = [];
+      io.to(data.room).emit("start_game", isStart);      
+      console.log(curShuffle);
+    });
+
+
     //guti shake
+    socket.on("guti_shake", (data) => {
+      curShuffle[data.room] = data.shuffleArray;
+      io.to(data.room).emit("recieve_shuffle", curShuffle[data.room]);
+      console.log("shuffle recived and sent to all", curShuffle[data.room]);
+    });
+
+
     // ke konta paise 
     //police kare dhorse
     //coninue
@@ -46,10 +60,18 @@ io.on("connection", (socket) => {
         socket.to(data.room).emit("receive_message", data);
       });
 
+      socket.on("berhoa", (data) => {
+        
+        usersInRoom[data.roomId] = usersInRoom[data.roomId].filter(user => user.id !== socket.id);
+        
+        io.to(data.roomId).emit("users_list", usersInRoom[data.roomId]);
+        console.log(usersInRoom[data.roomId]);
+      });
+
      
   socket.on("disconnect", () => {
-    console.log("User Disconnected", socket.id);
-  });
+    console.log("User Disconnected",  socket.id);    
+  });  
 });
 
 
diff --git a/FrontendTemplate/src/components/GameBoardOnline.jsx b/FrontendTemplate/src/components/GameBoardOnline.jsx
new file mode 100644
index 0000000..defa91e
--- /dev/null
+++ b/FrontendTemplate/src/components/GameBoardOnline.jsx
@@ -0,0 +1,124 @@
+import React from "react";
+import styled from "styled-components";
+import Players from "./Players";
+import ShakeHandOnline from "./ShakeHandOnline";
+
+const GameBoardOnline = ({
+  totalScore,
+  scores,
+  addScore,
+  setScore,
+  playerName,
+  socket,
+  username,
+  room
+}) => {
+  // Replace with the actual player name
+  const playerImage = "";
+
+  return (
+    <Wrapper>
+      <div className="game-board">
+        <div className="player1">
+          <div>
+            <Players
+              playerName={playerName[3]}
+              playerImage={playerImage}
+              playerScore={totalScore[3]}
+              isTopBtm={true}
+            />
+          </div>
+        </div>
+        <div className="player2n4">
+          <div className="player2">
+            <Players
+              playerName={playerName[1]}
+              playerImage={playerImage}
+              playerScore={totalScore[1]}
+              isTopBtm={false}
+            />
+          </div>
+          <div id="shake">
+            <ShakeHandOnline
+              scores={scores}
+              addScore={addScore}
+              setScore={setScore}
+              playerName={playerName}
+              socket={socket}
+              username={username}
+              room = {room}
+            />
+          </div>
+          <div id="player4">
+            <Players
+              playerName={playerName[2]}
+              playerImage={playerImage}
+              playerScore={totalScore[2]}
+              isTopBtm={false}
+            />
+          </div>
+        </div>
+
+        <div className="player1">
+          <Players
+            playerName={playerName[0]}
+            playerImage={playerImage}
+            playerScore={totalScore[0]}
+            isTopBtm={true}
+          />
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  .game-board {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 75vw;
+  }
+  .player2n4 {
+    display: flex;
+    flex-grow: 1;
+  }
+  .player2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #shake {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #player4 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .player1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: 768px) {
+    .game-board {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 75vh;
+    }
+    .player2n4 {
+      display: flex;
+      flex-grow: 1;
+      justify-content: space-between;
+    }
+  }
+`;
+
+export default GameBoardOnline;
diff --git a/FrontendTemplate/src/components/GutiButtonOnline.jsx b/FrontendTemplate/src/components/GutiButtonOnline.jsx
new file mode 100644
index 0000000..2fae02a
--- /dev/null
+++ b/FrontendTemplate/src/components/GutiButtonOnline.jsx
@@ -0,0 +1,371 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import kagoj from "../assets/kagoj.png";
+import babu from "../assets/babu.png";
+import police from "../assets/police.png";
+import chor from "../assets/chor.png";
+import dakat from "../assets/dakat.png";
+import { Button } from "antd";
+
+const GutiButtonOnline = ({
+  playerName,
+  shufArray,
+  restart,
+  scores,
+  addScore,
+  setScore,
+  socket,
+  username,
+  room
+}) => {
+  const [showButton, setShowButton] = useState(true);
+  const [showImage, setShowImage] = useState(false);
+  const [selectedButton, setSelectedButton] = useState(null);
+  const [policeState, setPoliceState] = useState(false);
+  const [lastState, setLastState] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [policeGuess, setPoliceGuess] = useState(-1);
+  const [isChor, setIsChor] = useState(true);
+  const gotImage = [chor, dakat, police, babu];
+  const bangla = ["চোর", "ডাকাত", "পুলিশ", "বাবু"];
+  var curscore = [0, 0, 0, 0];
+
+  var selectedIndex;
+
+  const myguti = 0;
+  console.log(shufArray);
+
+  useEffect(() => {
+    setIsChor(scores[0].length % 2 == 0);
+    console.log(isChor);
+  }, []);
+
+  const buttonClicking = (index) => {
+    //console.log("before " + shufArray);
+    //console.log("index : " + index);
+    const tmp = shufArray[index];
+    shufArray[index] = shufArray[0];
+    shufArray[0] = tmp;
+    //console.log("after" + shufArray);
+    setSelectedImage(shufArray[0]);
+
+    // TODO : DISTRIBUTE 3 to ai
+    // res: [0, 1, 3, 2]
+
+    setShowButton(false);
+    setShowImage(true);
+    setSelectedButton(index);
+  };
+
+  const imageClick = () => {
+    setShowImage(false);
+    setPoliceState(true);
+    // render new component
+    // police_success = 0 / 1
+  };
+
+  function getPolice(x) {
+    for (let i = 0; i < 4; i++) {
+      if (shufArray[i] == x) return playerName[i];
+    }
+  }
+
+  function getChorDakat() {
+    var ans = [];
+    for (var i = 0; i < 4; i++) {
+      if (shufArray[i] < 2) ans.push(i);
+    }
+    return ans;
+  }
+
+  function isPoliceCorrect() {
+    if (isChor && shufArray[policeGuess] == 0) return true;
+    else if (!isChor && shufArray[policeGuess] == 1) return true;
+    else {
+      const currentTimestamp = new Date().getTime();
+      const randomValue = currentTimestamp % 2;
+
+      if (randomValue == 0) {
+        return true;
+      } else return false;
+    }
+    return false;
+  }
+
+  function getScore() {
+    const newScores = [0, 0, 0, 0]; // Create a new array to store the updated scores
+
+    for (let i = 0; i < 4; i++) {
+      if (shufArray[i] === 3) newScores[i] = 100;
+      else if (shufArray[i] === 2 && isPoliceCorrect()) newScores[i] = 80;
+      else if (shufArray[i] === 1) {
+        if (isPoliceCorrect() && !isChor) {
+          // Do nothing, leave newScores[i] as 0
+        } else newScores[i] = 60;
+      } else if (shufArray[i] === 0) {
+        if (isPoliceCorrect() && isChor) {
+          // Do nothing, leave newScores[i] as 0
+        } else newScores[i] = 40;
+      }
+    }
+
+    return newScores;
+  }
+
+  return (
+    <Wrapper>
+      <div className="guti-buttons">
+        <div className="gutis">
+          {lastState && (
+            <div className="last-card">
+              {isPoliceCorrect() ? "পুলিশ সঠিক ধরেছেন" : "পুলিশ ভূল ধরেছেন"}{" "}
+              <br />
+              চোর <span>{isChor && isPoliceCorrect() ? "+০" : "+৪০"}</span>{" "}
+              <br />
+              ডাকাত <span>
+                {!isChor && isPoliceCorrect() ? "+০" : "+৬০"}
+              </span>{" "}
+              <br />
+              বাবু <span>+১০০</span> <br />
+              পুলিশ <span>{isPoliceCorrect() ? "+৮০" : "+০"}</span> <br />
+              <Button
+                onClick={() => {
+                  setLastState(false);
+                  curscore = getScore();
+                  setScore(addScore(curscore, scores));
+                  restart();
+                }}
+              >
+                {" "}
+                continue{" "}
+              </Button>
+            </div>
+          )}
+          {policeState && (
+            <div className="police-state">
+              <div className="police-state-top">
+                <div className="police-state-top-left">
+                  <img src={gotImage[selectedImage]} alt="" />
+                </div>
+                <div className="police-state-top-right">
+                  <div>
+                    আপনি পেয়েছেনঃ &nbsp; <b>{bangla[selectedImage]}</b>
+                  </div>
+                  <div>
+                    {selectedImage != 2 && (
+                      <span>
+                        পুলিশ হলোঃ &nbsp; <b> {getPolice(2)}</b>
+                      </span>
+                    )}
+                    {selectedImage == 2 && (
+                      <span>
+                        বাবু হলোঃ &nbsp; <b> {getPolice(3)}</b>
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div>
+                {" "}
+                <center>
+                  {" "}
+                  {isChor == true ? "চোর কে ধরুন" : "ডাকাত কে ধরুন"}{" "}
+                </center>{" "}
+              </div>
+              <div className="police-state-btm">
+                {selectedImage == 2 && (
+                  <div classsName="police-state-btm">
+                    <Button
+                      className="jayga"
+                      onClick={() => {
+                        setLastState(true);
+                        setPoliceState(false);
+                        setPoliceGuess(getChorDakat()[0]);
+                      }}
+                    >
+                      {getChorDakat()[0]}
+                    </Button>
+                    <Button
+                      className="jayga"
+                      onClick={() => {
+                        setLastState(true);
+                        setPoliceState(false);
+                        setPoliceGuess(getChorDakat()[1]);
+                      }}
+                    >
+                      {getChorDakat()[1]}
+                    </Button>
+                  </div>
+                )}
+                {selectedImage != 2 && (
+                  <Button
+                    onClick={() => {
+                      setLastState(true);
+                      setPoliceState(false);
+                    }}
+                  >
+                    Continue
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+          <div className="guti-row">
+            {Array.from({ length: 2 }, (_, index) => (
+              <div key={index} className="guti">
+                {showButton && (
+                  <button onClick={() => buttonClicking(index)}>
+                    <img src={kagoj} alt="Button Image" />
+                  </button>
+                )}
+                {showImage && selectedButton === index && (
+                  <img
+                    id="shah"
+                    //here put image source;
+                    src={gotImage[selectedImage]} // use the index to access the array element
+                    alt="Displayed Image"
+                    onClick={() => {
+                      imageClick();
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="guti-row">
+            {Array.from({ length: 2 }, (_, index) => (
+              <div key={index + 2} className="guti">
+                {showButton && (
+                  <button onClick={() => buttonClicking(index + 2)}>
+                    <img src={kagoj} alt="Button Image" />
+                  </button>
+                )}
+                {showImage && selectedButton === index + 2 && (
+                  <img
+                    id="shah"
+                    src={gotImage[selectedImage]}
+                    alt="Displayed Image"
+                    onClick={() => {
+                      imageClick();
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  .guti-buttons {
+    width: 80%;
+    height: 80%;
+  }
+  .gutis {
+    display: flex;
+  }
+
+  img {
+    height: 100px;
+    width: 100px;
+    object-fit: cover;
+    animation: shake 0.5s ease-in-out infinite;
+  }
+
+  .last-card {
+    width: 300px;
+    font-size: 18px;
+    text-align: center;
+  }
+
+  .police-state-top-left img {
+    height: 100px;
+    width: 100px;
+    object-fit: cover;
+    animation: none;
+  }
+
+  #shah {
+    height: 100%;
+    width: 100%;
+  }
+
+  .police-state {
+  }
+
+  .police-state-top {
+    height: 200px;
+    width: 350px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .police-state-top-left {
+    width: 50%;
+  }
+
+  .police-state-top-left img {
+    width: 80% !important;
+    height: 100%;
+  }
+
+  .police-state-top-right {
+    width: 50%;
+  }
+
+  .jayga {
+    margin: 10px;
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+
+  .police-state-btm {
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @media (max-width: 768px) {
+    #shah {
+      height: 200px;
+      width: 200px;
+    }
+    img {
+      height: 80px;
+      width: 80px;
+      object-fit: cover;
+    }
+    .police-state-top {
+      height: 80px;
+      width: 170px;
+      font-size: 10px;
+    }
+    .jayga {
+      margin: 10px;
+    }
+  }
+  @keyframes shake {
+    0% {
+      transform: translate(0);
+    }
+    25% {
+      transform: translate(0, -5px);
+    }
+    50% {
+      transform: translate(0, 5px);
+    }
+    75% {
+      transform: translate(0, -5px);
+    }
+    100% {
+      transform: translate(0);
+    }
+  }
+`;
+
+export default GutiButtonOnline;
diff --git a/FrontendTemplate/src/components/ShakeHandOnline.jsx b/FrontendTemplate/src/components/ShakeHandOnline.jsx
new file mode 100644
index 0000000..6c3f551
--- /dev/null
+++ b/FrontendTemplate/src/components/ShakeHandOnline.jsx
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import shake from "../assets/shuffle.gif";
+import GutiButtonOnline from "./GutiButtonOnline";
+
+const ShakeHandOnline = ({
+  scores,
+  addScore,
+  setScore,
+  playerName,
+  socket,
+  username,
+  room
+}) => {
+  const [showButton, setShowButton] = useState(false);
+  const [showImage, setShowImage] = useState(false);
+  const [showGuti, setGuti] = useState(false);
+  const [shuffledArray, setShuffledArray] = useState([0, 1, 2, 3]);
+
+  const shuffleArray = (array) => {
+    let newArray = array.slice(); // Create a copy of the original array
+    for (let i = newArray.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+    }
+    return newArray;
+  };
+
+  useEffect(() => {
+    console.log(scores[scores[0].length % 4][0]);
+    if (username === scores[scores[0].length % 4][0]) {
+      setShowButton(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (socket) {      
+      socket.on("recieve_shuffle", (curShuff) => {
+        console.log(curShuff);
+      });
+    }
+    return () => {
+      if (socket) {
+        socket.off("recieve_shuffle");
+      }
+    };
+  }, [socket]);
+
+  const handleButtonClick = () => {    
+    socket.emit("guti_shake", { room: room, shuffleArray: shuffleArray(shuffledArray) });
+
+    // setShowButton(false);
+    // setShowImage(true);
+
+    // setTimeout(() => {
+    //     setShowImage(false);
+    //     setGuti(true);
+    //   }, 4200);
+  };
+
+  //   useEffect(() => {
+  //     if (showGuti) {
+
+  //       console.log('4200ms passed. Now show another div or perform other actions.');
+  //     }
+  //   }, [showGuti]);
+
+  return (
+    <Wrapper>
+      <div className="shakee">
+        {showButton && (
+          <button className="rounded-button1" onClick={handleButtonClick}>
+            Guti Shake
+          </button>
+        )}
+        {showImage && <img id="shaking" src={shake} alt="Displayed Image" />}
+
+        {showGuti && (
+          <div className="guti-button">
+            <GutiButtonOnline
+              socket={socket}
+              username={username}
+              playerName={playerName}
+              shufArray={shuffledArray}
+              scores={scores}
+              addScore={addScore}
+              setScore={setScore}
+              room = {room}
+              restart={() => {
+                setShowButton(true);
+                setGuti(false);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  #shaking {
+    height: 500px;
+  }
+  .rounded-button1 {
+    font-size: 20px;
+    height: 40px;
+    width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 20px;
+    background-color: #3498db; /* Default background color */
+    color: #fff; /* Default text color */
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+  }
+
+  .shakee {
+    width: 100%;
+    height: 100%;
+  }
+
+  .guti-button {
+    width: 100%;
+    height: 100%;
+  }
+
+  .rounded-button1:hover {
+    background-color: #2980b9; /* Hover background color */
+  }
+
+  .rounded-button1:active {
+    transform: scale(0.95); /* Active (click) effect */
+  }
+
+  @media (max-width: 768px) {
+    #shaking {
+      height: 250px;
+    }
+  }
+`;
+
+export default ShakeHandOnline;
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
index 9987438..cebd233 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -1,62 +1,60 @@
-
+import "../ai_page/AIPage.css";
 import { FloatButton } from "antd";
 import { CommentOutlined } from "@ant-design/icons";
 import ChatModal from "../../components/ChatModal";
 import { useEffect, useState } from "react";
-import GameBoard from "../../components/GameBoard";
+import GameBoardOnline from "../../components/GameBoardOnline";
 
 import { addScore, getTotalScore } from "../../components/gameControllers";
 import { useLocation } from "react-router-dom";
 
-export default function FriensGame() {
+export default function FriensGame({ usernames, socket, username, room }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedNames, setSelectedNames] = useState([]);
   const userData = useLocation().state;
-  var initiated = false;
+  userData.username = username;
+  userData.avatar = 1;  
+  var initiated = false;  
 
   const [scores, setScore] = useState([
-    ["Amit", 0, 100, 80, 60],
-    ["Mehraj", 0, 100, 80, 60],
-    ["Shawon", 0, 100, 80, 60],
-    ["Nafi", 0, 100, 80, 60],
+    [usernames[0], 0, 100, 80, 60],
+    [usernames[1], 0, 100, 80, 60],
+    [usernames[2], 0, 100, 80, 60],
+    [usernames[3], 0, 100, 80, 60],
   ]);
-  const peopleNames = ["John", "Jane", "Alex", "Mark", "Ella", "Liam", "Lucy", "Finn", "Kate", "Ryan", "Emma", "Luke", "Rose", "Paul", "Lisa", "Jack", "Anna", "Eric", "Mia", "Jake"];
 
-  const round = [100, 0, 60, 40];
+  const peopleNames = [
+    "John",
+    "Jane",
+    "Alex",
+    "Mark",
+    "Ella",
+    "Liam",
+    "Lucy",
+    "Finn",
+    "Kate",
+    "Ryan",
+    "Emma",
+    "Luke",
+    "Rose",
+    "Paul",
+    "Lisa",
+    "Jack",
+    "Anna",
+    "Eric",
+    "Mia",
+    "Jake",
+  ];
+  
   var totalScore = getTotalScore(scores);
-  console.log(totalScore);
-
-  useEffect(()=>{
-    console.log("rerender");
-    console.log(userData.players);
-  }, [scores]);
-
-
-  function update(new_score){
-    setScore(new_score);
-  }
-
-  function initiateGame() {
-    //setScore([[userData.username], ["bot-1"], ["bot-1"],["bot-1"],  ]);   
-    const currentTimestamp = new Date().getTime();
-    const randomValue = currentTimestamp % 19;
-    const a = userData.players[1];
-    const b = peopleNames[randomValue+1];
-    const c = peopleNames[randomValue+2];
-
-   // setSelectedNames([userData.username,a,b,c]);
-
-   const allPlayers = userData.players;
-const myName = userData.username;
 
-// Exclude the current user's name
-const otherPlayers = allPlayers.filter(player => player !== myName);
+  function initiateGame() {          
+    const newScore = [[usernames[0]], [usernames[1]], [usernames[2]], [usernames[3]]];
+    setScore(newScore);
+    console.log(usernames);
+    console.log(scores);
+    console.log(newScore);
 
-// Set selectedNames with [myName, ...otherPlayers]
-setSelectedNames([myName, ...otherPlayers]);
-    
-    setScore([[userData.username], [otherPlayers[0]], [otherPlayers[1]],[otherPlayers[2]],  ]); 
-   
     initiated = true;
   }
 
@@ -75,7 +73,16 @@ setSelectedNames([myName, ...otherPlayers]);
       />
       <div className="ai-canvas">
         <div className="ai-left">
-          <GameBoard totalScore={totalScore} scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
+          <GameBoardOnline
+            totalScore={totalScore}
+            scores={scores}
+            addScore={addScore}
+            setScore={setScore}
+            playerName={usernames}
+            socket = {socket}
+            username = {username}
+            room = {room}
+          />
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
index 597ebca..8cd7be1 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsPage.jsx
@@ -19,8 +19,7 @@ function FriendsPage() {
     if (userData.username !== "" && room !== "") {
       const messageData = {
         room: room,
-        username: userData.username,
-        
+        username: userData.username,        
       };
       // jekono api call er jonno ei socket id "socket" or api address ta lagbe.
       socket.emit("join_room", messageData); // "join_room" api link er sathe value send korbe
diff --git a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
index 8d679af..5a0c80f 100644
--- a/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
+++ b/FrontendTemplate/src/pages/friends_page/RoomLobby.jsx
@@ -5,89 +5,108 @@ import "../multiplayer_page/Lobby.css";
 import avatars from "../../components/avatars";
 import { Button } from "antd";
 import { useLocation, useNavigate } from "react-router-dom";
-
+import FriensGame from "./FriendsGame";
 
 const RoomLobby = ({ socket, username, room }) => {
-    const [currentMessage, setCurrentMessage] = useState("");
+  const [currentMessage, setCurrentMessage] = useState("");
   const [messageList, setMessageList] = useState([]);
-  const [userval, setUserVal]= useState(false);
+  const [userval, setUserVal] = useState(false);
   const [users, setUsers] = useState([]);
-  const [player2, setPlayer2]= useState("Player 2");
-  const [player3, setPlayer3]= useState("Player 3");
-  const [player4, setPlayer4]= useState("Player 4");
-  const [gameStart, SetGameStart]= useState(false);
+  const [player2, setPlayer2] = useState("Player 2");
+  const [player3, setPlayer3] = useState("Player 3");
+  const [player4, setPlayer4] = useState("Player 4");
+  const [gameStart, SetGameStart] = useState(false);
 
   const userData = useLocation().state;
+  var usernames;
   const navigate = useNavigate();
-  const [players , setPlayers] = useState([
-
-    {avatar: 1, username: username, isHost: true},
-    {avatar: 2, username: player2, isHost: false},
-    {avatar: 3, username: player3, isHost: false},
-    {avatar: 4, username: player4, isHost: false},
-
-]);
-const gameStarted = () => {
-  const usernames = users.map(user => user.username);
-
-   // Navigate to another page and pass usernames as state
-   navigate("/multiplayer", {state : {
-    ...userData,
-    players: usernames,
-}})
-};
+  const [players, setPlayers] = useState([
+    { avatar: 1, username: username, isHost: true },
+    { avatar: 2, username: player2, isHost: false },
+    { avatar: 3, username: player3, isHost: false },
+    { avatar: 4, username: player4, isHost: false },
+  ]);
+  const gameStarted = () => {
+    if (users.length < 4) {
+      alert("You need 4 players to start");
+      return;
+    }
 
+    usernames = users.map((user) => user.username);
+    console.log("notified!");
+    socket.emit("notify_others_to_start", { room: room });
+    SetGameStart(true);
+    // Navigate to another page and pass usernames as state
+    // user data contains room and username
+  };
 
+  const exitLobby = () => {
+    socket.emit("berhoa", { roomId: room });
+    navigate("/home", {
+      state: {
+        username: userData.username,
+      },
+    });
+  };
 
-useEffect(() => {
+  useEffect(() => {
     if (socket) {
-      socket.on('users_list', (users) => {
+      socket.on("users_list", (users) => {
         console.log(users.length);
-        
-        
-        if(users.length <= 4){
-            // setPlayer2( users[1].username);
-            // console.log(player2);
 
-            setUsers(users);
+        if (users.length <= 4) {
+          // setPlayer2( users[1].username);
+          // console.log(player2);
+
+          setUsers(users);
         }
       });
+      socket.on("start_game", (flag) => {
+        if (flag) SetGameStart(true);
+      });
     }
     return () => {
-        if (socket) {
-          socket.off('users_list');
-        }
-      };
+      if (socket) {
+        socket.off("users_list");
+      }
+    };
   }, [socket]);
 
-  
   return (
     <>
-    <center className="lobby-code">LOBBY CODE</center>
-        <center className="lobby-code">{room}</center>
-        
-        
-      
-      <div className="lobby-container">
-        
-          {
-          
-          users.map((messageContent, index) => {
-            
-            return (
-                  <div className="lobby-card" key={index}>
-                  <img src={avatars[index+1]} alt="" /> 
-                    <span id="author"> {messageContent.username}</span>
-                  </div>
-            );
-          })}
-        
-      </div>
-      <center><Button onClick={gameStarted}> Start Game </Button></center>
-      
-    
+      {gameStart && (
+        <FriensGame usernames={users.map(user => user.username)} socket={socket} username={username} room = {room}/>
+      )}
+      {!gameStart && (
+        <div>
+          {" "}
+          <center className="lobby-code">LOBBY CODE</center>
+          <center className="lobby-code">{room}</center>
+          <div className="lobby-container">
+            {users.map((messageContent, index) => {
+              return (
+                <div className="lobby-card" key={index}>
+                  <img src={avatars[index + 1]} alt="" />
+                  <span id="author"> {messageContent.username}</span>
+                </div>
+              );
+            })}
+          </div>
+          {console.log(users)}
+          {users.length > 0 && users[0].username === userData.username && (
+            <center>
+              <Button onClick={gameStarted}> Start Game </Button>
+            </center>
+          )}
+          {users.length > 0 && users[0].username !== userData.username && (
+            <center>
+              <Button onClick={exitLobby}> EXIT LOBBY </Button>
+            </center>
+          )}
+        </div>
+      )}
     </>
-  )
-}
+  );
+};
 
-export default RoomLobby
\ No newline at end of file
+export default RoomLobby;

From 6f1f484a223d565549b363f5a0cc5d9b9d4d15a7 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Wed, 3 Jan 2024 03:59:27 +0600
Subject: [PATCH 15/21] all clients recieve same shuffle distribution from
 server

---
 .../src/components/GutiButtonOnline.jsx       | 20 +++++++++----
 .../src/components/ShakeHandOnline.jsx        | 29 ++++++++++++++-----
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/FrontendTemplate/src/components/GutiButtonOnline.jsx b/FrontendTemplate/src/components/GutiButtonOnline.jsx
index 2fae02a..679f511 100644
--- a/FrontendTemplate/src/components/GutiButtonOnline.jsx
+++ b/FrontendTemplate/src/components/GutiButtonOnline.jsx
@@ -40,14 +40,24 @@ const GutiButtonOnline = ({
     console.log(isChor);
   }, []);
 
+  function getIndex() {
+
+    if(scores[0][0] === username) return 0;
+    if(scores[1][0] === username) return 1;
+    if(scores[2][0] === username) return 2;
+    if(scores[3][0] === username) return 3;
+    return 0;
+
+  }
+
   const buttonClicking = (index) => {
     //console.log("before " + shufArray);
     //console.log("index : " + index);
-    const tmp = shufArray[index];
-    shufArray[index] = shufArray[0];
-    shufArray[0] = tmp;
-    //console.log("after" + shufArray);
-    setSelectedImage(shufArray[0]);
+    //const tmp = shufArray[index];
+    //shufArray[index] = shufArray[0];
+    //shufArray[0] = tmp;
+    //console.log("after" + shufArray);    
+    setSelectedImage(shufArray[getIndex()]);
 
     // TODO : DISTRIBUTE 3 to ai
     // res: [0, 1, 3, 2]
diff --git a/FrontendTemplate/src/components/ShakeHandOnline.jsx b/FrontendTemplate/src/components/ShakeHandOnline.jsx
index 6c3f551..f2e73a3 100644
--- a/FrontendTemplate/src/components/ShakeHandOnline.jsx
+++ b/FrontendTemplate/src/components/ShakeHandOnline.jsx
@@ -10,7 +10,7 @@ const ShakeHandOnline = ({
   playerName,
   socket,
   username,
-  room
+  room,
 }) => {
   const [showButton, setShowButton] = useState(false);
   const [showImage, setShowImage] = useState(false);
@@ -31,12 +31,19 @@ const ShakeHandOnline = ({
     if (username === scores[scores[0].length % 4][0]) {
       setShowButton(true);
     }
-  }, []);
+  }, [scores]);
 
   useEffect(() => {
-    if (socket) {      
+    if (socket) {
       socket.on("recieve_shuffle", (curShuff) => {
-        console.log(curShuff);
+        setShuffledArray(curShuff);
+        setShowButton(false);
+        setShowImage(true);
+
+        setTimeout(() => {
+          setShowImage(false);
+          setGuti(true);
+        }, 4200);
       });
     }
     return () => {
@@ -46,8 +53,11 @@ const ShakeHandOnline = ({
     };
   }, [socket]);
 
-  const handleButtonClick = () => {    
-    socket.emit("guti_shake", { room: room, shuffleArray: shuffleArray(shuffledArray) });
+  const handleButtonClick = () => {
+    socket.emit("guti_shake", {
+      room: room,
+      shuffleArray: shuffleArray(shuffledArray),
+    });
 
     // setShowButton(false);
     // setShowImage(true);
@@ -85,9 +95,12 @@ const ShakeHandOnline = ({
               scores={scores}
               addScore={addScore}
               setScore={setScore}
-              room = {room}
+              room={room}
               restart={() => {
-                setShowButton(true);
+                // console.log(scores[scores[0].length % 4][0] + " vs " + username );
+                // if (username === scores[scores[0].length % 4][0]) {
+                //   setShowButton(true);
+                // } else setShowButton(false);
                 setGuti(false);
               }}
             />

From 6fcfc26234b69775913ddd67f8d17420def4c942 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Wed, 3 Jan 2024 04:40:13 +0600
Subject: [PATCH 16/21] play with friends MVP done <3

---
 BakcendTemplate/app.js                        |  9 ++-
 .../src/components/GutiButtonOnline.jsx       | 62 +++++++++++++------
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index 92acc55..eb15244 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -49,10 +49,13 @@ io.on("connection", (socket) => {
       io.to(data.room).emit("recieve_shuffle", curShuffle[data.room]);
       console.log("shuffle recived and sent to all", curShuffle[data.room]);
     });
-
-
-    // ke konta paise 
+    
     //police kare dhorse
+    socket.on("dhorsi_ore", (data) => {      
+      io.to(data.room).emit("dhorse_ore", data.guess);
+      console.log("police dhorse", usersInRoom[data.room][data.guess]);
+    });
+
     //coninue
 
     socket.on("send_message", (data) => {
diff --git a/FrontendTemplate/src/components/GutiButtonOnline.jsx b/FrontendTemplate/src/components/GutiButtonOnline.jsx
index 679f511..1671517 100644
--- a/FrontendTemplate/src/components/GutiButtonOnline.jsx
+++ b/FrontendTemplate/src/components/GutiButtonOnline.jsx
@@ -16,7 +16,7 @@ const GutiButtonOnline = ({
   setScore,
   socket,
   username,
-  room
+  room,
 }) => {
   const [showButton, setShowButton] = useState(true);
   const [showImage, setShowImage] = useState(false);
@@ -26,6 +26,7 @@ const GutiButtonOnline = ({
   const [selectedImage, setSelectedImage] = useState(null);
   const [policeGuess, setPoliceGuess] = useState(-1);
   const [isChor, setIsChor] = useState(true);
+  const [showContinue, setShowContinue] = useState(false);
   const gotImage = [chor, dakat, police, babu];
   const bangla = ["চোর", "ডাকাত", "পুলিশ", "বাবু"];
   var curscore = [0, 0, 0, 0];
@@ -41,22 +42,36 @@ const GutiButtonOnline = ({
   }, []);
 
   function getIndex() {
-
-    if(scores[0][0] === username) return 0;
-    if(scores[1][0] === username) return 1;
-    if(scores[2][0] === username) return 2;
-    if(scores[3][0] === username) return 3;
+    if (scores[0][0] === username) return 0;
+    if (scores[1][0] === username) return 1;
+    if (scores[2][0] === username) return 2;
+    if (scores[3][0] === username) return 3;
     return 0;
-
   }
 
+  useEffect(() => {
+    if (socket) {
+      socket.on("dhorse_ore", (indx) => {
+        // setLastState(true);
+        // setPoliceState(false);
+        setShowContinue(true);
+        setPoliceGuess(indx);
+      });
+    }
+    return () => {
+      if (socket) {
+        socket.off("dhorse_ore");
+      }
+    };
+  }, [socket]);
+
   const buttonClicking = (index) => {
     //console.log("before " + shufArray);
     //console.log("index : " + index);
     //const tmp = shufArray[index];
     //shufArray[index] = shufArray[0];
     //shufArray[0] = tmp;
-    //console.log("after" + shufArray);    
+    //console.log("after" + shufArray);
     setSelectedImage(shufArray[getIndex()]);
 
     // TODO : DISTRIBUTE 3 to ai
@@ -90,15 +105,7 @@ const GutiButtonOnline = ({
 
   function isPoliceCorrect() {
     if (isChor && shufArray[policeGuess] == 0) return true;
-    else if (!isChor && shufArray[policeGuess] == 1) return true;
-    else {
-      const currentTimestamp = new Date().getTime();
-      const randomValue = currentTimestamp % 2;
-
-      if (randomValue == 0) {
-        return true;
-      } else return false;
-    }
+    else if (!isChor && shufArray[policeGuess] == 1) return true;    
     return false;
   }
 
@@ -188,12 +195,17 @@ const GutiButtonOnline = ({
                     <Button
                       className="jayga"
                       onClick={() => {
+                        
+                        socket.emit("dhorsi_ore", {
+                          room: room,
+                          guess: getChorDakat()[0],
+                        });
                         setLastState(true);
                         setPoliceState(false);
                         setPoliceGuess(getChorDakat()[0]);
                       }}
                     >
-                      {getChorDakat()[0]}
+                      {playerName[getChorDakat()[0]]}
                     </Button>
                     <Button
                       className="jayga"
@@ -201,13 +213,17 @@ const GutiButtonOnline = ({
                         setLastState(true);
                         setPoliceState(false);
                         setPoliceGuess(getChorDakat()[1]);
+                        socket.emit("dhorsi_ore", {
+                          room: room,
+                          guess: getChorDakat()[1],
+                        });
                       }}
                     >
-                      {getChorDakat()[1]}
+                      {playerName[getChorDakat()[1]]}
                     </Button>
                   </div>
                 )}
-                {selectedImage != 2 && (
+                {selectedImage != 2 && showContinue && (
                   <Button
                     onClick={() => {
                       setLastState(true);
@@ -217,6 +233,12 @@ const GutiButtonOnline = ({
                     Continue
                   </Button>
                 )}
+                {selectedImage != 2 && !showContinue && (
+                  <p>
+                    {getPolice(2)} {isChor == true ? "চোর" : "ডাকাত"} কে
+                    ধরছেন...{" "}
+                  </p>
+                )}
               </div>
             </div>
           )}

From afe2918aa947219006bbb6f7bd53a1fcf732d7c4 Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Thu, 4 Jan 2024 12:37:56 +0600
Subject: [PATCH 17/21] GameOver modal updated

---
 .../src/components/GameBoardOnline.jsx        |  2 +-
 FrontendTemplate/src/components/Players.jsx   |  2 +
 .../src/components/ScoreModal.jsx             | 48 +++++++++++++++++++
 FrontendTemplate/src/pages/ai_page/AIPage.jsx | 20 +++++++-
 .../src/pages/friends_page/FriendsGame.jsx    |  4 +-
 5 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 FrontendTemplate/src/components/ScoreModal.jsx

diff --git a/FrontendTemplate/src/components/GameBoardOnline.jsx b/FrontendTemplate/src/components/GameBoardOnline.jsx
index defa91e..dc4c75f 100644
--- a/FrontendTemplate/src/components/GameBoardOnline.jsx
+++ b/FrontendTemplate/src/components/GameBoardOnline.jsx
@@ -13,7 +13,7 @@ const GameBoardOnline = ({
   username,
   room
 }) => {
-  // Replace with the actual player name
+ 
   const playerImage = "";
 
   return (
diff --git a/FrontendTemplate/src/components/Players.jsx b/FrontendTemplate/src/components/Players.jsx
index 4454379..eca462a 100644
--- a/FrontendTemplate/src/components/Players.jsx
+++ b/FrontendTemplate/src/components/Players.jsx
@@ -9,6 +9,7 @@ const Players = ({ playerName, playerImage, isTopBtm, playerScore }) => {
     <Wrapper>
       {isTopBtm ? (
         <div className="player-container-h">
+         
           <div className="image">
             {" "}
             <img src={playerImage} className="image" alt="" />{" "}
@@ -20,6 +21,7 @@ const Players = ({ playerName, playerImage, isTopBtm, playerScore }) => {
         </div>
       ) : (
         <div className="player-container">
+         
           <div className="image">
             {" "}
             <img src={playerImage} className="image" alt="" />{" "}
diff --git a/FrontendTemplate/src/components/ScoreModal.jsx b/FrontendTemplate/src/components/ScoreModal.jsx
new file mode 100644
index 0000000..de47d70
--- /dev/null
+++ b/FrontendTemplate/src/components/ScoreModal.jsx
@@ -0,0 +1,48 @@
+import { Modal, Button, Form, Input, message } from "antd";
+import { useState } from "react";
+
+
+const ScoreModal = (props) => {
+  const { isGameOver, setIsGameOver, scores , setScore} = props;
+
+  const [modalInput, setModalInput] = useState("");
+  const [modaTitle, setModalTitle] = useState("Enter your Message");
+
+  const resetModal = () => {
+    setModalInput("");
+    setIsGameOver(false);
+    setModalTitle("Enter your Message");
+  };
+  const handleResetClick = () => {
+    
+    const resetScores = scores.map(([name]) => [name]);
+    
+    setScore(resetScores);
+  };
+
+  return (
+    <Modal
+      open= {isGameOver}
+      title={modaTitle}
+      footer={<Button
+        key="back"
+        onClick={() => {                    
+          setModalInput("");
+          setIsGameOver(false);
+          handleResetClick();
+        }}
+      >
+        Send
+      </Button>}
+    >
+      <Input
+        value={modalInput}
+        onChange={(e) => {
+          setModalInput(e.target.value);
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default ScoreModal;
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index d914f45..85de0a8 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -7,9 +7,11 @@ import GameBoard from "../../components/GameBoard";
 
 import { addScore, getTotalScore } from "../../components/gameControllers";
 import { useLocation } from "react-router-dom";
+import ScoreModal from "../../components/ScoreModal";
 
 export default function AIPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isGameOver, setIsGameOver] = useState(false);
   const [selectedNames, setSelectedNames] = useState([]);
   const userData = useLocation().state;
   var initiated = false;
@@ -27,9 +29,24 @@ export default function AIPage() {
   console.log(totalScore);
 
   useEffect(()=>{
-    console.log("rerender");
+   
   }, [scores]);
 
+  useEffect(()=>{
+    console.log("Scoreee isss: ");
+    // console.log(scores[0][scores[0].length - 1]);
+    var maxScore = Math.max(...totalScore);
+     if(maxScore >= 140){
+      setIsGameOver(true);
+      console.log(isGameOver);
+      console.log("yes i am true")
+     }
+    
+  }, [totalScore]);
+
+
+
+
 
   function update(new_score){
     setScore(new_score);
@@ -56,6 +73,7 @@ export default function AIPage() {
 
   return (
     <>
+      <ScoreModal isGameOver={isGameOver} setIsGameOver={setIsGameOver} scores={scores} setScore={setScore}/>
       <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
       <FloatButton
         icon={<CommentOutlined />}
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
index cebd233..55d7f2b 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -4,7 +4,7 @@ import { CommentOutlined } from "@ant-design/icons";
 import ChatModal from "../../components/ChatModal";
 import { useEffect, useState } from "react";
 import GameBoardOnline from "../../components/GameBoardOnline";
-
+import ScrollToBottom from "react-scroll-to-bottom";
 import { addScore, getTotalScore } from "../../components/gameControllers";
 import { useLocation } from "react-router-dom";
 
@@ -86,6 +86,7 @@ export default function FriensGame({ usernames, socket, username, room }) {
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>
+          <ScrollToBottom className="message-container">
           <div className="leaderboard-body">
             {scores.map((score, index) => (
               <div className="leaderboard-col" key={index}>
@@ -98,6 +99,7 @@ export default function FriensGame({ usernames, socket, username, room }) {
               </div>
             ))}
           </div>
+          </ScrollToBottom>
         </div>
       </div>
     </>

From 1fea4a346746a93be2a41cb3ddbc83f6a9921c5d Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Thu, 4 Jan 2024 15:59:52 +0600
Subject: [PATCH 18/21] game over for ai

---
 .../src/components/GutiButton.jsx             |  4 +-
 .../src/components/ScoreModal.jsx             | 66 +++++++++++++-----
 FrontendTemplate/src/pages/ai_page/AIPage.jsx | 69 ++++++++++++++++---
 3 files changed, 113 insertions(+), 26 deletions(-)

diff --git a/FrontendTemplate/src/components/GutiButton.jsx b/FrontendTemplate/src/components/GutiButton.jsx
index d1d9fd0..1caa921 100644
--- a/FrontendTemplate/src/components/GutiButton.jsx
+++ b/FrontendTemplate/src/components/GutiButton.jsx
@@ -23,11 +23,11 @@ const GutiButton = ({ playerName, shufArray, restart, scores, addScore, setScore
   var selectedIndex;
 
   const myguti = 0;
-  console.log(shufArray);
+  //console.log(shufArray);
 
   useEffect(() => {
     setIsChor(scores[0].length % 2 == 0);
-    console.log(isChor);
+    //console.log(isChor);
   }, []);
 
   const buttonClicking = (index) => {
diff --git a/FrontendTemplate/src/components/ScoreModal.jsx b/FrontendTemplate/src/components/ScoreModal.jsx
index de47d70..d18690d 100644
--- a/FrontendTemplate/src/components/ScoreModal.jsx
+++ b/FrontendTemplate/src/components/ScoreModal.jsx
@@ -3,16 +3,13 @@ import { useState } from "react";
 
 
 const ScoreModal = (props) => {
-  const { isGameOver, setIsGameOver, scores , setScore} = props;
+  const { isGameOver, setIsGameOver, scores , setScore,  finalScore, rank} = props;
+
+  const [modaTitle, setModalTitle] = useState("Game Over");
+ 
+  
 
-  const [modalInput, setModalInput] = useState("");
-  const [modaTitle, setModalTitle] = useState("Enter your Message");
 
-  const resetModal = () => {
-    setModalInput("");
-    setIsGameOver(false);
-    setModalTitle("Enter your Message");
-  };
   const handleResetClick = () => {
     
     const resetScores = scores.map(([name]) => [name]);
@@ -20,6 +17,36 @@ const ScoreModal = (props) => {
     setScore(resetScores);
   };
 
+//   function rankingSet(){
+
+//     var newTotal = [...totalScore];
+
+// var count = 1;
+
+// var indexArray = [0, 0, 0, 0];
+
+
+// while (newTotal.some(x => x > 0)) {
+  
+//   var p = newTotal.indexOf(Math.max(...newTotal));
+  
+ 
+//   indexArray[p] = count;
+  
+  
+//   newTotal[p] = 0;
+  
+ 
+//   count++;
+// }
+
+//     setRank(indexArray);
+        
+
+//   }
+
+
+
   return (
     <Modal
       open= {isGameOver}
@@ -27,20 +54,27 @@ const ScoreModal = (props) => {
       footer={<Button
         key="back"
         onClick={() => {                    
-          setModalInput("");
           setIsGameOver(false);
-          handleResetClick();
+          
         }}
       >
         Send
       </Button>}
     >
-      <Input
-        value={modalInput}
-        onChange={(e) => {
-          setModalInput(e.target.value);
-        }}
-      />
+        {isGameOver ?  <div>
+      {/* Display the result */}
+      <ul>
+        {scores.map((player, index) => (
+          <li key={index}>
+            {`${player[0]} got ${finalScore[index]} points. Rank: ${rank[index]}`}
+          </li>
+        ))}
+      </ul>
+    </div> :
+    <p>Result pending</p>
+    }
+       
+     
     </Modal>
   );
 };
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index 85de0a8..2c74ca3 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -13,20 +13,24 @@ export default function AIPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isGameOver, setIsGameOver] = useState(false);
   const [selectedNames, setSelectedNames] = useState([]);
+  const [finalScore, setFinalScore]= useState([]);
+  const [rank, setRank] = useState([]);
+  
+  
   const userData = useLocation().state;
   var initiated = false;
 
   const [scores, setScore] = useState([
-    ["Amit", 0, 100, 80, 60],
-    ["Mehraj", 0, 100, 80, 60],
-    ["Shawon", 0, 100, 80, 60],
-    ["Nafi", 0, 100, 80, 60],
+    ["Amit", 0, 0, 0, 0],
+    ["Mehraj", 0, 0, 0, 0],
+    ["Shawon", 0, 0, 0, 0],
+    ["Nafi", 0, 0, 0, 0],
   ]);
   const peopleNames = ["John", "Jane", "Alex", "Mark", "Ella", "Liam", "Lucy", "Finn", "Kate", "Ryan", "Emma", "Luke", "Rose", "Paul", "Lisa", "Jack", "Anna", "Eric", "Mia", "Jake"];
 
   const round = [100, 0, 60, 40];
   var totalScore = getTotalScore(scores);
-  console.log(totalScore);
+ // console.log(totalScore);
 
   useEffect(()=>{
    
@@ -39,11 +43,52 @@ export default function AIPage() {
      if(maxScore >= 140){
       setIsGameOver(true);
       console.log(isGameOver);
-      console.log("yes i am true")
+      console.log("yes i am true");
+      rankingSet();
+      setFinalScore(totalScore);
+    
+      gameOverDetails();
      }
     
   }, [totalScore]);
 
+  function gameOverDetails(){
+
+    
+    var resetScores = scores.map(([name]) => [name]);
+    
+    setScore(resetScores);
+
+  }
+
+  function rankingSet(){
+
+    var newTotal = [...totalScore];
+
+var count = 1;
+
+var indexArray = [0, 0, 0, 0];
+
+
+while (newTotal.some(x => x > 0)) {
+  
+  var p = newTotal.indexOf(Math.max(...newTotal));
+  
+ 
+  indexArray[p] = count;
+  
+  
+  newTotal[p] = 0;
+  
+ 
+  count++;
+}
+
+    setRank(indexArray);
+        
+
+  }
+
 
 
 
@@ -73,8 +118,16 @@ export default function AIPage() {
 
   return (
     <>
-      <ScoreModal isGameOver={isGameOver} setIsGameOver={setIsGameOver} scores={scores} setScore={setScore}/>
-      <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+    {isGameOver ? <ScoreModal isGameOver={isGameOver} 
+    setIsGameOver={setIsGameOver} 
+    scores={scores} 
+    setScore={setScore} 
+    finalScore={finalScore}
+    rank={rank}
+    />
+      :   <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+  }
+      
       <FloatButton
         icon={<CommentOutlined />}
         onClick={() => {

From 358f04e2eb7a002b4d4e11cc16e5ea76b517b3cb Mon Sep 17 00:00:00 2001
From: nafi-ullah <shafinnafiullah@gmail.com>
Date: Thu, 4 Jan 2024 16:19:30 +0600
Subject: [PATCH 19/21] gameover for friends

---
 .../src/components/ScoreModal.jsx             |  42 +-----
 FrontendTemplate/src/pages/ai_page/AIPage.jsx | 130 +++++++++--------
 .../src/pages/friends_page/FriendsGame.jsx    | 131 +++++++++++-------
 3 files changed, 156 insertions(+), 147 deletions(-)

diff --git a/FrontendTemplate/src/components/ScoreModal.jsx b/FrontendTemplate/src/components/ScoreModal.jsx
index d18690d..5601b37 100644
--- a/FrontendTemplate/src/components/ScoreModal.jsx
+++ b/FrontendTemplate/src/components/ScoreModal.jsx
@@ -3,50 +3,12 @@ import { useState } from "react";
 
 
 const ScoreModal = (props) => {
-  const { isGameOver, setIsGameOver, scores , setScore,  finalScore, rank} = props;
+  const { isGameOver, setIsGameOver, scores ,  finalScore, rank} = props;
 
   const [modaTitle, setModalTitle] = useState("Game Over");
  
   
 
-
-  const handleResetClick = () => {
-    
-    const resetScores = scores.map(([name]) => [name]);
-    
-    setScore(resetScores);
-  };
-
-//   function rankingSet(){
-
-//     var newTotal = [...totalScore];
-
-// var count = 1;
-
-// var indexArray = [0, 0, 0, 0];
-
-
-// while (newTotal.some(x => x > 0)) {
-  
-//   var p = newTotal.indexOf(Math.max(...newTotal));
-  
- 
-//   indexArray[p] = count;
-  
-  
-//   newTotal[p] = 0;
-  
- 
-//   count++;
-// }
-
-//     setRank(indexArray);
-        
-
-//   }
-
-
-
   return (
     <Modal
       open= {isGameOver}
@@ -58,7 +20,7 @@ const ScoreModal = (props) => {
           
         }}
       >
-        Send
+        Restart
       </Button>}
     >
         {isGameOver ?  <div>
diff --git a/FrontendTemplate/src/pages/ai_page/AIPage.jsx b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
index 2c74ca3..fcccd76 100644
--- a/FrontendTemplate/src/pages/ai_page/AIPage.jsx
+++ b/FrontendTemplate/src/pages/ai_page/AIPage.jsx
@@ -13,10 +13,9 @@ export default function AIPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isGameOver, setIsGameOver] = useState(false);
   const [selectedNames, setSelectedNames] = useState([]);
-  const [finalScore, setFinalScore]= useState([]);
+  const [finalScore, setFinalScore] = useState([]);
   const [rank, setRank] = useState([]);
-  
-  
+
   const userData = useLocation().state;
   var initiated = false;
 
@@ -26,89 +25,92 @@ export default function AIPage() {
     ["Shawon", 0, 0, 0, 0],
     ["Nafi", 0, 0, 0, 0],
   ]);
-  const peopleNames = ["John", "Jane", "Alex", "Mark", "Ella", "Liam", "Lucy", "Finn", "Kate", "Ryan", "Emma", "Luke", "Rose", "Paul", "Lisa", "Jack", "Anna", "Eric", "Mia", "Jake"];
+  const peopleNames = [
+    "John",
+    "Jane",
+    "Alex",
+    "Mark",
+    "Ella",
+    "Liam",
+    "Lucy",
+    "Finn",
+    "Kate",
+    "Ryan",
+    "Emma",
+    "Luke",
+    "Rose",
+    "Paul",
+    "Lisa",
+    "Jack",
+    "Anna",
+    "Eric",
+    "Mia",
+    "Jake",
+  ];
 
   const round = [100, 0, 60, 40];
   var totalScore = getTotalScore(scores);
- // console.log(totalScore);
+  // console.log(totalScore);
 
-  useEffect(()=>{
-   
-  }, [scores]);
+  useEffect(() => {}, [scores]);
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log("Scoreee isss: ");
     // console.log(scores[0][scores[0].length - 1]);
     var maxScore = Math.max(...totalScore);
-     if(maxScore >= 140){
+    if (maxScore >= 140) {
       setIsGameOver(true);
       console.log(isGameOver);
       console.log("yes i am true");
       rankingSet();
       setFinalScore(totalScore);
-    
+
       gameOverDetails();
-     }
-    
+    }
   }, [totalScore]);
 
-  function gameOverDetails(){
-
-    
+  function gameOverDetails() {
     var resetScores = scores.map(([name]) => [name]);
-    
-    setScore(resetScores);
 
+    setScore(resetScores);
   }
 
-  function rankingSet(){
-
+  function rankingSet() {
     var newTotal = [...totalScore];
 
-var count = 1;
+    var count = 1;
 
-var indexArray = [0, 0, 0, 0];
+    var indexArray = [0, 0, 0, 0];
 
+    while (newTotal.some((x) => x > 0)) {
+      var p = newTotal.indexOf(Math.max(...newTotal));
 
-while (newTotal.some(x => x > 0)) {
-  
-  var p = newTotal.indexOf(Math.max(...newTotal));
-  
- 
-  indexArray[p] = count;
-  
-  
-  newTotal[p] = 0;
-  
- 
-  count++;
-}
-
-    setRank(indexArray);
-        
-
-  }
-
+      indexArray[p] = count;
 
+      newTotal[p] = 0;
 
+      count++;
+    }
 
+    setRank(indexArray);
+  }
 
-  function update(new_score){
+  function update(new_score) {
     setScore(new_score);
   }
 
   function initiateGame() {
-    //setScore([[userData.username], ["bot-1"], ["bot-1"],["bot-1"],  ]);   
+    //setScore([[userData.username], ["bot-1"], ["bot-1"],["bot-1"],  ]);
     const currentTimestamp = new Date().getTime();
     const randomValue = currentTimestamp % 19;
     const a = peopleNames[randomValue];
-    const b = peopleNames[randomValue+1];
-    const c = peopleNames[randomValue+2];
+    const b = peopleNames[randomValue + 1];
+    const c = peopleNames[randomValue + 2];
+
+    setSelectedNames([userData.username, a, b, c]);
+
+    setScore([[userData.username], [a], [b], [c]]);
 
-    setSelectedNames([userData.username,a,b,c]);
-    
-    setScore([[userData.username], [a], [b],[c],  ]); 
-   
     initiated = true;
   }
 
@@ -118,16 +120,18 @@ while (newTotal.some(x => x > 0)) {
 
   return (
     <>
-    {isGameOver ? <ScoreModal isGameOver={isGameOver} 
-    setIsGameOver={setIsGameOver} 
-    scores={scores} 
-    setScore={setScore} 
-    finalScore={finalScore}
-    rank={rank}
-    />
-      :   <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
-  }
-      
+      {isGameOver ? (
+        <ScoreModal
+          isGameOver={isGameOver}
+          setIsGameOver={setIsGameOver}
+          scores={scores}
+          finalScore={finalScore}
+          rank={rank}
+        />
+      ) : (
+        <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      )}
+
       <FloatButton
         icon={<CommentOutlined />}
         onClick={() => {
@@ -136,7 +140,13 @@ while (newTotal.some(x => x > 0)) {
       />
       <div className="ai-canvas">
         <div className="ai-left">
-          <GameBoard totalScore={totalScore} scores={scores} addScore = {addScore} setScore={setScore} playerName={selectedNames}/>
+          <GameBoard
+            totalScore={totalScore}
+            scores={scores}
+            addScore={addScore}
+            setScore={setScore}
+            playerName={selectedNames}
+          />
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
index 55d7f2b..bff71cb 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -7,49 +7,35 @@ import GameBoardOnline from "../../components/GameBoardOnline";
 import ScrollToBottom from "react-scroll-to-bottom";
 import { addScore, getTotalScore } from "../../components/gameControllers";
 import { useLocation } from "react-router-dom";
+import ScoreModal from "../../components/ScoreModal";
 
 export default function FriensGame({ usernames, socket, username, room }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedNames, setSelectedNames] = useState([]);
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [rank, setRank] = useState([]);
+  const [finalScore, setFinalScore] = useState([]);
   const userData = useLocation().state;
   userData.username = username;
-  userData.avatar = 1;  
-  var initiated = false;  
+  userData.avatar = 1;
+  var initiated = false;
 
   const [scores, setScore] = useState([
-    [usernames[0], 0, 100, 80, 60],
-    [usernames[1], 0, 100, 80, 60],
-    [usernames[2], 0, 100, 80, 60],
-    [usernames[3], 0, 100, 80, 60],
+    [usernames[0], 0, 0, 0, 0],
+    [usernames[1], 0, 0, 0, 0],
+    [usernames[2], 0, 0, 0, 0],
+    [usernames[3], 0, 0, 0, 0],
   ]);
 
-  const peopleNames = [
-    "John",
-    "Jane",
-    "Alex",
-    "Mark",
-    "Ella",
-    "Liam",
-    "Lucy",
-    "Finn",
-    "Kate",
-    "Ryan",
-    "Emma",
-    "Luke",
-    "Rose",
-    "Paul",
-    "Lisa",
-    "Jack",
-    "Anna",
-    "Eric",
-    "Mia",
-    "Jake",
-  ];
-  
   var totalScore = getTotalScore(scores);
 
-  function initiateGame() {          
-    const newScore = [[usernames[0]], [usernames[1]], [usernames[2]], [usernames[3]]];
+  function initiateGame() {
+    const newScore = [
+      [usernames[0]],
+      [usernames[1]],
+      [usernames[2]],
+      [usernames[3]],
+    ];
     setScore(newScore);
     console.log(usernames);
     console.log(scores);
@@ -62,9 +48,60 @@ export default function FriensGame({ usernames, socket, username, room }) {
     if (!initiated) initiateGame();
   }, []);
 
+  useEffect(() => {
+    console.log("Scoreee isss: ");
+    // console.log(scores[0][scores[0].length - 1]);
+    var maxScore = Math.max(...totalScore);
+    if (maxScore >= 140) {
+      setIsGameOver(true);
+      console.log(isGameOver);
+      console.log("yes i am true");
+      rankingSet();
+      setFinalScore(totalScore);
+
+      gameOverDetails();
+    }
+  }, [totalScore]);
+
+  function gameOverDetails() {
+    var resetScores = scores.map(([name]) => [name]);
+
+    setScore(resetScores);
+  }
+
+  function rankingSet() {
+    var newTotal = [...totalScore];
+
+    var count = 1;
+
+    var indexArray = [0, 0, 0, 0];
+
+    while (newTotal.some((x) => x > 0)) {
+      var p = newTotal.indexOf(Math.max(...newTotal));
+
+      indexArray[p] = count;
+
+      newTotal[p] = 0;
+
+      count++;
+    }
+
+    setRank(indexArray);
+  }
+
   return (
     <>
-      <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      {isGameOver ? (
+        <ScoreModal
+          isGameOver={isGameOver}
+          setIsGameOver={setIsGameOver}
+          scores={scores}
+          finalScore={finalScore}
+          rank={rank}
+        />
+      ) : (
+        <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      )}
       <FloatButton
         icon={<CommentOutlined />}
         onClick={() => {
@@ -79,26 +116,26 @@ export default function FriensGame({ usernames, socket, username, room }) {
             addScore={addScore}
             setScore={setScore}
             playerName={usernames}
-            socket = {socket}
-            username = {username}
-            room = {room}
+            socket={socket}
+            username={username}
+            room={room}
           />
         </div>
         <div className="ai-right">
           <div>LEADERBOARD</div>
           <ScrollToBottom className="message-container">
-          <div className="leaderboard-body">
-            {scores.map((score, index) => (
-              <div className="leaderboard-col" key={index}>
-                {score.map((point, idx) => (
-                  <span key={idx}>
-                    {point}
-                    <br />
-                  </span>
-                ))}
-              </div>
-            ))}
-          </div>
+            <div className="leaderboard-body">
+              {scores.map((score, index) => (
+                <div className="leaderboard-col" key={index}>
+                  {score.map((point, idx) => (
+                    <span key={idx}>
+                      {point}
+                      <br />
+                    </span>
+                  ))}
+                </div>
+              ))}
+            </div>
           </ScrollToBottom>
         </div>
       </div>

From 467ace525ab691a0800ba7abcad1e8565ca70888 Mon Sep 17 00:00:00 2001
From: codermehraj <codermehraj@gmail.com>
Date: Sat, 6 Jan 2024 19:09:43 +0600
Subject: [PATCH 20/21] added message and name highlight

---
 BakcendTemplate/app.js                        |  7 +--
 FrontendTemplate/src/components/ChatModal.jsx |  7 ++-
 FrontendTemplate/src/components/GameBoard.jsx |  4 ++
 .../src/components/GameBoardOnline.jsx        |  4 ++
 FrontendTemplate/src/components/Players.jsx   | 51 +++++++++++++------
 .../src/components/ShakeHandOnline.jsx        | 17 ++++++-
 .../src/pages/friends_page/FriendsGame.jsx    |  4 +-
 7 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/BakcendTemplate/app.js b/BakcendTemplate/app.js
index eb15244..8f32422 100644
--- a/BakcendTemplate/app.js
+++ b/BakcendTemplate/app.js
@@ -58,9 +58,10 @@ io.on("connection", (socket) => {
 
     //coninue
 
-    socket.on("send_message", (data) => {
-        console.log(data);
-        socket.to(data.room).emit("receive_message", data);
+    socket.on("send_message", (data) => {        
+        var msg = data.username + ": " + data.message;
+        console.log(msg);
+        io.to(data.room).emit("receive_message", msg);
       });
 
       socket.on("berhoa", (data) => {
diff --git a/FrontendTemplate/src/components/ChatModal.jsx b/FrontendTemplate/src/components/ChatModal.jsx
index 0693856..8da24d0 100644
--- a/FrontendTemplate/src/components/ChatModal.jsx
+++ b/FrontendTemplate/src/components/ChatModal.jsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 
 
 const ChatModal = (props) => {
-  const { isModalOpen, setIsModalOpen } = props;
+  const { isModalOpen, setIsModalOpen, socket, username, room } = props;
 
   const [modalInput, setModalInput] = useState("");
   const [modaTitle, setModalTitle] = useState("Enter your Message");
@@ -14,6 +14,10 @@ const ChatModal = (props) => {
     setModalTitle("Enter your Message");
   };
 
+  const sentMsg = () => {
+      socket.emit("send_message", {message: modalInput, username: username, room: room});
+  }
+
   return (
     <Modal
       open={isModalOpen}
@@ -23,6 +27,7 @@ const ChatModal = (props) => {
         onClick={() => {                    
           setModalInput("");
           setIsModalOpen(false);
+          sentMsg();
         }}
       >
         Send
diff --git a/FrontendTemplate/src/components/GameBoard.jsx b/FrontendTemplate/src/components/GameBoard.jsx
index cfbe80c..df5455d 100644
--- a/FrontendTemplate/src/components/GameBoard.jsx
+++ b/FrontendTemplate/src/components/GameBoard.jsx
@@ -17,6 +17,7 @@ const GameBoard = ({totalScore, scores, addScore, setScore, playerName}) => {
               playerImage={playerImage}
               playerScore={totalScore[3]}
               isTopBtm={true}
+              username={playerName[0]}
             />
           </div>
         </div>
@@ -27,6 +28,7 @@ const GameBoard = ({totalScore, scores, addScore, setScore, playerName}) => {
                 playerImage={playerImage}
                 playerScore={totalScore[1]}
                 isTopBtm={false}
+                username={playerName[0]}
               />
           </div>
           <div id="shake">
@@ -38,6 +40,7 @@ const GameBoard = ({totalScore, scores, addScore, setScore, playerName}) => {
               playerImage={playerImage}
               playerScore={totalScore[2]}
               isTopBtm={false}
+              username={playerName[0]}
             />
           </div>
         </div>
@@ -48,6 +51,7 @@ const GameBoard = ({totalScore, scores, addScore, setScore, playerName}) => {
             playerImage={playerImage}
             playerScore={totalScore[0]}
             isTopBtm={true}
+            username={playerName[0]}
           />
         </div>
       </div>
diff --git a/FrontendTemplate/src/components/GameBoardOnline.jsx b/FrontendTemplate/src/components/GameBoardOnline.jsx
index dc4c75f..ea45a42 100644
--- a/FrontendTemplate/src/components/GameBoardOnline.jsx
+++ b/FrontendTemplate/src/components/GameBoardOnline.jsx
@@ -26,6 +26,7 @@ const GameBoardOnline = ({
               playerImage={playerImage}
               playerScore={totalScore[3]}
               isTopBtm={true}
+              username={username}
             />
           </div>
         </div>
@@ -36,6 +37,7 @@ const GameBoardOnline = ({
               playerImage={playerImage}
               playerScore={totalScore[1]}
               isTopBtm={false}
+              username={username}
             />
           </div>
           <div id="shake">
@@ -55,6 +57,7 @@ const GameBoardOnline = ({
               playerImage={playerImage}
               playerScore={totalScore[2]}
               isTopBtm={false}
+              username={username}
             />
           </div>
         </div>
@@ -65,6 +68,7 @@ const GameBoardOnline = ({
             playerImage={playerImage}
             playerScore={totalScore[0]}
             isTopBtm={true}
+            username={username}
           />
         </div>
       </div>
diff --git a/FrontendTemplate/src/components/Players.jsx b/FrontendTemplate/src/components/Players.jsx
index eca462a..b7ac6fd 100644
--- a/FrontendTemplate/src/components/Players.jsx
+++ b/FrontendTemplate/src/components/Players.jsx
@@ -2,32 +2,46 @@ import React from "react";
 import styled from "styled-components";
 import avatars from "../components/avatars";
 
-const Players = ({ playerName, playerImage, isTopBtm, playerScore }) => {
+const Players = ({
+  playerName,
+  playerImage,
+  isTopBtm,
+  playerScore,
+  username,
+}) => {
   !playerImage ? (playerImage = avatars[0]) : {};
 
   return (
     <Wrapper>
       {isTopBtm ? (
         <div className="player-container-h">
-         
           <div className="image">
             {" "}
             <img src={playerImage} className="image" alt="" />{" "}
           </div>
           <div className="r8">
-            <div className="name">{playerName}</div>
+            {username === playerName && (
+              <div className="color-name">{playerName}</div>
+            )}
+            {username !== playerName && (
+              <div className="name">{playerName}</div>
+            )}
             <div className="score">{playerScore}</div>
           </div>
         </div>
       ) : (
         <div className="player-container">
-         
           <div className="image">
             {" "}
             <img src={playerImage} className="image" alt="" />{" "}
           </div>
           <div className="r8">
-            <div className="name">{playerName}</div>
+            {username === playerName && (
+              <div className="color-name">{playerName}</div>
+            )}
+            {username !== playerName && (
+              <div className="name">{playerName}</div>
+            )}
             <div className="score">{playerScore}</div>
           </div>
         </div>
@@ -47,21 +61,28 @@ const Wrapper = styled.section`
     justify-content: center;
   }
 
-  .image {    
+  .image {
     max-width: 100%;
     max-height: 100%;
   }
-  .r8{
+  .r8 {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: 20px;
-    padding: 20px;    
+    padding: 20px;
   }
   .name {
-    font-size: 20px;    
+    font-size: 20px;
   }
+
+  .color-name {
+    font-size: 20px;
+    font-weight: bold;
+    color: #1500ff;
+  }
+
   @media (max-width: 768px) {
     .player-container {
       display: flex;
@@ -71,15 +92,15 @@ const Wrapper = styled.section`
       height: 275px;
     }
     .player-container .image {
-        margin-top: -20px;
-        max-height: 70%;
+      margin-top: -20px;
+      max-height: 70%;
     }
     .player-container .r8 {
-        margin-top: -80px;
+      margin-top: -80px;
     }
-    .r8{
-        margin-top: -30px;
-        padding: 0px;
+    .r8 {
+      margin-top: -30px;
+      padding: 0px;
     }
     .image {
       max-width: 100%;
diff --git a/FrontendTemplate/src/components/ShakeHandOnline.jsx b/FrontendTemplate/src/components/ShakeHandOnline.jsx
index f2e73a3..0e0dbeb 100644
--- a/FrontendTemplate/src/components/ShakeHandOnline.jsx
+++ b/FrontendTemplate/src/components/ShakeHandOnline.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import shake from "../assets/shuffle.gif";
 import GutiButtonOnline from "./GutiButtonOnline";
+import { message } from "antd";
 
 const ShakeHandOnline = ({
   scores,
@@ -44,7 +45,7 @@ const ShakeHandOnline = ({
           setShowImage(false);
           setGuti(true);
         }, 4200);
-      });
+      });      
     }
     return () => {
       if (socket) {
@@ -53,6 +54,20 @@ const ShakeHandOnline = ({
     };
   }, [socket]);
 
+  useEffect(() => {
+    if (socket) {      
+      socket.on("receive_message", (msg) => {
+        message.info(msg);
+        console.log(msg);
+      });
+    }
+    return () => {
+      if (socket) {
+        socket.off("receive_message");
+      }
+    };
+  }, [socket]);
+
   const handleButtonClick = () => {
     socket.emit("guti_shake", {
       room: room,
diff --git a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
index bff71cb..db8d9d7 100644
--- a/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
+++ b/FrontendTemplate/src/pages/friends_page/FriendsGame.jsx
@@ -49,7 +49,7 @@ export default function FriensGame({ usernames, socket, username, room }) {
   }, []);
 
   useEffect(() => {
-    console.log("Scoreee isss: ");
+    console.log("Scoreee isss: ");    
     // console.log(scores[0][scores[0].length - 1]);
     var maxScore = Math.max(...totalScore);
     if (maxScore >= 140) {
@@ -100,7 +100,7 @@ export default function FriensGame({ usernames, socket, username, room }) {
           rank={rank}
         />
       ) : (
-        <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+        <ChatModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} socket={socket} username={username} room={room} />
       )}
       <FloatButton
         icon={<CommentOutlined />}

From 6752ff896037dd76d690f07c4c339efca2bfe2d6 Mon Sep 17 00:00:00 2001
From: Md Mehrajul Islam <47929493+codermehraj@users.noreply.github.com>
Date: Wed, 29 May 2024 16:45:39 +0600
Subject: [PATCH 21/21] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1e968ca..98d5c9b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,3 @@
-# ChorPolice
+# Chor Dakat Babu Police
+
+Chor Dakat Babu Police is a game which is created using Express, Socket IO and React.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/definecoder/ChorPolice/compare/nafi2...main.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/definecoder/ChorPolice/compare/nafi2...main.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/definecoder/ChorPolice/compare/nafi2...main.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/definecoder/ChorPolice/compare/nafi2...main.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>