@thomasfarineau/anvil 0.0.2 → 0.0.4

package/src/template/frontends/solid-js/src/main.jsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import App from './App.jsx';
+import './style.css';
+
+render(() => <App />, document.getElementById('root'));

package/src/template/frontends/solid-js/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+
+export default defineConfig({
+  root: 'src',
+  plugins: [solid()],
+  clearScreen: false,
+  server: { port: 5173, strictPort: true },
+  build: { outDir: '../dist', emptyOutDir: true, target: 'es2022' },
+});

package/src/template/frontends/solid-ts/src/App.tsx

@@ -0,0 +1,193 @@
+import { For, Show, createSignal, onMount } from 'solid-js';
+import { MC } from './api.js';
+import type { InitStatus, LauncherConfig } from './api.js';
+
+export default function App() {
+  const [config, setConfig] = createSignal<LauncherConfig | null>(null);
+  const [status, setStatus] = createSignal<InitStatus | null>(null);
+  const [view, setView] = createSignal<'loading' | 'setup' | 'main'>('loading');
+  const [username, setUsername] = createSignal('');
+  const [dir, setDir] = createSignal('');
+  const [progress, setProgress] = createSignal<
+    Record<string, { pct: number; label: string; error: boolean }>
+  >({});
+  const [installing, setInstalling] = createSignal(false);
+  const [running, setRunning] = createSignal<string[]>([]);
+  const [message, setMessage] = createSignal('');
+  const [error, setError] = createSignal('');
+
+  onMount(async () => {
+    const [cfg, settings, init] = await Promise.all([
+      MC.getConfig(),
+      MC.getSettings(),
+      MC.getInitStatus(),
+    ]);
+    document.title = cfg.app_name;
+    setConfig(cfg);
+    setStatus(init);
+    setUsername(settings.username ?? '');
+    setDir(init.launcher_dir);
+    setView(
+      init.java_ok && init.instances.every((i) => i.installed)
+        ? 'main'
+        : 'setup',
+    );
+
+    MC.on.setupProgress(({ step, current, total, label, error: err }) => {
+      setProgress((p) => ({
+        ...p,
+        [step]: {
+          pct: total > 0 ? Math.round((current * 100) / total) : 0,
+          label,
+          error: err,
+        },
+      }));
+    });
+    MC.on.setupDone(async () => {
+      const s = await MC.getInitStatus();
+      setStatus(s);
+      setInstalling(false);
+      if (s.java_ok && s.instances.every((i) => i.installed)) setView('main');
+    });
+    MC.on.gameStarting((id) => setRunning((r) => [...r, id]));
+    MC.on.gameExit(({ instance_id, code }) => {
+      setRunning((r) => r.filter((x) => x !== instance_id));
+      setMessage(code === 0 ? 'Session ended.' : `Exited with code ${code}.`);
+    });
+  });
+
+  const steps = () => {
+    if (!config() || !status()) return [];
+    return [
+      { id: 'java', name: 'Java JRE', installed: status()!.java_ok },
+      ...config()!.instances.map((inst) => ({
+        id: inst.id,
+        name: inst.name,
+        installed:
+          status()!.instances.find((i) => i.id === inst.id)?.installed ?? false,
+      })),
+    ];
+  };
+
+  async function install() {
+    if (!dir().trim()) {
+      setError('Choose an install folder.');
+      return;
+    }
+    setError('');
+    setInstalling(true);
+    try {
+      const settings = await MC.getSettings();
+      await MC.saveSettings({ ...settings, launcher_dir: dir().trim() });
+      await MC.runSetup();
+    } catch (e) {
+      setError(`Error: ${e}`);
+      setInstalling(false);
+    }
+  }
+
+  async function playOrStop(id: string) {
+    if (running().includes(id)) {
+      await MC.stop(id).catch(() => {});
+      return;
+    }
+    if (!username().trim()) return;
+    const settings = await MC.getSettings();
+    await MC.saveSettings({ ...settings, username: username().trim() });
+    try {
+      await MC.verify(id);
+      await MC.play(id);
+    } catch (e) {
+      setMessage(`Error: ${e}`);
+    }
+  }
+
+  return (
+    <>
+      <Show when={view() === 'setup'}>
+        <div id="setup-overlay">
+          <div class="card">
+            <h1>Setup — {config()!.app_name}</h1>
+            <label>Install folder</label>
+            <div class="dir-row">
+              <input
+                type="text"
+                value={dir()}
+                onInput={(e) => setDir(e.currentTarget.value)}
+              />
+              <button onClick={async () => setDir(await MC.getDefaultDir())}>
+                Default
+              </button>
+            </div>
+            <For each={steps()}>
+              {(s) => {
+                const p = () => progress()[s.id];
+                const pct = () => p()?.pct ?? (s.installed ? 100 : 0);
+                return (
+                  <div class="step">
+                    <div
+                      class="step-name"
+                      style={{ color: s.installed ? '#4caf50' : '#aaa' }}>
+                      {s.installed ? '✓' : '○'} {s.name}
+                    </div>
+                    <div class="bar-track">
+                      <div
+                        class="bar-fill"
+                        style={{
+                          width: `${pct()}%`,
+                          background: p()?.error ? '#ef5350' : '#4caf50',
+                        }}
+                      />
+                    </div>
+                    <div class="step-label">
+                      {p()?.label ?? (s.installed ? 'Installed' : '')}
+                    </div>
+                  </div>
+                );
+              }}
+            </For>
+            <button
+              class="install-btn"
+              disabled={installing()}
+              onClick={install}>
+              {installing() ? 'Installing…' : 'Install'}
+            </button>
+            <p class="status" style={{ color: '#ef5350' }}>
+              {error()}
+            </p>
+          </div>
+        </div>
+      </Show>
+
+      <Show when={view() === 'main'}>
+        <div class="card">
+          <div class="brand">
+            <Show when={config()!.logo}>
+              <img src={`./${config()!.logo}`} alt="" />
+            </Show>
+            <h1>{config()!.app_name}</h1>
+          </div>
+          <label>Username</label>
+          <input
+            type="text"
+            maxLength={16}
+            placeholder="Steve"
+            value={username()}
+            onInput={(e) => setUsername(e.currentTarget.value)}
+          />
+          <For each={config()!.instances}>
+            {(inst) => (
+              <button
+                class="instance-btn"
+                disabled={!running().includes(inst.id) && !username().trim()}
+                onClick={() => playOrStop(inst.id)}>
+                {running().includes(inst.id) ? '■  Stop' : `▶  ${inst.name}`}
+              </button>
+            )}
+          </For>
+          <p class="status">{message()}</p>
+        </div>
+      </Show>
+    </>
+  );
+}

