frontend: make an in-progress page for jak2

src/App.svelte

@@ -1,7 +1,4 @@
 <script>
-  // Assets
-  import bgVideo from "$assets/videos/background.mp4";
-  import bgVideoPoster from "$assets/images/background-jak1-fallback.webp";
   // Other Imports
   import { onMount } from "svelte";
   import { Router, Route } from "svelte-navigator";
@@ -17,6 +14,7 @@
   import Faq from "./routes/FAQ.svelte";
   import Textures from "./routes/Textures.svelte";
   import Update from "./routes/Update.svelte";
+  import GameInProgress from "./components/games/GameInProgress.svelte";
 
   let revokeSpecificActions = false;
 
@@ -71,12 +69,12 @@
 
 <Router>
   <div class="container h-screen max-w-none">
-    <!-- TODO - pass background component current active game -->
-    <Background {bgVideo} {bgVideoPoster} />
+    <Background />
     <Header />
     <Sidebar />
     <Route path="/" component={Game} primary={false} let:params />
     <Route path="/:game_name" component={Game} primary={false} let:params />
+    <Route path="/jak2" component={GameInProgress} primary={false} let:params />
     <Route path="/settings/:tab" component={Settings} primary={false} let:params />
     <Route path="/faq" component={Faq} primary={false} />
     <Route path="/textures" component={Textures} primary={false} />

src/components/background/Background.svelte

@@ -1,15 +1,32 @@
 <script type="ts">
-  export let bgVideo: string;
-  export let bgVideoPoster: string;
+  import bgVideoJak1 from "$assets/videos/background-jak1.mp4";
+  import bgVideoPosterJak1 from "$assets/images/background-jak1-fallback.mp4";
+  import bgVideoJak2 from "$assets/videos/background-jak2.webm";
+  import bgVideoPosterJak2 from "$assets/images/background-jak2-fallback.png";
+  import { useLocation } from "svelte-navigator";
+
+  const location = useLocation();
+  $: pathname = $location.pathname;
 </script>
 
 <div class="height-screen">
-  <video
-    class="absolute -z-50 object-fill h-screen"
-    poster={bgVideoPoster}
-    src={bgVideo}
-    autoplay
-    muted
-    loop
-  />
+  {#if pathname == "/jak1" || pathname == "/"}
+    <video
+      class="absolute -z-50 object-fill h-screen"
+      poster={bgVideoPosterJak1}
+      src={bgVideoJak1}
+      autoplay
+      muted
+      loop
+    />
+  {:else if pathname == "/jak2"}
+    <video
+      class="absolute -z-50 object-fill h-screen"
+      poster={bgVideoPosterJak2}
+      src={bgVideoJak2}
+      autoplay
+      muted
+      loop
+    />
+  {/if}
 </div>

src/components/games/GameInProgress.svelte

@@ -0,0 +1,17 @@
+<div class="ml-20">
+  <div
+    class="flex flex-col h-screen justify-center items-center p-5 text-center"
+  >
+    <h1 class="text-2xl font-black mb-5">Jak 2 is Currently in Development</h1>
+    <p class="mb-10">
+      In the meantime, check out our latest progress reports showcasing what
+      we've accomplished so far
+    </p>
+    <a
+      class="font-bold text-orange-400 hover:text-orange-600"
+      href="https://opengoal.dev/blog/tags/progress-report"
+      target="_blank"
+      rel="noreferrer">Progress Reports</a
+    >
+  </div>
+</div>