@rohal12/spindle 0.16.1 → 0.18.1

package/src/components/macros/SaveManager.tsx

@@ -0,0 +1,400 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useContext,
+} from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { isSaveExport, type SaveRecord } from '../../saves/types';
+import {
+  getSavesGrouped,
+  createSave,
+  overwriteSave,
+  deleteSaveById,
+  renameSave,
+  exportSave,
+  importSave,
+  type PlaythroughGroup,
+} from '../../saves/save-manager';
+import { DialogCloseContext } from '../PassageDialog';
+import { defineMacro } from '../../define-macro';
+
+function relativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const secs = Math.floor(diff / 1000);
+  if (secs < 60) return 'just now';
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function SaveManagerContent() {
+  const [mode, setMode] = useState<'save' | 'load'>('load');
+  const [groups, setGroups] = useState<PlaythroughGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState<{
+    text: string;
+    type: 'success' | 'error';
+  } | null>(null);
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const renameInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const closeDialog = useContext(DialogCloseContext);
+
+  const storyData = useStoryStore((s) => s.storyData);
+  const playthroughId = useStoryStore((s) => s.playthroughId);
+  const getSavePayload = useStoryStore((s) => s.getSavePayload);
+  const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
+  const ifid = storyData?.ifid ?? '';
+
+  const refresh = useCallback(async () => {
+    if (!ifid) return;
+    const data = await getSavesGrouped(ifid);
+    setGroups(data);
+    setLoading(false);
+  }, [ifid]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
+    }
+  }, [renamingId]);
+
+  const statusTimer = useRef<number>();
+  const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
+    clearTimeout(statusTimer.current);
+    setStatus({ text, type });
+    statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
+  };
+
+  const toggleCollapse = (id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleNewSave = async () => {
+    if (!ifid || !playthroughId) return;
+    try {
+      const payload = getSavePayload();
+      await createSave(ifid, playthroughId, payload);
+      showStatus('Save created');
+      await refresh();
+    } catch {
+      showStatus('Failed to create save', 'error');
+    }
+  };
+
+  const handleOverwrite = async (saveId: string) => {
+    try {
+      const payload = getSavePayload();
+      await overwriteSave(saveId, payload);
+      showStatus('Save overwritten');
+      await refresh();
+    } catch {
+      showStatus('Failed to overwrite save', 'error');
+    }
+  };
+
+  const handleLoad = async (save: SaveRecord) => {
+    try {
+      loadFromPayload(save.payload);
+      showStatus('Game loaded');
+      if (closeDialog) setTimeout(closeDialog, 500);
+    } catch {
+      showStatus('Failed to load save', 'error');
+    }
+  };
+
+  const handleDelete = async (saveId: string) => {
+    if (!confirm('Delete this save?')) return;
+    try {
+      await deleteSaveById(saveId);
+      showStatus('Save deleted');
+      await refresh();
+    } catch {
+      showStatus('Failed to delete save', 'error');
+    }
+  };
+
+  const handleRenameStart = (save: SaveRecord) => {
+    setRenamingId(save.meta.id);
+    setRenameValue(save.meta.title);
+  };
+
+  const handleRenameConfirm = async () => {
+    if (!renamingId || !renameValue.trim()) return;
+    try {
+      await renameSave(renamingId, renameValue.trim());
+      setRenamingId(null);
+      showStatus('Save renamed');
+      await refresh();
+    } catch {
+      showStatus('Failed to rename', 'error');
+    }
+  };
+
+  const handleRenameKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') handleRenameConfirm();
+    else if (e.key === 'Escape') setRenamingId(null);
+  };
+
+  const handleExport = async (saveId: string) => {
+    try {
+      const data = await exportSave(saveId);
+      if (!data) return;
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `save-${data.save.meta.title.replace(/[^a-z0-9]/gi, '_')}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      showStatus('Save exported');
+    } catch {
+      showStatus('Failed to export save', 'error');
+    }
+  };
+
+  const handleImport = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelected = async (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    input.value = '';
+
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      if (!isSaveExport(data)) {
+        throw new Error('Invalid save file format');
+      }
+      await importSave(data, ifid);
+      showStatus('Save imported');
+      await refresh();
+    } catch (err) {
+      showStatus(
+        err instanceof Error ? err.message : 'Failed to import save',
+        'error',
+      );
+    }
+  };
+
+  const totalSaves = groups.reduce((n, g) => n + g.saves.length, 0);
+
+  return (
+    <div class="save-manager">
+      <div class="saves-header">
+        <div class="saves-header-left">
+          <div class="saves-mode-toggle">
+            <button
+              class={mode === 'save' ? 'active' : ''}
+              onClick={() => setMode('save')}
+            >
+              Save
+            </button>
+            <button
+              class={mode === 'load' ? 'active' : ''}
+              onClick={() => setMode('load')}
+            >
+              Load
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="saves-toolbar">
+        <button
+          class="saves-toolbar-button"
+          onClick={handleImport}
+        >
+          Import
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json"
+          style="display:none"
+          onChange={handleFileSelected}
+        />
+      </div>
+
+      <div class="saves-body">
+        {loading ? (
+          <div class="saves-empty">Loading...</div>
+        ) : totalSaves === 0 && mode === 'load' ? (
+          <div class="saves-empty">No saves yet</div>
+        ) : (
+          groups.map((group) => {
+            const isCollapsed = collapsed.has(group.playthrough.id);
+            const isCurrentPt = group.playthrough.id === playthroughId;
+
+            if (mode === 'save' && !isCurrentPt) return null;
+            if (mode === 'load' && group.saves.length === 0 && !isCurrentPt)
+              return null;
+
+            return (
+              <div
+                class="playthrough-group"
+                key={group.playthrough.id}
+              >
+                <div
+                  class="playthrough-header"
+                  onClick={() => toggleCollapse(group.playthrough.id)}
+                >
+                  <span
+                    class={`playthrough-chevron ${isCollapsed ? '' : 'open'}`}
+                  >
+                    ▶
+                  </span>
+                  <span class="playthrough-label">
+                    {group.playthrough.label}
+                    {isCurrentPt ? ' (current)' : ''}
+                  </span>
+                  <span class="playthrough-date">
+                    {formatDate(group.playthrough.createdAt)}
+                  </span>
+                </div>
+
+                {!isCollapsed && (
+                  <div class="playthrough-saves">
+                    {group.saves.map((save) => (
+                      <div
+                        class="save-slot"
+                        key={save.meta.id}
+                      >
+                        <div class="save-slot-info">
+                          {renamingId === save.meta.id ? (
+                            <input
+                              ref={renameInputRef}
+                              class="save-rename-input"
+                              value={renameValue}
+                              onInput={(e) =>
+                                setRenameValue(
+                                  (e.target as HTMLInputElement).value,
+                                )
+                              }
+                              onKeyDown={handleRenameKeyDown}
+                              onBlur={handleRenameConfirm}
+                            />
+                          ) : (
+                            <div class="save-slot-title">{save.meta.title}</div>
+                          )}
+                          <div class="save-slot-meta">
+                            <span>{save.meta.passage}</span>
+                            <span>{relativeTime(save.meta.updatedAt)}</span>
+                          </div>
+                        </div>
+                        <div class="save-slot-actions">
+                          {mode === 'save' ? (
+                            <button
+                              class="save-slot-action primary"
+                              onClick={() => handleOverwrite(save.meta.id)}
+                            >
+                              Save Here
+                            </button>
+                          ) : (
+                            <button
+                              class="save-slot-action primary"
+                              onClick={() => handleLoad(save)}
+                            >
+                              Load
+                            </button>
+                          )}
+                          <button
+                            class="save-slot-action"
+                            onClick={() => handleRenameStart(save)}
+                          >
+                            Rename
+                          </button>
+                          <button
+                            class="save-slot-action"
+                            onClick={() => handleExport(save.meta.id)}
+                          >
+                            Export
+                          </button>
+                          <button
+                            class="save-slot-action danger"
+                            onClick={() => handleDelete(save.meta.id)}
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+
+                    {mode === 'save' && isCurrentPt && (
+                      <button
+                        class="save-slot-new"
+                        onClick={handleNewSave}
+                      >
+                        + New Save
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+
+        {mode === 'save' &&
+          !loading &&
+          !groups.some((g) => g.playthrough.id === playthroughId) && (
+            <div class="playthrough-group">
+              <div class="playthrough-saves">
+                <button
+                  class="save-slot-new"
+                  onClick={handleNewSave}
+                >
+                  + New Save
+                </button>
+              </div>
+            </div>
+          )}
+      </div>
+
+      {status && (
+        <div class={`saves-status ${status.type === 'error' ? 'error' : ''}`}>
+          {status.text}
+        </div>
+      )}
+    </div>
+  );
+}
+
+defineMacro({
+  name: 'save-manager',
+  render() {
+    return <SaveManagerContent />;
+  },
+});

package/src/components/macros/Set.tsx

@@ -1,29 +1,24 @@
-import { useRef, useContext } from 'preact/hooks';
-import { LocalsUpdateContext } from '../../markup/render';
-import { executeMutation } from '../../execute-mutation';
-import { currentSourceLocation } from '../../utils/source-location';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Set({ rawArgs }: MacroProps) {
-  const { update, getValues } = useContext(LocalsUpdateContext);
-  const ran = useRef(false);
+defineMacro({
+  name: 'set',
+  render({ rawArgs }, ctx) {
+    const ran = ctx.hooks.useRef(false);
 
-  if (!ran.current) {
-    ran.current = true;
+    if (!ran.current) {
+      ran.current = true;
 
-    try {
-      executeMutation(rawArgs, getValues(), update);
-    } catch (err) {
-      console.error(
-        `spindle: Error in {set ${rawArgs}}${currentSourceLocation()}:`,
-        err,
-      );
-      return null;
+      try {
+        ctx.mutate(rawArgs);
+      } catch (err) {
+        console.error(
+          `spindle: Error in {set ${rawArgs}}${ctx.sourceLocation()}:`,
+          err,
+        );
+        return null;
+      }
     }
-  }
 
-  return null;
-}
-
-registerMacro('set', Set);
+    return null;
+  },
+});

package/src/components/{SettingsDialog.tsx → macros/SettingsControls.tsx}

@@ -1,9 +1,6 @@
 import { useState } from 'preact/hooks';
-import { settings, type SettingDef } from '../settings';
-
-interface SettingsDialogProps {
-  onClose: () => void;
-}
+import { settings, type SettingDef } from '../../settings';
+import { defineMacro } from '../../define-macro';
 
 function SettingControl({ name, def }: { name: string; def: SettingDef }) {
   const [value, setValue] = useState(() => settings.get(name));
@@ -67,40 +64,25 @@ function SettingControl({ name, def }: { name: string; def: SettingDef }) {
   }
 }
 
-export function SettingsDialog({ onClose }: SettingsDialogProps) {
+function SettingsControlsContent() {
   const defs = settings.getDefinitions();
 
-  const handleBackdrop = (e: MouseEvent) => {
-    if ((e.target as HTMLElement).classList.contains('settings-overlay')) {
-      onClose();
-    }
-  };
-
   return (
-    <div
-      class="settings-overlay"
-      onClick={handleBackdrop}
-    >
-      <div class="settings-panel">
-        <div class="settings-header">
-          <span>Settings</span>
-          <button
-            class="settings-close"
-            onClick={onClose}
-          >
-            ✕
-          </button>
-        </div>
-        <div class="settings-body">
-          {Array.from(defs.entries()).map(([name, def]) => (
-            <SettingControl
-              key={name}
-              name={name}
-              def={def}
-            />
-          ))}
-        </div>
-      </div>
+    <div class="settings-controls">
+      {Array.from(defs.entries()).map(([name, def]) => (
+        <SettingControl
+          key={name}
+          name={name}
+          def={def}
+        />
+      ))}
     </div>
   );
 }
+
+defineMacro({
+  name: 'settings-controls',
+  render() {
+    return <SettingsControlsContent />;
+  },
+});

package/src/components/macros/Span.tsx

@@ -0,0 +1,8 @@
+import { defineMacro } from '../../define-macro';
+
+defineMacro({
+  name: 'span',
+  render({ children = [] }, ctx) {
+    return ctx.wrap(ctx.renderNodes(children));
+  },
+});

package/src/components/macros/Stop.tsx

@@ -1,16 +1,15 @@
-import { useLayoutEffect, useContext } from 'preact/hooks';
 import { RepeatContext } from './Repeat';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function Stop(_props: MacroProps) {
-  const { stop } = useContext(RepeatContext);
+defineMacro({
+  name: 'stop',
+  render(_props, ctx) {
+    const { stop } = ctx.hooks.useContext(RepeatContext);
 
-  useLayoutEffect(() => {
-    stop();
-  }, [stop]);
+    ctx.hooks.useLayoutEffect(() => {
+      stop();
+    }, [stop]);
 
-  return null;
-}
-
-registerMacro('stop', Stop);
+    return null;
+  },
+});

package/src/components/macros/StoryTitle.tsx

@@ -1,19 +1,19 @@
 import { useStoryStore } from '../../store';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function StoryTitle({ className, id }: MacroProps) {
-  const name = useStoryStore((s) => s.storyData?.name || '');
-  const cls = className ? `story-title ${className}` : 'story-title';
+defineMacro({
+  name: 'story-title',
+  render(_, ctx) {
+    const name = useStoryStore((s) => s.storyData?.name || '');
+    const cls = ctx.className ? `story-title ${ctx.className}` : 'story-title';
 
-  return (
-    <span
-      id={id}
-      class={cls}
-    >
-      {name}
-    </span>
-  );
-}
-
-registerMacro('story-title', StoryTitle);
+    return (
+      <span
+        id={ctx.id}
+        class={cls}
+      >
+        {name}
+      </span>
+    );
+  },
+});