Add routes for the home and the tile game screen

Author: sgobotta

src/components/app-selection/ApplicationSelection.tsx

@@ -5,9 +5,11 @@ import ApplicationOptionComponent from './ApplicationOption';
 import { useMouseWheel } from '../../hooks/listeners/useScrolling';
 import { ApplicationPreview } from './ApplicationPreview';
 import { openTab } from '../../utils';
-// import TileGameComponent from './components/tile-game/TileGame';
+import { useNavigate } from 'react-router';
 
 export default function ApplicationSelection(): ReactElement {
+  const navigate = useNavigate();
+
   const {
     chooseSelection,
     currentSelection,
@@ -20,7 +22,7 @@ export default function ApplicationSelection(): ReactElement {
         choice: AppChoice.PictureCards,
         name: 'Picture Cards',
         onSelect: () => {
-          console.log('Selected Picture Cards');
+          navigate('/picture-cards');
         },
       },
       {

src/components/tile-game/TileGameRoute.tsx

@@ -4,8 +4,11 @@ import useImages from '../../hooks/tile-game/useImages';
 import { useTileAsset } from '../../hooks';
 import { TileAsset as TileAssetT } from '../../types';
 import TileGame from './TileGame';
+import { HomeIcon } from '../../svg/HomeIcon';
+import { useNavigate } from 'react-router';
 
 export default function TileGameRoute(): ReactElement {
+  const navigate = useNavigate();
   const { images } = useImages();
   const { create: createTileAsset } = useTileAsset();
 
@@ -16,6 +19,16 @@ export default function TileGameRoute(): ReactElement {
 
   return (
     <div>
+      <div
+        className="
+          absolute top-5 left-5
+          hover:cursor-pointer hover:animate-wiggle
+          active:animate-jump-out
+        "
+        onClick={() => navigate('/')}
+      >
+        <HomeIcon />
+      </div>
       <TileGame tiles={tileAssets} />
     </div>
   );

src/index.tsx

@@ -3,14 +3,19 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route } from 'react-router';
+import TileGameRoute from './components/tile-game/TileGameRoute';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <BrowserRouter>
+    <Routes>
+      <Route index element={<App />} />
+      <Route path="/picture-cards" element={<TileGameRoute />} />
+    </Routes>
+  </BrowserRouter>,
 );
 
 // If you want to start measuring performance in your app, pass a function