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

@@ -5,9 +5,13 @@ 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 modal = useModal();
     useEffect(() => {
         if (gameState) {
@@ -16,6 +20,14 @@ function Game() {
         // eslint-disable-next-line
     }, [gameState]);
 
+    function handleLeaveGame() {
+        triggerEvent({
+            type: GameEventTypes.LEAVE_GAME,
+            data: null,
+        });
+        navigate('/');
+    }
+
     function GamePropertiesModal() {
         return (
             <>
@@ -57,9 +69,14 @@ function Game() {
                             />
                         </h2>
                     </div>
-                    <Button type={'submit'} onClick={() => modal.hide()}>
-                        Join Game
-                    </Button>
+                    <div className="flex gap-5">
+                        <Button type={'submit'} onClick={() => modal.hide()}>
+                            Join Game
+                        </Button>
+                        <Button type={'button'} onClick={handleLeaveGame}>
+                            Leave Game
+                        </Button>
+                    </div>
                 </div>
             </>
         );