mg/wordsearch
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: expand to 1014 words, add title-case display and 2 new themes

Browse Source 
- 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>
This commit is contained in:
Mathew Sir Guest the best
2026-05-07 02:43:43 -06:00
co-authored by Claude Opus 4.6
parent cd1dc9200b
commit 9319f08875
13 changed files with 728 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+19 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +11,13 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
rel="stylesheet">
<link rel="stylesheet" href="{{ static_url('css/theme.css') }}">
<script>
(function() {
var t = localStorage.getItem("ws-theme") || "indigo";
document.documentElement.setAttribute("data-theme", t);
document.documentElement.setAttribute("data-bs-theme", (t === "light" || t === "ocean") ? "light" : "dark");
})();
</script>
</head>
<body>
{% block active_page %}{% end %}
@@ -44,6 +51,12 @@
<i class="bi bi-question-circle"></i> How to Play
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if active_page == 'scoreboard' %}active{% end %}"
href="/scoreboard">
<i class="bi bi-trophy"></i> Scoreboard
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if active_page == 'about' %}active{% end %}"
href="/about">
@@ -51,6 +64,10 @@
</a>
</li>
</ul>
<button id="theme-toggle" class="btn btn-sm btn-outline-secondary ms-2"
title="Switch theme">
<i class="bi bi-moon-stars"></i>
</button>
</div>
</div>
</nav>
@@ -68,5 +85,6 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="{{ static_url('js/theme.js') }}"></script>
</body>
</html>
templates/game.html
+8
View File
@@ -10,6 +10,14 @@
<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>
templates/scoreboard.html
+55
View File
@@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block active_page %}{% set active_page = "scoreboard" %}{% end %}
{% block title %}Word Search — Scoreboard{% end %}
{% block content %}
<h2 class="mb-4"><i class="bi bi-trophy"></i> Scoreboard</h2>
<div id="scoreboard-loading" class="text-center py-4">
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="recent-games-section" class="d-none mb-4">
<h3 class="mb-3"><i class="bi bi-clock-history"></i> Your Recent Games</h3>
<div class="card">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0" id="recent-games-table">
<thead>
<tr>
<th>Category</th>
<th>Player</th>
<th>Time</th>
<th>Board</th>
<th>Words</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div id="popular-section" class="d-none mb-4">
<h3 class="mb-3"><i class="bi bi-fire"></i> Popular Categories</h3>
<div class="row g-3" id="popular-row"></div>
</div>
<div id="leaderboards-section" class="d-none">
<h3 class="mb-3"><i class="bi bi-list-ol"></i> Leaderboards</h3>
<div id="leaderboards-container"></div>
</div>
<div id="scoreboard-empty" class="d-none text-center py-4">
<p class="text-muted fs-5">No completed games yet. Be the first to finish a puzzle!</p>
<a href="/game" class="btn btn-accent">Start a Game</a>
</div>
<script src="{{ static_url('js/scoreboard.js') }}"></script>
{% end %}