package/src/template/frontends/solid-ts/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Launcher</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/template/frontends/solid-ts/src/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import App from './App.tsx';
+import './style.css';
+
+render(() => <App />, document.getElementById('root')!);

package/src/template/frontends/solid-ts/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src"]
+}

package/src/template/frontends/solid-ts/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+
+export default defineConfig({
+  root: 'src',
+  plugins: [solid()],
+  clearScreen: false,
+  server: { port: 5173, strictPort: true },
+  build: { outDir: '../dist', emptyOutDir: true, target: 'es2022' },
+});

package/src/template/{src → frontends/vanilla-js/src}/index.html

@@ -4,170 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Launcher</title>
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        font-family:
-          system-ui,
-          -apple-system,
-          sans-serif;
-        background: #0d0d0d;
-        color: #e8e8e8;
-        height: 100vh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        user-select: none;
-      }
-      .card {
-        background: #111;
-        border: 1px solid #222;
-        border-radius: 12px;
-        padding: 28px 32px;
-        width: 360px;
-      }
-      h1 {
-        font-size: 1.4rem;
-        margin-bottom: 4px;
-        color: #4caf50;
-      }
-      p {
-        font-size: 0.8rem;
-        color: #555;
-        margin-bottom: 20px;
-      }
-      label {
-        display: block;
-        font-size: 0.75rem;
-        color: #666;
-        margin-bottom: 6px;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-      input[type='text'] {
-        width: 100%;
-        padding: 8px 12px;
-        border-radius: 6px;
-        background: #0a0a0a;
-        border: 1px solid #333;
-        color: #e8e8e8;
-        font-size: 0.9rem;
-        outline: none;
-        margin-bottom: 16px;
-      }
-      input[type='text']:focus {
-        border-color: #4caf50;
-      }
-      .instance-btn {
-        width: 100%;
-        padding: 10px;
-        border-radius: 8px;
-        border: none;
-        background: #1a2e1a;
-        color: #4caf50;
-        font-size: 0.9rem;
-        font-weight: 600;
-        cursor: pointer;
-        margin-bottom: 8px;
-        transition: background 0.15s;
-      }
-      .instance-btn:hover:not(:disabled) {
-        background: #4caf50;
-        color: #fff;
-      }
-      .instance-btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-      .status {
-        font-size: 0.75rem;
-        color: #555;
-        margin-top: 12px;
-        min-height: 1rem;
-      }
-
-      /* ── Setup overlay ─────────────────────────────────────── */
-      #setup-overlay {
-        position: fixed;
-        inset: 0;
-        background: #080808;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      #setup-overlay .card {
-        width: 400px;
-      }
-      #setup-overlay h1 {
-        margin-bottom: 20px;
-      }
-      .dir-row {
-        display: flex;
-        gap: 8px;
-        margin-bottom: 16px;
-      }
-      .dir-row input {
-        flex: 1;
-        margin: 0;
-      }
-      .dir-row button {
-        padding: 8px 12px;
-        border-radius: 6px;
-        border: 1px solid #333;
-        background: #111;
-        color: #888;
-        font-size: 0.8rem;
-        cursor: pointer;
-      }
-      .step {
-        margin-bottom: 10px;
-      }
-      .step-name {
-        font-size: 0.85rem;
-        margin-bottom: 4px;
-      }
-      .bar-track {
-        height: 4px;
-        background: #222;
-        border-radius: 2px;
-        overflow: hidden;
-      }
-      .bar-fill {
-        height: 4px;
-        background: #4caf50;
-        transition: width 0.2s;
-      }
-      .step-label {
-        font-size: 0.7rem;
-        color: #555;
-        margin-top: 2px;
-      }
-      .install-btn {
-        width: 100%;
-        padding: 10px;
-        border-radius: 8px;
-        border: none;
-        background: #1a2e1a;
-        color: #4caf50;
-        font-weight: 700;
-        font-size: 0.9rem;
-        cursor: pointer;
-        margin-top: 16px;
-        transition: background 0.15s;
-      }
-      .install-btn:hover:not(:disabled) {
-        background: #4caf50;
-        color: #fff;
-      }
-      .install-btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    </style>
+    <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <!-- ── Setup overlay (shown when not installed) ── -->
@@ -191,8 +28,11 @@
     <!-- ── Main launcher ── -->
     <div id="main-view" style="display: none">
       <div class="card">
