feat: add game page frontend with grid, word list, timer, and dual input
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>
This commit is contained in:
Mathew Sir Guest the best
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
a65be26311
commit
2ee8afe582
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Word Search{% end %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/1WR6zNiELmFp5mGg7gCjSP54e0TpoS"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="{{ static_url('css/theme.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">Word Search</a>
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/game">Play</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/howtoplay">How to Play</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container py-4">
|
||||
{% block content %}{% end %}
|
||||
</main>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Word Search — Home{% end %}
|
||||
|
||||
{% block content %}
|
||||
<div class="text-center py-5">
|
||||
<h1 class="display-4 fw-bold mb-3">Word Search</h1>
|
||||
<p class="lead mb-4">
|
||||
Find hidden words in a grid of letters. Words can appear horizontally,
|
||||
vertically, or diagonally. How fast can you find them all?
|
||||
</p>
|
||||
<a href="/game" class="btn btn-accent btn-lg px-5">Start Game</a>
|
||||
</div>
|
||||
{% end %}
|
||||
Reference in New Issue
Block a user