Tic Tac Toe HTML
<body>
<div class="stage">
<div class="container" role="main" aria-label="Tic Tac Toe game">
<header>
<h1>Tic Tac Toe</h1>
<div class="controls">
<div class="options small" aria-hidden>
<label>
<input type="radio" name="mode" id="modeHuman" checked /> Human vs Human
</label>
<label style="margin-left:8px">
<input type="radio" name="mode" id="modeComputer" /> Human vs Computer (you = X)
</label>
</div>
<button id="reset-button" class="btn">Reset</button>
</div>
<button id="historyBtn" title="Show history">History</button>
</header>
<div class="status" id="status">X's turn</div>
<div class="score-container">
<div class="score x-score">
<h3>X</h3>
<p id="x-score">0</p>
</div>
<div class="score ties">
<h3>Ties</h3>
<p id="ties">0</p>
</div>
<div class="score o-score">
<h3>O</h3>
<p id="o-score">0</p>
</div>
</div>
<div class="board-wrap">
<div class="board" id="board" role="grid" aria-label="tic tac toe board">
<!-- 9 cells -->
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
</div>
<footer><small>The game was created with AI help — now with local assistant (no API).</small></footer>
</div>
<!-- History modal -->
<div class="overlay" id="overlay">
<div class="panel" role="dialog" aria-modal="true" aria-labelledby="history-title">
<h3 id="history-title">Game History & Streak</h3>
<div class="history-list" id="historyList"></div>
<div style="margin-top:12px; display:flex; gap:8px; justify-content:flex-end">
<button id="clearHistory" class="btn">Clear</button>
<button id="closeHistory" class="btn">Close</button>
</div>
</div>
</div>
<!-- Congrats overlay -->
<div class="congrats" id="congrats">
<div class="congrats-card" id="congratsCard">
<h2 id="congratsTitle">Congratulations!</h2>
<p id="congratsName" style="font-weight:900;font-size:1.8rem;margin-top:6px">Player X</p>
</div>
</div>
<!-- Assistant floating button + panel -->
<div class="assistant-toggle" id="assistantToggle" title="Open Assistant">AI</div>
<div class="assistant-panel" id="assistantPanel" role="dialog" aria-label="Local assistant">
<div class="assistant-header">
<div><strong>Project Assistant</strong><div style="font-size:.8rem;opacity:.85">Local — no API</div></div>
<div style="display:flex;gap:8px;align-items:center">
<button id="saveKbBtn" class="btn" style="background:#2563eb">Save KB</button>
<button id="closeAssistant" class="btn">Close</button>
</div>
</div>
<div class="assistant-body" id="assistantBody"></div>
<div class="assistant-input">
<input id="assistantInput" placeholder="Ask about the project, the game, or gameplay..." style="flex:1;padding:10px;border-radius:8px;border:1px solid #e6eef8" />
<button id="askBtn" class="btn">Ask</button>
<button id="teachQuick" class="btn" title="Quick teach from last question">Teach</button>
</div>
</div>
Public Last updated: 2026-08-25 08:36:36 AM