pages: add jak 3 in progress page (#428)

src/App.svelte

@@ -9,6 +9,7 @@
   import Header from "./components/header/Header.svelte";
   import Update from "./routes/Update.svelte";
   import { isInDebugMode } from "$lib/utils/common";
+  import GameInProgress from "./components/games/GameInProgress.svelte";
   import Toast from "./components/toast/Toast.svelte";
   import Help from "./routes/Help.svelte";
   import { isLoading } from "svelte-i18n";
@@ -83,6 +84,12 @@
             primary={false}
             let:params
           />
+          <Route
+            path="/jak3"
+            component={GameInProgress}
+            primary={false}
+            let:params
+          />
           <Route
             path="/settings/:tab"
             component={Settings}

src/assets/translations/en-US.json

@@ -148,6 +148,7 @@
   "temp_jak2_indev_header": "Jak II is Currently in Development",
   "temp_jak2_indev_progressReports": "Progress Reports",
   "temp_jak2_indev_subheader": "In the meantime, check out our latest progress reports showcasing what we've accomplished so far",
+  "temp_jak3_indev_header": "Jak 3 is Currently in Development",
   "update_alreadyUpToDate": "You're Up to Date!",
   "update_button_doUpdate": "Update Launcher",
   "update_button_hideDependencyChanges": "Dependency Changes",

src/components/background/Background.svelte

@@ -5,6 +5,8 @@
   import { listen } from "@tauri-apps/api/event";
   import { getFurthestGameMilestone } from "$lib/rpc/game";
   import jak2Background from "$assets/images/background-jak2.webp";
+  import jak3InProgressVid from "$assets/videos/jak3-dev.mp4";
+  import jak3InProgressPoster from "$assets/videos/jak3-poster.png";
 
   const location = useLocation();
   $: $location.pathname, updateStyle();
@@ -52,4 +54,13 @@
   <img class={style} src={jak1Image} />
 {:else if $location.pathname == "/jak2"}
   <img class={style} src={jak2Background} />
+{:else if $location.pathname == "/jak3"}
+  <video
+    class={style}
+    poster={jak3InProgressPoster}
+    src={jak3InProgressVid}
+    autoplay
+    muted
+    loop
+  />
 {/if}

src/components/games/GameInProgress.svelte

@@ -4,7 +4,7 @@
 
 <div class="flex flex-col h-full justify-center items-center p-5 text-center">
   <h1 class="text-2xl font-black mb-5 text-outline">
-    {$_("temp_jak2_indev_header")}
+    {$_("temp_jak3_indev_header")}
   </h1>
   <p class="mb-10">
     {$_("temp_jak2_indev_subheader")}

src/components/sidebar/Sidebar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import logoJak1 from "$assets/images/jak-tpl.webp";
   import logoJak2 from "$assets/images/jak-2.webp";
+  import logoJak3 from "$assets/images/jak-3.webp";
   import IconCog from "~icons/mdi/cog";
   import IconChatQuestion from "~icons/mdi/chat-question";
   import { link, useLocation } from "svelte-navigator";
@@ -80,6 +81,20 @@
         >
       </a>
     </li>
+    <li>
+      <a
+        class={getNavItemStyle("jak3", $location.pathname)}
+        href="/jak3"
+        use:link
+      >
+        <img src={logoJak3} alt="Jak 3" aria-label="Jak 3" />
+        <Tooltip placement="right" type="dark"
+          >{modifyGameTitleName(
+            $_(`gameName_${getInternalName(SupportedGame.Jak3)}`),
+          )}</Tooltip
+        >
+      </a>
+    </li>
     <li class="!mt-auto">
       <a
         class={getNavItemStyle("settings", $location.pathname)}