Perfect_Python500/MineGeo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map import and export with durable refresh progress

Browse Source
This commit is contained in:
perfect_python500
2026-10-07 19:44:49 +05:00
parent dac8650ac1
commit 1307436e65
37 changed files with 2207 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/CatalogBrowser.tsx
View File

@@ -4,7 +4,14 @@ import { useI18n } from "@/components/I18nProvider";
import { useState } from "react";
import { Search } from "lucide-react";
import { MapCard, type CardMap } from "./MapCard";
export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
import { ImportMap } from "./MapTransfer";
export function CatalogBrowser({
maps,
signedIn = false,
}: {
maps: CardMap[];
signedIn?: boolean;
}) {
const { t } = useI18n();
const [query, setQuery] = useState(""),
[source, setSource] = useState("all");
@@ -18,15 +25,18 @@ export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
return (
<>
<div className="catalog-controls">
<label className="search-field">
<Search size={17} />
<input
aria-label={t("Search worlds")}
placeholder={t("Search worlds or servers…")}
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
</label>
<div className="catalog-search">
<label className="search-field">
<Search size={17} />
<input
aria-label={t("Search worlds")}
placeholder={t("Search worlds or servers…")}
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
</label>
<ImportMap signedIn={signedIn} />
</div>
<div className="tabs" aria-label={t("Capture source")}>
{[
["all", t("All worlds")],

2
components/Dashboard.tsx
View File

@@ -10,6 +10,7 @@ import { api } from "./StartGame";
import type { MapListing } from "@/lib/catalog";
import type { ProcessingJob } from "@/shared/processing-progress";
import { ProcessingProgress } from "./ProcessingProgress";
import { ImportMap } from "./MapTransfer";
type Draft = MapListing & {
upload_jobs: ProcessingJob | null;
};
@@ -86,6 +87,7 @@ export function Dashboard() {
)}
</p>
<div className="inline-actions">
<ImportMap signedIn />
<Link className="button" href="/settings">
{t("Account settings")}
</Link>

52
components/DraftEditor.tsx
View File

@@ -4,7 +4,7 @@ import { useI18n } from "@/components/I18nProvider";
import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { api } from "./StartGame";
import { api, StartGame } from "./StartGame";
import type { DatasetManifest } from "@/shared/protocol";
import type { ProcessingJob } from "@/shared/processing-progress";
import { ProcessingProgress } from "./ProcessingProgress";
@@ -13,7 +13,10 @@ import { OwnerContributions } from "./OwnerContributions";
import Link from "next/link";
import { MapRefresh } from "./MapRefresh";
import { MapAppeal } from "./MapAppeal";
import { ExportMap } from "./MapTransfer";
type Draft = {
imported_from_id: string | null;
imported_owner_name: string | null;
id: string;
name: string;
description: string;
@@ -147,9 +150,39 @@ export function DraftEditor({ id }: { id: string }) {
<div className="editor-navigation">
<Link href="/dashboard">{t("← Your maps")}</Link>
<a href="#locations">{t("Choose locations")}</a>
{!draft.parent_dataset_id && <a href="#map-tools">{t("Map tools")}</a>}
{!draft.imported_from_id && !draft.parent_dataset_id && (
<a href="#map-tools">{t("Map tools")}</a>
)}
</div>
<span className="badge">{t(statusMessage(draft.state))}</span>
{!draft.imported_from_id &&
!draft.parent_dataset_id &&
draft.map &&
!draft.banned_at && (
<ExportMap
id={id}
disabled={
busy ||
refreshing ||
["uploading", "processing", "failed"].includes(draft.state)
}
/>
)}
{draft.imported_from_id && (
<section className="editor-panel">
<h2>
{t("Owned by {owner}", {
owner: draft.imported_owner_name ?? "Explorer",
})}
</h2>
<p className="muted">
{t(
"This shared map is private and playable without moderator review. Only the original owner can submit it for public review.",
)}
</p>
{draft.state === "draft" && <StartGame datasetId={id} />}
</section>
)}
{!draft.parent_dataset_id &&
(draft.report_strikes > 0 || draft.banned_at) && (
<MapAppeal
@@ -333,7 +366,12 @@ export function DraftEditor({ id }: { id: string }) {
</button>
<button
className="button primary"
disabled={busy || refreshing || selected.length < minimum}
disabled={
busy ||
refreshing ||
selected.length < minimum ||
!!draft.imported_from_id
}
onClick={() => save(true)}
>
{draft.parent_dataset_id
@@ -342,21 +380,23 @@ export function DraftEditor({ id }: { id: string }) {
</button>
</div>
)}
{!draft.parent_dataset_id && (
{!draft.imported_from_id && !draft.parent_dataset_id && (
<div id="map-tools">
<MapRefresh
id={id}
refreshKey={version}
job={draft.upload_jobs}
disabled={busy || !editable || refreshing}
onQueued={() => {
setMessage(
"Map refresh queued. Keep this page open to follow progress.",
"Map refresh queued. Progress and the result are saved; you can reopen this page later.",
);
setVersion((v) => v + 1);
}}
/>
</div>
)}
{!draft.parent_dataset_id && (
{!draft.imported_from_id && !draft.parent_dataset_id && (
<OwnerContributions
id={id}
allowed={draft.allow_contributions}

52
components/MapRefresh.tsx
View File

@@ -1,30 +1,46 @@
"use client";
import { useI18n } from "@/components/I18nProvider";
import { useEffect, useState } from "react";
import { api } from "./StartGame";
import { useEffect, useRef, useState } from "react";
import { api } from "@/lib/client-api";
import { refreshCapture, type MapCapture } from "@/shared/map-refresh";
import type { ProcessingJob } from "@/shared/processing-progress";
export function MapRefresh({
id,
disabled,
onQueued,
refreshKey,
job,
}: {
id: string;
disabled: boolean;
onQueued: () => void;
refreshKey: number;
job: ProcessingJob | null;
}) {
const { t, formatDate } = useI18n();
const [sources, setSources] = useState<
{ id: string; name: string; created_at: string }[]
>([]);
const [source, setSource] = useState(id);
const [sources, setSources] = useState<MapCapture[]>([]);
const [source, setSource] = useState("");
const choice = useRef<{ mapId: string; sourceId: string } | null>(null);
const [busy, setBusy] = useState(false);
const [error, setError] = useState("");
useEffect(() => {
let active = true;
api<{ sources: typeof sources }>(`datasets/${id}/refresh-map`)
.then((r) => {
if (active) setSources(r.sources);
if (active) {
setSources(r.sources);
setSource(
refreshCapture(
r.sources,
choice.current?.mapId === id
? choice.current.sourceId
: undefined,
),
);
setError("");
}
})
.catch((e) => {
if (active) setError(e.message);
@@ -32,7 +48,7 @@ export function MapRefresh({
return () => {
active = false;
};
}, [id]);
}, [id, refreshKey, job?.id, job?.state]);
async function refresh() {
setBusy(true);
setError("");
@@ -58,7 +74,10 @@ export function MapRefresh({
{t("Terrain capture")}
<select
value={source}
onChange={(e) => setSource(e.target.value)}
onChange={(e) => {
choice.current = { mapId: id, sourceId: e.target.value };
setSource(e.target.value);
}}
disabled={disabled || busy}
>
{sources.map((s) => (
@@ -69,6 +88,11 @@ export function MapRefresh({
))}
</select>
</label>
<p className="muted">
{t(
"The newest eligible capture is selected automatically. Choose the original capture only if you want its older terrain.",
)}
</p>
<button
className="button"
disabled={disabled || busy || !sources.some((s) => s.id === source)}
@@ -81,6 +105,16 @@ export function MapRefresh({
"Panoramas stay unchanged. Refreshing uses no panorama slots, even at 24/24. Submit the finished map update for review to make it playable.",
)}
</p>
{job?.kind === "map" && job.state === "complete" && (
<p role="status" className="success-message">
{t("Last successful refresh used: {capture}.", {
capture:
job.source_dataset_id === id
? t("Original capture")
: `${sources.find((s) => s.id === job.source_dataset_id)?.name ?? t("Terrain capture")} · ${job.source_dataset_id?.slice(0, 8) ?? ""}`,
})}
</p>
)}
{error && (
<p role="alert" className="error-message">
{t(error)}

136
components/MapTransfer.tsx Normal file
View File

@@ -0,0 +1,136 @@
"use client";
import { useRef, useState } from "react";
import { Download, Upload, X } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useI18n } from "./I18nProvider";
export function ExportMap({
id,
disabled = false,
}: {
id: string;
disabled?: boolean;
}) {
const { t } = useI18n();
const [busy, setBusy] = useState(false);
const [status, setStatus] = useState("");
const [error, setError] = useState("");
async function download() {
setBusy(true);
setError("");
try {
const { exportMap } = await import("@/lib/map-transfer");
await exportMap(id, (message, values) => setStatus(t(message, values)));
setStatus(t("Map ZIP downloaded. Share it with a friend."));
} catch (error) {
setStatus("");
setError(error instanceof Error ? error.message : "Could not export map");
} finally {
setBusy(false);
}
}
return (
<div className="map-export">
<button className="button" onClick={download} disabled={disabled || busy}>
<Download size={17} aria-hidden="true" />{" "}
{t(busy ? "Exporting…" : "Export ZIP")}
</button>
{status && (
<p role="status" className="muted">
{status}
</p>
)}
{error && (
<p role="alert" className="error-message">
{t(error)}
</p>
)}
</div>
);
}
export function ImportMap({ signedIn }: { signedIn: boolean }) {
const { t } = useI18n();
const router = useRouter();
const dialog = useRef<HTMLDialogElement>(null);
const [busy, setBusy] = useState(false);
const [status, setStatus] = useState("");
const [error, setError] = useState("");
async function upload(file: File) {
setBusy(true);
setError("");
try {
const { importMap } = await import("@/lib/map-transfer");
const id = await importMap(file, (message, values) =>
setStatus(t(message, values)),
);
dialog.current?.close();
router.push(`/dashboard/${id}`);
router.refresh();
} catch (error) {
setStatus("");
setError(error instanceof Error ? error.message : "Could not import map");
} finally {
setBusy(false);
}
}
return (
<>
<button className="button" onClick={() => dialog.current?.showModal()}>
<Upload size={17} aria-hidden="true" /> {t("Import")}
</button>
<dialog
ref={dialog}
className="map-import-dialog"
aria-labelledby="map-import-title"
onCancel={(event) => {
if (busy) event.preventDefault();
}}
>
<div className="map-import-heading">
<h2 id="map-import-title">{t("Import a shared map")}</h2>
<button
className="button"
aria-label={t("Close")}
disabled={busy}
onClick={() => dialog.current?.close()}
>
<X size={18} aria-hidden="true" />
</button>
</div>
<p className="muted">
{t(
"Choose a MineGeo ZIP exported by the map owner. Play it privately without moderator review. The original owner keeps publication rights. Maximum size: 256 MB.",
)}
</p>
{signedIn ? (
<label className="field">
{t("Map ZIP file")}
<input
type="file"
accept=".zip,application/zip"
disabled={busy}
onChange={(event) => {
const file = event.currentTarget.files?.[0];
event.currentTarget.value = "";
if (file) void upload(file);
}}
/>
</label>
) : (
<Link className="button primary" href="/log-in?next=/servers">
{t("Sign in to import")}
</Link>
)}
{status && <p role="status">{status}</p>}
{error && (
<p className="error-message" role="alert">
{t(error)}
</p>
)}
</dialog>
</>
);
}

67
components/ProcessingProgress.tsx
View File

@@ -7,16 +7,53 @@ import {
type ProcessingJob,
} from "@/shared/processing-progress";
const completionDeadlines = new Map<string, number>();
export function ProcessingProgress({ job }: { job: ProcessingJob | null }) {
const { t } = useI18n();
const [now, setNow] = useState<number | null>(null);
const [visibleCompletion, setVisibleCompletion] = useState<string | null>(
null,
);
const complete = job?.kind === "map" && job.state === "complete";
const completionKey = complete
? `minegeo:map-refresh-notice:${job.id ?? job.updated_at}`
: null;
useEffect(() => {
setVisibleCompletion(null);
if (!completionKey) return;
let deadline = completionDeadlines.get(completionKey);
try {
const saved = Number(localStorage.getItem(completionKey));
if (Number.isFinite(saved) && saved > 0) deadline = saved;
} catch {
// Keep the same deadline during navigation if browser storage is blocked.
}
deadline ??= Date.now() + 10_000;
completionDeadlines.set(completionKey, deadline);
try {
localStorage.setItem(completionKey, String(deadline));
} catch {}
const remaining = deadline - Date.now();
if (remaining <= 0) return;
setVisibleCompletion(completionKey);
const timer = setTimeout(() => setVisibleCompletion(null), remaining);
return () => clearTimeout(timer);
}, [completionKey]);
useEffect(() => {
setNow(Date.now());
if (job?.state !== "running") return;
const timer = setInterval(() => setNow(Date.now()), 5000);
return () => clearInterval(timer);
}, []);
if (!job || !["queued", "running"].includes(job.state)) return null;
const progress = Math.max(0, Math.min(100, job.progress));
}, [job?.state]);
if (
!job ||
(complete
? visibleCompletion !== completionKey
: !["queued", "running"].includes(job.state))
)
return null;
const progress = complete ? 100 : Math.max(0, Math.min(100, job.progress));
const stopped =
now !== null &&
job.state === "running" &&
@@ -24,9 +61,11 @@ export function ProcessingProgress({ job }: { job: ProcessingJob | null }) {
return (
<div className="processing-progress" role="status" aria-live="polite">
<p>
{job.state === "queued"
? t("Waiting for a processing worker")
: `${progress}% · ${job.kind === "map" ? t("Refreshing guessing map") : t(processingStage(progress))}`}
{complete
? `100% · ${t("Guessing map refreshed successfully")}`
: job.state === "queued"
? t("Waiting for a processing worker")
: `${progress}% · ${job.kind === "map" ? t("Refreshing guessing map") : t(processingStage(progress))}`}
</p>
<progress
max={100}
@@ -34,15 +73,17 @@ export function ProcessingProgress({ job }: { job: ProcessingJob | null }) {
aria-label={t("Map processing progress")}
/>
<p className="muted">
{stopped
? t(
"The worker has stopped reporting. Check its terminal and restart it if necessary. Your uploaded export is saved.",
)
: job.state === "running"
{complete
? t("The updated guessing map is ready to preview.")
: stopped
? t(
"Worker connected. Large exports can take a while; progress measures completed work.",
"The worker has stopped reporting. Check its terminal and restart it if necessary. Your uploaded export is saved.",
)
: t("Processing will start when a worker is available.")}
: job.state === "running"
? t(
"Worker connected. Large exports can take a while; progress measures completed work.",
)
: t("Processing will start when a worker is available.")}
</p>
</div>
);