[Mod Content] basic mod support

.gitignore

@@ -2,5 +2,7 @@
 dist
 dev-dist
 
+.env
+
 .DS_Store
 _test/

package.json

@@ -41,6 +41,7 @@
     "lodash": "^4.17.21",
     "prettier": "^2.3.2",
     "prettier-plugin-svelte": "^2.4.0",
+    "svelecte": "^4.5.2",
     "svelte": "^3.58.0",
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "^4.9.8",

public/global.css

@@ -200,6 +200,14 @@ pre {
   --cata-color-light_magenta: rgb(254,0,254);
   --cata-color-light_cyan: rgb(0,240,255);
   --cata-color-white: rgb(255,255,255);
+
+  /* svelecte */
+  --sv-bg: var(--cata-color-black);
+  --sv-border: 1px solid var(--cata-color-dark_gray);
+  --sv-dropdown-border: 1px solid var(--cata-color-dark_gray);
+  --sv-item-selected-bg: #333;
+  --sv-dropdown-active-bg: #333;
+  --sv-dropdown-selected-bg: #333;
 }
 .c_black { color: var(--cata-color-black); background: var(--cata-color-black); }
 .c_white { color: var(--cata-color-white); background: var(--cata-color-black); }

src/App.svelte

@@ -4,11 +4,13 @@ import { CddaData, data, loadProgress, mapType, singularName } from "./data";
 import { tileData } from "./tile-data";
 import SearchResults from "./SearchResults.svelte";
 import Catalog from "./Catalog.svelte";
+import ModCategory from "./ModCategory.svelte";
 import dontPanic from "./assets/dont_panic.png";
 import InterpolatedTranslation from "./InterpolatedTranslation.svelte";
 import { t } from "@transifex/native";
 import type { SupportedTypeMapped, SupportedTypesWithMapped } from "./types";
 import throttle from "lodash/throttle";
+import Svelecte from "svelecte";
 
 let item: { type: string; id: string } | null = null;
 
@@ -21,7 +23,7 @@ let builds:
     }[]
   | null = null;
 
