(null);
let canvasRef: HTMLCanvasElement | undefined;
let animFrameId = 0;
let runes: { x: number; y: number; vx: number; vy: number; char: string; size: number; angle: number; va: number }[] = [];
const scriptValid = createMemo(() => isPeachScript(scriptInput()));
function stopAnim() {
cancelAnimationFrame(animFrameId);
animFrameId = 0;
}
function startChaos(canvas: HTMLCanvasElement) {
const ctx = canvas.getContext("2d")!;
const W = canvas.width;
const H = canvas.height;
const RUNE_CHARS = Array.from({ length: 40 }, (_, i) =>
String.fromCodePoint(0xe000 + i)
);
if (runes.length === 0) {
runes = Array.from({ length: 60 }, () => ({
x: Math.random() * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 3,
vy: (Math.random() - 0.5) * 3,
char: RUNE_CHARS[Math.floor(Math.random() * RUNE_CHARS.length)]!,
size: 14 + Math.random() * 20,
angle: Math.random() * Math.PI * 2,
va: (Math.random() - 0.5) * 0.1,
}));
}
function draw() {
ctx.clearRect(0, 0, W, H);
for (const r of runes) {
r.x = (r.x + r.vx + W) % W;
r.y = (r.y + r.vy + H) % H;
r.angle += r.va;
ctx.save();
ctx.translate(r.x, r.y);
ctx.rotate(r.angle);
ctx.font = `${r.size}px PeachScript, monospace`;
const alpha = 0.5 + 0.5 * Math.sin(Date.now() / 400 + r.x);
ctx.fillStyle = `rgba(232, 149, 109, ${alpha})`;
ctx.shadowColor = "rgba(232, 149, 109, 0.7)";
ctx.shadowBlur = 8;
ctx.fillText(r.char, 0, 0);
ctx.restore();
}
animFrameId = requestAnimationFrame(draw);
}
draw();
}
function snapToGrid(canvas: HTMLCanvasElement, onDone: () => void) {
stopAnim();
const ctx = canvas.getContext("2d")!;
const W = canvas.width;
const H = canvas.height;
const cols = 8;
const rows = 6;
const cellW = W / cols;
const cellH = H / rows;
const targets = runes.slice(0, cols * rows).map((_, i) => ({
x: (i % cols) * cellW + cellW / 2,
y: Math.floor(i / cols) * cellH + cellH / 2,
}));
const start = performance.now();
const DURATION = 400;
function drawSnap(now: number) {
const t = Math.min((now - start) / DURATION, 1);
const ease = t < 1 ? 1 - Math.pow(1 - t, 3) : 1;
ctx.clearRect(0, 0, W, H);
runes.slice(0, targets.length).forEach((r, i) => {
const tx = targets[i]!.x;
const ty = targets[i]!.y;
const cx = r.x + (tx - r.x) * ease;
const cy = r.y + (ty - r.y) * ease;
ctx.font = `16px PeachScript, monospace`;
ctx.fillStyle = `rgba(232, 149, 109, ${0.8 * ease})`;
ctx.shadowColor = "rgba(232, 149, 109, 0.6)";
ctx.shadowBlur = 6;
ctx.fillText(r.char, cx - 8, cy + 8);
});
if (t < 1) {
animFrameId = requestAnimationFrame(drawSnap);
} else {
onDone();
}
}
animFrameId = requestAnimationFrame(drawSnap);
}
function bloom(canvas: HTMLCanvasElement, onDone: () => void) {
stopAnim();
const ctx = canvas.getContext("2d")!;
const W = canvas.width;
const H = canvas.height;
const start = performance.now();
const DURATION = 900;
function drawBloom(now: number) {
const t = Math.min((now - start) / DURATION, 1);
ctx.clearRect(0, 0, W, H);
// Runes dissolve
const runeAlpha = 1 - Math.min(t / 0.4, 1);
if (runeAlpha > 0) {
for (const r of runes.slice(0, 48)) {
ctx.font = `16px PeachScript, monospace`;
ctx.fillStyle = `rgba(232, 149, 109, ${runeAlpha * 0.8})`;
ctx.fillText(r.char, r.x - 8, r.y + 8);
}
}
// Peach mark bloom
const markT = Math.max(0, (t - 0.2) / 0.5);
const markScale = Math.min(markT * 1.2, 1);
const markAlpha = markT < 0.5 ? markT * 2 : 2 - markT * 2;
if (markAlpha > 0) {
ctx.save();
ctx.globalAlpha = markAlpha;
ctx.shadowColor = `rgba(217, 104, 48, ${markAlpha * 0.8})`;
ctx.shadowBlur = 30;
ctx.translate(W / 2, H / 2);
ctx.scale(markScale, markScale);
ctx.drawImage(peachMarkImg, -32, -32, 64, 64);
ctx.restore();
}
if (t < 1) {
animFrameId = requestAnimationFrame(drawBloom);
} else {
onDone();
}
}
animFrameId = requestAnimationFrame(drawBloom);
}
onCleanup(() => stopAnim());
async function handleRestore() {
if (!scriptValid() || !backupPass().trim() || working()) return;
setError(null);
setWorking(true);
setAnimating("chaos");
const canvas = canvasRef;
if (canvas) startChaos(canvas);
try {
const bytes = decodePeachScript(normalisePeachScript(scriptInput()));
const payload = await parsePayload(bytes, backupPass());
if (!props.hasVault) {
const cr = await sendMessage({ type: "CREATE_VAULT", payload: { password: backupPass() } });
if (!(cr as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED");
}
const rr = await sendMessage({
type: "RESTORE_ENTRIES",
payload: { entries: payload.entries, mode: "merge", settings: payload.settings },
});
if (!(rr as { ok: boolean }).ok) throw new Error((rr as { error?: string }).error ?? "RESTORE_FAILED");
if (payload.license?.key) {
await sendMessage({ type: "ACTIVATE_LICENSE", payload: { key: payload.license.key } }).catch(() => {});
}
setAnimating("snap");
stopAnim();
if (canvas) {
snapToGrid(canvas, () => {
setAnimating("bloom");
bloom(canvas, async () => {
setAnimating(null);
await props.onSuccess();
});
});
} else {
await props.onSuccess();
}
} catch (err) {
stopAnim();
setAnimating(null);
const code = err instanceof Error ? err.message : String(err);
setError(
code === "INVALID_PASSPHRASE" || code === "INVALID_EXPORT_PASSWORD"
? "That passphrase didn't work."
: code === "CREATE_VAULT_FAILED"
? "Couldn't create a new local vault."
: "Could not read this backup.",
);
} finally {
setWorking(false);
}
}
return (