Add Docker deployment and per-player secret-link viewers.
Each player gets an isolated SQLite viewer via a unique URL without login, with landing page warnings to save the link and compose-based hosting for sharing with others. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+42
-6
@@ -38,15 +38,51 @@ const CATEGORY_I18N_KEYS = {
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
function apiBase() {
|
||||
const vid = window.VIEWER_ID;
|
||||
return vid ? `/v/${vid}/api` : "/api";
|
||||
}
|
||||
|
||||
function viewerPageUrl() {
|
||||
const vid = window.VIEWER_ID;
|
||||
if (!vid) return window.location.href;
|
||||
return `${window.location.origin}/v/${vid}/`;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await I18n.init();
|
||||
applyStaticI18n();
|
||||
setupLanguage();
|
||||
setupViewerBanner();
|
||||
setupNav();
|
||||
setupUpload();
|
||||
await loadData();
|
||||
}
|
||||
|
||||
function setupViewerBanner() {
|
||||
const vid = window.VIEWER_ID;
|
||||
if (!vid || vid === "local") return;
|
||||
|
||||
const banner = document.getElementById("viewer-link-banner");
|
||||
const urlEl = document.getElementById("viewer-link-url");
|
||||
const copyBtn = document.getElementById("viewer-copy-link");
|
||||
const url = viewerPageUrl();
|
||||
|
||||
banner.hidden = false;
|
||||
urlEl.textContent = url;
|
||||
|
||||
copyBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
const prev = copyBtn.textContent;
|
||||
copyBtn.textContent = t("viewer.copied");
|
||||
setTimeout(() => { copyBtn.textContent = prev; }, 2000);
|
||||
} catch {
|
||||
window.prompt(t("viewer.copyPrompt"), url);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function categoryLabel(cat) {
|
||||
const key = CATEGORY_I18N_KEYS[cat];
|
||||
return key ? t(key) : cat;
|
||||
@@ -96,7 +132,7 @@ function setupUpload() {
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const res = await fetch("/api/import", { method: "POST", body: fd });
|
||||
const res = await fetch(`${apiBase()}/import`, { method: "POST", body: fd });
|
||||
const result = await res.json();
|
||||
if (!res.ok || result.error) {
|
||||
showImportFailure(result);
|
||||
@@ -185,9 +221,9 @@ function renderImportReport(meta) {
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const res = await fetch("/api/snapshot/latest");
|
||||
const res = await fetch(`${apiBase()}/snapshot/latest`);
|
||||
if (!res.ok) {
|
||||
showEmpty(t("empty.noSave"));
|
||||
showEmpty(window.VIEWER_ID ? t("empty.noSaveWeb") : t("empty.noSave"));
|
||||
return;
|
||||
}
|
||||
state.data = await res.json();
|
||||
@@ -629,8 +665,8 @@ async function loadHistoryTab() {
|
||||
panel.innerHTML = `<p class='loading'>${esc(t("history.loading"))}</p>`;
|
||||
|
||||
const [snapRes, tlRes] = await Promise.all([
|
||||
fetch("/api/snapshots"),
|
||||
fetch("/api/timeline"),
|
||||
fetch(`${apiBase()}/snapshots`),
|
||||
fetch(`${apiBase()}/timeline`),
|
||||
]);
|
||||
state.snapshots = await snapRes.json();
|
||||
state.timeline = await tlRes.json();
|
||||
@@ -756,7 +792,7 @@ async function runDiff() {
|
||||
}
|
||||
const older = Math.min(h.olderId, h.newerId);
|
||||
const newer = Math.max(h.olderId, h.newerId);
|
||||
const res = await fetch(`/api/snapshots/${older}/diff/${newer}`);
|
||||
const res = await fetch(`${apiBase()}/snapshots/${older}/diff/${newer}`);
|
||||
const diff = await res.json();
|
||||
if (diff.error) {
|
||||
el.innerHTML = `<p class='empty-state'>${esc(diff.error)}</p>`;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await I18n.init();
|
||||
applyStaticI18n();
|
||||
setupLanguage();
|
||||
setupCreate();
|
||||
});
|
||||
|
||||
function applyStaticI18n() {
|
||||
document.querySelectorAll("[data-i18n]").forEach((el) => {
|
||||
el.textContent = t(el.dataset.i18n);
|
||||
});
|
||||
}
|
||||
|
||||
function setupLanguage() {
|
||||
const sel = document.getElementById("locale-select");
|
||||
sel.value = I18n.getPreference();
|
||||
sel.addEventListener("change", async (e) => {
|
||||
await I18n.setPreference(e.target.value);
|
||||
applyStaticI18n();
|
||||
});
|
||||
}
|
||||
|
||||
function setupCreate() {
|
||||
const btn = document.getElementById("create-viewer");
|
||||
const status = document.getElementById("create-status");
|
||||
btn.addEventListener("click", async () => {
|
||||
btn.disabled = true;
|
||||
status.hidden = false;
|
||||
status.textContent = t("viewer.creating");
|
||||
status.className = "landing-hint";
|
||||
try {
|
||||
const res = await fetch("/api/viewers", { method: "POST" });
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || t("viewer.createFailed"));
|
||||
window.location.href = data.url;
|
||||
} catch (err) {
|
||||
status.textContent = err.message;
|
||||
status.className = "landing-hint landing-hint-error";
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
},
|
||||
"empty": {
|
||||
"noSave": "Kein Save importiert. Starte mit: python app.py fantasyidler_save.json",
|
||||
"noSaveWeb": "Noch kein Save importiert. Importiere ein Backup über den Button in der Sidebar.",
|
||||
"loadError": "Fehler beim Laden: {message}",
|
||||
"unknown": "Unbekannt",
|
||||
"none": "Keine",
|
||||
@@ -174,5 +175,21 @@
|
||||
"gems_jewelry": "Edelsteine & Schmuck",
|
||||
"potions_brews": "Tränke & Brauerei",
|
||||
"misc": "Sonstiges"
|
||||
},
|
||||
"viewer": {
|
||||
"landingLead": "Erstelle deinen persönlichen Save-Viewer. Kein Konto – nur ein privater Link zu deinen Daten.",
|
||||
"featureDashboard": "Skills, Inventar, Quests und Verlauf",
|
||||
"featureUpload": "Backups im Browser importieren",
|
||||
"featurePrivate": "Deine Daten bleiben nur in deinem Viewer",
|
||||
"create": "Meinen Viewer erstellen",
|
||||
"creating": "Viewer wird erstellt…",
|
||||
"createFailed": "Viewer konnte nicht erstellt werden",
|
||||
"warningTitle": "Wichtig",
|
||||
"warningBody": "Es gibt keinen Login. Dein Viewer ist nur über seinen einzigartigen Link erreichbar. Link speichern oder bookmarken – ohne ihn sind deine Daten nicht wiederherstellbar.",
|
||||
"linkTitle": "Dein persönlicher Link",
|
||||
"linkWarning": "Link speichern – es gibt keinen Login. Ohne Link sind deine Daten weg.",
|
||||
"copyLink": "Link kopieren",
|
||||
"copied": "Kopiert!",
|
||||
"copyPrompt": "Viewer-Link kopieren:"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
},
|
||||
"empty": {
|
||||
"noSave": "No save imported. Start with: python app.py fantasyidler_save.json",
|
||||
"noSaveWeb": "No save imported yet. Import a backup using the sidebar button.",
|
||||
"loadError": "Failed to load: {message}",
|
||||
"unknown": "Unknown",
|
||||
"none": "None",
|
||||
@@ -174,5 +175,21 @@
|
||||
"gems_jewelry": "Gems & Jewelry",
|
||||
"potions_brews": "Potions & Brews",
|
||||
"misc": "Misc"
|
||||
},
|
||||
"viewer": {
|
||||
"landingLead": "Create your personal save viewer. No account – just a private link to your data.",
|
||||
"featureDashboard": "Skills, inventory, quests and history",
|
||||
"featureUpload": "Import backups in the browser",
|
||||
"featurePrivate": "Your data stays in your viewer only",
|
||||
"create": "Create my viewer",
|
||||
"creating": "Creating viewer…",
|
||||
"createFailed": "Could not create viewer",
|
||||
"warningTitle": "Important",
|
||||
"warningBody": "There is no login. Your viewer is only accessible via its unique link. Bookmark or save the link – without it, your data cannot be recovered.",
|
||||
"linkTitle": "Your personal link",
|
||||
"linkWarning": "Save this link – there is no login. Without it, your data is lost.",
|
||||
"copyLink": "Copy link",
|
||||
"copied": "Copied!",
|
||||
"copyPrompt": "Copy your viewer link:"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -597,6 +597,124 @@ tr:hover td { background: var(--bg-hover); }
|
||||
|
||||
.list-compact li:last-child { border-bottom: none; }
|
||||
|
||||
/* Landing page */
|
||||
.landing-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.landing-card {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.landing-brand { margin-bottom: 20px; }
|
||||
|
||||
.landing-lead {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.landing-features {
|
||||
margin: 0 0 24px;
|
||||
padding-left: 1.2rem;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.landing-actions { margin-bottom: 20px; }
|
||||
|
||||
.landing-create {
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.landing-hint {
|
||||
margin: 10px 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.landing-hint-error { color: #f87171; }
|
||||
|
||||
.landing-warning {
|
||||
background: rgba(251, 191, 36, 0.08);
|
||||
border: 1px solid rgba(251, 191, 36, 0.35);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing-warning strong { color: #fbbf24; }
|
||||
|
||||
.landing-lang { margin-top: 8px; }
|
||||
|
||||
/* Viewer link banner */
|
||||
.viewer-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(251, 191, 36, 0.35);
|
||||
background: rgba(251, 191, 36, 0.08);
|
||||
}
|
||||
|
||||
.viewer-banner-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.viewer-banner-text strong {
|
||||
display: block;
|
||||
color: #fbbf24;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.viewer-banner-warning {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.viewer-link-url {
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.viewer-copy-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.viewer-copy-btn:hover { background: var(--accent-dim); color: #fff; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user