/* Valentine Verification — interactive flow */
const { useState, useEffect, useRef, useMemo } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"to": "",
"from": "",
"message": "",
"skipToReveal": false
}/*EDITMODE-END*/;
/* ---------------- helpers ---------------- */
function getParam(name, fallback) {
const u = new URL(window.location.href);
return u.searchParams.get(name) || fallback;
}
const CFG = (typeof window !== "undefined" && window.VALENTINE_CONFIG) || {};
// URL-param image overrides: ?img0=...&img1=... (0–8)
function urlImages() {
const out = [];
for (let i = 0; i < 9; i++) {
out.push(getParam("img" + i, null));
}
return out;
}
const URL_IMAGES = urlImages();
const CFG_IMAGES_RAW = Array.isArray(CFG.images) ? CFG.images : [];
// Merge: URL beats config beats null
const CFG_IMAGES = Array.from({length: 9}, (_, i) => URL_IMAGES[i] || CFG_IMAGES_RAW[i] || null);
const CFG_PROMPT = getParam("prompt", "") || CFG.challengePrompt || "a heart";
// Correct cells: ?cells=all | any | 0,3,8
function parseCorrect(raw) {
if (!raw) return null;
if (raw === "all" || raw === "any") return raw;
const parts = raw.split(",").map(s => parseInt(s.trim(), 10)).filter(n => !isNaN(n));
return parts.length ? parts : null;
}
const CFG_CORRECT = parseCorrect(getParam("cells", "")) || CFG.correctCells || "all";
function Heart({ size = 24, fill = "currentColor", style }) {
return (
);
}
/* Each "image" in the captcha grid is an SVG placeholder.
They all (humorously) contain a heart somewhere. */
function CellArt({ idx, src }) {
// If user supplied an image URL via config, render that as a real photo.
if (src) {
return (
);
}
const palettes = [
["#f5d6cf", "#e89488"],
["#f1e3c9", "#d4a86a"],
["#dbe6d0", "#7fae6d"],
["#e6d3e8", "#b07ab8"],
["#f3cdc3", "#cf5a4a"],
["#e0d4c3", "#7a6850"],
["#f0e0d0", "#c98c5e"],
["#d9d3e3", "#6b6996"],
["#f5c8c0", "#a83a30"],
];
const [bg, fg] = palettes[idx % palettes.length];
// Each cell has a slightly different "scene" but with a heart concealed in it.
const variants = [
// 0: a sunrise with a heart-shaped sun
,
// 1: stripes
{[...Array(6)].map((_,i)=> )}
,
// 2: dots
{[...Array(16)].map((_,i)=>(
))}
,
// 3: cup of coffee w/ heart latte art
,
// 4: envelope
,
// 5: cat
,
// 6: pizza slice
,
// 7: clouds
,
// 8: just a really obvious heart
,
];
return (
);
}
/* ---------------- diagnostic messages ---------------- */
const DIAGNOSTICS = [
"Analyzing your heart rate…",
"Cross-referencing with my diary…",
"Checking for red flags…",
"Looking for someone better… none found.",
"Asking your mom for permission…",
"Verifying you're not my ex…",
"Re-reading your texts from 2021…",
"Calculating compatibility (suspiciously high)…",
];
/* ---------------- main app ---------------- */
function App() {
const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
const TweaksPanel = window.TweaksPanel;
// Resolve names — URL params trump tweaks unless tweak is set
const urlTo = getParam("to", "") || getParam("name", "");
const urlFrom = getParam("from", "") || getParam("by", "");
const urlMsg = getParam("msg", "") || getParam("message", "");
const toName = (tweaks.to || urlTo || CFG.to || "You").trim();
const fromName = (tweaks.from || urlFrom || CFG.from || "Your Secret Admirer").trim();
const message = tweaks.message || urlMsg || CFG.message || "";
// Stages: intro -> imageGrid -> slider -> reveal
const [stage, setStage] = useState(tweaks.skipToReveal ? "reveal" : "intro");
useEffect(() => {
if (tweaks.skipToReveal) setStage("reveal");
}, [tweaks.skipToReveal]);
// intro state — checkbox
const [checkState, setCheckState] = useState("idle"); // idle | loading | done
const [diagIdx, setDiagIdx] = useState(0);
useEffect(() => {
if (checkState !== "loading") return;
setDiagIdx(0);
let i = 0;
const id = setInterval(() => {
i = (i + 1) % DIAGNOSTICS.length;
setDiagIdx(i);
}, 850);
const done = setTimeout(() => {
setCheckState("done");
clearInterval(id);
setTimeout(() => setStage("grid"), 700);
}, 3400);
return () => { clearInterval(id); clearTimeout(done); };
}, [checkState]);
// grid challenge state
const [selected, setSelected] = useState(new Set());
const [gridError, setGridError] = useState("");
const [gridAttempts, setGridAttempts] = useState(0);
// 9 cells, populated from config.images + URL params (or defaults to null = SVG)
const cells = CFG_IMAGES;
const correctSet = useMemo(() => {
if (Array.isArray(CFG_CORRECT)) return new Set(CFG_CORRECT);
return new Set([0,1,2,3,4,5,6,7,8]); // "all" — default
}, []);
const correctMode = CFG_CORRECT === "any" ? "any" : Array.isArray(CFG_CORRECT) ? "specific" : "all";
function toggleCell(i) {
setGridError("");
setSelected(prev => {
const next = new Set(prev);
if (next.has(i)) next.delete(i); else next.add(i);
return next;
});
}
function verifyGrid() {
let pass = false;
if (correctMode === "any") {
pass = selected.size > 0;
} else if (correctMode === "specific") {
pass = correctSet.size === selected.size &&
[...correctSet].every(i => selected.has(i));
} else {
pass = selected.size === 9;
}
if (pass) { setStage("slider"); return; }
if (selected.size === 0) {
setGridError(`Please select all images containing ${CFG_PROMPT}.`);
return;
}
setGridAttempts(a => a + 1);
if (correctMode === "all") {
const remaining = 9 - selected.size;
if (gridAttempts === 0) setGridError(`Almost — you missed ${remaining}. Look closer.`);
else if (gridAttempts === 1) setGridError(`Still ${remaining} more. They all have ${CFG_PROMPT}. Trust me, I checked.`);
else setGridError(`${remaining} unselected. This is starting to feel personal.`);
} else {
if (gridAttempts === 0) setGridError(`Not quite — try again.`);
else if (gridAttempts === 1) setGridError(`Still wrong. Look closer.`);
else setGridError(`This is starting to feel personal.`);
}
}
function reloadGrid() {
setSelected(new Set());
setGridError(`Refreshing didn't help. ${correctMode === "all" ? "They're still all " + CFG_PROMPT + "." : "Same challenge."}`);
}
// slider challenge state
const [sliderVal, setSliderVal] = useState(0);
const sliderLabel = useMemo(() => {
if (sliderVal < 10) return "absolutely not";
if (sliderVal < 30) return "hmm.";
if (sliderVal < 55) return "i guess.";
if (sliderVal < 80) return "fine, yes.";
if (sliderVal < 99) return "yes, obviously.";
return "yes, a thousand times.";
}, [sliderVal]);
function confirmSlider() {
if (sliderVal >= 100) setStage("reveal");
}
// decline button skitter
const declineRef = useRef(null);
const [declineDx, setDeclineDx] = useState(0);
const [declineDodges, setDeclineDodges] = useState(0);
const [declineGone, setDeclineGone] = useState(false);
function dodgeDecline() {
if (declineDodges >= 2) {
setDeclineGone(true);
return;
}
setDeclineDx(prev => (prev === 0 ? -120 : prev > 0 ? -160 : 160));
setDeclineDodges(d => d + 1);
}
// confetti for reveal
const [confetti, setConfetti] = useState([]);
useEffect(() => {
if (stage !== "reveal") return;
const pieces = Array.from({length: 30}, (_, i) => ({
id: i,
left: Math.random() * 100,
delay: Math.random() * 2.5,
size: 14 + Math.random() * 22,
tilt: Math.random() * 360,
}));
setConfetti(pieces);
}, [stage]);
/* -------- renders -------- */
const stageLabel = stage === "intro" ? "01 / VERIFICATION"
: stage === "grid" ? "02 / IMAGE CHALLENGE"
: stage === "slider" ? "03 / FINAL CONFIRMATION"
: "04 / VERIFIED";
return (
SECURE TRANSMISSION{stageLabel}
{stage === "intro" && (
Priority · 1ST class
Hand-Delivered To
{toName}, you've received a Valentine.
For security reasons, please verify you are a real human{toName !== "You" ? ` and that you are, in fact, ${toName}` : ""}. Bots have been receiving entirely too many valentines this year.