Cage Corner Watch

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_95":94,"_32":44,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":58,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","styles.css","latestPath","fileId","84cd1262-6446-11f1-b160-1607ee4eb77e","name","fileType","content",":root {\n color-scheme: dark;\n --bg: #020403;\n --panel: rgba(0, 19, 14, 0.82);\n --panel-border: rgba(105, 255, 202, 0.34);\n --text: #dfffea;\n --muted: #63d89f;\n --accent: #ffea63;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n margin: 0;\n}\n\nbody {\n overflow: hidden;\n background:\n radial-gradient(circle at 50% 50%, rgba(47, 255, 151, 0.1), transparent 34rem),\n linear-gradient(135deg, #020403 0%, #07120e 48%, #010201 100%);\n color: var(--text);\n font-family: \"Lucida Console\", Monaco, \"Courier New\", monospace;\n}\n\nbody::before,\nbody::after {\n position: fixed;\n inset: 0;\n z-index: 4;\n pointer-events: none;\n content: \"\";\n}\n\nbody::before {\n /* Horizontal scanlines sit above the scene and flicker independently. */\n background:\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08) 0,\n rgba(255, 255, 255, 0.08) 1px,\n rgba(0, 0, 0, 0.18) 2px,\n rgba(0, 0, 0, 0.18) 4px\n );\n mix-blend-mode: overlay;\n opacity: 0.48;\n animation: scanline-flicker 1.8s steps(2, end) infinite;\n}\n\nbody::after {\n /* The vignette and side color wash imply a curved CRT glass surface. */\n background:\n radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.32) 75%, rgba(0, 0, 0, 0.78) 100%),\n linear-gradient(90deg, rgba(255, 0, 0, 0.06), transparent 17%, transparent 83%, rgba(0, 70, 255, 0.06));\n box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9);\n}\n\n.screen,\n.stage {\n width: 100%;\n height: 100%;\n}\n\n.screen {\n position: fixed;\n top: 50%;\n left: 50%;\n width: min(100vw, calc(100vh * 4 / 3));\n height: min(100vh, calc(100vw * 3 / 4));\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.stage {\n position: absolute;\n inset: 0;\n overflow: hidden;\n border-radius: 2.5vw;\n box-shadow: inset 0 0 120px rgba(0, 255, 136, 0.12);\n}\n\n.crt-badge {\n position: absolute;\n right: 18px;\n bottom: 16px;\n z-index: 3;\n color: rgba(223, 255, 234, 0.72);\n font-size: 0.78rem;\n font-weight: 700;\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.46),\n -1px 0 rgba(0, 190, 255, 0.42),\n 0 0 10px rgba(95, 255, 178, 0.72);\n}\n\n.stats {\n position: absolute;\n z-index: 3;\n top: 16px;\n left: 16px;\n right: 16px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 1px;\n max-width: 780px;\n overflow: hidden;\n border: 1px solid var(--panel-border);\n border-radius: 4px;\n background: var(--panel);\n /* Layered glow and RGB text shadows sell the phosphor display treatment. */\n box-shadow:\n 0 0 18px rgba(52, 255, 166, 0.26),\n inset 0 0 22px rgba(52, 255, 166, 0.1);\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.4),\n -1px 0 rgba(0, 190, 255, 0.36),\n 0 0 8px rgba(95, 255, 178, 0.56);\n backdrop-filter: blur(4px);\n}\n\n.stats div {\n min-width: 0;\n padding: 12px 14px;\n background:\n linear-gradient(180deg, rgba(105, 255, 202, 0.08), transparent),\n rgba(0, 0, 0, 0.2);\n}\n\n.label {\n display: block;\n margin-bottom: 5px;\n color: var(--muted);\n font-size: 0.74rem;\n font-weight: 700;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n\n.stats strong {\n display: block;\n overflow: hidden;\n color: var(--text);\n font-size: clamp(1rem, 2vw, 1.45rem);\n line-height: 1.1;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-transform: uppercase;\n}\n\n.cage-face {\n position: absolute;\n z-index: 1;\n width: clamp(92px, 13vw, 170px);\n height: auto;\n user-select: none;\n /* Offset red/cyan shadows approximate analog RGB channel separation. */\n filter:\n drop-shadow(3px 0 0 rgba(255, 0, 72, 0.34))\n drop-shadow(-3px 0 0 rgba(0, 198, 255, 0.3))\n drop-shadow(0 0 18px rgba(255, 238, 93, 0.38))\n drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));\n will-change: transform;\n}\n\n#confetti {\n position: absolute;\n z-index: 2;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@media (max-width: 680px) {\n .stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .stats strong {\n font-size: 1rem;\n }\n}\n\n@keyframes scanline-flicker {\n 0%,\n 100% {\n opacity: 0.42;\n transform: translateY(0);\n }\n\n 50% {\n opacity: 0.54;\n transform: translateY(1px);\n }\n}\n",":root {\n color-scheme: dark;\n --bg: #020403;\n --panel: rgba(0, 19, 14, 0.82);\n --panel-border: rgba(105, 255, 202, 0.34);\n --text: #dfffea;\n --muted: #63d89f;\n --accent: #ffea63;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n margin: 0;\n}\n\nbody {\n overflow: hidden;\n background:\n radial-gradient(circle at 50% 50%, rgba(47, 255, 151, 0.1), transparent 34rem),\n linear-gradient(135deg, #020403 0%, #07120e 48%, #010201 100%);\n color: var(--text);\n font-family: \"Lucida Console\", Monaco, \"Courier New\", monospace;\n}\n\nbody::before,\nbody::after {\n position: fixed;\n inset: 0;\n z-index: 4;\n pointer-events: none;\n content: \"\";\n}\n\nbody::before {\n /* Horizontal scanlines sit above the scene and flicker independently. */\n background:\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08) 0,\n rgba(255, 255, 255, 0.08) 1px,\n rgba(0, 0, 0, 0.18) 2px,\n rgba(0, 0, 0, 0.18) 4px\n );\n mix-blend-mode: overlay;\n opacity: 0.48;\n animation: scanline-flicker 1.8s steps(2, end) infinite;\n}\n\nbody::after {\n /* The vignette and side color wash imply a curved CRT glass surface. */\n background:\n radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.32) 75%, rgba(0, 0, 0, 0.78) 100%),\n linear-gradient(90deg, rgba(255, 0, 0, 0.06), transparent 17%, transparent 83%, rgba(0, 70, 255, 0.06));\n box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9);\n}\n\n.screen,\n.stage {\n width: 100%;\n height: 100%;\n}\n\n.screen {\n position: fixed;\n top: 50%;\n left: 50%;\n width: min(100vw, calc(100vh * 4 / 3));\n height: min(100vh, calc(100vw * 3 / 4));\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.stage {\n position: absolute;\n inset: 0;\n overflow: hidden;\n border-radius: 2.5vw;\n box-shadow: inset 0 0 120px rgba(0, 255, 136, 0.12);\n}\n\n.crt-badge {\n position: absolute;\n right: 18px;\n bottom: 16px;\n z-index: 3;\n color: rgba(223, 255, 234, 0.72);\n font-size: 0.78rem;\n font-weight: 700;\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.46),\n -1px 0 rgba(0, 190, 255, 0.42),\n 0 0 10px rgba(95, 255, 178, 0.72);\n}\n\n.stats-toggle {\n position: absolute;\n z-index: 3;\n top: 16px;\n left: 16px;\n padding: 8px 11px;\n border: 1px solid var(--panel-border);\n border-radius: 4px;\n background: var(--panel);\n color: var(--muted);\n font: inherit;\n font-size: 0.72rem;\n font-weight: 700;\n text-transform: uppercase;\n cursor: pointer;\n box-shadow: 0 0 12px rgba(52, 255, 166, 0.18);\n text-shadow: 0 0 8px rgba(95, 255, 178, 0.56);\n backdrop-filter: blur(4px);\n}\n\n.stats-toggle:hover {\n color: var(--text);\n border-color: var(--muted);\n}\n\n.stats-toggle:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 3px;\n}\n\n.stats {\n position: absolute;\n z-index: 3;\n top: 58px;\n left: 16px;\n right: 16px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 1px;\n max-width: 780px;\n overflow: hidden;\n border: 1px solid var(--panel-border);\n border-radius: 4px;\n background: var(--panel);\n /* Layered glow and RGB text shadows sell the phosphor display treatment. */\n box-shadow:\n 0 0 18px rgba(52, 255, 166, 0.26),\n inset 0 0 22px rgba(52, 255, 166, 0.1);\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.4),\n -1px 0 rgba(0, 190, 255, 0.36),\n 0 0 8px rgba(95, 255, 178, 0.56);\n backdrop-filter: blur(4px);\n}\n\n.stats[hidden] {\n display: none;\n}\n\n.stats div {\n min-width: 0;\n padding: 12px 14px;\n background:\n linear-gradient(180deg, rgba(105, 255, 202, 0.08), transparent),\n rgba(0, 0, 0, 0.2);\n}\n\n.label {\n display: block;\n margin-bottom: 5px;\n color: var(--muted);\n font-size: 0.74rem;\n font-weight: 700;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n\n.stats strong {\n display: block;\n overflow: hidden;\n color: var(--text);\n font-size: clamp(1rem, 2vw, 1.45rem);\n line-height: 1.1;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-transform: uppercase;\n}\n\n.cage-face {\n position: absolute;\n z-index: 1;\n width: clamp(92px, 13vw, 170px);\n height: auto;\n user-select: none;\n /* Offset red/cyan shadows approximate analog RGB channel separation. */\n filter:\n drop-shadow(3px 0 0 rgba(255, 0, 72, 0.34))\n drop-shadow(-3px 0 0 rgba(0, 198, 255, 0.3))\n drop-shadow(0 0 18px rgba(255, 238, 93, 0.38))\n drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));\n will-change: transform;\n}\n\n#confetti {\n position: absolute;\n z-index: 2;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@media (max-width: 680px) {\n .stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .stats strong {\n font-size: 1rem;\n }\n}\n\n@keyframes scanline-flicker {\n 0%,\n 100% {\n opacity: 0.42;\n transform: translateY(0);\n }\n\n 50% {\n opacity: 0.54;\n transform: translateY(1px);\n }\n}\n","createdAt",["D",1784824834006],"branchVersion","branchId","99e51303-2781-4382-a14b-ab1a6b3a7a48","id","64111127-deec-4790-8d11-4bcf5914f7cf","cage-corner-watch",["D",1781038895267],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","CRT Cage corner tracker","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","666756de-6446-11f1-8b09-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":14,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":208,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":209,"_80":210,"_82":211,"_84":25},"tree",[183,184,185,186,187,188],"files",[183,184,185,186,187,188],"counts",{"_173":62,"_174":135,"_175":62,"_176":177,"_178":179},"contents",[125,126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":166,"_32":167,"_30":168,"_132":-5,"_40":41,"_39":169,"_133":58,"_37":170,"_13":62,"_33":20,"_34":171,"_24":25,"_136":-5,"_27":172},{"_42":158,"_32":159,"_30":160,"_132":-5,"_40":41,"_39":161,"_133":58,"_37":162,"_13":135,"_33":163,"_34":164,"_24":25,"_136":-5,"_27":165},{"_42":151,"_32":152,"_30":153,"_132":-5,"_40":41,"_39":154,"_133":58,"_37":155,"_13":62,"_33":20,"_34":156,"_24":25,"_136":-5,"_27":157},{"_42":144,"_32":145,"_30":146,"_132":-5,"_40":41,"_39":147,"_133":58,"_37":148,"_13":135,"_33":20,"_34":149,"_24":25,"_136":-5,"_27":150},{"_42":138,"_32":139,"_30":56,"_132":-5,"_40":41,"_39":135,"_133":58,"_37":140,"_13":62,"_33":141,"_34":142,"_24":25,"_136":44,"_27":143},{"_42":131,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_133":58,"_37":134,"_13":135,"_33":20,"_34":36,"_24":25,"_136":-5,"_27":137},"5d3c4f7a-8609-4d6b-b532-c471a7ddfaed","parentId","latest",["D",1784824834006],1,"label",[28],"b0275ed5-36c9-4fce-a2a0-204ce3ee8f5c","main.ts",["D",1781038895331],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);\n",[139],"7009c6f8-1c4e-4d47-8616-f3101d870347","index.html","6e2b7058-6446-11f1-a7b9-1607ee4eb77e",7,["D",1784824745401],"\n\n \n \n \n Cage Corner Watch\n \n \n \n

\n \n Show stats\n \n\n \n\n

CAGECAST 2003

\n \n

\n\n \n \n\n",[145],"0810f0b2-cc51-4cea-bd33-28cf3036f879","cage-face.svg","a8cd66da-6446-11f1-8c5e-1607ee4eb77e",5,["D",1781039006758],"\n",[152],"b1b50b82-4481-43c9-b8f4-681f4c722586","app.js","9a1244ee-6446-11f1-a3f1-1607ee4eb77e",8,["D",1784824788314],"script","const stage = document.getElementById(\"stage\");\nconst face = document.getElementById(\"cageFace\");\nconst confettiCanvas = document.getElementById(\"confetti\");\nconst confettiContext = confettiCanvas.getContext(\"2d\");\nconst stats = document.getElementById(\"stats\");\nconst statsToggle = document.getElementById(\"statsToggle\");\n\nconst nearestDistanceEl = document.getElementById(\"nearestDistance\");\nconst bestDistanceEl = document.getElementById(\"bestDistance\");\nconst cornerHitsEl = document.getElementById(\"cornerHits\");\nconst nearestCornerEl = document.getElementById(\"nearestCorner\");\n\nstatsToggle.addEventListener(\"click\", () => {\n const shouldShow = stats.hidden;\n stats.hidden = !shouldShow;\n statsToggle.setAttribute(\"aria-expanded\", String(shouldShow));\n statsToggle.textContent = shouldShow ? \"Hide stats\" : \"Show stats\";\n});\n\n// All animation state lives here so resize handling, bounce physics, stats, and\n// confetti can stay deterministic inside a single requestAnimationFrame loop.\nconst state = {\n x: 37,\n y: 83,\n vx: 1.4,\n vy: 0.95,\n width: 140,\n height: 140,\n bestDistance: Infinity,\n cornerHits: 0,\n confetti: [],\n};\n\n// Corner coordinates are normalized. x/y values of 1 map to maxX/maxY after\n// accounting for the current rendered size of the face.\nconst corners = [\n { name: \"top left\", x: 0, y: 0 },\n { name: \"top right\", x: 1, y: 0 },\n { name: \"bottom left\", x: 0, y: 1 },\n { name: \"bottom right\", x: 1, y: 1 },\n];\n\nfunction resize() {\n const rect = face.getBoundingClientRect();\n state.width = rect.width || state.width;\n state.height = rect.height || state.height;\n state.x = Math.min(state.x, maxX());\n state.y = Math.min(state.y, maxY());\n\n const pixelRatio = window.devicePixelRatio || 1;\n confettiCanvas.width = Math.floor(stage.clientWidth * pixelRatio);\n confettiCanvas.height = Math.floor(stage.clientHeight * pixelRatio);\n confettiCanvas.style.width = `${stage.clientWidth}px`;\n confettiCanvas.style.height = `${stage.clientHeight}px`;\n confettiContext.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n}\n\nfunction maxX() {\n // The face's transform uses the top-left corner, so the furthest valid x\n // position is the viewport width minus the face width.\n return Math.max(0, stage.clientWidth - state.width);\n}\n\nfunction maxY() {\n return Math.max(0, stage.clientHeight - state.height);\n}\n\nfunction stepBounce() {\n let hitX = false;\n let hitY = false;\n\n state.x += state.vx;\n state.y += state.vy;\n\n if (state.x <= 0 || state.x >= maxX()) {\n state.x = Math.max(0, Math.min(maxX(), state.x));\n state.vx *= -1;\n hitX = true;\n }\n\n if (state.y <= 0 || state.y >= maxY()) {\n state.y = Math.max(0, Math.min(maxY(), state.y));\n state.vy *= -1;\n hitY = true;\n }\n\n if (hitX && hitY && isExactlyCorner()) {\n state.cornerHits += 1;\n cornerHitsEl.textContent = String(state.cornerHits);\n rainConfetti();\n }\n}\n\nfunction isExactlyCorner() {\n // Floating point velocity can leave tiny fractions after clamping, so compare\n // rounded pixel positions when deciding whether to celebrate a perfect hit.\n const x = Math.round(state.x);\n const y = Math.round(state.y);\n return (x === 0 || x === Math.round(maxX())) && (y === 0 || y === Math.round(maxY()));\n}\n\nfunction distanceToNearestCorner() {\n const bounds = { maxX: maxX(), maxY: maxY() };\n let nearest = { name: \"\", distance: Infinity };\n\n for (const corner of corners) {\n const targetX = corner.x * bounds.maxX;\n const targetY = corner.y * bounds.maxY;\n // Euclidean distance gives a single \"how close was it?\" value for near\n // misses where both axes are offset from the corner.\n const distance = Math.hypot(state.x - targetX, state.y - targetY);\n\n if (distance < nearest.distance) {\n nearest = { name: corner.name, distance };\n }\n }\n\n return nearest;\n}\n\nfunction updateStats() {\n const nearest = distanceToNearestCorner();\n state.bestDistance = Math.min(state.bestDistance, nearest.distance);\n\n nearestDistanceEl.textContent = `${nearest.distance.toFixed(2)} px`;\n bestDistanceEl.textContent = `${state.bestDistance.toFixed(2)} px`;\n nearestCornerEl.textContent = nearest.name;\n}\n\nfunction rainConfetti() {\n const colors = [\"#ffd166\", \"#ef476f\", \"#06d6a0\", \"#118ab2\", \"#f8f7ff\"];\n\n for (let i = 0; i < 170; i += 1) {\n state.confetti.push({\n x: Math.random() * stage.clientWidth,\n y: -20 - Math.random() * stage.clientHeight * 0.4,\n vx: -2 + Math.random() * 4,\n vy: 3 + Math.random() * 5,\n size: 5 + Math.random() * 8,\n spin: Math.random() * Math.PI,\n rotationSpeed: -0.25 + Math.random() * 0.5,\n color: colors[Math.floor(Math.random() * colors.length)],\n life: 220 + Math.random() * 90,\n });\n }\n}\n\nfunction drawConfetti() {\n confettiContext.clearRect(0, 0, stage.clientWidth, stage.clientHeight);\n\n // Updating and filtering in one pass keeps old particles from accumulating\n // forever on long-running screensaver sessions.\n state.confetti = state.confetti.filter((piece) => {\n piece.x += piece.vx;\n piece.y += piece.vy;\n piece.vy += 0.035;\n piece.spin += piece.rotationSpeed;\n piece.life -= 1;\n\n confettiContext.save();\n confettiContext.translate(piece.x, piece.y);\n confettiContext.rotate(piece.spin);\n confettiContext.fillStyle = piece.color;\n confettiContext.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * 0.55);\n confettiContext.restore();\n\n return piece.life > 0 && piece.y < stage.clientHeight + 40;\n });\n}\n\nfunction render() {\n stepBounce();\n face.style.transform = `translate3d(${state.x}px, ${state.y}px, 0)`;\n updateStats();\n drawConfetti();\n requestAnimationFrame(render);\n}\n\nface.addEventListener(\"load\", () => {\n resize();\n render();\n});\n\nwindow.addEventListener(\"resize\", resize);\n\nif (face.complete) {\n resize();\n render();\n}\n",[159],"27a1a12c-3383-4bf8-ac7a-911891b47bf0","README.md","b08dfe16-6446-11f1-aa01-1607ee4eb77e",6,["D",1781039019765],"# Cage Corner Watch\n\nA static, single-page DVD-screensaver-style toy: Nicolas Cage's face bounces around the viewport while the page measures how close it gets to landing exactly in a corner.\n\n## Run\n\nThe Val Town deployment is served by `main.ts` using `staticHTTPServer()` from `https://esm.town/v/std/utils/index.ts`.\n\nLocally, open `index.html` directly, or serve the directory with:\n\n```sh\nnpx live-server\n```\n\nThe app has no build step and no runtime dependencies.\n\n## How It Works\n\n- `main.ts` is the Val Town HTTP endpoint.\n- `index.html` defines the stat display, the bouncing face image, and the confetti canvas.\n- `styles.css` creates the 2000s CRT treatment with scanlines, phosphor glow, vignette, and RGB ghosting.\n- `app.js` owns the animation loop, corner-distance math, and confetti particle simulation.\n- `cage-face.svg` is the local face asset, so the page works offline.\n\nThe distance readout is based on the top-left coordinate of the face's bounding box. For each animation frame, the app compares that point to the four valid corner positions: `(0, 0)`, `(maxX, 0)`, `(0, maxY)`, and `(maxX, maxY)`. The nearest Euclidean distance is shown in pixels and the best value is retained.\n\nConfetti triggers when a bounce hits both a horizontal and vertical wall on the same frame and the clamped position is exactly one of those valid corner coordinates.\n",[167],"pulls","branches","forks","envVars",{"_180":62,"_182":62},"connections",{"_180":62,"_181":62},"count","unfilledCount","emptyCount",{"_42":166,"_32":167,"_30":168,"_132":-5,"_40":41,"_39":169,"_133":58,"_37":205,"_13":62,"_33":20,"_34":171,"_24":25,"_136":-5,"_190":206,"_27":207},{"_42":158,"_32":159,"_30":160,"_132":-5,"_40":41,"_39":161,"_133":58,"_37":202,"_13":135,"_33":163,"_34":164,"_24":25,"_136":-5,"_190":203,"_27":204},{"_42":151,"_32":152,"_30":153,"_132":-5,"_40":41,"_39":154,"_133":58,"_37":199,"_13":62,"_33":20,"_34":156,"_24":25,"_136":-5,"_190":200,"_27":201},{"_42":144,"_32":145,"_30":146,"_132":-5,"_40":41,"_39":147,"_133":58,"_37":196,"_13":135,"_33":20,"_34":149,"_24":25,"_136":-5,"_190":197,"_27":198},{"_42":138,"_32":139,"_30":56,"_132":-5,"_40":41,"_39":135,"_133":58,"_37":193,"_13":62,"_33":141,"_34":142,"_24":25,"_136":44,"_190":194,"_27":195},{"_42":131,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_133":58,"_37":189,"_13":135,"_33":20,"_34":36,"_24":25,"_136":-5,"_190":191,"_27":192},["D",1784824834006],"children",[],[28],["D",1781038895331],[],[139],["D",1784824745401],[],[145],["D",1781039006758],[],[152],["D",1784824788314],[],[159],["D",1781039019765],[],[167],["D",1781038895267],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":14,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_78":-5,"_122":245,"_246":247,"_248":249,"_250":25,"_251":25,"_252":25,"_253":58,"_254":-5,"_255":-7,"_256":-7,"_257":62,"_258":25,"_259":25,"_260":-5,"_261":25,"_262":25,"_263":25,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":85,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v9