{"id":"gen-1784378681-9Dcv3Hdz9DVIIvBeK5zS","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"我来创建一个20x20的字谜游戏，主题是\"宇宙太空\"，支持鼠标拖拽选择单词、提示功能，以及胜利庆祝。\n\n```html\n\n\n\n\n\nCosmic Word Search\n\n\n\n\n

COSMIC WORD SEARCH

Drag across letters to find hidden words · horizontal · vertical · diagonal · forwards & backwards

\n\n

\n\n \n

\n\n

STELLAR!

You found every word in the cosmos.

\n \n

\n\n\n\n\n```\n\n## 实现说明\n\n**游戏核心**\n- 20×20 字母网格，预置 20 个太空主题单词（GALAXY、NEBULA、ASTRONAUT、BLACKHOLE 等）\n- 单词随机放置在 8 个方向（水平、垂直、对角线，正反双向），允许在同一字母交叉\n- 长单词优先放置以提高填入成功率，剩余空格用随机字母填充\n\n**交互选择**\n- 鼠标按下并拖动选择字母，自动吸附到最近的 8 方向之一（基于主轴判定）\n- 支持触摸操作（移动端通过 `elementFromPoint` 实时获取当前格子）\n- 释放鼠标时检查所选字母序列是否匹配单词列表中的词或其反向\n\n**反馈系统**\n- 选中字母实时高亮（金色渐变 + 缩放发光）\n- 找到单词时所有相关格子闪烁动画并永久标记为绿色\n- 右侧单词列表自动划线、变绿\n- 进度条和\"Found X / Y\"实时更新\n\n**辅助功能**\n- **Hint 按钮**：从未找到的单词中随机选一个，脉冲提示其首字母位置\n- **New Game**：重新生成全新布局\n- 全部找到后弹出胜利窗口，附带彩纸飘落动画\n\n**视觉风格**\n- 深空蓝紫渐变背景 + 闪烁星空动画\n- Orbitron 字体作为标题（太空感）、Outfit 作为正文\n- 所有元素圆角化，配合内嵌高光阴影增强质感\n- 响应式：窄屏时侧栏自动堆叠到下方","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants me to create a 20x20 word search game with interactive functionality. Let me think about this carefully.\n\nI need to:\n1. Create a 20x20 grid\n2. Place some words in it (horizontally, vertically, diagonally, possibly backwards)\n3. Fill remaining cells with random letters\n4. Provide a list of words to find\n5. Allow the user to click/select letters to find words\n6. Detect when a word is found\n7. Hide found words from the list\n\nLet me design this as a beautiful, interactive word search game. I'll make it visually appealing with a nice color scheme.\n\nLet me plan the implementation:\n\n**Word List**: I'll pick a theme - maybe \"Space\" or \"Animals\" or a mix. Let me go with a mix of common words that fit in 20 letters max.\n\nWords (let me pick around 12-15 words):\n- GALAXY (6)\n- NEBULA (6)\n- COMET (5)\n- PLANET (6)\n- METEOR (6)\n- ROCKET (6)\n- ORBIT (5)\n- STAR (4)\n- MOON (4)\n- SUN (3)\n- ASTEROID (8)\n- SATURN (6)\n- JUPITER (7)\n- VENUS (5)\n- MARS (4)\n- COSMOS (6)\n- ASTRONAUT (9)\n- TELESCOPE (9)\n- GRAVITY (7)\n- SUPERNOVA (9)\n\nLet me pick a good set that fits:\n- GALAXY\n- NEBULA\n- COMET\n- PLANET\n- METEOR\n- ROCKET\n- ORBIT\n- ASTEROID\n- SATURN\n- JUPITER\n- VENUS\n- COSMOS\n- ASTRONAUT\n- TELESCOPE\n- GRAVITY\n\n**Algorithm**:\n1. Create empty 20x20 grid\n2. For each word, try random positions and directions until it fits without conflicts\n3. Fill empty cells with random letters\n\n**Directions** (8 directions):\n- Right (0, 1)\n- Left (0, -1)\n- Down (1, 0)\n- Up (-1, 0)\n- Down-Right (1, 1)\n- Down-Left (1, -1)\n- Up-Right (-1, 1)\n- Up-Left (-1, -1)\n\n**Interaction**:\n- Click and drag to select letters\n- Show selection as you drag\n- On release, check if selected letters form a word\n- If yes, mark as found\n- If no, clear selection\n\nLet me implement this with mouse events. I'll track mouse down on a cell, then drag to select, snap to valid line directions.\n\nActually, a simpler approach:\n- Mouse down on cell -> start selection\n- Mouse move -> calculate the direction from start to current cell, snap to nearest of 8 directions, highlight cells along that line\n- Mouse up -> check if highlighted letters form a word from the list\n\nLet me code this up.\n\nI'll also add:\n- A list of words to find on the side\n- A counter of found words\n- A \"New Game\" button\n- Maybe a hint button that reveals one word\n\nLet me write the HTML with embedded CSS and JS:\n\n```html\n\n\n\n\nWord Search - Space Edition\n\n\n\n

Word Search

Find all the hidden words

\n \n

\n \n\n\n```\n\nLet me think about the grid cells. Each cell will be a div with data-row and data-col attributes. I'll handle mousedown on a cell, mouseenter on cells while dragging, and mouseup anywhere.\n\nActually, since we need to handle drag selection, let me use mouse events on the grid container and figure out which cell the mouse is over using elementFromPoint or by tracking mouseenter on each cell.\n\nApproach:\n- `mousedown` on cell -> start dragging, set startCell\n- `mouseenter` on cell while dragging -> update current cell, compute selection\n- `mouseup` anywhere -> finalize selection, check word\n\nThe selection logic:\n- Compute dx = currentCol - startCol, dy = currentRow - startRow\n- Determine direction: if dx and dy are both 0, single cell selection\n- Otherwise, the line must be horizontal, vertical, or 45-degree diagonal\n- Check if |dx| == |dy| (diagonal) or dx == 0 (vertical) or dy == 0 (horizontal)\n- If not aligned, snap to the closest valid direction based on dominant axis\n- Compute length = max(|dx|, |dy|)\n- Highlight cells from start to start + length*direction\n\nLet me implement the snapping:\n- If |dx| > |dy| * 2 (much more horizontal), use horizontal direction (sign of dx, 0)\n- If |dy| > |dx| * 2 (much more vertical), use vertical direction (0, sign of dy)\n- Otherwise, use diagonal (sign of dx, sign of dy)\n\nHmm, that's a simple heuristic. Let me think more carefully.\n\nActually, the simplest approach:\n- Compute dx = currentCol - startCol, dy = currentRow - startRow\n- If dx == 0 and dy == 0: single cell\n- Else, determine the primary direction:\n - If |dx| >= |dy| * 2: horizontal (dy = 0)\n - If |dy| >= |dx| * 2: vertical (dx = 0)\n - Else: diagonal (keep both)\n- Length = max(|dx|, |dy|) after snapping\n- For diagonal case: length = max(|dx|, |dy|), and direction = (sign(dx), sign(dy))\n\nLet me code this:\n\n```javascript\nfunction getSelectionCells(startRow, startCol, endRow, endCol) {\n const dr = endRow - startRow;\n const dc = endCol - startCol;\n if (dr === 0 && dc === 0) {\n return [{row: startRow, col: startCol}];\n }\n \n let dirRow, dirCol, length;\n const absDr = Math.abs(dr);\n const absDc = Math.abs(dc);\n \n if (absDc > absDr * 2) {\n // Horizontal\n dirRow = 0;\n dirCol = Math.sign(dc);\n length = absDc;\n } else if (absDr > absDc * 2) {\n // Vertical\n dirRow = Math.sign(dr);\n dirCol = 0;\n length = absDr;\n } else {\n // Diagonal\n dirRow = Math.sign(dr);\n dirCol = Math.sign(dc);\n length = Math.max(absDr, absDc);\n }\n \n const cells = [];\n for (let i = 0; i <= length; i++) {\n const r = startRow + i * dirRow;\n const c = startCol + i * dirCol;\n if (r >= 0 && r < GRID_SIZE && c >= 0 && c < GRID_SIZE) {\n cells.push({row: r, col: c});\n } else {\n break;\n }\n }\n return cells;\n}\n```\n\nFor word placement, I'll try random positions until success:\n\n```javascript\nfunction placeWord(grid, word) {\n const directions = [\n [0, 1], [0, -1], [1, 0], [-1, 0],\n [1, 1], [1, -1], [-1, 1], [-1, -1]\n ];\n \n for (let attempt = 0; attempt < 200; attempt++) {\n const dir = directions[Math.floor(Math.random() * directions.length)];\n const startRow = Math.floor(Math.random() * GRID_SIZE);\n const startCol = Math.floor(Math.random() * GRID_SIZE);\n \n // Check if word fits\n const endRow = startRow + (word.length - 1) * dir[0];\n const endCol = startCol + (word.length - 1) * dir[1];\n if (endRow < 0 || endRow >= GRID_SIZE || endCol < 0 || endCol >= GRID_SIZE) continue;\n \n // Check for conflicts\n let canPlace = true;\n for (let i = 0; i < word.length; i++) {\n const r = startRow + i * dir[0];\n const c = startCol + i * dir[1];\n if (grid[r][c] !== '' && grid[r][c] !== word[i]) {\n canPlace = false;\n break;\n }\n }\n \n if (canPlace) {\n for (let i = 0; i < word.length; i++) {\n const r = startRow + i * dir[0];\n const c = startCol + i * dir[1];\n grid[r][c] = word[i];\n }\n return true;\n }\n }\n return false;\n}\n```\n\nNow let me think about visual styling. I'll use a dark space-themed design with:\n- Deep navy/purple background\n- Glowing accents\n- The grid cells with subtle borders\n- Found words highlighted with colored backgrounds\n- Selection in a contrasting color\n\nLet me write the full code now. I'll make sure it's all self-contained.\n\nLet me also add some nice features:\n- Animation when word is found\n- Sound-like visual feedback (flash)\n- Counter\n- Maybe timer\n- Hint button\n\nLet me draft the full HTML:\n\n```html\n\n\n\n\n\nWord Search — Cosmic Edition\n\n\n\n

COSMIC WORD SEARCH

Click and drag to find words hidden in any direction

\n \n

STELLAR!

You found all the words!

\n \n

\n \n \n\n\n```\n\nWait, I need to track word positions for the hint to work without searching. But actually, searching through the grid is fine, and it doesn't take much time. Let me keep it as is.\n\nHmm, actually the hint should find the position when the word was placed. But since I'm searching the grid it's fine. Although, there's a small issue: if a word happens to appear multiple times (once as the actual placed word, and once by chance from random fill), it might find the wrong one. But it doesn't really matter for a hint - any valid location works.\n\nWait, there's an issue with my word placement: when checking for conflicts, I allow overlaps with the same letter. This means a word might be placed overlapping with another word at shared letters. This is fine for word search but means a \"word\" might be discoverable via different cell paths. When checking selection, I just compare letters to the word - if letters match, it counts. So that should be fine.\n\nLet me reconsider the selection snapping. With my current logic:\n- If |dx| > |dy| * 2: horizontal\n- If |dy| > |dx| * 2: vertical \n- Else: diagonal\n\nBut this might be too aggressive in forcing diagonal. Let me think...\n\nActually, when the user drags from (0,0) to (3,2), they want diagonal (since it's roughly diagonal). absDr=3, absDc=2. absDc > absDr * 2 = 2 > 6 = false. absDr > absDc * 2 = 3 > 4 = false. So diagonal. Good.\n\nFrom (0,0) to (5,1): absDr=1, absDc=5. absDc > absDr * 2 = 5 > 2 = true. Horizontal. Good.\n\nFrom (0,0) to (1,5): absDr=1, absDc=5. absDc > absDr * 2 = 5 > 2 = true. Horizontal. Good.\n\nFrom (0,0) to (5,2): absDr=5, absDc=2. absDc > absDr * 2 = 2 > 10 = false. absDr > absDc * 2 = 5 > 4 = true. Vertical. Good.\n\nHmm, from (0,0) to (3,1): absDr=1, absDc=3. absDc > absDr * 2 = 3 > 2 = true. Horizontal. So this would snap to horizontal, which means highlighting cells (0,0), (0,1), (0,2), (0,3) - going right. But the user dragged to row 3, so they wanted to go down? Wait, I had dr and dc swapped! Let me check.\n\nOh wait, I have dr = endRow - startRow, dc = endCol - startCol. And absDr corresponds to rows, absDc to columns. So:\n- (0,0) to (3,1): dr = 3, dc = 1. absDr = 3, absDc = 1.\n- absDc > absDr * 2 = 1 > 6 = false.\n- absDr > absDc * 2 = 3 > 2 = true. Vertical. Good!\n\nOK so my logic is right. The variable names are a bit confusing but the logic is correct.\n\nLet me verify once more. (0,0) to (3,2): dr=3, dc=2. absDr=3, absDc=2.\n- absDc > absDr * 2: 2 > 6 = false\n- absDr > absDc * 2: 3 > 4 = false\n- So diagonal. dir = (1, 1), length = 3. Cells: (0,0), (1,1), (2,2), (3,3). But user dragged to (3,2)! That's fine, we snap to diagonal.\n\n(0,0) to (5,2): dr=5, dc=2. absDr=5, absDc=2.\n- absDc > absDr * 2: 2 > 10 = false\n- absDr > absDc * 2: 5 > 4 = true. Vertical. dir = (1, 0), length = 5. Cells: (0,0) to (5,0). User dragged to (5,2) which is roughly vertical, so snap to vertical. OK.\n\nLooks reasonable. Let me also handle when the user releases on the start cell - just clear selection without checking.\n\nI think my checkSelection does that since length 1 returns early.\n\nLet me also think about preventing text selection during drag. I have user-select: none on the grid, which should handle that.\n\nLet me also think about edge cases:\n- What if user clicks on a cell, releases without moving? Single cell, no word match, clears. Good.\n- What if user starts on a found cell? It still works - they can reselect the same word but it's already in foundWords so checkSelection won't double-count. Actually wait, my code checks `!foundWords.has(letters)` so it won't double-count, but the visual .found class won't be removed since I never remove it. Good.\n\nLet me think about the hint feature more. When I search for the word's location, I need to find where I placed it. But I'm searching through all positions and directions, so I'll find a valid location. Good.\n\nActually, let me store the placement info when placing words, so I don't have to search again:\n\n```javascript\nlet wordPositions = {}; // word -> {startRow, startCol, dir}\n\nfunction placeWord(word) {\n // ... \n if (canPlace) {\n for (let i = 0; i < word.length; i++) {\n const r = startRow + i * dir[0];\n const c = startCol + i * dir[1];\n grid[r][c] = word[i];\n }\n wordPositions[word] = {startRow, startCol, dir};\n return true;\n }\n}\n```\n\nThen in hint:\n```javascript\nconst pos = wordPositions[word];\nconst cell = cellElements[pos.startRow][pos.startCol];\ncell.classList.add('hint');\n```\n\nBetter. Let me update the code.\n\nAlso, I want to add a subtle pulse animation for the hint - make the first letter glow.\n\nLet me also reconsider the styling. I want the grid to look clean and the cells to be clearly visible. Let me also ensure the letters are easily readable.\n\nOne more thing: I should make the grid display well on smaller screens. The grid-template-columns: repeat(20, 1fr) with aspect-ratio: 1 should keep it square. But the font might be too small. I have font-size: clamp(10px, 1.2vw, 18px) which should adapt.\n\nLet me put it all together and finalize.\n\nActually, I realize I want to also add some visual polish:\n- A subtle gradient or glow on found cells based on which word it was\n- A more pronounced selection effect\n\nLet me add multiple \"found\" colors that cycle through. Each found word gets a different color from a palette.\n\nActually that gets complex with overlapping words. Let me keep it simple - all found cells get the same green color, but if a cell is part of multiple found words, it stays green. That's fine.\n\nHmm wait, what if the same cell is part of two different words that aren't both found yet? When user finds one, that cell turns green. Then if they want to find the other word that includes this cell, the cell is still green (good for indicating found). They can still drag over it.\n\nOK let me also think about adding a \"Reveal All\" button for after the game is won or for those who give up. Actually, the hint button is sufficient.\n\nLet me finalize the code and write it out cleanly.\n\nOne more thought: I should also prevent the user from accidentally triggering browser drag behavior or text selection. I have user-select: none on the grid, which should handle that.\n\nLet me also make the win message more interesting - show how many hints used or something. Actually, let me keep it simple.\n\nLet me also add keyboard support? Maybe not necessary. Mouse/touch is fine for word search.\n\nLet me write the final version:\n\nActually, I realize I want to ensure responsive sizing. Let me also check that the grid takes up appropriate space on screen. I'll set a max-width on the grid wrapper.\n\nI think I'm overthinking this. Let me just write the final version and test mentally.\n\nFinal code:\n\n```html\n\n\n\n\n\nWord Search — Cosmic Edition\n\n\n\n ...\n\n\n```\n\nLet me also think about whether I should use a CDN for a font like Orbitron for the space theme. I'll use Google Fonts.\n\nActually, including external resources is fine for iframe rendering. Let me use:\n- Orbitron for the title (very space-y)\n- A clean readable font for the body and grid\n\n```html\n\n```\n\nOK let me finalize this. I think the code is good. Let me write it out properly now.\n\nWait, one more issue: when the user clicks on a single cell (no drag), selectionCells has 1 cell. checkSelection returns early since length < 2. That's fine, but I should also handle the case where selectionStart is the same as endCell - that's the case of single click.\n\nActually I think it's all handled. Let me write the final version.\n\nLet me also add a small detail: when the user successfully finds a word, the found word's list item should have a satisfying animation - like a checkmark appearing.\n\nI'll keep the strikethrough and color change, which is sufficient feedback.\n\nLet me write out the final HTML now. I'll be thorough and make sure everything works.\n\nActually I realize there's one more thing I want to add: when the game is completed, show a celebration animation. Maybe confetti? Or just a nice message. Let me keep it simple with the win message.\n\nOK here's the final code. Let me make sure the JavaScript is solid:\n\n1. Initialize grid\n2. Place words (longer words first)\n3. Fill empty cells with random letters\n4. Render grid with cells\n5. Handle mouse/touch for selection\n6. Check selection against word list\n7. Mark found cells and update word list\n8. Win when all words found\n\nLet me finalize:\n\n```javascript\n// Pseudocode for final structure\n\nconst GRID_SIZE = 20;\nconst WORDS = [...];\n\nlet grid = [];\nlet placedWords = [];\nlet wordPositions = {};\nlet foundWords = new Set();\nlet isSelecting = false;\nlet selectionStart = null;\nlet selectionCells = [];\nlet cellElements = [];\n\n// DOM refs\nconst gridEl, wordListEl, foundCountEl, totalCountEl\n\nfunction initGrid() { ... }\nfunction placeWord(word) { ... }\nfunction renderGrid() { ... }\nfunction renderWordList() { ... }\nfunction updateStats() { ... }\nfunction handleMouseDown(r, c) { ... }\nfunction handleMouseEnter(r, c) { ... }\nfunction handleMouseUp() { ... }\nfunction getSelectionCells(start, end) { ... }\nfunction updateSelectionDisplay() { ... }\nfunction clearSelection() { ... }\nfunction checkSelection() { ... }\nfunction showWin() { ... }\nfunction giveHint() { ... }\n\n// Event listeners\ndocument.addEventListener('mouseup', handleMouseUp);\nnewGameBtn.addEventListener('click', initGrid);\nhintBtn.addEventListener('click', giveHint);\nplayAgainBtn.addEventListener('click', () => { hideWin(); initGrid(); });\n\ninitGrid();\n```\n\nI think this is comprehensive. Let me write the final HTML now.\n\nOne thing I want to fix: I'm using `document.querySelectorAll('.cell.selecting')` which is fine but a bit slow. For better performance I could track the currently selected cells in an array. But for a 20x20 grid it's fine.\n\nOK writing the final version now.\n\nFor the hint, I want to make it pulse a glow color. Let me add a CSS class .hint that animates. Already did that with hintPulse.\n\nLet me also consider: the user might want to know which direction words can go. I'll mention in the subtitle: \"Words can be horizontal, vertical, or diagonal — and may be backwards!\"\n\nLet me make sure the code is fully self-contained and works in an iframe. The fonts loaded from Google Fonts CDN should work.\n\nLet me write it all out:","reasoning_details":[{"type":"reasoning.text","text":"The user wants me to create a 20x20 word search game with interactive functionality. Let me think about this carefully.\n\nI need to:\n1. Create a 20x20 grid\n2. Place some words in it (horizontally, vertically, diagonally, possibly backwards)\n3. Fill remaining cells with random letters\n4. Provide a list of words to find\n5. Allow the user to click/select letters to find words\n6. Detect when a word is found\n7. Hide found words from the list\n\nLet me design this as a beautiful, interactive word search game. I'll make it visually appealing with a nice color scheme.\n\nLet me plan the implementation:\n\n**Word List**: I'll pick a theme - maybe \"Space\" or \"Animals\" or a mix. Let me go with a mix of common words that fit in 20 letters max.\n\nWords (let me pick around 12-15 words):\n- GALAXY (6)\n- NEBULA (6)\n- COMET (5)\n- PLANET (6)\n- METEOR (6)\n- ROCKET (6)\n- ORBIT (5)\n- STAR (4)\n- MOON (4)\n- SUN (3)\n- ASTEROID (8)\n- SATURN (6)\n- JUPITER (7)\n- VENUS (5)\n- MARS (4)\n- COSMOS (6)\n- ASTRONAUT (9)\n- TELESCOPE (9)\n- GRAVITY (7)\n- SUPERNOVA (9)\n\nLet me pick a good set that fits:\n- GALAXY\n- NEBULA\n- COMET\n- PLANET\n- METEOR\n- ROCKET\n- ORBIT\n- ASTEROID\n- SATURN\n- JUPITER\n- VENUS\n- COSMOS\n- ASTRONAUT\n- TELESCOPE\n- GRAVITY\n\n**Algorithm**:\n1. Create empty 20x20 grid\n2. For each word, try random positions and directions until it fits without conflicts\n3. Fill empty cells with random letters\n\n**Directions** (8 directions):\n- Right (0, 1)\n- Left (0, -1)\n- Down (1, 0)\n- Up (-1, 0)\n- Down-Right (1, 1)\n- Down-Left (1, -1)\n- Up-Right (-1, 1)\n- Up-Left (-1, -1)\n\n**Interaction**:\n- Click and drag to select letters\n- Show selection as you drag\n- On release, check if selected letters form a word\n- If yes, mark as found\n- If no, clear selection\n\nLet me implement this with mouse events. I'll track mouse down on a cell, then drag to select, snap to valid line directions.\n\nActually, a simpler approach:\n- Mouse down on cell -> start selection\n- Mouse move -> calculate the direction from start to current cell, snap to nearest of 8 directions, highlight cells along that line\n- Mouse up -> check if highlighted letters form a word from the list\n\nLet me code this up.\n\nI'll also add:\n- A list of words to find on the side\n- A counter of found words\n- A \"New Game\" button\n- Maybe a hint button that reveals one word\n\nLet me write the HTML with embedded CSS and JS:\n\n```html\n\n\n\n\nWord Search - Space Edition\n\n\n\n

Word Search

Find all the hidden words

\n \n

COSMIC WORD SEARCH

Click and drag to find words hidden in any direction

\n \n

STELLAR!

You found all the words!

\n \n

\n \n \n\n\n```\n\nWait, I need to track word positions for the hint to work without searching. But actually, searching through the grid is fine, and it doesn't take much time. Let me keep it as is.\n\nHmm, actually the hint should find the position when the word was placed. But since I'm searching the grid it's fine. Although, there's a small issue: if a word happens to appear multiple times (once as the actual placed word, and once by chance from random fill), it might find the wrong one. But it doesn't really matter for a hint - any valid location works.\n\nWait, there's an issue with my word placement: when checking for conflicts, I allow overlaps with the same letter. This means a word might be placed overlapping with another word at shared letters. This is fine for word search but means a \"word\" might be discoverable via different cell paths. When checking selection, I just compare letters to the word - if letters match, it counts. So that should be fine.\n\nLet me reconsider the selection snapping. With my current logic:\n- If |dx| > |dy| * 2: horizontal\n- If |dy| > |dx| * 2: vertical \n- Else: diagonal\n\nBut this might be too aggressive in forcing diagonal. Let me think...\n\nActually, when the user drags from (0,0) to (3,2), they want diagonal (since it's roughly diagonal). absDr=3, absDc=2. absDc > absDr * 2 = 2 > 6 = false. absDr > absDc * 2 = 3 > 4 = false. So diagonal. Good.\n\nFrom (0,0) to (5,1): absDr=1, absDc=5. absDc > absDr * 2 = 5 > 2 = true. Horizontal. Good.\n\nFrom (0,0) to (1,5): absDr=1, absDc=5. absDc > absDr * 2 = 5 > 2 = true. Horizontal. Good.\n\nFrom (0,0) to (5,2): absDr=5, absDc=2. absDc > absDr * 2 = 2 > 10 = false. absDr > absDc * 2 = 5 > 4 = true. Vertical. Good.\n\nHmm, from (0,0) to (3,1): absDr=1, absDc=3. absDc > absDr * 2 = 3 > 2 = true. Horizontal. So this would snap to horizontal, which means highlighting cells (0,0), (0,1), (0,2), (0,3) - going right. But the user dragged to row 3, so they wanted to go down? Wait, I had dr and dc swapped! Let me check.\n\nOh wait, I have dr = endRow - startRow, dc = endCol - startCol. And absDr corresponds to rows, absDc to columns. So:\n- (0,0) to (3,1): dr = 3, dc = 1. absDr = 3, absDc = 1.\n- absDc > absDr * 2 = 1 > 6 = false.\n- absDr > absDc * 2 = 3 > 2 = true. Vertical. Good!\n\nOK so my logic is right. The variable names are a bit confusing but the logic is correct.\n\nLet me verify once more. (0,0) to (3,2): dr=3, dc=2. absDr=3, absDc=2.\n- absDc > absDr * 2: 2 > 6 = false\n- absDr > absDc * 2: 3 > 4 = false\n- So diagonal. dir = (1, 1), length = 3. Cells: (0,0), (1,1), (2,2), (3,3). But user dragged to (3,2)! That's fine, we snap to diagonal.\n\n(0,0) to (5,2): dr=5, dc=2. absDr=5, absDc=2.\n- absDc > absDr * 2: 2 > 10 = false\n- absDr > absDc * 2: 5 > 4 = true. Vertical. dir = (1, 0), length = 5. Cells: (0,0) to (5,0). User dragged to (5,2) which is roughly vertical, so snap to vertical. OK.\n\nLooks reasonable. Let me also handle when the user releases on the start cell - just clear selection without checking.\n\nI think my checkSelection does that since length 1 returns early.\n\nLet me also think about preventing text selection during drag. I have user-select: none on the grid, which should handle that.\n\nLet me also think about edge cases:\n- What if user clicks on a cell, releases without moving? Single cell, no word match, clears. Good.\n- What if user starts on a found cell? It still works - they can reselect the same word but it's already in foundWords so checkSelection won't double-count. Actually wait, my code checks `!foundWords.has(letters)` so it won't double-count, but the visual .found class won't be removed since I never remove it. Good.\n\nLet me think about the hint feature more. When I search for the word's location, I need to find where I placed it. But I'm searching through all positions and directions, so I'll find a valid location. Good.\n\nActually, let me store the placement info when placing words, so I don't have to search again:\n\n```javascript\nlet wordPositions = {}; // word -> {startRow, startCol, dir}\n\nfunction placeWord(word) {\n // ... \n if (canPlace) {\n for (let i = 0; i < word.length; i++) {\n const r = startRow + i * dir[0];\n const c = startCol + i * dir[1];\n grid[r][c] = word[i];\n }\n wordPositions[word] = {startRow, startCol, dir};\n return true;\n }\n}\n```\n\nThen in hint:\n```javascript\nconst pos = wordPositions[word];\nconst cell = cellElements[pos.startRow][pos.startCol];\ncell.classList.add('hint');\n```\n\nBetter. Let me update the code.\n\nAlso, I want to add a subtle pulse animation for the hint - make the first letter glow.\n\nLet me also reconsider the styling. I want the grid to look clean and the cells to be clearly visible. Let me also ensure the letters are easily readable.\n\nOne more thing: I should make the grid display well on smaller screens. The grid-template-columns: repeat(20, 1fr) with aspect-ratio: 1 should keep it square. But the font might be too small. I have font-size: clamp(10px, 1.2vw, 18px) which should adapt.\n\nLet me put it all together and finalize.\n\nActually, I realize I want to also add some visual polish:\n- A subtle gradient or glow on found cells based on which word it was\n- A more pronounced selection effect\n\nLet me add multiple \"found\" colors that cycle through. Each found word gets a different color from a palette.\n\nActually that gets complex with overlapping words. Let me keep it simple - all found cells get the same green color, but if a cell is part of multiple found words, it stays green. That's fine.\n\nHmm wait, what if the same cell is part of two different words that aren't both found yet? When user finds one, that cell turns green. Then if they want to find the other word that includes this cell, the cell is still green (good for indicating found). They can still drag over it.\n\nOK let me also think about adding a \"Reveal All\" button for after the game is won or for those who give up. Actually, the hint button is sufficient.\n\nLet me finalize the code and write it out cleanly.\n\nOne more thought: I should also prevent the user from accidentally triggering browser drag behavior or text selection. I have user-select: none on the grid, which should handle that.\n\nLet me also make the win message more interesting - show how many hints used or something. Actually, let me keep it simple.\n\nLet me also add keyboard support? Maybe not necessary. Mouse/touch is fine for word search.\n\nLet me write the final version:\n\nActually, I realize I want to ensure responsive sizing. Let me also check that the grid takes up appropriate space on screen. I'll set a max-width on the grid wrapper.\n\nI think I'm overthinking this. Let me just write the final version and test mentally.\n\nFinal code:\n\n```html\n\n\n\n\n\nWord Search — Cosmic Edition\n\n\n\n ...\n\n\n```\n\nLet me also think about whether I should use a CDN for a font like Orbitron for the space theme. I'll use Google Fonts.\n\nActually, including external resources is fine for iframe rendering. Let me use:\n- Orbitron for the title (very space-y)\n- A clean readable font for the body and grid\n\n```html\n\n```\n\nOK let me finalize this. I think the code is good. Let me write it out properly now.\n\nWait, one more issue: when the user clicks on a single cell (no drag), selectionCells has 1 cell. checkSelection returns early since length < 2. That's fine, but I should also handle the case where selectionStart is the same as endCell - that's the case of single click.\n\nActually I think it's all handled. Let me write the final version.\n\nLet me also add a small detail: when the user successfully finds a word, the found word's list item should have a satisfying animation - like a checkmark appearing.\n\nI'll keep the strikethrough and color change, which is sufficient feedback.\n\nLet me write out the final HTML now. I'll be thorough and make sure everything works.\n\nActually I realize there's one more thing I want to add: when the game is completed, show a celebration animation. Maybe confetti? Or just a nice message. Let me keep it simple with the win message.\n\nOK here's the final code. Let me make sure the JavaScript is solid:\n\n1. Initialize grid\n2. Place words (longer words first)\n3. Fill empty cells with random letters\n4. Render grid with cells\n5. Handle mouse/touch for selection\n6. Check selection against word list\n7. Mark found cells and update word list\n8. Win when all words found\n\nLet me finalize:\n\n```javascript\n// Pseudocode for final structure\n\nconst GRID_SIZE = 20;\nconst WORDS = [...];\n\nlet grid = [];\nlet placedWords = [];\nlet wordPositions = {};\nlet foundWords = new Set();\nlet isSelecting = false;\nlet selectionStart = null;\nlet selectionCells = [];\nlet cellElements = [];\n\n// DOM refs\nconst gridEl, wordListEl, foundCountEl, totalCountEl\n\nfunction initGrid() { ... }\nfunction placeWord(word) { ... }\nfunction renderGrid() { ... }\nfunction renderWordList() { ... }\nfunction updateStats() { ... }\nfunction handleMouseDown(r, c) { ... }\nfunction handleMouseEnter(r, c) { ... }\nfunction handleMouseUp() { ... }\nfunction getSelectionCells(start, end) { ... }\nfunction updateSelectionDisplay() { ... }\nfunction clearSelection() { ... }\nfunction checkSelection() { ... }\nfunction showWin() { ... }\nfunction giveHint() { ... }\n\n// Event listeners\ndocument.addEventListener('mouseup', handleMouseUp);\nnewGameBtn.addEventListener('click', initGrid);\nhintBtn.addEventListener('click', giveHint);\nplayAgainBtn.addEventListener('click', () => { hideWin(); initGrid(); });\n\ninitGrid();\n```\n\nI think this is comprehensive. Let me write the final HTML now.\n\nOne thing I want to fix: I'm using `document.querySelectorAll('.cell.selecting')` which is fine but a bit slow. For better performance I could track the currently selected cells in an array. But for a 20x20 grid it's fine.\n\nOK writing the final version now.\n\nFor the hint, I want to make it pulse a glow color. Let me add a CSS class .hint that animates. Already did that with hintPulse.\n\nLet me also consider: the user might want to know which direction words can go. I'll mention in the subtitle: \"Words can be horizontal, vertical, or diagonal — and may be backwards!\"\n\nLet me make sure the code is fully self-contained and works in an iframe. The fonts loaded from Google Fonts CDN should work.\n\nLet me write it all out:","format":"unknown","index":0}]},"native_finish_reason":"stop"}],"created":1784378681,"model":"z-ai/glm-5.2","object":"chat.completion","service_tier":null,"system_fingerprint":"vllm-0.23.0-dp8-ep-d5cbe26d","usage":{"completion_tokens":16125,"prompt_tokens":94,"total_tokens":16219,"completion_tokens_details":{"accepted_prediction_tokens":null,"audio_tokens":0,"reasoning_tokens":9108,"rejected_prediction_tokens":null,"image_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0,"cache_write_tokens":0,"video_tokens":0},"cost":0.04685086,"is_byok":false,"cost_details":{"upstream_inference_cost":0.04685086,"upstream_inference_prompt_cost":0.00008836,"upstream_inference_completions_cost":0.0467625}},"provider":"Inceptron"}

Generate a 20x20 word search game and also the ability to fi...