[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_369":370,"_371":372},"routes/_app.x.$handle.$name",{"_101":100,"_32":45,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":59,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",101,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","019bcd4f-053b-76eb-a453-672ffb6e4140","name","style.css","fileType","content","/* Color Palette - Dark Theme */\n:root {\n --bg-primary: #1a1a2e;\n --bg-secondary: #16213e;\n --bg-tertiary: #0f3460;\n --bg-card: #252545;\n --bg-input: #2a2a4a;\n \n --text-primary: #e8e8f0;\n --text-secondary: #a0a0b8;\n --text-muted: #6b6b85;\n \n --accent-primary: #6366f1;\n --accent-hover: #4f46e5;\n \n /* Color-blind friendly: teal for valid, orange for invalid */\n --color-valid: #2dd4bf;\n --color-valid-bg: rgba(45, 212, 191, 0.15);\n --color-invalid: #f97316;\n --color-invalid-bg: rgba(249, 115, 22, 0.15);\n \n --color-highlight: #fbbf24;\n --color-highlight-bg: rgba(251, 191, 36, 0.2);\n \n --border-color: #3a3a5a;\n --shadow-color: rgba(0, 0, 0, 0.4);\n \n --keyboard-bg: #252545;\n --key-bg: #3a3a5a;\n --key-active: #4a4a6a;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body {\n height: 100%;\n}\n\nbody {\n font-family: -apple-system, Arial, sans-serif;\n color: var(--text-primary);\n background: var(--bg-primary);\n}\n\nmain {\n height: 100%;\n}\n\n#root {\n height: 100%;\n}\n\n/* App Wrapper - centers the game on desktop */\n.app-wrapper {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n background: var(--bg-primary);\n}\n\n/* Game Container - portrait mode phone shape */\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 430px;\n height: 100%;\n max-height: 932px;\n background: var(--bg-secondary);\n overflow: hidden;\n}\n\n/* Header at top */\n.game-header {\n width: 100%;\n text-align: center;\n padding: 12px 20px;\n font-size: 0.85rem;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n background: var(--bg-tertiary);\n flex-shrink: 0;\n}\n\n/* Content area - everything except keyboard */\n.content-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n width: 100%;\n overflow-y: auto;\n gap: 10px;\n}\n\n/* In-game content area - fixed layout, no scrolling */\n.game-container.in-game .content-area {\n justify-content: space-between;\n padding-top: 15px;\n padding-bottom: 10px;\n overflow: hidden;\n}\n\n.game-container h1 {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-primary);\n}\n\n.game-container p {\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-secondary);\n}\n\n/* Start/Play Again Button */\n.start-button {\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 18px 40px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.start-button:hover {\n background-color: var(--accent-hover);\n}\n\n/* Prompt */\n.prompt {\n text-align: center;\n padding: 10px 20px;\n flex-shrink: 0;\n min-height: 90px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.prompt-title {\n font-size: 1.1rem;\n font-weight: 500;\n line-height: 1.4;\n color: var(--text-secondary);\n margin-bottom: 4px;\n}\n\n.prompt-constraint {\n font-size: 1.6rem;\n font-weight: 600;\n line-height: 1.3;\n color: var(--text-primary);\n}\n\n/* Responsive text sizing for long prompts (>70 chars) */\n.prompt-constraint.prompt-long {\n font-size: 1.3rem;\n}\n\n/* Current Guess */\n.current-guess-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n padding: 10px 20px;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 80px;\n max-height: 120px;\n}\n\n.length-counter {\n position: absolute;\n top: calc(50% - 1.5rem - 12px);\n right: 8px;\n background: var(--accent-primary);\n color: white;\n border-radius: 16px;\n padding: 4px 10px;\n font-size: 1rem;\n font-weight: bold;\n min-width: 32px;\n text-align: center;\n z-index: 10;\n}\n\n.current-guess {\n font-family: 'Courier New', Courier, monospace;\n font-size: 2rem;\n min-height: 3rem;\n max-height: 3rem;\n padding: 12px 15px;\n background: var(--bg-input);\n border: 2px solid var(--border-color);\n border-radius: 8px;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n width: 100%;\n color: var(--text-primary);\n}\n\n.letter, .letter-placeholder {\n position: relative;\n cursor: text;\n flex-shrink: 0;\n}\n\n.cursor-before::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--text-primary);\n animation: blink 1s step-end infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/* Action Buttons */\n.action-buttons {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 500px;\n padding: 0 20px 10px 20px;\n flex-shrink: 0;\n}\n\n.trash-button {\n flex: 1;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n font-size: 1.6rem;\n cursor: pointer;\n color: var(--text-secondary);\n}\n\n.trash-button:hover {\n background: var(--key-active);\n}\n\n.submit-button {\n flex: 4;\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 16px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n}\n\n.submit-button:hover:not(.disabled) {\n background-color: var(--accent-hover);\n}\n\n.submit-button.disabled {\n background-color: var(--bg-card);\n color: var(--text-muted);\n cursor: not-allowed;\n}\n\n/* Keyboard */\n.keyboard {\n width: 100%;\n background: var(--keyboard-bg);\n padding: 10px 6px;\n padding-bottom: max(10px, env(safe-area-inset-bottom));\n flex-shrink: 0;\n}\n\n.keyboard-row {\n display: flex;\n justify-content: center;\n gap: 5px;\n margin-bottom: 7px;\n}\n\n.keyboard-row:last-child {\n margin-bottom: 0;\n}\n\n.key {\n background: var(--key-bg);\n border: none;\n border-radius: 6px;\n padding: 16px 11px;\n min-width: 34px;\n font-size: 1.2rem;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 1px 2px var(--shadow-color);\n flex: 1;\n max-width: 42px;\n color: var(--text-primary);\n}\n\n.key:active {\n background: var(--key-active);\n transform: translateY(1px);\n}\n\n.key-special {\n min-width: 46px;\n max-width: 52px;\n background: var(--bg-tertiary);\n color: var(--text-secondary);\n}\n\n.key-special:active {\n background: var(--key-active);\n}\n\n/* Mobile: full screen, no borders */\n@media (max-width: 480px) {\n .app-wrapper {\n background: var(--bg-secondary);\n }\n \n .game-container {\n max-height: none;\n border-radius: 0;\n }\n\n .prompt-title {\n font-size: 1rem;\n }\n \n .prompt-constraint {\n font-size: 1.4rem;\n }\n \n .prompt-constraint.prompt-long {\n font-size: 1.15rem;\n }\n \n .key {\n padding: 14px 7px;\n min-width: 30px;\n font-size: 1.05rem;\n }\n \n .key-special {\n min-width: 40px;\n }\n}\n\n/* Desktop: add shadow/border to make it look like a phone */\n@media (min-width: 481px) {\n .app-wrapper {\n padding: 20px;\n }\n\n .game-container {\n border-radius: 24px;\n box-shadow: 0 8px 32px var(--shadow-color);\n border: 8px solid #111;\n }\n}\n\n/* Taller screens: limit height more aggressively for phone look */\n@media (min-height: 800px) and (min-width: 481px) {\n .game-container {\n height: min(100%, 800px);\n }\n}\n\n/* Examples */\n.examples {\n text-align: center;\n font-size: 1.1rem;\n color: var(--text-secondary);\n padding: 5px 20px;\n flex-shrink: 0;\n}\n\n.examples-label {\n font-style: italic;\n margin-right: 6px;\n}\n\n.example-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n}\n\n/* Highlighted letters */\n.letter-highlighted {\n color: var(--color-highlight);\n font-weight: bold;\n}\n\n/* Keyboard highlighted keys */\n.key-highlighted {\n background: var(--color-highlight-bg);\n border: 2px solid var(--color-highlight);\n color: var(--color-highlight);\n}\n\n.key-highlighted:active {\n background: rgba(251, 191, 36, 0.35);\n}\n\n/* Keyboard unselectable keys */\n.key-unselectable {\n background: var(--bg-primary);\n color: var(--text-muted);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.key-unselectable:active {\n background: var(--bg-primary);\n transform: none;\n}\n\n\n/* Post-game content area */\n.content-area.post-game {\n justify-content: flex-start;\n padding-top: 30px;\n gap: 20px;\n overflow-y: auto;\n}\n\n/* Results Table */\n.results-table-container {\n width: 100%;\n max-width: 350px;\n padding: 0 20px;\n}\n\n.results-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 1.1rem;\n}\n\n.results-table th,\n.results-table td {\n padding: 12px 10px;\n text-align: left;\n border-bottom: 1px solid var(--border-color);\n}\n\n.results-table th {\n font-weight: 600;\n color: var(--text-secondary);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.results-table .result-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.results-table .result-letters {\n text-align: center;\n font-weight: bold;\n min-width: 50px;\n}\n\n/* Valid rows - teal (colorblind-friendly) */\n.results-table .result-valid {\n background-color: var(--color-valid-bg);\n}\n\n.results-table .result-valid .result-letters {\n color: var(--color-valid);\n}\n\n/* Invalid rows - orange (colorblind-friendly) */\n.results-table .result-invalid {\n background-color: var(--color-invalid-bg);\n}\n\n.results-table .result-invalid .result-word {\n text-decoration: line-through;\n color: var(--text-muted);\n}\n\n.results-table .result-invalid .result-letters {\n color: var(--color-invalid);\n}\n\n/* Total row */\n.results-table .result-total {\n background-color: var(--bg-card);\n font-weight: bold;\n}\n\n.results-table .result-total td {\n border-bottom: none;\n border-top: 2px solid var(--text-secondary);\n padding-top: 14px;\n}\n\n.results-table .result-total .result-letters {\n font-size: 1.3rem;\n color: var(--text-primary);\n}\n\n\n/* Round Indicator */\n.round-indicator {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px;\n flex-shrink: 0;\n}\n\n.round-text {\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-secondary);\n white-space: nowrap;\n}\n\n.round-subway-map {\n flex-shrink: 0;\n}\n\n@media (max-width: 480px) {\n .round-indicator {\n gap: 10px;\n padding: 6px 12px;\n }\n \n .round-text {\n font-size: 0.9rem;\n }\n}\n","/* Color Palette - Dark Theme */\n:root {\n --bg-primary: #1a1a2e;\n --bg-secondary: #16213e;\n --bg-tertiary: #0f3460;\n --bg-card: #252545;\n --bg-input: #2a2a4a;\n \n --text-primary: #e8e8f0;\n --text-secondary: #a0a0b8;\n --text-muted: #6b6b85;\n \n --accent-primary: #6366f1;\n --accent-hover: #4f46e5;\n \n /* Color-blind friendly: teal for valid, orange for invalid */\n --color-valid: #2dd4bf;\n --color-valid-bg: rgba(45, 212, 191, 0.15);\n --color-invalid: #f97316;\n --color-invalid-bg: rgba(249, 115, 22, 0.15);\n \n --color-highlight: #fbbf24;\n --color-highlight-bg: rgba(251, 191, 36, 0.2);\n \n --border-color: #3a3a5a;\n --shadow-color: rgba(0, 0, 0, 0.4);\n \n --keyboard-bg: #252545;\n --key-bg: #3a3a5a;\n --key-active: #4a4a6a;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body {\n height: 100%;\n}\n\nbody {\n font-family: -apple-system, Arial, sans-serif;\n color: var(--text-primary);\n background: var(--bg-primary);\n}\n\nmain {\n height: 100%;\n}\n\n#root {\n height: 100%;\n}\n\n/* App Wrapper - centers the game on desktop */\n.app-wrapper {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n background: var(--bg-primary);\n}\n\n/* Game Container - portrait mode phone shape */\n.game-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 430px;\n height: 100%;\n max-height: 932px;\n background: var(--bg-secondary);\n overflow: hidden;\n}\n\n/* Header at top */\n.game-header {\n width: 100%;\n text-align: center;\n padding: 12px 20px;\n font-size: 0.85rem;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n background: var(--bg-tertiary);\n flex-shrink: 0;\n}\n\n/* Content area - everything except keyboard */\n.content-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px;\n width: 100%;\n overflow-y: auto;\n gap: 10px;\n}\n\n/* In-game content area - fixed layout, no scrolling */\n.game-container.in-game .content-area {\n justify-content: space-between;\n padding-top: 15px;\n padding-bottom: 10px;\n overflow: hidden;\n}\n\n.game-container h1 {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-primary);\n}\n\n.game-container p {\n text-align: center;\n margin-bottom: 10px;\n color: var(--text-secondary);\n}\n\n/* Start/Play Again Button */\n.start-button {\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 18px 40px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.start-button:hover {\n background-color: var(--accent-hover);\n}\n\n/* Prompt - fixed height to prevent layout shifts */\n.prompt {\n text-align: center;\n padding: 10px 20px;\n flex-shrink: 0;\n height: 110px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.prompt-title {\n font-size: 1.1rem;\n font-weight: 500;\n line-height: 1.4;\n color: var(--text-secondary);\n margin-bottom: 4px;\n}\n\n.prompt-constraint {\n font-size: 1.6rem;\n font-weight: 600;\n line-height: 1.3;\n color: var(--text-primary);\n}\n\n/* Responsive text sizing for long prompts (>70 chars) */\n.prompt-constraint.prompt-long {\n font-size: 1.25rem;\n line-height: 1.25;\n}\n\n/* Current Guess */\n.current-guess-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n padding: 10px 20px;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 80px;\n max-height: 120px;\n}\n\n.length-counter {\n position: absolute;\n top: calc(50% - 1.5rem - 12px);\n right: 8px;\n background: var(--accent-primary);\n color: white;\n border-radius: 16px;\n padding: 4px 10px;\n font-size: 1rem;\n font-weight: bold;\n min-width: 32px;\n text-align: center;\n z-index: 10;\n}\n\n.current-guess {\n font-family: 'Courier New', Courier, monospace;\n font-size: 2rem;\n min-height: 3rem;\n max-height: 3rem;\n padding: 12px 15px;\n background: var(--bg-input);\n border: 2px solid var(--border-color);\n border-radius: 8px;\n display: flex;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n width: 100%;\n color: var(--text-primary);\n}\n\n.letter, .letter-placeholder {\n position: relative;\n cursor: text;\n flex-shrink: 0;\n}\n\n.cursor-before::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--text-primary);\n animation: blink 1s step-end infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/* Action Buttons */\n.action-buttons {\n display: flex;\n gap: 10px;\n width: 100%;\n max-width: 500px;\n padding: 0 20px 10px 20px;\n flex-shrink: 0;\n}\n\n.trash-button {\n flex: 1;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 16px;\n font-size: 1.6rem;\n cursor: pointer;\n color: var(--text-secondary);\n}\n\n.trash-button:hover {\n background: var(--key-active);\n}\n\n.submit-button {\n flex: 4;\n background-color: var(--accent-primary);\n color: white;\n border: none;\n padding: 16px 24px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n}\n\n.submit-button:hover:not(.disabled) {\n background-color: var(--accent-hover);\n}\n\n.submit-button.disabled {\n background-color: var(--bg-card);\n color: var(--text-muted);\n cursor: not-allowed;\n}\n\n/* Keyboard */\n.keyboard {\n width: 100%;\n background: var(--keyboard-bg);\n padding: 10px 6px;\n padding-bottom: max(10px, env(safe-area-inset-bottom));\n flex-shrink: 0;\n}\n\n.keyboard-row {\n display: flex;\n justify-content: center;\n gap: 5px;\n margin-bottom: 7px;\n}\n\n.keyboard-row:last-child {\n margin-bottom: 0;\n}\n\n.key {\n background: var(--key-bg);\n border: none;\n border-radius: 6px;\n padding: 16px 11px;\n min-width: 34px;\n font-size: 1.2rem;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 1px 2px var(--shadow-color);\n flex: 1;\n max-width: 42px;\n color: var(--text-primary);\n}\n\n.key:active {\n background: var(--key-active);\n transform: translateY(1px);\n}\n\n.key-special {\n min-width: 46px;\n max-width: 52px;\n background: var(--bg-tertiary);\n color: var(--text-secondary);\n}\n\n.key-special:active {\n background: var(--key-active);\n}\n\n/* Mobile: full screen, no borders */\n@media (max-width: 480px) {\n .app-wrapper {\n background: var(--bg-secondary);\n }\n \n .game-container {\n max-height: none;\n border-radius: 0;\n }\n\n .prompt-title {\n font-size: 1rem;\n }\n \n .prompt-constraint {\n font-size: 1.4rem;\n }\n \n .prompt-constraint.prompt-long {\n font-size: 1.15rem;\n }\n \n .key {\n padding: 14px 7px;\n min-width: 30px;\n font-size: 1.05rem;\n }\n \n .key-special {\n min-width: 40px;\n }\n}\n\n/* Desktop: add shadow/border to make it look like a phone */\n@media (min-width: 481px) {\n .app-wrapper {\n padding: 20px;\n }\n\n .game-container {\n border-radius: 24px;\n box-shadow: 0 8px 32px var(--shadow-color);\n border: 8px solid #111;\n }\n}\n\n/* Taller screens: limit height more aggressively for phone look */\n@media (min-height: 800px) and (min-width: 481px) {\n .game-container {\n height: min(100%, 800px);\n }\n}\n\n/* Examples */\n.examples {\n text-align: center;\n font-size: 1.1rem;\n color: var(--text-secondary);\n padding: 5px 20px;\n flex-shrink: 0;\n}\n\n.examples-label {\n font-style: italic;\n margin-right: 6px;\n}\n\n.example-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n}\n\n/* Highlighted letters */\n.letter-highlighted {\n color: var(--color-highlight);\n font-weight: bold;\n}\n\n/* Keyboard highlighted keys */\n.key-highlighted {\n background: var(--color-highlight-bg);\n border: 2px solid var(--color-highlight);\n color: var(--color-highlight);\n}\n\n.key-highlighted:active {\n background: rgba(251, 191, 36, 0.35);\n}\n\n/* Keyboard unselectable keys */\n.key-unselectable {\n background: var(--bg-primary);\n color: var(--text-muted);\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.key-unselectable:active {\n background: var(--bg-primary);\n transform: none;\n}\n\n\n/* Post-game content area */\n.content-area.post-game {\n justify-content: flex-start;\n padding-top: 30px;\n gap: 20px;\n overflow-y: auto;\n}\n\n/* Results Table */\n.results-table-container {\n width: 100%;\n max-width: 350px;\n padding: 0 20px;\n}\n\n.results-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 1.1rem;\n}\n\n.results-table th,\n.results-table td {\n padding: 12px 10px;\n text-align: left;\n border-bottom: 1px solid var(--border-color);\n}\n\n.results-table th {\n font-weight: 600;\n color: var(--text-secondary);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.results-table .result-word {\n font-family: 'Courier New', Courier, monospace;\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.results-table .result-letters {\n text-align: center;\n font-weight: bold;\n min-width: 50px;\n}\n\n/* Valid rows - teal (colorblind-friendly) */\n.results-table .result-valid {\n background-color: var(--color-valid-bg);\n}\n\n.results-table .result-valid .result-letters {\n color: var(--color-valid);\n}\n\n/* Invalid rows - orange (colorblind-friendly) */\n.results-table .result-invalid {\n background-color: var(--color-invalid-bg);\n}\n\n.results-table .result-invalid .result-word {\n text-decoration: line-through;\n color: var(--text-muted);\n}\n\n.results-table .result-invalid .result-letters {\n color: var(--color-invalid);\n}\n\n/* Total row */\n.results-table .result-total {\n background-color: var(--bg-card);\n font-weight: bold;\n}\n\n.results-table .result-total td {\n border-bottom: none;\n border-top: 2px solid var(--text-secondary);\n padding-top: 14px;\n}\n\n.results-table .result-total .result-letters {\n font-size: 1.3rem;\n color: var(--text-primary);\n}\n\n\n/* Round Indicator */\n.round-indicator {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 16px;\n flex-shrink: 0;\n}\n\n.round-text {\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-secondary);\n white-space: nowrap;\n}\n\n.round-subway-map {\n flex-shrink: 0;\n}\n\n@media (max-width: 480px) {\n .round-indicator {\n gap: 10px;\n padding: 6px 12px;\n }\n \n .round-text {\n font-size: 0.9rem;\n }\n}\n","createdAt",["D",1768773883619],"branchVersion","branchId","f23cf196-f3d5-11f0-8692-42dde27851f2","id","f239e0c8-f3d5-11f0-8692-42dde27851f2","thinkalittlelonger",["D",1768676066564],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","a little game where you think of big words","imageUrl","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","019bcd4f-053b-76eb-a453-718b43a5c39c","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","f239e0c8f3d511f0869242dde27851f2","tursoHostname","f239e0c8f3d511f0869242dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789527643940],"pinned",1,"userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":55,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_43":42,"_92":44,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":45,"_99":100},"isOwned",247,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","alexwein","handle","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":364,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":365,"_72":73,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":366,"_85":367,"_87":368,"_89":25},"tree",[183,198,200,204,205],"files",[183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205],"counts",{"_173":63,"_174":73,"_175":63,"_176":177,"_178":179},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":168,"_32":169,"_30":170,"_139":-5,"_41":42,"_40":73,"_141":59,"_38":171,"_13":63,"_34":160,"_35":-5,"_24":25,"_146":-5,"_27":172},{"_43":162,"_32":163,"_30":164,"_139":-5,"_41":42,"_40":165,"_141":59,"_38":166,"_13":63,"_34":160,"_35":-5,"_24":25,"_146":-5,"_27":167},{"_43":155,"_32":156,"_30":157,"_139":-5,"_41":42,"_40":158,"_141":59,"_38":159,"_13":73,"_34":160,"_35":-5,"_24":25,"_146":-5,"_27":161},{"_43":148,"_32":149,"_30":150,"_139":-5,"_41":42,"_40":151,"_141":59,"_38":152,"_13":73,"_34":20,"_35":153,"_24":25,"_146":-5,"_27":154},{"_43":137,"_32":138,"_30":57,"_139":-5,"_41":42,"_40":140,"_141":25,"_38":142,"_13":143,"_34":144,"_35":145,"_24":25,"_146":45,"_27":147},"0f5c8642-f4a3-11f0-afad-42dde27851f2","index.ts","parentId",81,"latest",["D",1768764162293],2,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// API endpoint to validate submissions\napp.post(\"/api/validate\", async (c) => {\n const { submissions } = await c.req.json<{ submissions: { round: number; word: string }[] }>();\n \n // Validate each submission against the valid_words table\n const results = await Promise.all(\n submissions.map(async (submission) => {\n const wordLower = submission.word.toLowerCase();\n \n try {\n const result = await sqlite.execute({\n sql: \"SELECT 1 FROM valid_words WHERE id = ? AND word = ?\",\n args: [submission.round, wordLower]\n });\n \n return {\n round: submission.round,\n word: submission.word,\n isValid: result.rows.length > 0\n };\n } catch (error) {\n // If table doesn't exist or other DB error, return invalid\n console.error(`Validation error for round ${submission.round}, word \"${submission.word}\":`, error);\n return {\n round: submission.round,\n word: submission.word,\n isValid: false\n };\n }\n })\n );\n \n return c.json({ results });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[138],"16882a70-f4a3-11f0-afad-42dde27851f2","README.md","019bcd4f-053b-76eb-a453-6fc01919d6db",82,["D",1768764174325],"# Your Biggest Word\n\nA word game where players must think of the biggest word that fits a given constraint (e.g., \"starts with HI\").\n\n## Setup\n\n### Database Initialization\n\nThe game requires a word database to validate submissions. Before playing, you need to initialize the database:\n\n1. **Run the initialization script** by visiting the script's endpoint in your browser:\n - Navigate to the `scripts/initDb.ts` file in Val Town\n - Click the endpoint URL to trigger the script\n - Or run it via curl: `curl https://your-val-endpoint/scripts/initDb.ts`\n\n2. **Verify initialization** - The script will return a JSON response showing:\n - Total number of words loaded\n - List of available rounds and their rules\n\n**Note:** This only needs to be done once, or when the word list is updated. The script is idempotent and will drop/recreate the table if run again.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\n## API Endpoints\n\n### POST /api/validate\n\nValidates word submissions against the game's word database.\n\n**Request body:**\n```json\n{\n \"submissions\": [\n { \"round\": 1, \"word\": \"history\" },\n { \"round\": 1, \"word\": \"hippopotamus\" }\n ]\n}\n```\n\n**Response:**\n```json\n{\n \"results\": [\n { \"round\": 1, \"word\": \"history\", \"isValid\": true },\n { \"round\": 1, \"word\": \"hippopotamus\", \"isValid\": true }\n ]\n}\n```\n\n## File Structure\n\n```\nindex.ts # Main HTTP handler with /api/validate endpoint\nscripts/\n initDb.ts # Database initialization script (HTTP type)\nfrontend/\n index.html # Client-side HTML entry point\n index.tsx # Client-side React entry point\n components/\n App.tsx # Main React app component\nREADME.md # This file\n```\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.\n",[149],"50d64bb4-f492-11f0-82f7-42dde27851f2","towniePrompts","49b75f26-f492-11f0-890d-42dde27851f2",51,["D",1768756970700],"directory",[156],"027944ec-f4a3-11f0-afad-42dde27851f2","scripts","02794596-f4a3-11f0-afad-42dde27851f2",79,["D",1768764140659],[163],"f23f9cf2-f3d5-11f0-8692-42dde27851f2","frontend","019bcd4f-053b-76eb-a453-691afb751804",["D",1768676066564],[169],"pulls","branches","forks","envVars",{"_180":63,"_182":63},"connections",{"_180":63,"_181":63},"count","unfilledCount","emptyCount",{"_43":168,"_32":169,"_30":170,"_139":-5,"_41":42,"_40":73,"_141":59,"_38":361,"_13":63,"_34":160,"_35":-5,"_24":25,"_146":-5,"_207":362,"_27":363},{"_43":357,"_32":300,"_30":294,"_139":170,"_41":42,"_40":73,"_141":59,"_38":358,"_13":63,"_34":160,"_35":-5,"_24":25,"_146":-5,"_207":359,"_27":360},{"_43":349,"_32":350,"_30":351,"_139":294,"_41":42,"_40":352,"_141":59,"_38":353,"_13":63,"_34":265,"_35":354,"_24":25,"_146":-5,"_207":355,"_27":356},{"_43":341,"_32":342,"_30":343,"_139":294,"_41":42,"_40":344,"_141":25,"_38":345,"_13":256,"_34":265,"_35":346,"_24":25,"_146":-5,"_207":347,"_27":348},{"_43":333,"_32":334,"_30":335,"_139":294,"_41":42,"_40":336,"_141":59,"_38":337,"_13":264,"_34":265,"_35":338,"_24":25,"_146":-5,"_207":339,"_27":340},{"_43":325,"_32":326,"_30":327,"_139":294,"_41":42,"_40":328,"_141":59,"_38":329,"_13":63,"_34":265,"_35":330,"_24":25,"_146":-5,"_207":331,"_27":332},{"_43":317,"_32":318,"_30":319,"_139":294,"_41":42,"_40":320,"_141":25,"_38":321,"_13":73,"_34":265,"_35":322,"_24":25,"_146":-5,"_207":323,"_27":324},{"_43":309,"_32":310,"_30":311,"_139":294,"_41":42,"_40":312,"_141":59,"_38":313,"_13":264,"_34":265,"_35":314,"_24":25,"_146":-5,"_207":315,"_27":316},{"_43":301,"_32":302,"_30":303,"_139":294,"_41":42,"_40":304,"_141":25,"_38":305,"_13":63,"_34":265,"_35":306,"_24":25,"_146":-5,"_207":307,"_27":308},{"_43":291,"_32":292,"_30":293,"_139":294,"_41":42,"_40":295,"_141":25,"_38":296,"_13":73,"_34":265,"_35":297,"_24":25,"_146":-5,"_207":298,"_27":299},{"_43":284,"_32":285,"_30":286,"_139":170,"_41":42,"_40":73,"_141":59,"_38":287,"_13":63,"_34":20,"_35":288,"_24":25,"_146":-5,"_207":289,"_27":290},{"_43":276,"_32":277,"_30":278,"_139":170,"_41":42,"_40":279,"_141":25,"_38":280,"_13":73,"_34":20,"_35":281,"_24":25,"_146":-5,"_207":282,"_27":283},{"_43":269,"_32":270,"_30":271,"_139":170,"_41":42,"_40":73,"_141":59,"_38":272,"_13":63,"_34":265,"_35":273,"_24":25,"_146":-5,"_207":274,"_27":275},{"_43":259,"_32":260,"_30":261,"_139":170,"_41":42,"_40":262,"_141":25,"_38":263,"_13":264,"_34":265,"_35":266,"_24":25,"_146":-5,"_207":267,"_27":268},{"_43":254,"_32":33,"_30":31,"_139":170,"_41":42,"_40":14,"_141":25,"_38":255,"_13":256,"_34":20,"_35":37,"_24":25,"_146":-5,"_207":257,"_27":258},{"_43":162,"_32":163,"_30":164,"_139":-5,"_41":42,"_40":165,"_141":59,"_38":251,"_13":63,"_34":160,"_35":-5,"_24":25,"_146":-5,"_207":252,"_27":253},{"_43":243,"_32":244,"_30":245,"_139":164,"_41":42,"_40":246,"_141":25,"_38":247,"_13":73,"_34":144,"_35":248,"_24":25,"_146":-5,"_207":249,"_27":250},{"_43":155,"_32":156,"_30":157,"_139":-5,"_41":42,"_40":158,"_141":59,"_38":240,"_13":73,"_34":160,"_35":-5,"_24":25,"_146":-5,"_207":241,"_27":242},{"_43":231,"_32":232,"_30":233,"_139":157,"_41":42,"_40":234,"_141":25,"_38":235,"_13":236,"_34":20,"_35":237,"_24":25,"_146":-5,"_207":238,"_27":239},{"_43":222,"_32":223,"_30":224,"_139":157,"_41":42,"_40":225,"_141":25,"_38":226,"_13":227,"_34":20,"_35":228,"_24":25,"_146":-5,"_207":229,"_27":230},{"_43":213,"_32":214,"_30":215,"_139":157,"_41":42,"_40":216,"_141":25,"_38":217,"_13":218,"_34":20,"_35":219,"_24":25,"_146":-5,"_207":220,"_27":221},{"_43":148,"_32":149,"_30":150,"_139":-5,"_41":42,"_40":151,"_141":59,"_38":210,"_13":73,"_34":20,"_35":153,"_24":25,"_146":-5,"_207":211,"_27":212},{"_43":137,"_32":138,"_30":57,"_139":-5,"_41":42,"_40":140,"_141":25,"_38":206,"_13":143,"_34":144,"_35":145,"_24":25,"_146":45,"_207":208,"_27":209},["D",1768764162293],"children",[],[138],["D",1768764174325],[],[149],"108146f0-f4b9-11f0-98e8-42dde27851f2","todo.md","3b78d070-f492-11f0-ae80-42dde27851f2",97,["D",1768773613144],14,"- for the inGame view, add a component that indicates how many rounds there are and what the current round is.\n- it should take up a single like and say \"Round 1/5\"\n- After the text, use an minimal svg chart that resembles a subway map. each round is a circle, and as the game progresses, the current round is visually indicated\n(through color and an additional outline)\n\n### styling cleanup\n\n- pick a complete coherent color pallet: use a dark background and light text. maintain color-blind friendly coloring for valid and invalid words, but you can pick new colors.\n- the size of the text in the prompt-title should be smaller than the prompt-constraint.\n- ensure that the height of the in-game element never changes and fully fills the screen on mobile.\n - the longest prompt size in the current dataset is under 60 characters. Ensure that 75 characters fits cleanly.\n - include logic to responsively size the text when greater than 70 characters.",[],[156,214],"15d51358-f4a4-11f0-8a9c-42dde27851f2","todo-01.md","01a7c58e-f3d6-11f0-986d-42dde27851f2",84,["D",1768764602650],16,"I have forked the Val Town React Hono Starter, but made no other changes to the code outside of this `todo.md` file. help me create make this word game.\nLet's focus on building out the front-end for now.\n\n- Title: What's the Biggest Word You Can Think of?\n\nThe player is prompted with some constraints and must think of the biggest word they can that fulfills the constraints.\n\nexamples:\n\n- What's the biggest word you can think of that starts with P and ends with P?\n- What's the biggest word you can think of that contains the letters EVE in order (without anything in between)?\n\n\n\n\n## Frontend React Components:\n- Header\n- Prompt\n - title\n - constraint\n - examples\n- CurrentGuess\n - Cursor\n - lengthCounter\n- SubmitButton\n- trash button\n- keyboard\n - key\n \ngameState: [preGame, inGame, postGame]\n\ninGame:\ncurrentRound\ncurrentGuess\ncursorPosition\n\n## Prompt Component\n- the title always starts with \"What's the biggest word you can think of\"\n- the constraint\n\n## CurrentGuess Component\n- Displays the currentGuess state, which is updated through the keyboard component.\n- tapping/clicking on a letter in the current guess adjusts the cursor position\n- the cursor should be a thin vertical line that strobes at a standard speed for a text editor.\n- use a monospaced font\n- Left justify the currentGuess\n- Use a font size so that 15 letters fits within the width. when the currentGuess gets larger, dynamically resize the font so that the full word fits. Don't allow input after 30 letters (should be handled in keyboard keys below)\n- the lengthCounter component should display the number of letters in the CurrentGuess. It should float above the top right corner of the currentGuess, similar to a notification count on an app icon (but don't use red)\n\n## Submit Button\n- A button that submits the current guess\n- has an selectable property\n - if the currentWord is blank,\n - certain constraints (like \"ends with\" or \"uses every letter in a set\") will make the currentGuess unselectable if the constraint is not met\n - when the current guess is submitted, the currentRound is incremented and the next round's constraint is presented. the current guess is reset to blank.\n - If it is the final round, submitting changes gameState to postGame\n\n## Trash button\n\nThe trash button resets the currentGuess to blank without submitting. It should be a trash icon.\n\nSubmit and Trash buttons should appear on the same line, with trash being to the left of submit, and submit taking up 4x the width of the trash button.\n\n## keyboard component\n- should always be up when gameState=inGame\n- It should fill the bottom third of the screen on mobile\n- Follow QWERTY layout, but only have keys for\n - the 26 Letters in the alphabet\n - to the left of Z, there should be a key with a backspace icon. The back button removes the letter at the cursor.\n - to the right of M, there should be left and right arrow keys.\n- Keys should have an selectable property, unselectable keys should be indicated visually in css, but by default all keys are selectable.\n- pressing a key adds the letter to the currentGuess at the cursor position.\n\n### edits 1: mobile/desktop experience\n- Mobile experience should be prioritized.\n- Make the desktop version look a little more like the mobile version: rather than being full screen, it should be portrait-mode and centered in the screen.\n- On desktop (and on mobile with attached keyboard), keyboard input should still word.\n\n\n### edits 2:\n\nmake the following tweaks:\n1. Add a header at the top: \"a word game by Alex Wein\"\n1. there should be less white space. Increase the size of the other elements slightly so that there's not as much blank space.\n2. and distribute the blank space more evenly\n1. On mobile, when I have 14 letters in the currentGuess, the cursor moves to a new line. ensure currentGuess is always a single line and doesn't change height.\n\nmake the letterCount bigger, keep it's position visually anchored to the top right of the currentGuess (not the container)\n\nundo the last update and try again: I liked how the currentGuess looked (the size of the box should never change),\nI just want to move the counter down so it's not floating on its own. The counter should display 0 when the current guess is blank\n\nThe changes to the make the length counter bigger were successful and you should repeat them.\nMade the length counter bigger:\n\nIncreased font size from 0.9rem to 1rem\nIncreased padding from 3px 9px to 4px 10px\nIncreased min-width from 28px to 32px\nIncreased border-radius to 16px for a larger, rounder look\n\n\nthat's better but not quite there yet. I want the letterCount to partially overlap with the white div with currentGuess at the top right corner.\n\n---\n\n\n### messyQueries.ts\n\nThis is an export from an Observable notebook.\nI want you to read it, and return a fully formed duckDB query against the wordnik table\nthe query should be a `union all` of the results of the separate sql queries in the file\ntry to preserve the sql coding style in the query (from-first, lowercase, etc.)\n\nfields in result:\n- id: int where the first query is 1, the next is 2, etc.\n- rule: string: use text in the comment of each query above the where clause\n- word: string: word from wordnik\n- n_letters: int: length(word)\n\nupdate `todo.md` with the correct query but make no other changes to `todo.md`:\n\n```sql\nfrom (\n -- 1: ends with p\n from wordnik\n select 1 as id, 'ends with p' as rule, word, length(word) as n_letters\n where word like '%p'\n\n union all\n\n -- 2: starts and ends with p\n from wordnik\n select 2 as id, 'starts and ends with p' as rule, word, length(word) as n_letters\n where word like 'p%p'\n\n union all\n\n -- 3: has the letters dog in sequence\n from wordnik\n select 3 as id, 'has the letters dog in sequence' as rule, word, length(word) as n_letters\n where word like '%d%o%g%'\n\n union all\n\n -- 4: starts with the letters OVER\n from wordnik\n select 4 as id, 'starts with the letters OVER' as rule, word, length(word) as n_letters\n where word like 'over%'\n\n union all\n\n -- 5: ends with the letters OVER\n from wordnik\n select 5 as id, 'ends with the letters OVER' as rule, word, length(word) as n_letters\n where word like '%over'\n\n union all\n\n -- 6: all vowels are As\n from wordnik\n select 6 as id, 'all vowels are As' as rule, word, length(word) as n_letters\n where word similar to '[^eiouy]+'\n\n union all\n\n -- 7: only uses QWERTY\n from wordnik\n select 7 as id, 'only uses QWERTY' as rule, word, length(word) as n_letters\n where word similar to '[qwerty]+'\n\n union all\n\n -- 8: can be typed only using your left hand\n from wordnik\n select 8 as id, 'can be typed only using your left hand' as rule, word, length(word) as n_letters\n where word similar to '[qwertasdfgzxcvb]+'\n\n union all\n\n -- 9: has exactly two Cs\n from wordnik\n select 9 as id, 'has exactly two Cs' as rule, word, length(word) as n_letters\n where length(word) - length(replace(word, 'c', '')) = 2\n\n union all\n\n -- 10: has the letters ABC in any order\n from wordnik\n select 10 as id, 'has the letters ABC in any order' as rule, word, length(word) as n_letters\n where word like '%a%'\n and word like '%b%'\n and word like '%c%'\n\n union all\n\n -- 11: no s no t no e no a\n from wordnik\n select 11 as id, 'no s no t no e no a' as rule, word, length(word) as n_letters\n where word similar to '[^stea]+'\n)\nselect *\norder by id, n_letters desc\n```\n\n----\n\n### edit frontend/rounds.ts:\n\n- apply the structure of the first element to the others: highlight takes an array of letters, validation is an unquoted function, examples is a list of words.\n\t{\n\t\tround: 1,\n\t\ttitle: \"starts with HI\",\n\t\thighlight: [\"H\", \"I\"],\n\t\tvalidation: str => /^hi.*/.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"hit\", \"hint\", \"hill\",]\n\t},\n- make this array exportable.\n- import the rounds array in the App component to use for the rounds of the game.\n- leverage the other features of the rounds data:\n - the examples should be between the prompt and the currentGuess\n - in the currentGuess, on the keyboard, and in the displayex examples, the letters in round.highlight should be visually distinct from the the other letters.\n - the submit button should only be clickable if validation returns true.\n - make the unselectable keys unselectable. With keyboard input, typing an unselectable letter doesn't do anything\n\n\n### game Over\n\nHelp me begin to build out the postGame view:\n\n- during the game, record the list of words the player submitted.\n- upon submitting the final guess, send that data to the backend.\n - we will validate that submissions are actual words on the backend. Skip the actual validation for now. instead use a stub that says every submission has a 75% change of being valid. Do this on the backend.\n - the postGame state should present a table of the results, that lists each word.\n - if it the word is valid, list the number of letters in it.\n - visually indicate valid and invalid words using versions of red and green that are discernible for standard colorblindness.\n - the last line of the table should a \"total\" that sums up the letters in all valid words.\n\n\n ### validation strategy\n\nhelp me devise a good strategy for validation. Currently, I have a list of valid words in a table format.\n\n- create a database initialization script that loads the csv into sql.\n- update the project readme with instructions to run the this initialization (so the project is easy to remix)\n- update the validation logic build earlier in the conversation.\n\n- below the first few lines of the csv.\n- A version currently lives at https://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\n\n```\nid,rule,word,n_letters\n1,starts with HI,histocompatibilities,20\n1,starts with HI,histopathologically,19\n1,starts with HI,historiographically,19\n1,starts with HI,histocompatibility,18\n\n ```\n\n don't suggest code changes yet, instead, build out a strategy in markdown that I can freshly prompt townie with.\n\n Put that prompt immediately below here in this file todo.md:\n\n---\n\n## Townie Prompt: Implement Word Validation with SQLite\n\n### Context\n\nThis is a word game where players must think of the biggest word that fits a given constraint (e.g., \"starts with HI\"). We need to validate that submitted words are real English words AND that they satisfy the round's constraint.\n\nA CSV file containing valid words for each round is available at:\nhttps://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\n\nThe CSV format is:\n```\nid,rule,word,n_letters\n1,starts with HI,histocompatibilities,20\n1,starts with HI,histopathologically,19\n...\n```\n\nWhere `id` corresponds to the round number and `rule` describes the constraint.\n\n### Tasks\n\n#### 1. Create Database Initialization Script\n\nCreate a new file `scripts/initDb.ts` that:\n\n- Fetches the CSV from the gist URL above\n- Parses the CSV data\n- Creates a SQLite table called `valid_words` with columns:\n - `id` (INTEGER) - the round number\n - `rule` (TEXT) - the constraint description \n - `word` (TEXT) - the valid word (lowercase)\n - `n_letters` (INTEGER) - word length\n- Creates an index on `(id, word)` for fast lookups\n- Inserts all rows from the CSV\n- This script should be idempotent (safe to run multiple times - drop and recreate table)\n\nUse Val Town's SQLite: `import { sqlite } from \"https://esm.town/v/std/sqlite\";`\n\n#### 2. Update README.md\n\nAdd a \"Setup\" or \"Database Initialization\" section that explains:\n- The game requires a word database to validate submissions\n- How to run the initialization script (visit the script's endpoint or run it manually)\n- Note that this only needs to be done once, or when the word list is updated\n\n#### 3. Update Backend Validation Logic\n\nModify the `/api/validate` endpoint in `index.ts` to:\n\n- Accept submissions in format `{ submissions: [{ round: number, word: string }] }`\n- For each submission, query the `valid_words` table to check if the word exists for that round\n- Query: `SELECT 1 FROM valid_words WHERE id = ? AND word = ?` (lowercase the word before querying)\n- Return `{ results: [{ round, word, isValid: boolean }] }`\n\n#### 4. File Structure After Changes\n\n```\nindex.ts # Main HTTP handler with /api/validate endpoint\nscripts/\n initDb.ts # Database initialization script (HTTP type so it can be triggered)\nREADME.md # Updated with setup instructions\nfrontend/ # (no changes needed)\n```\n\n### Important Notes\n\n- The `valid_words` table pre-validates words against round constraints, so we only need to check if the (round, word) pair exists\n- Words should be compared case-insensitively (store and query in lowercase)\n- The init script should be an HTTP val so it can be easily triggered via browser or curl\n- Keep the init script simple - just fetch, parse, and insert\n\n\n----",[],[156,223],"554277e0-f492-11f0-8826-42dde27851f2","rounds.md","9a4c6aac-f3e9-11f0-9746-42dde27851f2",52,["D",1768756978103],4,"## strategy for real data\n\nIn the first version of the game, there will be 7 rounds\n\nThe valid word list I use is wordnik, and it is hosted on github at the following url: https://raw.githubusercontent.com/wordnik/wordlist/main/wordlist-20210729.txt\nit also exists in my sqlite database in the table `judgments` which has a column \"word\"\n\nI have duckdb queries that return solutions for each round. For example. This query returns all words that start with p and end with p:\n\n```\nfrom judgments\nselect word, length(word) as n_letters,\nwhere\n-- starts and ends with p\nword like 'p%p'\norder by n_letters desc\n```\n\nsome of the results of the \n\n\ncreate a new table:\n\nyourbiggestword\n\n### fields\n- id\n- slug - string representing round_name 50 character max",[],[156,232],["D",1768756970700],[201,202,203],[156],"557c9842-f4a3-11f0-9c3b-42dde27851f2","initDb.ts","0b44e522-f4a3-11f0-afad-42dde27851f2",83,["D",1768764279948],"// import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// const CSV_URL = \"https://gist.githubusercontent.com/a-lexwein/e3e6a0817c71d57c063c238f519f8b45/raw/9a06a1e2f5e4c479bb653ff39dbb65f77cd60cff/thinkOfWords.csv\";\n\n// interface WordEntry {\n// id: number;\n// rule: string;\n// word: string;\n// n_letters: number;\n// }\n\n// function parseCSV(csvText: string): WordEntry[] {\n// const lines = csvText.trim().split(\"\\n\");\n// // Skip header row\n// const dataLines = lines.slice(1);\n \n// return dataLines.map(line => {\n// // Handle CSV parsing - rule field may contain commas so we need to be careful\n// // Format: id,rule,word,n_letters\n// // Example: 1,starts with HI,histocompatibilities,20\n// const firstComma = line.indexOf(\",\");\n// const lastComma = line.lastIndexOf(\",\");\n// const secondLastComma = line.lastIndexOf(\",\", lastComma - 1);\n \n// const id = parseInt(line.substring(0, firstComma), 10);\n// const rule = line.substring(firstComma + 1, secondLastComma);\n// const word = line.substring(secondLastComma + 1, lastComma).toLowerCase();\n// const n_letters = parseInt(line.substring(lastComma + 1), 10);\n \n// return { id, rule, word, n_letters };\n// });\n// }\n\n// export default async function(req: Request): Promise {\n// try {\n// console.log(\"Fetching CSV data...\");\n// const response = await fetch(CSV_URL);\n// if (!response.ok) {\n// throw new Error(`Failed to fetch CSV: ${response.status} ${response.statusText}`);\n// }\n// const csvText = await response.text();\n \n// console.log(\"Parsing CSV...\");\n// const entries = parseCSV(csvText);\n// console.log(`Parsed ${entries.length} word entries`);\n \n// // Drop existing table and recreate (idempotent)\n// console.log(\"Dropping existing table if exists...\");\n// await sqlite.execute(\"DROP TABLE IF EXISTS valid_words\");\n \n// console.log(\"Creating valid_words table...\");\n// await sqlite.execute(`\n// CREATE TABLE valid_words (\n// id INTEGER NOT NULL,\n// rule TEXT NOT NULL,\n// word TEXT NOT NULL,\n// n_letters INTEGER NOT NULL\n// )\n// `);\n \n// console.log(\"Creating index on (id, word)...\");\n// await sqlite.execute(`\n// CREATE INDEX idx_valid_words_id_word ON valid_words (id, word)\n// `);\n \n// // Insert data in batches for better performance\n// console.log(\"Inserting word data...\");\n// const BATCH_SIZE = 100;\n// let inserted = 0;\n \n// for (let i = 0; i < entries.length; i += BATCH_SIZE) {\n// const batch = entries.slice(i, i + BATCH_SIZE);\n// const statements = batch.map(entry => ({\n// sql: \"INSERT INTO valid_words (id, rule, word, n_letters) VALUES (?, ?, ?, ?)\",\n// args: [entry.id, entry.rule, entry.word, entry.n_letters]\n// }));\n \n// await sqlite.batch(statements);\n// inserted += batch.length;\n \n// if (inserted % 1000 === 0) {\n// console.log(`Inserted ${inserted} / ${entries.length} rows...`);\n// }\n// }\n \n// console.log(`Successfully inserted ${inserted} rows`);\n \n// // Verify the data\n// const countResult = await sqlite.execute(\"SELECT COUNT(*) as count FROM valid_words\");\n// const count = countResult.rows[0][0];\n \n// const roundsResult = await sqlite.execute(\"SELECT DISTINCT id, rule FROM valid_words ORDER BY id\");\n// const rounds = roundsResult.rows.map(row => ({ id: row[0], rule: row[1] }));\n \n// return new Response(JSON.stringify({\n// success: true,\n// message: `Database initialized successfully`,\n// totalWords: count,\n// rounds: rounds\n// }, null, 2), {\n// status: 200,\n// headers: { \"Content-Type\": \"application/json\" }\n// });\n \n// } catch (error) {\n// console.error(\"Error initializing database:\", error);\n// return new Response(JSON.stringify({\n// success: false,\n// error: error instanceof Error ? error.message : String(error)\n// }, null, 2), {\n// status: 500,\n// headers: { \"Content-Type\": \"application/json\" }\n// });\n// }\n// }",[],[163,244],["D",1768764140659],[199],[163],"b1ba29e2-f4b9-11f0-952f-42dde27851f2",["D",1768773883619],13,[],[169,33],"c8fe5098-f49a-11f0-8f38-42dde27851f2","rounds.ts","5e68b008-f499-11f0-a36e-42dde27851f2",60,["D",1768760608255],3,"script","export interface Round {\n\tround: number;\n\ttitle: string;\n\thighlight: string[];\n\tvalidation: (str: string) => boolean;\n\tunselectable_keys: string[];\n\texamples: string[];\n}\n\nexport const rounds: Round[] = [\n\t{\n\t\tround: 1,\n\t\ttitle: \"starts with HI\",\n\t\thighlight: [\"H\", \"I\"],\n\t\tvalidation: str => /^hi.*/.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"hit\", \"hint\", \"hill\"],\n\t},\n\t{\n\t\tround: 2,\n\t\ttitle: \"starts with P and ends with P\",\n\t\thighlight: [\"P\"],\n\t\tvalidation: str => /^p.*p$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"pep\", \"prop\", \"pulp\"],\n\t},\n\t{\n\t\tround: 3,\n\t\ttitle: \"has exactly two Cs\",\n\t\thighlight: [\"C\"],\n\t\tvalidation: str => /^(?:[^c]*c){2}[^c]*$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"click\", \"occur\", \"clock\"],\n\t},\n\t{\n\t\tround: 4,\n\t\ttitle: \"doesn't use vowels besides A\",\n\t\thighlight: [\"A\"],\n\t\tvalidation: str => /^[^eiuoy]*$/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [\"E\", \"I\", \"O\", \"U\", \"Y\"],\n\t\texamples: [\"map\", \"arms\", \"salsa\"],\n\t},\n\t{\n\t\tround: 5,\n\t\ttitle: \"has the letters DOG in sequence (with possible gaps)\",\n\t\thighlight: [\"D\", \"O\", \"G\"],\n\t\tvalidation: str => /d.*o.*g/i.test(str.toLowerCase()),\n\t\tunselectable_keys: [],\n\t\texamples: [\"dog\", \"dogs\", \"defog\"],\n\t},\n];\n",[],[169,260],"f23f95d6-f3d5-11f0-8692-42dde27851f2","index.tsx","019bcd4f-053b-76eb-a453-603586da5553",["D",1768676066564],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[169,270],"05b162b0-f3dc-11f0-850f-42dde27851f2","index.html","019bcd4f-053b-76eb-a453-5c0ec15359cc",10,["D",1768678676215],"\n\n \n \n \n What's the Biggest Word You Can Think Of?\n \n \n \n \n

