Mathew Sir Guest the bestandClaude Opus 4.6
2ee8afe582
Recreates base.html and main.html templates (lost during reset). Adds game.html with setup UI (category picker, board size slider), interactive grid table, word list sidebar, text input, click-to-select, timer, and completion banner. Adds game.js for all frontend logic. Extends theme.css with game grid and form control styles using the indigo/coral palette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
105 lines
3.8 KiB
HTML
105 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Word Search — Play{% end %}
|
|
|
|
{% block content %}
|
|
<!-- Game Setup -->
|
|
<div id="game-setup">
|
|
<h2 class="mb-4">New Game</h2>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-md-4">
|
|
<label for="category-select" class="form-label">Category</label>
|
|
<select id="category-select" class="form-select"></select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="board-size" class="form-label">
|
|
Board Size: <span id="size-display">10</span>
|
|
</label>
|
|
<input type="range" id="board-size" class="form-range"
|
|
min="8" max="20" value="10">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button id="new-game-btn" class="btn btn-accent btn-lg w-100">
|
|
Start Game
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Board -->
|
|
<div id="game-board" class="d-none">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2 class="mb-0">Word Search</h2>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span id="timer" class="badge bg-dark fs-6">0:00</span>
|
|
<button id="play-again-btn" class="btn btn-outline-light btn-sm d-none">
|
|
Play Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Banner -->
|
|
<div id="completion-banner" class="alert alert-success d-none" role="alert">
|
|
<strong>Congratulations!</strong> You found all the words in
|
|
<span id="final-time"></span>!
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Grid -->
|
|
<div class="col-lg-8 mb-3">
|
|
<div class="card">
|
|
<div class="card-body p-2">
|
|
<table id="grid-table" class="game-grid mx-auto"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="card mt-3" id="input-area">
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col">
|
|
<input type="text" id="word-input"
|
|
class="form-control"
|
|
placeholder="Type a word..."
|
|
autocomplete="off">
|
|
</div>
|
|
<div class="col-auto">
|
|
<button id="guess-btn" class="btn btn-accent">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button id="submit-selection-btn"
|
|
class="btn btn-outline-light d-none">
|
|
Submit Selection
|
|
</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button id="clear-selection-btn"
|
|
class="btn btn-outline-secondary d-none">
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="guess-feedback" class="mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Word List -->
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">Words to Find</div>
|
|
<ul id="word-list" class="list-group list-group-flush"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ static_url('js/game.js') }}"></script>
|
|
{% end %}
|