Lucky Name

\n LUCKY NAME\n \n

\n\n

\n\n \n\n \n\n

\n \n \n\n",[67],"0499e4c9-a275-4fd9-a4db-2eaf151fc5df","app.js","f05960fc-80e4-11f1-9f3a-1607ee4eb77e",4,["D",1784185619837],"script","// ─────────────────────────────────────────────────────────────\n// CONFIGURE YOUR NAMES HERE — add, remove, or reorder freely.\n// ─────────────────────────────────────────────────────────────\nconst NAMES = [\n \"Andi\",\n \"Daniel\",\n \"Christian\",\n \"Philipp Brumm\",\n \"Karo\",\n \"Katrin\",\n \"Kristina\",\n \"Marisa\",\n \"Maya\",\n \"Robert\",\n \"Sanja\",\n \"Philipp Gerbig\",\n \"Maurice\"\n];\n\nconst ROW_HEIGHT = 64;\nconst STEP = 360 / NAMES.length;\nconst RADIUS = Math.max(150, ROW_HEIGHT / (2 * Math.sin(Math.PI / NAMES.length)));\nconst reels = [...document.querySelectorAll(\".reel\")];\nconst machine = document.querySelector(\".machine\");\nconst spinButton = document.querySelector(\"#spinButton\");\nconst nameMenuButton = document.querySelector(\"#nameMenuButton\");\nconst nameSheet = document.querySelector(\"#nameSheet\");\nconst nameOptions = document.querySelector(\"#nameOptions\");\nconst sheetClose = document.querySelector(\"#sheetClose\");\nconst sheetDone = document.querySelector(\"#sheetDone\");\nconst activeCount = document.querySelector(\"#activeCount\");\nconst totalCount = document.querySelector(\"#totalCount\");\nconst sheetCount = document.querySelector(\"#sheetCount\");\nconst wheelStates = [];\nconst activeNames = new Set(NAMES);\nlet winnerIndex = -1;\nlet spinning = false;\n\nconst openingIndices = NAMES.map((_, index) => index);\nfor (let index = openingIndices.length - 1; index > 0; index -= 1) {\n const randomIndex = Math.floor(Math.random() * (index + 1));\n [openingIndices[index], openingIndices[randomIndex]] = [openingIndices[randomIndex], openingIndices[index]];\n}\n\nconst modulo = (value, length) => ((value % length) + length) % length;\n\nfunction selectedIndex(angle) {\n return modulo(Math.round(-angle / STEP), NAMES.length);\n}\n\nfunction render(state) {\n state.element.style.transform = `rotateX(${state.angle}deg)`;\n const chosen = selectedIndex(state.angle);\n state.items.forEach((item, index) => {\n item.setAttribute(\"aria-selected\", String(index === chosen));\n });\n state.element.setAttribute(\"aria-valuetext\", NAMES[chosen]);\n}\n\nfunction buildWheels() {\n reels.forEach((reel, reelIndex) => {\n const items = NAMES.map((name, index) => {\n const item = document.createElement(\"div\");\n item.className = \"reel-item\";\n item.textContent = name;\n item.setAttribute(\"role\", \"option\");\n item.setAttribute(\"aria-selected\", \"false\");\n item.style.transform = `rotateX(${index * STEP}deg) translateZ(${RADIUS}px)`;\n reel.appendChild(item);\n return item;\n });\n\n const state = {\n element: reel,\n items,\n angle: -openingIndices[reelIndex] * STEP\n };\n wheelStates.push(state);\n render(state);\n });\n}\n\nfunction buildNameOptions() {\n NAMES.forEach((name, index) => {\n const label = document.createElement(\"label\");\n label.className = \"name-option\";\n label.append(document.createTextNode(name));\n\n const checkbox = document.createElement(\"input\");\n checkbox.type = \"checkbox\";\n checkbox.checked = true;\n checkbox.value = name;\n checkbox.addEventListener(\"change\", () => {\n if (checkbox.checked) activeNames.add(name);\n else activeNames.delete(name);\n\n if (activeNames.size === 0) {\n checkbox.checked = true;\n activeNames.add(name);\n }\n updateNameCounts();\n });\n\n label.appendChild(checkbox);\n nameOptions.appendChild(label);\n });\n}\n\nfunction updateNameCounts() {\n activeCount.textContent = activeNames.size;\n totalCount.textContent = NAMES.length;\n sheetCount.textContent = `${activeNames.size} selected`;\n}\n\nfunction openNameSheet() {\n if (spinning) return;\n nameSheet.hidden = false;\n nameMenuButton.setAttribute(\"aria-expanded\", \"true\");\n sheetClose.focus();\n}\n\nfunction closeNameSheet() {\n nameSheet.hidden = true;\n nameMenuButton.setAttribute(\"aria-expanded\", \"false\");\n nameMenuButton.focus();\n}\n\nfunction spinWheel(state, reelIndex, winner, reduceMotion) {\n state.element.classList.add(\"is-animating\");\n const alignedAngle = -winner * STEP;\n const turnsBelowCurrent = Math.floor((state.angle - alignedAngle) / 360);\n state.angle = alignedAngle + (turnsBelowCurrent - (reduceMotion ? 0 : 4 + reelIndex)) * 360;\n state.element.style.setProperty(\"--spin-duration\", `${reduceMotion ? 1 : 1.8 + reelIndex * 0.42}s`);\n requestAnimationFrame(() => render(state));\n\n return new Promise(resolve => {\n window.setTimeout(() => {\n state.element.classList.remove(\"is-animating\");\n resolve();\n }, reduceMotion ? 20 : 1950 + reelIndex * 420);\n });\n}\n\nasync function spin() {\n if (spinning || activeNames.size === 0) return;\n spinning = true;\n spinButton.disabled = true;\n nameMenuButton.disabled = true;\n machine.classList.remove(\"is-settled\");\n\n const eligibleIndices = NAMES\n .map((name, index) => activeNames.has(name) ? index : -1)\n .filter(index => index >= 0);\n let nextWinner;\n do nextWinner = eligibleIndices[Math.floor(Math.random() * eligibleIndices.length)];\n while (nextWinner === winnerIndex && eligibleIndices.length > 1);\n winnerIndex = nextWinner;\n\n const reduceMotion = matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n await Promise.all(wheelStates.map((state, index) => spinWheel(state, index, winnerIndex, reduceMotion)));\n if (!spinning) return;\n\n machine.classList.add(\"is-settled\");\n spinButton.disabled = false;\n nameMenuButton.disabled = false;\n spinButton.querySelector(\"span:nth-child(2)\").textContent = \"SPIN AGAIN\";\n spinning = false;\n}\n\nspinButton.addEventListener(\"click\", spin);\nnameMenuButton.addEventListener(\"click\", openNameSheet);\nsheetClose.addEventListener(\"click\", closeNameSheet);\nsheetDone.addEventListener(\"click\", closeNameSheet);\nnameSheet.addEventListener(\"click\", event => {\n if (event.target === nameSheet) closeNameSheet();\n});\ndocument.addEventListener(\"keydown\", event => {\n if (event.key === \"Escape\" && !nameSheet.hidden) closeNameSheet();\n});\nbuildWheels();\nbuildNameOptions();\nupdateNameCounts();\n",[74],{"_36":73,"_13":74,"_39":75,"_41":-5,"_42":43,"_44":76,"_46":47,"_48":95,"_17":50,"_51":78,"_52":79,"_54":55,"_56":-5,"_86":96,"_18":97},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":92,"_17":50,"_51":24,"_52":71,"_54":55,"_56":-5,"_86":93,"_18":94},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":89,"_17":50,"_51":63,"_52":64,"_54":55,"_56":-5,"_86":90,"_18":91},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_86":87,"_18":88},["D",1784185616131],"children",[],[38],["D",1784185596337],[],[59],["D",1784185612892],[],[67],["D",1784185619837],[],[74],"793b4a35-959e-45bd-b311-d9e0083c0097",["D",1784185596280],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A three-reel randomized name picker","imageUrl","userId","35a0979d-a611-46c4-902a-11dbcdb2f551","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","c301b66c-8ae3-41fc-9a3d-f49ec90d432a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_151":147},"org",{"_11":12,"_145":-5,"_146":147,"_108":109,"_148":149,"_150":55},"branch",{"_17":76,"_13":16,"_36":43,"_137":98,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":14,"_144":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWkQzRHNka3NaY2dKQ1FjcDJxWmJvUFRNNngifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":98,"_13":14,"_48":199,"_100":-5,"_101":55,"_102":103,"_104":103,"_105":106,"_107":-5,"_108":109,"_110":60,"_111":47,"_112":-5,"_113":-5,"_114":50,"_115":116,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_130":200,"_132":201,"_134":202,"_136":55},[187,188,189,190],"files",[187,188,189,190],"counts",{"_178":50,"_179":61,"_180":50,"_31":181,"_182":183},[170,171,172,173],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":73,"_13":74,"_39":75,"_41":-5,"_42":43,"_44":76,"_46":47,"_48":77,"_17":50,"_51":78,"_52":79,"_54":55,"_56":-5,"_18":177},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":50,"_51":24,"_52":71,"_54":55,"_56":-5,"_18":176},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":50,"_51":63,"_52":64,"_54":55,"_56":-5,"_18":175},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":174},[38],[59],[67],[74],"pulls","branches","forks",{"_184":50,"_186":50},"connections",{"_184":50,"_185":50},"count","unfilledCount","emptyCount",{"_36":73,"_13":74,"_39":75,"_41":-5,"_42":43,"_44":76,"_46":47,"_48":95,"_17":50,"_51":78,"_52":79,"_54":55,"_56":-5,"_86":197,"_18":198},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":92,"_17":50,"_51":24,"_52":71,"_54":55,"_56":-5,"_86":195,"_18":196},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":89,"_17":50,"_51":63,"_52":64,"_54":55,"_56":-5,"_86":193,"_18":194},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_86":191,"_18":192},[],[38],[],[59],[],[67],[],[74],["D",1784185596280],{"_11":12,"_151":147},{"_11":12,"_145":-5,"_146":147,"_108":109,"_148":149,"_150":55},{"_17":76,"_13":16,"_36":43,"_137":98,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":14,"_144":12},"ctx",{"_130":-5,"_167":236,"_237":238,"_239":240,"_241":55,"_242":55,"_243":55,"_244":47,"_245":-5,"_246":-7,"_247":-7,"_248":50,"_249":55,"_250":55,"_251":-5,"_252":55,"_253":55,"_254":55,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":16,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"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"]

Code