Mathew Sir Guest the bestandClaude Opus 4.6
9319f08875
- Move word data from hardcoded seed.py to data/words.json - Expand from 210 words across 7 categories to 1014 words across 14 categories (animals, food, colors, sports, space, nature, music, science, countries, occupations, ocean, weather, mythology, technology) - Word list sidebar now shows title case (Tiger) while grid stays uppercase; text input remains case-insensitive - Add Ocean theme (light, blue accents) and Forest theme (dark, amber accents on deep green) - Replace hardcoded rgba values with --coral-bg CSS variable so selection highlighting adapts per theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
116 lines
4.3 KiB
HTML
116 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block active_page %}{% set active_page = "play" %}{% end %}
|
|
|
|
{% 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 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="player-name" class="form-label">Player Name</label>
|
|
<input type="text" id="player-name" class="form-control"
|
|
placeholder="Anonymous" maxlength="20"
|
|
autocomplete="off">
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-md-3">
|
|
<label for="category-select" class="form-label">Category</label>
|
|
<select id="category-select" class="form-select"></select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<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-3">
|
|
<label for="word-count" class="form-label">
|
|
Word Count: <span id="word-count-display">8</span>
|
|
</label>
|
|
<input type="range" id="word-count" class="form-range"
|
|
min="3" max="30" value="8">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<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="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 %}
|