Játék / {game.category || "—"}

{game.title || (névtelen játék)}

{isNew && új · mentésre vár} {statusEl}

Azonosító (id) — url-kompatibilis, egyedi; átírható, a sor nem duplázódik set("id", slugify(e.target.value))} /> {errs.id &&

{errs.id}

}

Cím * set("title", e.target.value)} /> {errs.title &&

{errs.title}

}

Egysoros összefoglaló *

set("summary", e.target.value)}
          placeholder="1 mondat, ami egy ismeretlen játékvezetőnek elmondja a lényeget."
        />
        {errs.summary && <div className="err">{errs.summary}</div>}
      </div>

<div className="ed-fld-row">
        <div className="ed-fld">
          <label>Kategória</label>
          <select value={game.category} onChange={e => set("category", e.target.value)}>
            {(categories && categories.length ? categories : [game.category])
              .map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
        <div className="ed-fld">
          <label>Létszám</label>
          <Segmented value={game.groupSize} options={GROUP_SIZES} onChange={v => set("groupSize", v)} />
        </div>
      </div>

<div className="ed-fld-row">
        <div className={`ed-fld ${errs.duration ? "invalid" : ""}`}>
          <label>Időtartam (perc)</label>
          <input type="number" min="1" max="999" value={game.duration}
            onChange={e => set("duration", parseInt(e.target.value, 10) || 0)} />
          {errs.duration && <div className="err">{errs.duration}</div>}
        </div>
        <div className="ed-fld">
          <label>Mikor játszd</label>
          <Segmented value={game.phase}
            options={[1,2,3,4,5].map(n => ({ value: n, label: String(n) }))}
            onChange={v => set("phase", v)} />
          <div className="hint">1 = workshop eleje, 5 = később (bemelegített csoport kell)</div>
        </div>
      </div>

<div className="ed-fld">
        <label>Címkék</label>
        <TagEditor tags={game.tags || []} onChange={v => set("tags", v)} />
      </div>

<div className="ed-fld">
        <label>Hogyan játszd</label>
        <textarea className="tall" value={game.howTo}
          onChange={e => set("howTo", e.target.value)}
          placeholder="A vezetői instrukció pontról-pontra." />
      </div>

<div className="ed-fld">
        <label>Vezetői jegyzet (opcionális)</label>
        <textarea value={game.notes || ""} onChange={e => set("notes", e.target.value)}
          placeholder="Tippek, tapasztalatok, mikor működik, mikor nem." />
      </div>

<div className="ed-form-foot">
        <button className="ed-btn danger" onClick={onDelete}>
          Játék törlése
        </button>
        <div className="spacer"></div>
        <button
          className="ed-btn primary"
          onClick={onSave}
          disabled={!dirty || hasErrors || saving}
        >
          {saving ? "Mentés…" : isNew ? "Létrehozás" : "Mentés"}
        </button>
      </div>
    </div>
  );
}

