{
  "id": "tic-tac-toe",
  "name": "Tic Tac Toe",
  "category": "gaming",
  "tags": ["game", "tic-tac-toe", "puzzle", "two-player", "classic"],
  "description": "Classic tic-tac-toe with win detection, score tracking, and reset.",
  "triggers": ["tic tac toe", "tic-tac-toe", "noughts and crosses", "x and o", "play tic tac toe"],
  "defaultSize": { "w": 4, "h": 5 },
  "source": "function TicTacToe() {\n  const [board, setBoard] = React.useState(Array(9).fill(null));\n  const [xTurn, setXTurn] = React.useState(true);\n  const [scores, setScores] = React.useState({X:0,O:0,draw:0});\n\n  const winner = (()=>{\n    const lines=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];\n    for(const [a,b,c] of lines)if(board[a]&&board[a]===board[b]&&board[a]===board[c])return board[a];\n    return board.every(Boolean)?'draw':null;\n  })();\n\n  const click = (i)=>{\n    if(board[i]||winner)return;\n    const b=[...board];b[i]=xTurn?'X':'O';setBoard(b);setXTurn(!xTurn);\n  };\n\n  const reset = ()=>{\n    if(winner==='draw')setScores(s=>({...s,draw:s.draw+1}));\n    else if(winner)setScores(s=>({...s,[winner]:s[winner]+1}));\n    setBoard(Array(9).fill(null));setXTurn(true);\n  };\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column',alignItems:'center'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:8}}>Tic Tac Toe</div>\n      <div style={{fontSize:14,color:'#888',marginBottom:12}}>\n        {winner?(winner==='draw'?'Draw!':`Winner: ${winner}!`):`${xTurn?'X':'O'}'s turn`}\n      </div>\n      <div style={{display:'grid',gridTemplateColumns:'repeat(3,60px)',gap:4,marginBottom:16}}>\n        {board.map((cell,i)=> (\n          <button key={i} onClick={()=>click(i)}\n            style={{width:60,height:60,fontSize:24,fontWeight:700,borderRadius:8,border:'1px solid #ccc',background:cell==='X'?'#007AFF15':cell==='O'?'#FF3B3015':'#fff',color:cell==='X'?'#007AFF':'#FF3B30',cursor:'pointer'}}>\n            {cell}\n          </button>\n        ))}\n      </div>\n      <button onClick={reset}\n        style={{padding:'8px 20px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer',marginBottom:12}}>\n        {winner?'Play Again':'Reset'}\n      </button>\n      <div style={{display:'flex',gap:16,fontSize:13}}>\n        <span style={{color:'#007AFF',fontWeight:600}}>X: {scores.X}</span>\n        <span style={{color:'#888'}}>Draw: {scores.draw}</span>\n        <span style={{color:'#FF3B30',fontWeight:600}}>O: {scores.O}</span>\n      </div>\n    </div>\n  );\n}\nrender(<TicTacToe/>);",
  "placeholders": []
}