frontend: check VCC requirement when updating (#575)

Fixes #572

src/assets/translations/en-US.json

@@ -104,6 +104,7 @@
   "requirements_windows_cantCheckIfVccRuntimeInstalled": "Unable to check if Microsoft Visual C++ Runtime is installed",
   "requirements_windows_vccRuntimeNotInstalled": "Microsoft Visual C++ Runtime is not installed or is out of date",
   "requirements_windows_vccRuntimeExplanation": "A recent version of the Microsoft Visual C++ Runtime is required to run the game",
+  "gameUpdate_windows_vccRuntimeExplanation": "A recent version of the Microsoft Visual C++ Runtime is required to update the game",
   "requirements_windows_vccRuntimeExplanation_downloadLink": "Download the latest Microsoft Visual C++ Runtime here",
   "requirements_notMet_header": "Unfortunately, your system does not meet all the minimum requirements or we were unable to check them",
   "settings_folders_installationDir_prompt": "Pick an Installation Folder",

src/components/games/setup/GameUpdate.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import type { SupportedGame } from "$lib/constants";
+  import { isMinimumVCCRuntimeInstalled } from "$lib/rpc/config";
   import { VersionStore } from "$lib/stores/VersionStore";
+  import { type } from "@tauri-apps/api/os";
   import { Button, Card } from "flowbite-svelte";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { _ } from "svelte-i18n";
 
   export let activeGame: SupportedGame;
@@ -11,10 +13,20 @@
 
   export let installedVersion: String | undefined;
   export let installedVersionFolder: String | undefined;
+
+  let displayVCCWarning = false;
+
+  onMount(async () => {
+    const osType = await type();
+    if (osType == "Windows_NT") {
+      const isVCCInstalled = await isMinimumVCCRuntimeInstalled();
+      displayVCCWarning = !isVCCInstalled;
+    }
+  });
 </script>
 
 <div class="flex flex-col h-full justify-center items-center">
-  <Card size="lg" padding="xl">
+  <Card size="lg" padding="xl" class="!pt-5 !pb-5 !bg-[#141414]">
     <h5
       class="mb-2 text-xl font-bold text-gray-900 dark:text-white text-center"
     >
@@ -46,25 +58,41 @@
         <strong>{$VersionStore.activeVersionType}</strong>
       </li>
     </ul>
-    <p class="mb-3">
+    {#if displayVCCWarning}
-      {$_("gameUpdate_versionMismatch_nextSteps")}
+      <span class="font-bold"
-    </p>
+        >{$_("requirements_windows_vccRuntimeNotInstalled")}</span
-    <div
-      class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4"
-    >
-      <Button
-        class="border-solid border-2 border-slate-500 rounded bg-slate-900 hover:bg-slate-800 text-sm text-white font-semibold px-5 py-2"
-        on:click={async () => {
-          dispatch("job", {
-            type: "updateGame",
-          });
-        }}>{$_("gameUpdate_versionMismatch_button_updateGame")}</Button
       >
-      <Button
+      <p>
-        class="border-solid border-2 border-slate-500 rounded bg-slate-900 hover:bg-slate-800 text-sm text-white font-semibold px-5 py-2"
+        {$_("gameUpdate_windows_vccRuntimeExplanation")}
-        href="/settings/versions"
+        <a
-        >{$_("gameUpdate_versionMismatch_button_changeVersion")}</Button
+          class="font-bold text-blue-500"
+          target="_blank"
+          rel="noreferrer"
+          href="https://aka.ms/vs/17/release/vc_redist.x64.exe"
+          >{$_("requirements_windows_vccRuntimeExplanation_downloadLink")}</a
+        >
+      </p>
+    {:else}
+      <p class="mb-3">
+        {$_("gameUpdate_versionMismatch_nextSteps")}
+      </p>
+      <div
+        class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4"
       >
-    </div>
+        <Button
+          class="border-solid border-2 border-slate-500 rounded bg-slate-900 hover:bg-slate-800 text-sm text-white font-semibold px-5 py-2"
+          on:click={async () => {
+            dispatch("job", {
+              type: "updateGame",
+            });
+          }}>{$_("gameUpdate_versionMismatch_button_updateGame")}</Button
+        >
+        <Button
+          class="border-solid border-2 border-slate-500 rounded bg-slate-900 hover:bg-slate-800 text-sm text-white font-semibold px-5 py-2"
+          href="/settings/versions"
+          >{$_("gameUpdate_versionMismatch_button_changeVersion")}</Button
+        >
+      </div>
+    {/if}
   </Card>
 </div>