// ───────────────────────── MAIN EDITOR APP ─────────────────────────
function EditorApp({ username, onLogout, onReconfig }) {
  // `games` = last known server state (the committed truth).
  const [games, setGames] = useState([]);
  // The row currently being edited, identified by a STABLE key. For existing
  // rows this is the id at load time (rowKey); for new rows it's a synthetic
  // "new:" key so the id field can be edited freely before the first save.
  const [selectedKey, setSelectedKey] = useState(null);
  // `draft` = buffered, uncommitted edits for the selected row. null when the
  // selection is pristine (no local changes yet).
  const [draft, setDraft] = useState(null);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState("");
  const [lastSaved, setLastSaved] = useState(null);

const [loadState, setLoadState] = useState("loading"); // loading|ready|error
  const [loadError, setLoadError] = useState("");
  const [filterText, setFilterText] = useState("");
  const [toastEl, toast] = useToast();
  const [confirmDelete, setConfirmDelete] = useState(null);

// New (never-saved) rows, keyed by their synthetic "new:" key -> blank game.
  const newRowsRef = useRef(new Map());

// Stable key helpers.
  const keyOf = (g) => (newRowsRef.current.has(g.__key) ? g.__key : g.id);
  const isNewKey = (k) => typeof k === "string" && k.startsWith("new:");

useEffect(() => { reload(); }, []);

// The committed record for the current selection (server truth or new-row stub).
  const baseForKey = (k) => {
    if (k == null) return null;
    if (isNewKey(k)) return newRowsRef.current.get(k) || null;
    return games.find(g => g.id === k) || null;
  };
  const base = baseForKey(selectedKey);
  // What the form shows: the draft if editing, otherwise the committed record.
  const selected = draft || base;
  const dirty = draft != null;
  const isNew = isNewKey(selectedKey);

// Buffer edits locally — NEVER hits the network on keystroke. For a new
  // (unsaved) row we also keep the buffer in newRowsRef so the in-progress
  // values survive switching away and back.
  const editDraft = (next) => {
    setDraft(next);
    if (isNewKey(selectedKey)) newRowsRef.current.set(selectedKey, next);
  };

// Strip internal-only fields before sending to the backend.
  const cleanGame = (g) => { const c = { ...g }; delete c.__key; return c; };

// Commit the buffered draft with an explicit Save.
  const saveDraft = async () => {
    if (!draft) return;
    if (!draft.id?.trim() || !draft.title?.trim()) {
      setSaveError("Hiányzó id vagy cím."); return;
    }
    setSaving(true); setSaveError("");
    try {
      if (isNew) {
        const saved = cleanGame(draft);
        await api("create", { game: saved });
        newRowsRef.current.delete(selectedKey);
        setGames(gs => [saved, ...gs]);
        setSelectedKey(saved.id); // re-key the selection to the real id
      } else {
        // Match the existing row by the stable key captured at selection time,
        // NOT by draft.id — so the id itself can be edited safely.
        const saved = cleanGame(draft);
        await api("update", { game: saved, rowKey: selectedKey });
        setGames(gs => gs.map(g => (g.id === selectedKey ? saved : g)));
        if (saved.id !== selectedKey) setSelectedKey(saved.id);
      }
      setDraft(null);
      setLastSaved(Date.now());
      toast("Mentve.");
    } catch (e) {
      if (e.message === "invalid_token") { onLogout(); return; }
      setSaveError(e.message);
      toast("Mentés sikertelen: " + e.message, "error");
    } finally {
      setSaving(false);
    }
  };

// Selecting another row discards nothing silently: if there are unsaved
  // changes, ask the user what to do.
  const selectRow = (k) => {
    if (k === selectedKey) return;
    if (draft) {
      const go = window.confirm("Nem mentett változások vannak ezen a játékon. Elveted őket és átváltasz?");
      if (!go) return;
      if (isNew) newRowsRef.current.delete(selectedKey);
    }
    setSaveError("");
    setSelectedKey(k);
    // A new (unsaved) row carries its buffered draft; an existing row starts pristine.
    setDraft(isNewKey(k) ? (newRowsRef.current.get(k) || null) : null);
    setLastSaved(null);
  };

const addGame = () => {
    if (draft && !window.confirm("Nem mentett változások vannak. Elveted őket és új játékot kezdesz?")) return;
    const k = "new:" + Date.now().toString(36);
    const g = { ...blankGame(), __key: k };
    newRowsRef.current.set(k, g);
    setDraft(null); setSaveError("");
    setSelectedKey(k);
    setDraft(g); // start dirty so the Save button is the only way in
    setLastSaved(null);
  };

const askDelete = () => {
    if (selected) setConfirmDelete({ key: selectedKey, game: selected });
  };

// Sidebar list: committed games + any unsaved new rows on top.
  const listRows = useMemo(() => {
    const news = Array.from(newRowsRef.current.values());
    return [...news, ...games];
  }, [games, draft, selectedKey]);

const filtered = useMemo(() => {
    const q = filterText.trim().toLowerCase();
    if (!q) return listRows;
    return listRows.filter(g => [g.title, g.category, g.summary, ...(g.tags || [])]
      .join(" ").toLowerCase().includes(q));
  }, [listRows, filterText]);

// Category options for the form: distinct categories present in the live
  // data (so the editor matches whatever the sheet/import uses), plus the
  // current selection's value so it's never missing from its own dropdown.
  const categories = useMemo(() => {
    const s = new Set();
    games.forEach(g => { if (g.category) s.add(g.category); });
    if (selected?.category) s.add(selected.category);
    return Array.from(s).sort((a, b) => a.localeCompare(b, "hu"));
  }, [games, selected]);

const pending = dirty ? 1 : 0;
  // Human-readable explanation for the header error pill. Special-case the
  // "backend not updated" situation, which otherwise shows a cryptic
  // unknown_action string.
  const errorHint = useMemo(() => {
    if (!saveError) return "";
    if (/unknown_action/i.test(saveError)) {
      return "A backend nincs frissítve — töltsd fel az új Code.js-t (clasp push vagy beillesztés).";
    }
    if (/invalid_token/i.test(saveError)) return "Lejárt a munkamenet — jelentkezz be újra.";
    return saveError;
  }, [saveError]);

// Warn before leaving with unsaved changes.
  useEffect(() => {
    const h = (e) => {
      if (draft) { e.preventDefault(); e.returnValue = ""; }
    };
    window.addEventListener("beforeunload", h);
    return () => window.removeEventListener("beforeunload", h);
  }, [draft]);

if (loadState === "loading") {
    return (
      <div className="ed-loading">
        <div className="spinner big"></div>
        <p>Adatok betöltése a Google Sheets-ből…</p>
      </div>
    );
  }

if (loadState === "error") {
    return (
      <div className="ed-loading">
        <h2>Nem sikerült betölteni az adatokat</h2>
        <p style={{ color: "var(--crimson-soft)", marginBottom: 20 }}>{loadError}</p>
        <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
          <button className="ed-btn primary" onClick={reload}>↻ Újrapróbálás</button>
          <button className="ed-btn ghost" onClick={onReconfig}>API URL újrabeállítása</button>
        </div>
      </div>
    );
  }

return (
    <div className="ed-page">
      <header className="ed-bar">
        <div className="ed-bar-inner">
          <a className="ed-brand" href="/">
            <img src="assets/nocturnal_logo.png" alt="" />
            <span>Nocturnal Dog</span>
          </a>
          <span className="ed-crumb">
            <span style={{ opacity: 0.4 }}>/</span> Játékadatbázis <span style={{ opacity: 0.4 }}>/</span>{" "}
            <span className="accent">Szerkesztő</span>
          </span>
          <div className="ed-status">
            <span className="pill"><b>{games.length}</b>játék</span>
            <span className={`pill ${pending > 0 ? "mod" : ""}`}>
              <span className={`live-dot ${pending > 0 ? "pulse" : "ok"}`}></span>
              {pending > 0 ? "nem mentett" : "szinkronban"}
            </span>
            {saveError && (
              <button
                type="button"
                className="pill del"
                title={errorHint + "  ·  Kattints az újrapróbáláshoz"}
                onClick={() => { if (dirty && !saving) saveDraft(); }}
                style={{ cursor: "pointer", maxWidth: 360, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
              >
                ⚠ {errorHint}
              </button>
            )}
          </div>
          <div className="ed-bar-actions">
            <span className="ed-user">
              <span className="dot"></span>
              {username}
            </span>
            <button className="ed-btn ghost" onClick={reload} title="Adatok újratöltése a Sheets-ből">↻ Frissítés</button>
            <button className="ed-btn ghost" onClick={onLogout} title="Kijelentkezés">⎋ Kilépés</button>
          </div>
        </div>
      </header>

<div className="ed-main">
        <aside className="ed-sidebar">
          <div className="ed-sb-head">
            <div className="ed-sb-search">
              <span className="icon">⌕</span>
              <input
                type="text"
                placeholder="Keresés…"
                value={filterText}
                onChange={e => setFilterText(e.target.value)}
              />
            </div>
          </div>

<div className="ed-sb-list">
            {filtered.length === 0 ? (
              <div className="ed-sb-empty">Nincs találat.</div>
            ) : filtered.map(g => {
              const rowKey = keyOf(g);
              const isSel = rowKey === selectedKey;
              let dotClass = "";
              if (isSel && saveError) dotClass = "del";
              else if (isSel && dirty) dotClass = "mod";
              else if (isNewKey(rowKey)) dotClass = "new";
              // When this row is the selected, dirty one, show the draft's
              // values so the list reflects in-progress edits.
              const view = isSel && draft ? draft : g;
              return (
                <button
                  key={rowKey}
                  className={`ed-sb-row ${isSel ? "active" : ""}`}
                  onClick={() => selectRow(rowKey)}
                >
                  <span className={`ed-sb-dot ${dotClass}`} />
                  <div className="ed-sb-meta">
                    <div className="ed-sb-title">{view.title || <i style={{ color: "var(--ink-faint)" }}>(névtelen)</i>}</div>
                    <div className="ed-sb-cat">{view.category} · {view.duration}′ · {view.groupSize}</div>
                  </div>
                  <span className="ed-sb-arrow">→</span>
                </button>
              );
            })}
          </div>

<div className="ed-sb-add">
            <button className="ed-btn primary" onClick={addGame} style={{ width: "100%" }}>
              + Új játék hozzáadása
            </button>
          </div>
        </aside>

{confirmDelete && (
        <div className="ed-modal-back" onClick={() => setConfirmDelete(null)}>
          <div className="ed-modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
            <div className="ed-modal-head">
              <h3>Játék törlése</h3>
              <button className="x" onClick={() => setConfirmDelete(null)}>×</button>
            </div>
            <div className="ed-modal-body">
              <p>Biztosan törlöd: <b style={{ color: "var(--ink)" }}>{confirmDelete.game?.title || confirmDelete.key}</b>?</p>
              <p className="warning">Ez azonnal eltávolítja a Google Sheets-ből. Nem visszavonható (a Sheets verziótörténetből még visszanyerhető).</p>
            </div>
            <div className="ed-modal-foot">
              <button className="ed-btn ghost" onClick={() => setConfirmDelete(null)}>Mégsem</button>
              <button className="ed-btn danger" onClick={reallyDelete}>Igen, törlés</button>
            </div>
          </div>
        </div>
      )}

{toastEl}
    </div>
  );
}

// ───────────────────────── ROOT ─────────────────────────
function Root() {
  const [phase, setPhase] = useState(() => {
    if (!getApiUrl()) return "setup";
    if (sessionStorage.getItem(SS_TOKEN)) return "editor";
    return "login";
  });
  const [user, setUser] = useState(() => sessionStorage.getItem(SS_USER) || "");

if (phase === "setup") {
    return <SetupWizard onDone={() => setPhase(sessionStorage.getItem(SS_TOKEN) ? "editor" : "login")} />;
  }
  if (phase === "login") {
    return <Login
      onLogin={(u) => { setUser(u); setPhase("editor"); }}
      onReconfig={() => setPhase("setup")}
    />;
  }
  return <EditorApp
    username={user}
    onLogout={() => {
      sessionStorage.removeItem(SS_TOKEN);
      sessionStorage.removeItem(SS_USER);
      setPhase("login");
    }}
    onReconfig={() => {
      sessionStorage.removeItem(SS_TOKEN);
      sessionStorage.removeItem(SS_USER);
      setPhase("setup");
    }}
  />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<Root />);

API csatlakoztatása

Belépés a szerkesztőbe

Válassz egy játékot

{game.title || (névtelen játék)}