\n \n \n \n",[],[169,277],"f23f8a5a-f3d5-11f0-8692-42dde27851f2","favicon.svg","019bcd4f-053b-76eb-a453-588cc7698352",["D",1768676066564],"\n",[],[169,285],"4ec66b20-f4b9-11f0-bad5-42dde27851f2","RoundIndicator.tsx","0a0e76b2-f4a5-11f0-a60b-42dde27851f2","019bcd4f-053b-76eb-a453-57913d70df82",100,["D",1768773717614],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface RoundIndicatorProps {\n currentRound: number; // 0-indexed\n totalRounds: number;\n}\n\nexport function RoundIndicator({ currentRound, totalRounds }: RoundIndicatorProps) {\n // SVG dimensions\n const circleRadius = 8;\n const circleSpacing = 28;\n const strokeWidth = 3;\n const padding = 4;\n const svgWidth = (totalRounds - 1) * circleSpacing + circleRadius * 2 + padding * 2;\n const svgHeight = circleRadius * 2 + padding * 2 + 4; // Extra 4 for outline\n\n // Colors matching the dark theme\n const accentColor = \"#6366f1\";\n const inactiveColor = \"#3a3a5a\";\n const bgColor = \"#252545\";\n\n return (\n

\n Round {currentRound + 1}/{totalRounds}\n \n

