Merge pull request code100x#296 from VK-RED/feature-share-game-link

Feature: Share the game link with Opponent

apps/frontend/src/components/ShareGame.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react"
+import { Button } from "./Button";
+
+export const ShareGame = ({className,gameId}:{className?:string,gameId:string}) => {
+
+    const url = window.origin+"/game/"+gameId;
+    const [copied,setCopied] = useState(false);
+
+    const handleCopy = ()=>{
+        window.navigator.clipboard.writeText(url);
+        setCopied((p)=>true);
+    }
+
+    return (
+        <div className={`flex flex-col items-center gap-y-4 ${className}`}>
+
+            <h3 className="scroll-m-20 text-4xl font-semibold tracking-tight text-green-500">
+                Play with Friends
+            </h3>
+
+            <div className="flex items-center gap-x-2">
+
+                <LinkSvg/>
+
+                <div onClick={handleCopy} className="text-blue-500 cursor-pointer">
+                    {url}
+                </div>
+            </div>
+
+            <Button onClick={handleCopy}>
+                {copied ? `Copied to Clipboard !!` : `Copy the link`}
+            </Button>
+        </div>
+    )
+}
+
+const LinkSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-link text-white">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+    )
+}

apps/frontend/src/index.css

@@ -74,3 +74,19 @@
     @apply bg-background text-foreground;
   }
 }
+
+.chess-board {
+  background-color: #302e2b;
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+      display: none;
+  }
+ /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+}
+}

apps/frontend/src/screens/Game.tsx

@@ -41,6 +41,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { movesAtom, userSelectedMoveIndexAtom } from '@repo/store/chessBoard';
 import GameEndModal from '@/components/GameEndModal';
 import { Waitopponent } from '@/components/ui/waitopponent';
+import { ShareGame } from '../components/ShareGame';
 
 const moveAudio = new Audio(MoveSound);
 
@@ -67,7 +68,7 @@ export const Game = () => {
   >(null);
   const [player1TimeConsumed, setPlayer1TimeConsumed] = useState(0);
   const [player2TimeConsumed, setPlayer2TimeConsumed] = useState(0);
-
+  const [gameID,setGameID] = useState("");
   const setMoves = useSetRecoilState(movesAtom);
   const userSelectedMoveIndex = useRecoilValue(userSelectedMoveIndexAtom);
   const userSelectedMoveIndexRef = useRef(userSelectedMoveIndex);
@@ -91,6 +92,7 @@ export const Game = () => {
       switch (message.type) {
         case GAME_ADDED:
           setAdded(true);
+          setGameID((p)=>message.gameId);
           break;
         case INIT_GAME:
           setBoard(chess.board());
@@ -305,11 +307,15 @@ export const Game = () => {
                 </div>
               </div>
             </div>
-            <div className="rounded-md pt-2 bg-bgAuxiliary3 flex-1 overflow-auto h-[95vh]">
+            <div className="rounded-md pt-2 bg-bgAuxiliary3 flex-1 overflow-auto h-[95vh] overflow-y-scroll no-scrollbar">
               {!started && (
                 <div className="pt-8 flex justify-center w-full">
                   {added ? (
-                    <div className="text-white"><Waitopponent/></div>
+                    <div className='flex flex-col items-center space-y-4 justify-center'>
+                      <div className="text-white"><Waitopponent/></div>
+                      <ShareGame gameId={gameID}/>
+                    </div>
+
                   ) : (
                     gameId === 'random' && (
                       <Button

apps/ws/src/GameManager.ts

@@ -82,6 +82,7 @@ export class GameManager {
             game.gameId,
             JSON.stringify({
               type: GAME_ADDED,
+              gameId:game.gameId,
             }),
           );
         }
@@ -118,6 +119,14 @@ export class GameManager {
           },
         });
 
+        // There is a game created but no second player available
+
+        if (availableGame && !availableGame.player2UserId) {
+          socketManager.addUser(user, availableGame.gameId);
+          await availableGame.updateSecondPlayer(user.userId);
+          return;
+        }
+
         if (!gameFromDb) {
           user.socket.send(
             JSON.stringify({