diff --git a/web/.github/workflows/ci.yml b/web/.github/workflows/ci.yml
new file mode 100644
index 0000000..b78b2ca
--- /dev/null
+++ b/web/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: CI
+
+on:
+ pull_request:
+ push:
+ branches: [main]
+
+permissions:
+ contents: read
+
+concurrency:
+ group: ci-${{ github.ref }}
+ cancel-in-progress: true
+
+jobs:
+ check:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v7
+
+ - uses: pnpm/action-setup@v6
+
+ - uses: actions/setup-node@v7
+ with:
+ node-version: '24'
+ cache: 'pnpm'
+
+ - run: pnpm install --frozen-lockfile --ignore-scripts
+
+ - run: pnpm test
+
+ - run: pnpm lint
+
+ # No BASE_PATH here: this checks that the app compiles. The base-path
+ # behaviour is verified against a real preview before release.
+ - run: pnpm build
diff --git a/web/.github/workflows/deploy.yml b/web/.github/workflows/deploy.yml
index 9b5e3aa..2929e5c 100644
--- a/web/.github/workflows/deploy.yml
+++ b/web/.github/workflows/deploy.yml
@@ -31,11 +31,11 @@ jobs:
- run: pnpm build
env:
- NEXT_PUBLIC_BASE_PATH: /${{ github.event.repository.name }}
+ BASE_PATH: /${{ github.event.repository.name }}
- uses: actions/upload-pages-artifact@v5
with:
- path: out
+ path: build
deploy:
needs: build
diff --git a/web/.github/workflows/sync-data.yml b/web/.github/workflows/sync-data.yml
index 02c57ed..18341ce 100644
--- a/web/.github/workflows/sync-data.yml
+++ b/web/.github/workflows/sync-data.yml
@@ -29,20 +29,20 @@ jobs:
set -euo pipefail
sha=$(gh api "repos/$SOURCE_REPO/commits/main" --jq .sha)
gh api "repos/$SOURCE_REPO/contents/champions.json?ref=$sha" \
- -H "Accept: application/vnd.github.raw" > public/champions.json
+ -H "Accept: application/vnd.github.raw" > static/champions.json
echo "SOURCE_SHA=${sha:0:7}" >> "$GITHUB_ENV"
- name: Commit if changed
id: commit
run: |
set -euo pipefail
- if git diff --quiet -- public/champions.json; then
- echo "public/champions.json already matches loldle-data@$SOURCE_SHA"
+ if git diff --quiet -- static/champions.json; then
+ echo "static/champions.json already matches loldle-data@$SOURCE_SHA"
exit 0
fi
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
- git add public/champions.json
+ git add static/champions.json
git commit -m "chore(data): sync champions from loldle-data@$SOURCE_SHA"
git push
echo "changed=true" >> "$GITHUB_OUTPUT"
diff --git a/web/.gitignore b/web/.gitignore
index 4b6375c..3db7444 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -18,10 +18,6 @@ chrome-dev-tools
# testing
/coverage
-# next.js
-/.next/
-/out/
-
# sveltekit
/.svelte-kit/
diff --git a/web/README.md b/web/README.md
index 45d5ccd..f78f3e4 100644
--- a/web/README.md
+++ b/web/README.md
@@ -4,6 +4,8 @@ LoLdle-style League of Legends daily champion guessing game — data auto-update
Live: https://tiennm99.github.io/loldle/
+Built with SvelteKit and Svelte 5, styled with Tailwind CSS, and prerendered to a static site deployed on GitHub Pages.
+
## Quick start
```bash
@@ -11,6 +13,18 @@ pnpm install
pnpm dev
```
+## Commands
+
+```bash
+pnpm dev # dev server
+pnpm build # static build into build/
+pnpm preview # serve the production build
+pnpm test # unit tests
+pnpm lint # eslint
+```
+
+Champion data lives in `static/champions.json` and is refreshed weekly by the sync workflow.
+
## License
Apache-2.0 — see [LICENSE](LICENSE).
diff --git a/web/app/globals.css b/web/app/globals.css
deleted file mode 100644
index b4d482e..0000000
--- a/web/app/globals.css
+++ /dev/null
@@ -1,122 +0,0 @@
-@import "tailwindcss";
-
-:root {
- --color-bg: #1a1a2e;
- --color-surface: #16213e;
- --color-surface-hover: #1a2745;
- --color-text: #e0e0e0;
- --color-text-muted: #8a8a9a;
- --color-correct: #4ecb71;
- --color-partial: #f4b35e;
- --color-wrong: #d85b5b;
- --color-header: #2a2a4a;
- --color-input-bg: #0f3460;
- --color-input-border: #533483;
- --color-accent: #533483;
- --cell-size: 90px;
-}
-
-body {
- background: var(--color-bg);
- color: var(--color-text);
- font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
- min-height: 100vh;
-}
-
-/* Guess grid layout */
-.guess-row {
- display: grid;
- grid-template-columns: 130px repeat(7, var(--cell-size));
- gap: 4px;
- margin-bottom: 4px;
- min-width: fit-content;
-}
-
-.guess-cell {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding: 8px 4px;
- border-radius: 4px;
- font-size: 0.8rem;
- font-weight: 500;
- min-height: 56px;
- word-break: break-word;
- animation: cellReveal 0.3s ease forwards;
- opacity: 0;
-}
-
-.header-row {
- margin-bottom: 8px;
-}
-
-.header-cell {
- background: var(--color-header);
- color: var(--color-text-muted);
- font-weight: 600;
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- opacity: 1;
- animation: none;
-}
-
-.champion-cell {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: flex-start;
- padding-left: 8px;
- background: var(--color-surface);
-}
-
-.cell-correct {
- background: var(--color-correct);
- color: #1a1a2e;
-}
-
-.cell-partial {
- background: var(--color-partial);
- color: #1a1a2e;
-}
-
-.cell-wrong {
- background: var(--color-wrong);
- color: #fff;
-}
-
-@keyframes cellReveal {
- from {
- opacity: 0;
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
- :root {
- --cell-size: 72px;
- }
- .guess-row {
- grid-template-columns: 100px repeat(7, var(--cell-size));
- }
- .guess-cell {
- font-size: 0.7rem;
- min-height: 48px;
- padding: 6px 2px;
- }
-}
-
-@media (max-width: 480px) {
- :root {
- --cell-size: 60px;
- }
- .guess-row {
- grid-template-columns: 80px repeat(7, var(--cell-size));
- }
-}
diff --git a/web/app/layout.jsx b/web/app/layout.jsx
deleted file mode 100644
index deabd41..0000000
--- a/web/app/layout.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import "./globals.css";
-
-export const metadata = {
- title: "LoLdle",
- description: "Guess the League of Legends champion",
-};
-
-export default function RootLayout({ children }) {
- return (
-
- {children}
-
- );
-}
diff --git a/web/app/page.jsx b/web/app/page.jsx
deleted file mode 100644
index e650a22..0000000
--- a/web/app/page.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import GameBoard from "@/components/game-board";
-
-export default function Home() {
- return (
-
-
-
-
- );
-}
diff --git a/web/components/champion-search.jsx b/web/components/champion-search.jsx
deleted file mode 100644
index 53fe2d0..0000000
--- a/web/components/champion-search.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import Image from "next/image";
-import { searchChampions, getChampionImageUrl } from "@/lib/champion-data";
-
-/** Autocomplete search input for champion selection */
-export default function ChampionSearch({ excludeNames, onSelect, disabled }) {
- const [query, setQuery] = useState("");
- const [activeIndex, setActiveIndex] = useState(-1);
- const [isOpen, setIsOpen] = useState(false);
- const inputRef = useRef(null);
- const dropdownRef = useRef(null);
-
- // Derive matches from query
- const matches = useMemo(() => {
- if (!query.trim()) return [];
- return searchChampions(query, excludeNames);
- }, [query, excludeNames]);
-
- // Derive dropdown open state from matches (no effect needed)
- const isVisible = isOpen && matches.length > 0;
-
- // Close dropdown on outside click
- useEffect(() => {
- function handleClick(e) {
- if (
- inputRef.current &&
- !inputRef.current.contains(e.target) &&
- dropdownRef.current &&
- !dropdownRef.current.contains(e.target)
- ) {
- setIsOpen(false);
- }
- }
- document.addEventListener("mousedown", handleClick);
- return () => document.removeEventListener("mousedown", handleClick);
- }, []);
-
- const selectChampion = useCallback(
- (champion) => {
- setQuery("");
- setIsOpen(false);
- onSelect(champion);
- },
- [onSelect],
- );
-
- function handleKeyDown(e) {
- if (!isVisible || !matches.length) return;
-
- if (e.key === "ArrowDown") {
- e.preventDefault();
- setActiveIndex((prev) => Math.min(prev + 1, matches.length - 1));
- } else if (e.key === "ArrowUp") {
- e.preventDefault();
- setActiveIndex((prev) => Math.max(prev - 1, 0));
- } else if (e.key === "Enter") {
- e.preventDefault();
- if (activeIndex >= 0 && activeIndex < matches.length) {
- selectChampion(matches[activeIndex]);
- }
- }
- }
-
- return (
-
-
{ setQuery(e.target.value); setActiveIndex(-1); setIsOpen(true); }}
- onKeyDown={handleKeyDown}
- disabled={disabled}
- placeholder={disabled ? "Game over" : "Type a champion name..."}
- autoComplete="off"
- className="w-full px-4 py-3 rounded-lg bg-[var(--color-input-bg)] border-2 border-[var(--color-input-border)] text-[var(--color-text)] text-base outline-none transition-colors focus:border-[var(--color-accent)] disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-[var(--color-text-muted)]"
- />
-
- {isVisible && (
-
- {matches.map((champion, i) => (
-
selectChampion(champion)}
- className={`flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors ${
- i === activeIndex ? "bg-[var(--color-surface-hover)]" : "hover:bg-[var(--color-surface-hover)]"
- }`}
- >
-
- {champion.name}
-
- ))}
-
- )}
-
Loading champions...
;
- }
-
- if (error) {
- return Failed to load champion data. Please refresh.
;
- }
-
- if (!game) return null;
-
- const excludeNames = game.guesses.map((g) => g.name);
-
- return (
- <>
- {/* Mode toggle */}
-
-
-
-
-
- {stats && }
-
-
-
-
- {game.maxGuesses > 0
- ? `${game.guesses.length} / ${game.maxGuesses} guesses`
- : `${game.guesses.length} guess${game.guesses.length !== 1 ? "es" : ""}`}
-
-
-
-
- {game.isOver && (
-
- )}
-
- );
-}
diff --git a/web/components/game-over.jsx b/web/components/game-over.jsx
deleted file mode 100644
index 44d874b..0000000
--- a/web/components/game-over.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { getChampionImageUrl } from "@/lib/champion-data";
-
-/** Win/loss message with optional new game button */
-export default function GameOver({ isWon, target, guessCount, onNewGame }) {
- return (
-
-
- {isWon ? "You got it!" : "Game Over"}
-
-
- {isWon ? (
-
- You found {target.name} in{" "}
- {guessCount}{" "}
- guess{guessCount > 1 ? "es" : ""}!
-
- ) : (
- <>
-
- The champion was {target.name}
-
-
-
- )}
-
- {onNewGame && (
-
- )}
-
- {/* Header row */}
-
-
Champion
- {CLASSIC_ATTRIBUTES.map((attr) => (
-
- {attr.label}
-
- ))}
-
-
- {/* Guess rows — newest first */}
- {guesses
- .map((champion, i) => (
-
- ))
- .reverse()}
-
- {/* Champion name + image */}
-
-
- {champion.name}
-
-
- {/* Attribute cells */}
- {results.map((r, i) => (
-
- {r.guessValue}
- {r.direction && (
-
- {r.direction === "up" ? " ↑" : " ↓"}
-
- )}
-
- ))}
-
- {items.map(({ value, label }) => (
-
- {value}
- {label}
-
- ))}
-