\n );\n}\n",[],[169,300,292],"components","abc0564c-f4a0-11f0-b9ac-42dde27851f2","ResultsTable.tsx","abc05714-f4a0-11f0-b9ac-42dde27851f2",71,["D",1768763136187],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ValidationResult {\n round: number;\n word: string;\n isValid: boolean;\n}\n\ninterface ResultsTableProps {\n results: ValidationResult[];\n}\n\nexport function ResultsTable({ results }: ResultsTableProps) {\n const total = results\n .filter(r => r.isValid)\n .reduce((sum, r) => sum + r.word.length, 0);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n {results.map((result) => (\n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

Round	Word	Letters
{result.round}	{result.word}	\n {result.isValid ? result.word.length : \"✗\"}\n
Total	{total}

\n );\n}\n",[],[169,300,302],"4659d314-f4b9-11f0-bad5-42dde27851f2","Prompt.tsx","197aee4c-f3dc-11f0-b024-42dde27851f2",99,["D",1768773703481],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PromptProps {\n title: string;\n}\n\nexport function Prompt({ title }: PromptProps) {\n // Full constraint text to check length\n const constraintText = `that ${title}?`;\n const isLongPrompt = constraintText.length > 70;\n \n return (\n

\n What's the biggest word you can think of...\n

\n {constraintText}\n

