feat: split deps into distinct tables with tooltips

satisfactorymodding · Jun 19, 2024 · ab7c904 · ab7c904
1 parent a73aa01
commit ab7c904
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 30 deletions.
diff --git a/src/lib/components/versions/DependencyRow.svelte b/src/lib/components/versions/DependencyRow.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { base } from '$app/paths';
+  import type { VersionDependency } from '$lib/generated';
+
+  export let dependency!: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>;
+</script>
+
+<tr class="rounded border !border-surface-500">
+  <td>
+    <a
+      title="Click to view mod page"
+      href={dependency.mod_id === 'SML' ? `${base}/sml-versions` : `${base}/mod/${dependency.mod_id}`}
+      class="text-yellow-500"><u>{dependency.mod_id}</u></a>
+  </td>
+  <td><div class="text-center">{dependency.condition}</div></td>
+</tr>
diff --git a/src/lib/components/versions/VersionDependenciesGrid.svelte b/src/lib/components/versions/VersionDependenciesGrid.svelte
@@ -1,59 +1,61 @@
 <script lang="ts">
-  import { base } from '$app/paths';
+  import DependencyRow from './DependencyRow.svelte';
+
   import type { VersionDependency } from '$lib/generated';
 
   export let dependencies!: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>[];
+
+  const requiredDependencies: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>[] = [];
+  const optionalDependencies: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>[] = [];
+  dependencies.forEach((dependency) => {
+    if (dependency.optional) {
+      optionalDependencies.push(dependency);
+    } else {
+      requiredDependencies.push(dependency);
+    }
+  });
 </script>
 
 <div class="grid grid-flow-row">
-  <table aria-label="Mod Dependency" class="max-w-auto table table-hover !overflow-visible">
+  <table aria-label="Mod Dependencies" class="max-w-auto table table-hover !overflow-visible">
     <tbody>
       <tr class="rounded border !border-surface-500">
-        <td>Required Dependency</td>
+        <td
+          title="Other mods that must be installed for this mod to function. The Mod Manager will automatically install these for you."
+          >Required Dependencies</td>
         <td><div class="text-center">Version Range</div></td>
       </tr>
-      {#if dependencies?.length === 0}
+      {#if requiredDependencies?.length === 0}
         <tr class="rounded border !border-surface-500">
           <td><div class="text-center">None</div></td>
           <td><div class="text-center">N/A</div></td>
         </tr>
       {:else}
-        {#each dependencies as dependency}
-          {#if dependency.optional === false}
-            <tr class="rounded border !border-surface-500">
-              <td>
-                <a
-                  title="Click to view mod page"
-                  href={dependency.mod_id === 'SML' ? `${base}/sml-versions` : `${base}/mod/${dependency.mod_id}`}
-                  class="text-yellow-500"><u>{dependency.mod_id}</u></a>
-              </td>
-              <td><div class="text-center">{dependency.condition}</div></td>
-            </tr>
-          {/if}
+        {#each requiredDependencies as dependency}
+          <DependencyRow {dependency} />
         {/each}
       {/if}
+    </tbody>
+  </table>
+</div>
+
+<div class="grid grid-flow-row">
+  <table aria-label="Mod Dependencies" class="max-w-auto table table-hover !overflow-visible">
+    <tbody>
       <tr class="rounded border !border-surface-500">
-        <td>Optional Dependency</td>
+        <td
+          title="Other mods that don't need to be installed for this mod to function, but may unlock additional functionality when present. You must chose to install them in the Mod Manager if you wish to use them."
+          >Optional Dependencies</td>
         <td><div class="text-center">Version Range</div></td>
       </tr>
-      {#if dependencies?.length === 0}
+      {#if optionalDependencies?.length === 0}
         <tr class="rounded border !border-surface-500">
           <td><div class="text-center">None</div></td>
           <td><div class="text-center">N/A</div></td>
         </tr>
       {:else}
-        {#each dependencies as dependency}
-          {#if dependency.optional === true}
-            <tr class="rounded border !border-surface-500">
-              <td>
-                <a
-                  title="Click to view mod page"
-                  href={dependency.mod_id === 'SML' ? `${base}/sml-versions` : `${base}/mod/${dependency.mod_id}`}
-                  class="text-yellow-500"><u>{dependency.mod_id}</u></a>
-              </td>
-              <td><div class="text-center">{dependency.condition}</div></td>
-            </tr>
-          {/if}
+        {#each optionalDependencies as dependency}
+          <DependencyRow {dependency} />
         {/each}
       {/if}
     </tbody>