-        <h1 id="server-name">Launcher</h1>
-        <p id="server-sub"></p>
+        <div class="brand">
+          <img id="logo" src="./logo.svg" alt="" style="display: none" />
+          <h1 id="server-name">Launcher</h1>
+        </div>
+        <p id="server-sub" class="sub"></p>
 
         <label>Username</label>
         <input
@@ -207,7 +47,7 @@
     </div>
 
     <script type="module">
-      import { MC } from '/api.js';
+      import { MC } from './api.js';
 
       // ── Boot ────────────────────────────────────────────────────
       const [config, settings, initStatus] = await Promise.all([
@@ -236,15 +76,39 @@
         document.getElementById('main-view').style.display = 'flex';
         document.getElementById('server-name').textContent = config.app_name;
 
+        if (config.logo) {
+          const logo = document.getElementById('logo');
+          logo.src = `./${config.logo}`;
+          logo.style.display = 'block';
+        }
+
         const container = document.getElementById('instances-container');
         for (const inst of config.instances) {
+          const row = document.createElement('div');
+          row.className = 'instance-row';
+
           const btn = document.createElement('button');
           btn.className = 'instance-btn';
           btn.id = `play-${inst.id}`;
           btn.textContent = `▶  ${inst.name}`;
           btn.disabled = true;
           btn.addEventListener('click', () => onPlay(inst.id));
-          container.appendChild(btn);
+          row.appendChild(btn);
+
+          const modsBtn = document.createElement('button');
+          modsBtn.className = 'icon-btn';
+          modsBtn.title = 'Mods';
+          modsBtn.textContent = '🧩';
+          modsBtn.addEventListener('click', () => toggleModsPanel(inst.id));
+          row.appendChild(modsBtn);
+
+          container.appendChild(row);
+
+          const panel = document.createElement('div');
+          panel.className = 'mods-panel';
+          panel.id = `mods-${inst.id}`;
+          panel.style.display = 'none';
+          container.appendChild(panel);
         }
 
         document
@@ -253,12 +117,15 @@
         updateButtons();
 
         MC.on.gameStarting((id) => {
-          document.getElementById(`play-${id}`).textContent = 'EN JEU';
-          document.getElementById(`play-${id}`).disabled = true;
+          const btn = document.getElementById(`play-${id}`);
+          btn.textContent = '■  Stop';
+          btn.disabled = false;
+          btn.dataset.running = '1';
         });
         MC.on.gameExit(({ instance_id, code }) => {
-          document.getElementById(`play-${instance_id}`).textContent =
-            `▶  ${config.instances.find((i) => i.id === instance_id)?.name ?? instance_id}`;
+          const btn = document.getElementById(`play-${instance_id}`);
+          btn.textContent = `▶  ${config.instances.find((i) => i.id === instance_id)?.name ?? instance_id}`;
+          delete btn.dataset.running;
           updateButtons();
           document.getElementById('game-status').textContent =
             code === 0 ? 'Session ended.' : `Exited with code ${code}.`;
@@ -280,18 +147,20 @@
       function updateButtons() {
         const username = document.getElementById('username-input').value.trim();
         document.querySelectorAll('.instance-btn').forEach((btn) => {
-          if (!btn.textContent.includes('EN JEU')) btn.disabled = !username;
+          if (!btn.dataset.running) btn.disabled = !username;
         });
       }
 
       async function onPlay(instanceId) {
+        const btn = document.getElementById(`play-${instanceId}`);
+        if (btn.dataset.running) {
+          await MC.stop(instanceId).catch(() => {});
+          return;
+        }
         const username = document.getElementById('username-input').value.trim();
         if (!username) return;
-        await MC.saveSettings({
-          username,
-          launcher_dir: null,
-          max_memory: 2048,
-        });
+        const settings = await MC.getSettings();
+        await MC.saveSettings({ ...settings, username });
         try {
           await MC.verify(instanceId);
           await MC.play(instanceId);
@@ -300,6 +169,69 @@
         }
       }
 
+      // ── Mods panel ───────────────────────────────────────────────
+      async function toggleModsPanel(instanceId) {
+        const panel = document.getElementById(`mods-${instanceId}`);
+        if (panel.style.display !== 'none') {
+          panel.style.display = 'none';
+          return;
+        }
+        await renderMods(instanceId);
+        panel.style.display = 'block';
+      }
+
+      async function renderMods(instanceId) {
+        const panel = document.getElementById(`mods-${instanceId}`);
+        const mods = await MC.mods.list(instanceId).catch(() => []);
+        panel.innerHTML = '';
+
+        if (mods.length === 0) {
+          panel.innerHTML = '<p class="mods-empty">No mods installed.</p>';
+        }
+        for (const mod of mods) {
+          const row = document.createElement('div');
+          row.className = mod.enabled ? 'mod-row' : 'mod-row disabled';
+
+          const check = document.createElement('input');
+          check.type = 'checkbox';
+          check.checked = mod.enabled;
+          check.addEventListener('change', async () => {
+            const action = check.checked ? MC.mods.enable : MC.mods.disable;
+            await action(instanceId, mod.file_name).catch(() => {});
+            renderMods(instanceId);
+          });
+          row.appendChild(check);
+
+          const name = document.createElement('span');
+          name.className = 'mod-name';
+          name.title = mod.file_name;
+          name.textContent = mod.name;
+          row.appendChild(name);
+
+          if (!mod.managed) {
+            const del = document.createElement('button');
+            del.className = 'icon-btn';
+            del.style.padding = '2px 6px';
+            del.style.margin = '0';
+            del.textContent = '✕';
+            del.title = 'Remove';
+            del.addEventListener('click', async () => {
+              await MC.mods.remove(instanceId, mod.file_name).catch(() => {});
+              renderMods(instanceId);
+            });
+            row.appendChild(del);
+          }
+          panel.appendChild(row);
+        }
+
+        const open = document.createElement('button');
+        open.className = 'icon-btn';
+        open.style.marginTop = '6px';
+        open.textContent = 'Open mods folder';
+        open.addEventListener('click', () => MC.mods.openFolder(instanceId));
+        panel.appendChild(open);
+      }
+
       // ── Setup page ───────────────────────────────────────────────
       function showSetup(config, settings, initStatus) {
         document.getElementById('setup-overlay').style.display = 'flex';

package/src/template/frontends/vanilla-ts/src/index.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Launcher</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <!-- ── Setup overlay (shown when not installed) ── -->
+    <div id="setup-overlay" style="display: none">
+      <div class="card">
+        <h1 id="setup-title">Initial setup</h1>
+
+        <label>Install folder</label>
+        <div class="dir-row">
+          <input id="dir-input" type="text" placeholder="C:\Users\..." />
+          <button id="dir-default-btn">Default</button>
+        </div>
+
+        <div id="steps-container"></div>
+
+        <button id="install-btn" class="install-btn">Install</button>
+        <p id="setup-error" class="status" style="color: #ef5350"></p>
+      </div>
+    </div>
+
+    <!-- ── Main launcher ── -->
+    <div id="main-view" style="display: none">
+      <div class="card">
+        <div class="brand">
+          <img id="logo" src="./logo.svg" alt="" style="display: none" />
+          <h1 id="server-name">Launcher</h1>
+        </div>
+        <p id="server-sub" class="sub"></p>
+
+        <label>Username</label>
+        <input
+          id="username-input"
+          type="text"
+          maxlength="16"
+          placeholder="Steve" />
+
+        <div id="instances-container"></div>
+        <p id="game-status" class="status"></p>
+      </div>
+    </div>
+
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>