\n );\n}\n",[],[169,300,310],"d77a7bce-f49a-11f0-8f38-42dde27851f2","Keyboard.tsx","1fe8c132-f3dc-11f0-b024-42dde27851f2",63,["D",1768760632568],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface KeyboardProps {\n onKeyPress: (letter: string) => void;\n onBackspace: () => void;\n onArrowLeft: () => void;\n onArrowRight: () => void;\n highlightLetters: string[];\n unselectableKeys: string[];\n}\n\nconst ROWS = [\n [\"Q\", \"W\", \"E\", \"R\", \"T\", \"Y\", \"U\", \"I\", \"O\", \"P\"],\n [\"A\", \"S\", \"D\", \"F\", \"G\", \"H\", \"J\", \"K\", \"L\"],\n [\"BACKSPACE\", \"Z\", \"X\", \"C\", \"V\", \"B\", \"N\", \"M\", \"LEFT\", \"RIGHT\"],\n];\n\nexport function Keyboard({ onKeyPress, onBackspace, onArrowLeft, onArrowRight, highlightLetters, unselectableKeys }: KeyboardProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n const unselectableSet = new Set(unselectableKeys.map(l => l.toUpperCase()));\n\n const handleKeyClick = (key: string) => {\n if (key === \"BACKSPACE\") {\n onBackspace();\n } else if (key === \"LEFT\") {\n onArrowLeft();\n } else if (key === \"RIGHT\") {\n onArrowRight();\n } else if (!unselectableSet.has(key)) {\n onKeyPress(key);\n }\n };\n\n const renderKey = (key: string) => {\n let displayContent: string | JSX.Element = key;\n let className = \"key\";\n\n if (key === \"BACKSPACE\") {\n displayContent = \"⌫\";\n className += \" key-special\";\n } else if (key === \"LEFT\") {\n displayContent = \"←\";\n className += \" key-special\";\n } else if (key === \"RIGHT\") {\n displayContent = \"→\";\n className += \" key-special\";\n } else {\n if (highlightSet.has(key)) {\n className += \" key-highlighted\";\n }\n if (unselectableSet.has(key)) {\n className += \" key-unselectable\";\n }\n }\n\n return (\n handleKeyClick(key)}\n disabled={unselectableSet.has(key)}\n >\n {displayContent}\n \n );\n };\n\n return (\n

