diff --git a/apps/frontend/src/components/ShareGame.tsx b/apps/frontend/src/components/ShareGame.tsx new file mode 100644 index 00000000..8c13a69a --- /dev/null +++ b/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 ( +
+ +

+ Play with Friends +

+ +
+ + + +
+ {url} +
+
+ + +
+ ) +} + +const LinkSvg = () => { + return ( + + + + ) +} \ No newline at end of file diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css index f00fd7ce..c7300174 100644 --- a/apps/frontend/src/index.css +++ b/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 */ +} +} diff --git a/apps/frontend/src/screens/Game.tsx b/apps/frontend/src/screens/Game.tsx index 8001cdfd..d70dbb66 100644 --- a/apps/frontend/src/screens/Game.tsx +++ b/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 = () => { -
+
{!started && (
{added ? ( -
+
+
+ +
+ ) : ( gameId === 'random' && (