Add more turtle flags

 - Add resource pack support in the UI.
 - Add a field for the mod ID/namespace.
 - Add ace, bi and nb flags.

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-dist
+dist
+*~
+*.kra

package.json

@@ -8,6 +8,7 @@
     "serve": "vite preview"
   },
   "devDependencies": {
+    "@types/node": "^20.14.9",
     "eslint": "^8.57.0",
     "eslint-plugin-solid": "^0.14.0",
     "typescript": "^5.3.3",

src/App.tsx

@@ -1,12 +1,13 @@
-import { createSignal, type Component, type JSX, For, createMemo, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, type Accessor, type Component, type JSX } from 'solid-js';
 
 import styles from "./App.module.css";
 
-import { Feature, type FeatureProps } from './components/Feature';
 import { ToggleButton } from './components/Button';
-import tools from './datapack/tools';
-import { PackOutput, Version, versions, type PackItem } from './datapack';
 import Download from './components/Download';
+import { Feature, type FeatureProps } from './components/Feature';
+import { PackOutput, Version, makeModId, versions, type PackItem } from './datapack';
+import { turtleFlags } from './datapack/overlay';
+import tools from './datapack/tools';
 
 
 const Section: Component<{ title: string, children?: JSX.Element }> = props => <div class={styles.section}>
@@ -23,22 +24,29 @@ const FeatureSection: Component<{ title: string, features: FeatureProps[] }> = p
     </Section>
   </Show>;
 
-const createPackItem = (x: PackItem) => {
+const createPackItem = (x: PackItem): FeatureProps => {
   const [checked, setChecked] = createSignal(false);
   return { ...x, checked, setChecked }
 }
 
+const createPackItems = (x: PackItem[], version: Accessor<Version>): Accessor<FeatureProps[]> => {
+  const allTweaks = x.map(createPackItem);
+  return createMemo(() => allTweaks.filter(x => !x.enabled || x.enabled(version())));
+}
+
 const App: Component = () => {
   const [packName, setPackName] = createSignal("Customisations for CC: Tweaked");
+  const [packId, setPackId] = createSignal("");
   const [mcVersion, setMcVersion] = createSignal(Version.MC_1_20_1);
 
-  const toolFeatures = tools.map(createPackItem);
-
-  const allFeatures = [...toolFeatures];
+  const enabledTools = createPackItems(tools, mcVersion);
+  const enabledTweaks = createPackItems([turtleFlags], mcVersion);
+  const allFeatures = () => [...enabledTools(), ...enabledTweaks()];
 
   const createPack = createMemo(() => {
-    const pack = new PackOutput(mcVersion());
-    for (const feature of allFeatures) {
+    const id = packId();
+    const pack = new PackOutput(mcVersion(), packName(), id === "" ? undefined : id);
+    for (const feature of allFeatures()) {
       if (feature.checked()) feature.process(pack);
     }
     return pack;
@@ -48,7 +56,19 @@ const App: Component = () => {
     <Section title="Pack Details">
       <div class={styles.inputGroup}>
         <label class={styles.label} for="packName">Pack Description</label>
-        <input class={styles.input} id="packName" type="text" value={packName()} onInput={e => setPackName(e.currentTarget.value)} />
+        <input
+          class={styles.input} id="packName" type="text"
+          title="The name of the pack, as displayed in Minecraft."
+          value={packName()} onInput={e => setPackName(e.currentTarget.value)}
+        />
+
+        <label class={styles.label} for="packId">Pack Namespace</label>
+        <input
+          class={styles.input} id="packId" type="text"
+          pattern="[a-z][a-z0-9_]{3,63}" placeholder={makeModId(packName())}
+          title="The mod namespace used for resources. Should be a string containing just lowercase letters and underscores."
+          value={packId()} onInput={e => setPackId(e.currentTarget.value)}
+        />
 
         <span class={styles.label} title="Which version of Minecraft to support">Minecraft Version</span>
         <div class={`${styles.input} ${styles.radioGroup}`}>
@@ -58,10 +78,10 @@ const App: Component = () => {
         </div>
       </div>
     </Section>
-    <FeatureSection title="Turtle Tools" features={toolFeatures} />
-    <FeatureSection title="Tweaks" features={[]} />
+    <FeatureSection title="Turtle Tools" features={enabledTools()} />
+    <FeatureSection title="Tweaks" features={enabledTweaks()} />
     <Section title="Download">
-      <Download name={packName()} pack={createPack()} />
+      <Download pack={createPack()} />
     </Section>
   </>;
 };

src/components/Download.module.css

@@ -1,7 +1,7 @@
 .downloadSplit {
   display: grid;
   grid-template-columns: 1fr min-content 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: min-content;
   gap: 1rem 1rem;
   grid-template-areas:
     ". separator ."
@@ -22,14 +22,34 @@
   align-items: center;
 }
 
-.downloadBar {
+.downloadSeparator > .downloadBar {
   flex-basis: 50%;
   border-left: solid 1px var(--border-colour);
   height: 50%;
 }
 
+.downloadSeparatorHorizontal {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: row;
+  align-items: center;
+}
+
+.downloadSeparatorHorizontal > .downloadBar {
+  flex-basis: 50%;
+  border-top: solid 1px var(--border-colour);
+  height: 50%;
+}
+
 .downloadSummary { grid-row: 1; }
-.downloadButtons { grid-row: 2; }
+
+.downloadButtons {
+  grid-row: 2;
+  align-content: center;
+}
 
 .downloadSummary > * + * { margin: 0.5rem 0rem; }
 .downloadSummary h3 { font-size: 1.3rem; }

src/components/Download.tsx

@@ -1,45 +1,72 @@
-import type { Component } from "solid-js";
+import { Match, Show, Switch, type Component } from "solid-js";
 import type { PackOutput } from "../datapack";
 import { saveBlob } from "../utils";
 
 import styles from "./Download.module.css";
 import { Button } from "./Button";
 
-const Download: Component<{ name: string, pack: PackOutput }> = props => {
-  const packFileName = () => `${props.name.replace(/[^A-Za-z0-9_-]+/g, "-").toLowerCase()}`
+const Download: Component<{ pack: PackOutput }> = props => {
+  const packFileName = () => `${props.pack.name.replace(/[^A-Za-z0-9_-]+/g, "-").toLowerCase()}`
 
   const createDatapack = () => {
-    props.pack.makeDataPack(props.name).generateAsync({ type: "blob" })
+    props.pack.makeDataPack().generateAsync({ type: "blob" })
       .then(x => saveBlob(`${packFileName()}.zip`, x))
       .catch(e => console.error(e));
   };
 
+  const createResourcepack = () => {
+    props.pack.makeResourcePack().generateAsync({ type: "blob" })
+      .then(x => saveBlob(`${packFileName()}-resources.zip`, x))
+      .catch(e => console.error(e));
+  };
+
   const createMod = () => {
-    props.pack.makeMod(props.name).generateAsync({ type: "blob" })
+    props.pack.makeMod().generateAsync({ type: "blob" })
       .then(x => saveBlob(`${packFileName()}.jar`, x))
       .catch(e => console.error(e));
   };
 
   return <div class={styles.downloadSplit}>
     <div class={styles.downloadSummary}>
-      <h3>Download as Datapack</h3>
-      <p>
-        Download as a datapack. This file should be saved to <code>datapacks/{packFileName()}.zip</code> in your world
-        folder.
-      </p>
+      <Switch>
+        <Match when={props.pack.hasResources()}>
+          <h3>Download as resource and datapack</h3>
+          <p>
+            Download a separate resource and datapack. The datapack should be saved to <code>datapacks/{packFileName()}.zip</code> in
+            your world folder, and the resource pack to the global <code>resourcepacks</code> folder.
+          </p>
+        </Match>
+        <Match when={true}>
+          <h3>Download as datapack</h3>
+          <p>
+            Download as a datapack. This file should be saved to <code>datapacks/{packFileName()}.zip</code> in your world
+            folder.
+          </p>
+        </Match>
+      </Switch>
     </div>
     <div class={styles.downloadButtons}>
       <Button class={styles.downloadButton} type="button" onClick={() => createDatapack()} disabled={!props.pack.hasData()}>
         Download <code>{packFileName()}.zip</code>
       </Button>
+      <Show when={props.pack.hasResources()}>
+        <div class={styles.downloadSeparatorHorizontal}>
+          <div class={styles.downloadBar} />
+          <p>and</p>
+          <div class={styles.downloadBar} />
+        </div>
+        <Button class={styles.downloadButton} type="button" onClick={() => createResourcepack()} disabled={!props.pack.hasResources()}>
+          Download <code>{packFileName()}-resources.zip</code>
+        </Button>
+      </Show>
     </div>
     <div class={styles.downloadSeparator}>
       <div class={styles.downloadBar} />
       <div>or</div>
       <div class={styles.downloadBar} />
     </div>
     <div class={styles.downloadSummary}>
-      <h3>Download as Mod</h3>
+      <h3>Download as mod</h3>
       <p>
         Download as a mod. This file should be saved to <code>mods/{packFileName()}.jar</code> in your Minecraft folder.
       </p>

src/components/Feature.module.css

@@ -24,6 +24,8 @@
     drop-shadow(-2px -2px 1px var(--highlight-colour));
 }
 
+.featureLabel > span { text-align: center; }
+
 .tooltip {
   width: max-content;
   max-width: 20rem;

src/components/Feature.tsx

@@ -6,7 +6,7 @@ import type { PackItem } from '../datapack';
 import { computePosition, flip, offset, shift } from '@floating-ui/dom';
 
 
-export type FeatureProps = Pick<PackItem, "name" | "description" | "icon" | "iconAlt"> & {
+export type FeatureProps = PackItem & {
   checked: Accessor<boolean>,
   setChecked: Setter<boolean>;
 };