Cage Corner Watch

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_187":188,"_189":190},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_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",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","app.js","latestPath","fileId","9a1244ee-6446-11f1-a3f1-1607ee4eb77e","name","fileType","script","content","const stage = document.getElementById(\"stage\");\nconst face = document.getElementById(\"cageFace\");\nconst confettiCanvas = document.getElementById(\"confetti\");\nconst confettiContext = confettiCanvas.getContext(\"2d\");\n\nconst nearestDistanceEl = document.getElementById(\"nearestDistance\");\nconst bestDistanceEl = document.getElementById(\"bestDistance\");\nconst cornerHitsEl = document.getElementById(\"cornerHits\");\nconst nearestCornerEl = document.getElementById(\"nearestCorner\");\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","createdAt",["D",1781038982042],"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":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",9,"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",{"_41":42,"_31":43,"_36":183,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":184,"_79":185,"_81":186,"_83":24},"tree",[166,167,168,169],"files",[166,167,168,169],"counts",{"_156":61,"_157":141,"_158":61,"_159":160,"_161":162},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":153,"_31":27,"_29":30,"_132":-5,"_39":40,"_38":14,"_134":24,"_36":154,"_13":61,"_32":33,"_34":35,"_23":24,"_137":-5,"_26":155},{"_41":146,"_31":147,"_29":148,"_132":-5,"_39":40,"_38":149,"_134":24,"_36":150,"_13":61,"_32":20,"_34":151,"_23":24,"_137":-5,"_26":152},{"_41":139,"_31":140,"_29":55,"_132":-5,"_39":40,"_38":141,"_134":57,"_36":142,"_13":61,"_32":143,"_34":144,"_23":24,"_137":43,"_26":145},{"_41":129,"_31":130,"_29":131,"_132":-5,"_39":40,"_38":133,"_134":24,"_36":135,"_13":61,"_32":20,"_34":136,"_23":24,"_137":-5,"_26":138},"991accee-0f8e-44bf-a899-9f403b1e091f","styles.css","84cd1262-6446-11f1-b160-1607ee4eb77e","parentId",3,"latest",["D",1781038946361],":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","label",[130],"b0275ed5-36c9-4fce-a2a0-204ce3ee8f5c","main.ts",1,["D",1781038895331],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);\n",[140],"f8593c77-b165-4c61-a785-2881d12f562c","index.html","6e2b7058-6446-11f1-a7b9-1607ee4eb77e",2,["D",1781038908393],"\n\n \n \n \n Cage Corner Watch\n \n \n \n

\n Nearest corner\n 0.00 px\n

\n Closest pass\n 0.00 px\n

\n Corner hits\n 0\n

\n Target\n top left\n

\n\n

CAGECAST 2003

\n \n

\n\n \n \n \n\n",[147],"c95c3130-8a43-4b30-a807-221c17c640ab",["D",1781038982042],[27],"pulls","branches","forks","envVars",{"_163":61,"_165":61},"connections",{"_163":61,"_164":61},"count","unfilledCount","emptyCount",{"_41":153,"_31":27,"_29":30,"_132":-5,"_39":40,"_38":14,"_134":24,"_36":180,"_13":61,"_32":33,"_34":35,"_23":24,"_137":-5,"_171":181,"_26":182},{"_41":146,"_31":147,"_29":148,"_132":-5,"_39":40,"_38":149,"_134":24,"_36":177,"_13":61,"_32":20,"_34":151,"_23":24,"_137":-5,"_171":178,"_26":179},{"_41":139,"_31":140,"_29":55,"_132":-5,"_39":40,"_38":141,"_134":57,"_36":174,"_13":61,"_32":143,"_34":144,"_23":24,"_137":43,"_171":175,"_26":176},{"_41":129,"_31":130,"_29":131,"_132":-5,"_39":40,"_38":133,"_134":24,"_36":170,"_13":61,"_32":20,"_34":136,"_23":24,"_137":-5,"_171":172,"_26":173},["D",1781038946361],"children",[],[130],["D",1781038895331],[],[140],["D",1781038908393],[],[147],["D",1781038982042],[],[27],["D",1781038895267],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":220,"_221":222,"_223":224,"_225":24,"_226":24,"_227":24,"_228":57,"_229":-5,"_230":-7,"_231":-7,"_232":61,"_233":24,"_234":24,"_235":-5,"_236":24,"_237":24,"_238":24,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":85,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"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 · v4