refactor(web): move outuseSocket logic

### Description

- Move out logic from `useSocket` to `WithHumanComponent`
- Handle `Human` game mode
- Reset the game on navigate to the `human` game mode

apps/web/src/routes/_components/main-menu/new-section-human.component.tsx

@@ -3,11 +3,12 @@ import { FC, useState } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { MainMenuSection } from "../../../shared/enum";
-import { useMainMenuStore } from "../../_stores";
+import { useGameStore, useMainMenuStore } from "../../_stores";
 
 export const NewGameHumanSection: FC = () => {
 	const navigate = useNavigate();
 	const { setSection } = useMainMenuStore();
+	const { reset: resetGame } = useGameStore();
 
 	const [joinRoom, setJoinRoom] = useState(false);
 
@@ -17,11 +18,14 @@ export const NewGameHumanSection: FC = () => {
 		if (!joinRoom) navigate("/play?mode=human");
 
 		const formData = new FormData(event.currentTarget);
-		const roomId = formData.get("room-id") as keyof SupportedAiModel | null;
+		const roomId = formData.get("room-id") as
+			| keyof typeof SupportedAiModel
+			| null;
 
 		if (!roomId) return;
 
 		navigate(`/play?mode=human&roomID=${roomId}`);
+		resetGame();
 	};
 
 	return (
@@ -65,7 +69,7 @@ export const NewGameHumanSection: FC = () => {
 					</button>
 
 					<Link
-						to="/play?mode=human&random"
+						to="/play?mode=human&random=true"
 						type="submit"
 						className="shadow-md p-2 rounded capitalize flex justify-center items-center"
 					>

apps/web/src/routes/_components/main-menu/new-section-simulation.component.tsx

@@ -3,11 +3,12 @@ import { FC } from "react";
 import { useNavigate } from "react-router";
 
 import { MainMenuSection } from "../../../shared/enum";
-import { useMainMenuStore } from "../../_stores";
+import { useGameStore, useMainMenuStore } from "../../_stores";
 
 export const NewGameSimulationSection: FC = () => {
 	const navigate = useNavigate();
 	const { setSection } = useMainMenuStore();
+	const { reset } = useGameStore();
 
 	const renderSupportedAiModels = () => {
 		return Object.keys(SupportedAiModel)
@@ -43,8 +44,12 @@ export const NewGameSimulationSection: FC = () => {
 		event.preventDefault();
 		const formData = new FormData(event.currentTarget);
 
-		const ai1 = formData.get("select-ai-1") as keyof SupportedAiModel | null;
-		const ai2 = formData.get("select-ai-2") as keyof SupportedAiModel | null;
+		const ai1 = formData.get("select-ai-1") as
+			| keyof typeof SupportedAiModel
+			| null;
+		const ai2 = formData.get("select-ai-2") as
+			| keyof typeof SupportedAiModel
+			| null;
 
 		if (
 			!ai1 ||
@@ -55,6 +60,7 @@ export const NewGameSimulationSection: FC = () => {
 			return;
 
 		navigate(`/play?mode=simulation&ai1=${ai1}&ai2=${ai2}`);
+		reset();
 	};
 
 	return (