Optional Dependencies Grid (#169)

* Filter Optional Dependencies from ModDependency List may determine to create an optional dependency list later * mod.id -> mod.mod_reference Requested by Mircea https://discord.com/channels/555424930502541343/830842478956642354/1248726787857321995 * fix: added graphql tags and draft "Optional" tag * Tagged Optional -> Tabled Optional * feat: split deps into distinct tables with tooltips * feat: dotted underline on deps table headers * feat: only show optional deps table when they exist * chore: update aria-label * Make dependencies reactive Co-authored-by: mircearoata <[email protected]> * chore: add gpg signing info to readme * fix: pass modref for smm install and modid for smr download --------- Co-authored-by: Rob B <[email protected]> Co-authored-by: mircearoata <[email protected]>
satisfactorymodding · Sep 17, 2024 · ef85bd3 · ef85bd3
1 parent 3e75505
commit ef85bd3
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 20 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -36,7 +36,8 @@
 				"mikestead.dotenv",
 				"me-dutour-mathieu.vscode-github-actions",
 				"eamodio.gitlens",
-				"GitHub.copilot"
+				"GitHub.copilot",
+				"GitHub.vscode-pull-request-github"
 			]
 		}
 	},

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -19,7 +19,13 @@ You should [operate the devcontainer out of an isolated Docker volume](https://c
 to avoid the _significant_ slowdowns caused by working on the host file system.
 You may need to [install additional software](https://code.visualstudio.com/remote/advancedcontainers/sharing-git-credentials)
 to share your git credentials with the container.
-Alternative, try using GitHub Codespaces.
+Alternatively, try using GitHub Codespaces.
+
+If you normally [gpg sign your commits](https://code.visualstudio.com/remote/advancedcontainers/sharing-git-credentials#_sharing-gpg-keys)
+and the container is giving you trouble,
+consider turning off signing inside the container by running
+`git config --global commit.gpgsign false`
+inside the container.
 
 ### Dependencies
 

diff --git a/cspell.json b/cspell.json
@@ -5,7 +5,20 @@
   // language - current active spelling language
   "language": "en",
   // words - list of words to be always considered correct
-  "words": ["cfworker", "felte", "ficsit", "pnpx", "prismjs", "smui", "tolgee", "uplugin", "urql", "webp", "wonka"],
+  "words": [
+    "cfworker",
+    "felte",
+    "ficsit",
+    "gpgsign",
+    "pnpx",
+    "prismjs",
+    "smui",
+    "tolgee",
+    "uplugin",
+    "urql",
+    "webp",
+    "wonka"
+  ],
   // flagWords - list of words to be always considered incorrect
   // This is useful for offensive words and common spelling errors.
   // cSpell:disable (don't complain about the words we listed here)

diff --git a/src/gql/mods/mod.graphql b/src/gql/mods/mod.graphql
@@ -21,6 +21,7 @@ query GetMod($mod: String!) {
         }
         dependencies {
           mod_id
+          optional
           condition
         }
         version
@@ -38,6 +39,7 @@ query GetMod($mod: String!) {
         }
         dependencies {
           mod_id
+          optional
           condition
         }
         version
@@ -55,6 +57,7 @@ query GetMod($mod: String!) {
         }
         dependencies {
           mod_id
+          optional
           condition
         }
         version

diff --git a/src/gql/versions/mod_version.graphql b/src/gql/versions/mod_version.graphql
@@ -28,6 +28,7 @@ query GetModVersion($version: VersionID!) {
     }
     dependencies {
       mod_id
+      optional
       condition
     }
   }

diff --git a/src/lib/components/mods/ModLatestVersions.svelte b/src/lib/components/mods/ModLatestVersions.svelte
@@ -9,7 +9,7 @@
 
   type IVersion = Pick<Version, 'id' | 'link' | 'version' | 'created_at'> & {
     targets?: Pick<VersionTarget, 'targetName' | 'size' | 'hash'>[];
-  } & { dependencies?: Pick<VersionDependency, 'mod_id' | 'condition'>[] };
+  } & { dependencies?: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>[] };
 
   type ILatestVersions = {
     alpha?: IVersion;
@@ -23,6 +23,7 @@
 
   export let latestVersions!: ILatestVersions;
   export let modId!: string;
+  export let modReference!: string;
 
   export const { t } = getTranslate();
 </script>
@@ -48,7 +49,7 @@
             <div class="text-1xl col-span-3 h-auto w-auto p-2.5">
               <a
                 href="#top"
-                on:click={() => installMod(modId)}
+                on:click={() => installMod(modReference)}
                 title="Install via Satisfactory Mod Manager"
                 class="text-yellow-500">
                 <span class="material-icons align-middle" style="font-size: 118x;">download</span> <u>Install</u>

diff --git a/src/lib/components/versions/DependencyRow.svelte b/src/lib/components/versions/DependencyRow.svelte
@@ -0,0 +1,15 @@
+<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={`${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,34 +1,55 @@
 <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' | 'condition'>[];
+  export let dependencies!: Pick<VersionDependency, 'mod_id' | 'optional' | 'condition'>[];
+
+  $: requiredDependencies = dependencies.filter((d) => !d.optional);
+  $: optionalDependencies = dependencies.filter((d) => d.optional);
 </script>
 
 <div class="grid grid-flow-row">
-  <table aria-label="Mod Dependency" class="max-w-auto table table-hover !overflow-visible">
+  <table aria-label="Required Mod Dependencies" class="max-w-auto table table-hover !overflow-visible">
     <tbody>
       <tr class="rounded border !border-surface-500">
-        <td>Mod Dependency</td>
+        <td
+          class="underline decoration-dotted"
+          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}
+        <!-- A mod *not* having required dependencies is rare, so point it out when this is the case -->
         <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}
-          <tr class="rounded border !border-surface-500">
-            <td>
-              <a title="Click to view mod page" href={`${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>
+        {#each requiredDependencies as dependency}
+          <DependencyRow {dependency} />
         {/each}
       {/if}
     </tbody>
   </table>
 </div>
+
+<!-- Optional dependencies are uncommon as of now, so don't spend UI space on them unless there are any -->
+{#if optionalDependencies?.length !== 0}
+  <div class="grid grid-flow-row">
+    <table aria-label="Optional Mod Dependencies" class="max-w-auto table table-hover !overflow-visible">
+      <tbody>
+        <tr class="rounded border !border-surface-500">
+          <td
+            class="underline decoration-dotted"
+            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>
+        {#each optionalDependencies as dependency}
+          <DependencyRow {dependency} />
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
diff --git a/src/routes/mod/[modId]/+page.svelte b/src/routes/mod/[modId]/+page.svelte
@@ -141,7 +141,10 @@
             modName={$mod.data.mod.name}
             compatibility={$mod.data.mod.compatibility} />
         </div>
-        <ModLatestVersions modId={$mod.data.mod.id} latestVersions={$mod.data.mod.latestVersions} />
+        <ModLatestVersions
+          modId={$mod.data.mod.id}
+          modReference={$mod.data.mod.mod_reference}
+          latestVersions={$mod.data.mod.latestVersions} />
         <CompatibilityGrid compatibility={$mod.data.mod.compatibility} />
         <ModInfo mod={$mod.data.mod} />
         <ModAuthors authors={$mod.data.mod.authors} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ query GetModVersion($version: VersionID!) { @@
         }
         dependencies {
           mod_id
+          optional
           condition
         }
       }
@@ Expand Down @@