Merge branch 'feature/gameFeature' into develop

src/lib/components/Game/GameFacade.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { GameFacade, type GameKey } from "$lib/components/Game/GameFacade";
+  import GameLoader from "./GameLoader.svelte";
+
+  const gameUrls: Record<GameKey, string> = {
+    "Flappy Package": "https://niravanaa.github.io/FlappyPackage/",
+    "Package Clicker": "https://niravanaa.github.io/PackageClicker/",
+    "Package Climber": "https://niravanaa.github.io/PackageClimber/",
+  };
+
+  const gameFacade = new GameFacade(gameUrls);
+  let selectedGame: GameKey | null = null;
+
+  // Update gameUrl reactively based on selectedGame
+  $: gameUrl = selectedGame ? gameFacade.getGameUrl(selectedGame) : "";
+
+  // Handle radio selection to update selectedGame and gameUrl instantly
+  const onGameSelect = (gameKey: GameKey) => {
+    selectedGame = gameKey;
+  };
+</script>
+
+<div class="card flex flex-col items-center justify-center space-y-4 p-4">
+  {#if gameUrl}
+    <GameLoader bind:url={gameUrl} />
+  {/if}
+
+  <div class="flex space-x-4">
+    {#each gameFacade.getAvailableGames() as gameKey}
+      <label class="flex items-center space-x-2">
+        <input
+          class="radio"
+          type="radio"
+          bind:group={selectedGame}
+          value={gameKey}
+          on:change={() => onGameSelect(gameKey)} />
+        <p>{gameKey}</p>
+      </label>
+    {/each}
+  </div>
+</div>

src/lib/components/Game/GameFacade.ts

@@ -0,0 +1,17 @@
+export type GameKey = "Flappy Package" | "Package Clicker" | "Package Climber";
+
+export class GameFacade {
+  private gameUrls: Record<GameKey, string>;
+
+  constructor(gameUrls: Record<GameKey, string>) {
+    this.gameUrls = gameUrls;
+  }
+
+  getGameUrl(gameKey: GameKey): string {
+    return this.gameUrls[gameKey] || "";
+  }
+
+  getAvailableGames(): GameKey[] {
+    return Object.keys(this.gameUrls) as GameKey[];
+  }
+}

src/lib/components/Game/GameLoader.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let url: string;
+
+  let iframe: HTMLIFrameElement | null = null;
+
+  const keepIframeActive = () => {
+    if (iframe) {
+      iframe.contentWindow?.focus();
+    }
+  };
+
+  onMount(() => {
+    document.addEventListener("click", keepIframeActive);
+    return () => {
+      document.removeEventListener("click", keepIframeActive);
+    };
+  });
+</script>
+
+<iframe
+  title="Game by SvelteShip Solutions"
+  bind:this={iframe}
+  src={url}
+  class="h-[640px] w-[640px] resize overflow-auto"
+  scrolling="no"
+  allow="autoplay">
+</iframe>

src/routes/track/[trackingNumber]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { formatDbReservationDate, formatTrackingStatus } from "$lib/utils.js";
+  import GameFacade from "$lib/components/Game/GameFacade.svelte";
 
   export let data;
 </script>
@@ -60,7 +61,7 @@
   </div>
 
   <h3 class="mb-6 text-xl font-bold">Tracking History</h3>
-  <div class="table-container">
+  <div class="table-container mb-6">
     <table class="table table-hover">
       <thead>
         <tr>
@@ -96,4 +97,9 @@
       </tbody>
     </table>
   </div>
+  <h3 class="mb-6 text-xl font-bold">Live Map</h3>
+  <div class="grid grid-cols-1 grid-rows-2 gap-4 sm:grid-cols-2 sm:grid-rows-1">
+    <div class="card p-4">Map</div>
+    <GameFacade />
+  </div>
 </div>