\n {ROWS.map((row, rowIndex) => (\n

\n {row.map(renderKey)}\n

\n ))}\n

\n );\n}\n",[],[169,300,318],"cdc08a10-f49a-11f0-8f38-42dde27851f2","Examples.tsx","cdc08ac4-f49a-11f0-8f38-42dde27851f2",61,["D",1768760616250],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ExamplesProps {\n examples: string[];\n highlightLetters: string[];\n}\n\nexport function Examples({ examples, highlightLetters }: ExamplesProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n\n const renderWord = (word: string) => {\n return word.split(\"\").map((letter, index) => {\n const isHighlighted = highlightSet.has(letter.toUpperCase());\n return (\n \n {letter}\n \n );\n });\n };\n\n return (\n

\n e.g.\n {examples.map((word, index) => (\n \n {renderWord(word)}\n {index < examples.length - 1 && \", \"}\n \n ))}\n

\n );\n}\n",[],[169,300,326],"d234b756-f49a-11f0-8f38-42dde27851f2","CurrentGuess.tsx","1c959424-f3dc-11f0-b024-42dde27851f2",62,["D",1768760623723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CurrentGuessProps {\n guess: string;\n cursorPosition: number;\n onCursorClick: (position: number) => void;\n highlightLetters: string[];\n}\n\nexport function CurrentGuess({ guess, cursorPosition, onCursorClick, highlightLetters }: CurrentGuessProps) {\n const highlightSet = new Set(highlightLetters.map(l => l.toUpperCase()));\n\n // Calculate font size: base size fits 15 letters, shrink if more\n const baseFontSize = 2; // rem\n const minFontSize = 1; // rem\n const fontSize = guess.length > 15 \n ? Math.max(minFontSize, baseFontSize * (15 / guess.length))\n : baseFontSize;\n\n const handleClick = (index: number) => {\n onCursorClick(index);\n };\n\n return (\n

{guess.length}

\n {guess.split(\"\").map((letter, index) => {\n const isHighlighted = highlightSet.has(letter.toUpperCase());\n return (\n handleClick(index)}\n >\n {letter}\n \n );\n })}\n handleClick(guess.length)}\n >\n \n \n

\n );\n}\n",[],[169,300,334],"230c1314-f4b8-11f0-b963-42dde27851f2","App.tsx","019bcd4f-053b-76eb-a453-53cff50e297c",94,["D",1768773214752],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Prompt } from \"./Prompt.tsx\";\nimport { Examples } from \"./Examples.tsx\";\nimport { CurrentGuess } from \"./CurrentGuess.tsx\";\nimport { Keyboard } from \"./Keyboard.tsx\";\nimport { ActionButtons } from \"./ActionButtons.tsx\";\nimport { ResultsTable } from \"./ResultsTable.tsx\";\nimport { RoundIndicator } from \"./RoundIndicator.tsx\";\nimport { rounds } from \"../rounds.ts\";\n\ntype GameState = \"preGame\" | \"inGame\" | \"postGame\";\n\ninterface Submission {\n round: number;\n word: string;\n}\n\ninterface ValidationResult {\n round: number;\n word: string;\n isValid: boolean;\n}\n\nexport function App() {\n const [gameState, setGameState] = useState(\"preGame\");\n const [currentRound, setCurrentRound] = useState(0);\n const [currentGuess, setCurrentGuess] = useState(\"\");\n const [cursorPosition, setCursorPosition] = useState(0);\n const [submissions, setSubmissions] = useState([]);\n const [results, setResults] = useState(null);\n const [isValidating, setIsValidating] = useState(false);\n\n const round = rounds[currentRound];\n const unselectableSet = new Set(round?.unselectable_keys.map(k => k.toUpperCase()) || []);\n\n const handleStartGame = () => {\n setGameState(\"inGame\");\n setCurrentRound(0);\n setCurrentGuess(\"\");\n setCursorPosition(0);\n setSubmissions([]);\n setResults(null);\n };\n\n const handleKeyPress = useCallback((letter: string) => {\n if (currentGuess.length >= 30) return;\n if (unselectableSet.has(letter.toUpperCase())) return;\n const newGuess = currentGuess.slice(0, cursorPosition) + letter + currentGuess.slice(cursorPosition);\n setCurrentGuess(newGuess);\n setCursorPosition(cursorPosition + 1);\n }, [currentGuess, cursorPosition, unselectableSet]);\n\n const handleBackspace = useCallback(() => {\n if (cursorPosition > 0) {\n const newGuess = currentGuess.slice(0, cursorPosition - 1) + currentGuess.slice(cursorPosition);\n setCurrentGuess(newGuess);\n setCursorPosition(cursorPosition - 1);\n }\n }, [currentGuess, cursorPosition]);\n\n const handleArrowLeft = useCallback(() => {\n if (cursorPosition > 0) {\n setCursorPosition(cursorPosition - 1);\n }\n }, [cursorPosition]);\n\n const handleArrowRight = useCallback(() => {\n if (cursorPosition < currentGuess.length) {\n setCursorPosition(cursorPosition + 1);\n }\n }, [cursorPosition, currentGuess.length]);\n\n const handleCursorClick = (position: number) => {\n setCursorPosition(position);\n };\n\n const isValid = round?.validation(currentGuess) ?? false;\n\n const validateSubmissions = async (allSubmissions: Submission[]) => {\n setIsValidating(true);\n try {\n const response = await fetch(\"/api/validate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ submissions: allSubmissions }),\n });\n const data = await response.json();\n setResults(data.results);\n } catch (error) {\n console.error(\"Validation failed:\", error);\n // Fallback: mark all as valid if API fails\n setResults(allSubmissions.map(s => ({ ...s, isValid: true })));\n } finally {\n setIsValidating(false);\n }\n };\n\n const handleSubmit = useCallback(() => {\n if (!isValid) return;\n \n const newSubmission: Submission = {\n round: currentRound + 1,\n word: currentGuess,\n };\n const newSubmissions = [...submissions, newSubmission];\n setSubmissions(newSubmissions);\n\n if (currentRound < rounds.length - 1) {\n setCurrentRound(currentRound + 1);\n setCurrentGuess(\"\");\n setCursorPosition(0);\n } else {\n setGameState(\"postGame\");\n validateSubmissions(newSubmissions);\n }\n }, [isValid, currentRound, currentGuess, submissions]);\n\n const handleTrash = useCallback(() => {\n setCurrentGuess(\"\");\n setCursorPosition(0);\n }, []);\n\n // Physical keyboard support\n useEffect(() => {\n if (gameState !== \"inGame\") return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Ignore if user is typing in an input field\n if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {\n return;\n }\n\n const key = e.key.toUpperCase();\n\n if (key.length === 1 && key >= \"A\" && key <= \"Z\") {\n if (!unselectableSet.has(key)) {\n e.preventDefault();\n handleKeyPress(key);\n }\n } else if (e.key === \"Backspace\") {\n e.preventDefault();\n handleBackspace();\n } else if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n handleArrowLeft();\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault();\n handleArrowRight();\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n handleSubmit();\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n handleTrash();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [gameState, handleKeyPress, handleBackspace, handleArrowLeft, handleArrowRight, handleSubmit, handleTrash, unselectableSet]);\n\n\n if (gameState === \"preGame\") {\n return (\n

Think A Little Longer. a word game by Alex Wein

Think a Little Longer.

What's the biggest word you can thnk of that meets the constraints?

\n \n

\n );\n }\n\n\n if (gameState === \"postGame\") {\n return (\n

a word game by Alex Wein

Good Game.

\n {isValidating ? (\n

Validating your words...

\n ) : results ? (\n \n ) : (\n

Loading results...

\n )}\n \n

\n );\n }\n\n return (\n

a word game by Alex Wein

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

\n \n

\n );\n}",[],[169,300,342],"21496f36-f3dc-11f0-b024-42dde27851f2","ActionButtons.tsx","21496ff4-f3dc-11f0-b024-42dde27851f2",15,["D",1768678722522],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ActionButtonsProps {\n onSubmit: () => void;\n onTrash: () => void;\n canSubmit: boolean;\n}\n\nexport function ActionButtons({ onSubmit, onTrash, canSubmit }: ActionButtonsProps) {\n return (\n

\n \n \n

\n );\n}\n",[],[169,300,350],"f23f87e4-f3d5-11f0-8692-42dde27851f2",["D",1768676066564],[185,186,187,188,189,190,191,192],[169,300],["D",1768676066564],[184,193,194,195,196,197],[169],["D",1768676066564],["D",1789527643940],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":55,"_106":107,"_108":25},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":45,"_99":100},"ctx",{"_83":-5,"_129":402,"_403":404,"_405":406,"_407":25,"_408":25,"_409":25,"_410":59,"_411":-5,"_412":-7,"_413":-7,"_414":63,"_415":25,"_416":25,"_417":-5,"_418":25,"_419":25,"_420":25,"_421":-5},"ENV",{"_373":374,"_375":376,"_377":91,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401},"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 · v101