feat: кубики/таймер/кисть/спонсоры и задел игровых систем

Показ анимации кубиков игрокам, закрытие оверлеев с окнами, ручной ввод количества, меньший радиус кисти, блок спонсоров в «О программе»; плюс черновик game systems / character sheet. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-13 15:37:44 +08:00
parent 3d0474fe97
commit 712086ddca
32 changed files with 1712 additions and 34 deletions
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+
+import type { GameSystemListItem } from '../../shared/ipc/contracts';
+
+export type { GameSystemListItem };
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  labels: {
+    title: string;
+    import: string;
+    preview: string;
+    remove: string;
+    empty: string;
+    close: string;
+  };
+  listSystems: () => Promise<GameSystemListItem[]>;
+  importSystem: () => Promise<GameSystemListItem | null>;
+  deleteSystem: (id: string) => Promise<void>;
+  previewSystem: (id: string) => Promise<void>;
+};
+
+export function GameSystemsModal({
+  open,
+  onClose,
+  labels,
+  listSystems,
+  importSystem,
+  deleteSystem,
+  previewSystem,
+}: Props) {
+  const [items, setItems] = useState<GameSystemListItem[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    void (async () => {
+      setItems(await listSystems());
+    })();
+  }, [open, listSystems]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      data-testid="game-systems-modal"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.55)',
+        display: 'grid',
+        placeItems: 'center',
+        zIndex: 10000,
+      }}
+    >
+      <div
+        style={{
+          width: 560,
+          maxHeight: '80vh',
+          overflow: 'auto',
+          background: 'rgba(10,10,14,0.98)',
+          border: '1px solid rgba(255,255,255,0.12)',
+          borderRadius: 12,
+          padding: 16,
+          color: 'rgba(255,255,255,0.92)',
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
+          <strong>{labels.title}</strong>
+          <button type="button" data-testid="game-systems-close" onClick={onClose}>
+            {labels.close}
+          </button>
+        </div>
+        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+          <button
+            type="button"
+            data-testid="game-systems-import"
+            disabled={busy}
+            onClick={async () => {
+              setBusy(true);
+              try {
+                await importSystem();
+                setItems(await listSystems());
+              } finally {
+                setBusy(false);
+              }
+            }}
+          >
+            {labels.import}
+          </button>
+        </div>
+        {items.length === 0 ? (
+          <div style={{ opacity: 0.6 }}>{labels.empty}</div>
+        ) : (
+          items.map((s) => (
+            <div
+              key={s.id}
+              data-testid={`game-system-${s.id}`}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 8,
+                padding: '10px 0',
+                borderBottom: '1px solid rgba(255,255,255,0.08)',
+              }}
+            >
+              <div>
+                <div>{s.name}</div>
+                <div style={{ opacity: 0.55, fontSize: 12 }}>
+                  {s.id} · r{s.revision}
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button type="button" onClick={() => void previewSystem(s.id)}>
+                  {labels.preview}
+                </button>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    await deleteSystem(s.id);
+                    setItems(await listSystems());
+                  }}
+                >
+                  {labels.remove}
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}