-fetch("https://raw.githubusercontent.com/nornagon/cdda-data/main/builds.json")
+fetch(`${process.env.CDDA_DATA_SOURCE}/builds.json`)
   .then((d) => d.json())
   .then((b) => {
     builds = b;
@@ -33,7 +35,10 @@ fetch("https://raw.githubusercontent.com/nornagon/cdda-data/main/builds.json")
 const url = new URL(location.href);
 const version = url.searchParams.get("v") ?? "latest";
 const locale = url.searchParams.get("lang");
-data.setVersion(version, locale);
+
+let enabledMods: string[] = url.searchParams.get("m")?.split(",") ?? [];
+
+data.setVersion(version, locale, enabledMods);
 
 const tilesets = [
   {
@@ -103,7 +108,7 @@ function decodeQueryParam(p: string) {
   return decodeURIComponent(p.replace(/\+/g, " "));
 }
 
-function load() {
+function load(noScroll: boolean = false) {
   const path = location.pathname.slice(import.meta.env.BASE_URL.length - 1);
   let m: RegExpExecArray | null;
   if ((m = /^\/([^\/]+)(?:\/(.+))?$/.exec(path))) {
@@ -115,7 +120,7 @@ function load() {
       item = { type, id: id ? decodeURIComponent(id) : "" };
     }
 
-    window.scrollTo(0, 0);
+    if (!noScroll) window.scrollTo(0, 0);
   } else {
     item = null;
     search = "";
@@ -133,6 +138,28 @@ $: if (item && item.id && $data && $data.byIdMaybe(item.type as any, item.id)) {
   document.title = "The Hitchhiker's Guide to the Cataclysm";
 }
 
+$: {
+  const modIds = enabledMods;
+  const url = new URL(location.href);
+  if (modIds.length > 0) {
+    url.searchParams.set("m", modIds.join(","));
+  } else {
+    url.searchParams.delete("m");
+  }
+  if (
+    $data &&
+    $data.availableMods.length > 0 &&
+    !$data.modsFetched &&
+    modIds.length > 0
+  ) {
+    location.href = url.toString();
+  } else {
+    replaceState(null, "", url.toString());
+    $data?.setEnabledMods(modIds);
+    load(true);
+  }
+}
+
 let search: string = "";
 
 load();
@@ -332,8 +359,10 @@ function langHref(lang: string, href: string) {
 <main>
   {#if item}
     {#if $data}
-      {#key item}
-        {#if item.id}
+      {#key [item, enabledMods]}
+        {#if item.type === "mod"}
+          <ModCategory id={item.id} data={$data} />
+        {:else if item.id}
           <Thing {item} data={$data} />
         {:else}
           <Catalog type={item.type} data={$data} />
@@ -353,7 +382,7 @@ function langHref(lang: string, href: string) {
     {/if}
   {:else if search}
     {#if $data}
-      {#key search}
+      {#key [search, enabledMods]}
         <SearchResults data={$data} {search} />
       {/key}
     {:else}
@@ -504,6 +533,9 @@ Anyway?`,
         <a href="/conduct{location.search}">{t("Conducts")}</a>
       </li>
       <li><a href="/proficiency{location.search}">{t("Proficiencies")}</a></li>
+      {#if $data && $data.activeMods.length > 1}
+        <li><a href="/mod{location.search}">{t("Mods")}</a></li>
+      {/if}
     </ul>
 
     <InterpolatedTranslation
@@ -590,6 +622,23 @@ Anyway?`,
       {/if}
     </span>
   </p>
+  <p class="data-options" style="display: flex; align-items: center;">
+    {#if $data && $data.availableMods.length === 0}
+      <em style="color: var(--cata-color-gray)"
+        >{t("Mods data not processed for this version.")}</em>
+    {:else if $data}
+      {t("Mods:")}
+      <Svelecte
+        options={$data.availableMods}
+        strictMode={false}
+        highlightFirstItem={false}
+        multiple
+        bind:value={enabledMods}
+        placeholder={t("No mods selected.")} />
+    {:else}
+      <em style="color: var(--cata-color-gray)">{t("Loading...")}</em>
+    {/if}
+  </p>
 </main>
 
 <style>

src/JsonView.svelte

@@ -1,25 +1,40 @@
 <script lang="ts">
 import { t } from "@transifex/native";
+import { getAllObjectSources, hiddenAttributes } from "./data";
+
 export let obj: any;
 export let buildNumber: string | undefined;
 const _context = "View/Edit on GitHub";
+
+const urlView = `https://github.com/CleverRaven/Cataclysm-DDA/blob/${
+  buildNumber ?? "master"
+}`;
+const urlEdit = `https://github.dev/CleverRaven/Cataclysm-DDA/blob/${
+  buildNumber ?? "master"
+}`;
 </script>
 
 <pre>{JSON.stringify(
     obj,
-    (key, value) => (key === "__filename" ? undefined : value),
+    (key, value) => (hiddenAttributes.includes(key) ? undefined : value),
     2
   )}</pre>
-{#if obj.__filename}
-  <a
-    href={`https://github.com/CleverRaven/Cataclysm-DDA/blob/${
-      buildNumber ?? "master"
-    }/${obj.__filename}`}
-    target="_blank">{t("View", { _context })}</a>
-  /
-  <a
-    href={`https://github.dev/CleverRaven/Cataclysm-DDA/blob/${
-      buildNumber ?? "master"
-    }/${obj.__filename}`}
-    target="_blank">{t("Edit on GitHub", { _context })}</a>
-{/if}
+{#each getAllObjectSources(obj) as o}
+  <details>
+    <summary
+      >{o.__modName}
+      {#if o.__filename}
+        <a href={`${urlView}/${o.__filename}`} target="_blank"
+          >{t("View", { _context })}</a>
+        /
+        <a href={`${urlEdit}/${o.__filename}`} target="_blank"
+          >{t("Edit on GitHub", { _context })}</a>
+      {/if}
+    </summary>
+    <pre>{JSON.stringify(
+        o,
+        (key, value) => (hiddenAttributes.includes(key) ? undefined : value),
+        2
+      )}</pre>
+  </details>
+{/each}

src/ModCategory.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { t } from "@transifex/native";
+import { byName, type CddaData, type ModInfo, translate } from "./data";
+import ThingLink from "./types/ThingLink.svelte";
+import LimitedList from "./LimitedList.svelte";
+import { setContext } from "svelte";
+
+export let id: string;
+export let data: CddaData;
+setContext("data", data);
+
+const mods = (
+  data.activeMods
+    .filter((mod) => (id ? mod === id : mod !== "dda"))
+    .map((mod) => data.getModInfo(mod))
+    .filter((mod) => mod !== undefined) as ModInfo[]
+).sort((a, b) => a.name.localeCompare(b.name));
+
+const listTypes = [
+  "item",
+  "monster",
+  "furniture",
+  "terrain",
+  "vehicle_part",
+  "tool_quality",
+  "mutation",
+  "martial_art",
+  "json_flag",
+  "proficiency",
+] as const;
+
+const modThings = mods
+  .map(
+    (mod) =>
+      [
+        mod,
+        listTypes
+          .map(
+            (type) =>
+              [
+                type,
+                data
+                  .activeModObjects(mod.id, type)
+                  .filter((o) => "id" in o && o.id)
+                  .sort(byName),
+              ] as const
+          )
+          .filter(([_, things]) => things.length > 0),
+      ] as const
+  )
+  .filter(([_, typeThings]) => typeThings.length > 0);
+</script>
+
+<h1>{t("Mods")}</h1>
+{#if mods.length > 0}
+  {#each modThings as [mod, typeThings]}
+    <section>
+      <h1>{translate(mod.name, false, 1)}</h1>
+      {#each typeThings as [type, things]}
+        {#if things.length > 0}
+          <section>
+            <h1>{t(type)}</h1>
+            <LimitedList items={things} let:item limit={10}>
+              <ThingLink id={item.id} {type} />
+            </LimitedList>
+          </section>
+        {/if}
+      {/each}
+    </section>
+  {/each}
+{:else if id}
+  <p>{t("No data found for mod:")} {id}.</p>
+{:else}
+  <p>{t("No mods found.")}</p>
+{/if}

src/SearchResults.svelte

@@ -101,6 +101,13 @@ $: targets = [...(data?.all() ?? [])]
       SEARCHABLE_TYPES.has(mapType(x.type))
   )
   .filter((x) => (x.type === "mutation" ? !/Fake\d$/.test(x.id) : true))
+  .filter((x) => {
+    if (x.type !== "MONSTER") return true;
+    const mon = data.byIdMaybe("monster", x.id);
+    return (
+      mon && (!data.isMonsterBlacklisted(mon) || data.isMonsterWhitelisted(mon))
+    );
+  })
   .flatMap((x) =>
     [
       {