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
+
+
+
+
+
+
+ )
+}
+
+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' && (