gamapage: Added a LEAVE GAME button in Modal

Added a Leave game button in GamePropertiesModal
which triggers the LEAVE_GAME event and navigates
to homepage.

fixes #161

frontend/src/pages/Game.tsx

@@ -1,13 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useGameContext } from '../contexts/GameContext';
 import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
 import CopyButton from '../library/copyButton';
 import Chatbox from '../library/chatbox/Chatbox';
 import { IoSettings } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+import { triggerEvent } from '../channel';
+import { GameEventTypes } from '../../../backend/src/types';
 
 function Game() {
     const { gameState } = useGameContext();
+    const navigate = useNavigate();
+    const [firstUser, setfirstuser] = useState(true);
     const modal = useModal();
     useEffect(() => {
         if (gameState) {
@@ -16,6 +21,14 @@ function Game() {
         // eslint-disable-next-line
     }, [gameState]);
 
+    function handleLeaveGame() {
+        triggerEvent({
+            type: GameEventTypes.LEAVE_GAME,
+            data: null,
+        });
+        navigate('/');
+    }
+
     function GamePropertiesModal() {
         return (
             <>
@@ -57,9 +70,22 @@ function Game() {
                             />
                         </h2>
                     </div>
-                    <Button type={'submit'} onClick={() => modal.hide()}>
-                        Join Game
-                    </Button>
+                    <div className="flex gap-5">
+                        {firstUser && (
+                            <Button
+                                type={'submit'}
+                                onClick={() => {
+                                    setfirstuser(false);
+                                    modal.hide();
+                                }}
+                            >
+                                Start Game
+                            </Button>
+                        )}
+                        <Button type={'button'} onClick={handleLeaveGame}>
+                            Leave Game
+                        </Button>
+                    </div>
                 </div>
             </>
         );