diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..b78b2ca
--- /dev/null
+++ b/.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/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 9b5e3aa..2929e5c 100644
--- a/.github/workflows/deploy.yml
+++ b/.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/.github/workflows/sync-data.yml b/.github/workflows/sync-data.yml
index 02c57ed..18341ce 100644
--- a/.github/workflows/sync-data.yml
+++ b/.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/.gitignore b/.gitignore
index fda67f1..3db7444 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,9 +18,8 @@ chrome-dev-tools
# testing
/coverage
-# next.js
-/.next/
-/out/
+# sveltekit
+/.svelte-kit/
# production
/build
diff --git a/README.md b/README.md
index 45d5ccd..f78f3e4 100644
--- a/README.md
+++ b/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/app/layout.jsx b/app/layout.jsx
deleted file mode 100644
index deabd41..0000000
--- a/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/app/page.jsx b/app/page.jsx
deleted file mode 100644
index e650a22..0000000
--- a/app/page.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import GameBoard from "@/components/game-board";
-
-export default function Home() {
- return (
-
-
-
-
- );
-}
diff --git a/components/champion-search.jsx b/components/champion-search.jsx
deleted file mode 100644
index 53fe2d0..0000000
--- a/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/components/game-over.jsx b/components/game-over.jsx
deleted file mode 100644
index 44d874b..0000000
--- a/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}
-
- ))}
-
%sveltekit.body%
+
+
diff --git a/lib/champion-data.js b/src/lib/champion-data.js
similarity index 83%
rename from lib/champion-data.js
rename to src/lib/champion-data.js
index ee197e2..1c32e44 100644
--- a/lib/champion-data.js
+++ b/src/lib/champion-data.js
@@ -1,5 +1,7 @@
// Data layer: load, search, and select champions
+import { asset } from "$app/paths";
+
let champions = [];
let loadPromise = null;
@@ -9,8 +11,7 @@ export async function loadChampions() {
if (loadPromise) return loadPromise;
loadPromise = (async () => {
- const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
- const response = await fetch(`${basePath}/champions.json`);
+ const response = await fetch(asset("/champions.json"));
if (!response.ok) {
loadPromise = null;
throw new Error(`Failed to load champions: ${response.status}`);
@@ -22,17 +23,6 @@ export async function loadChampions() {
return loadPromise;
}
-/** Get all loaded champions */
-export function getAllChampions() {
- return champions;
-}
-
-/** Case-insensitive lookup by name */
-export function getChampionByName(name) {
- const lower = name.toLowerCase();
- return champions.find((c) => c.name.toLowerCase() === lower) || null;
-}
-
/** Filter champions for autocomplete (prefix-first, then substring) */
export function searchChampions(query, excludeNames = []) {
if (!query) return [];
diff --git a/lib/classic-mode.js b/src/lib/classic-mode.js
similarity index 100%
rename from lib/classic-mode.js
rename to src/lib/classic-mode.js
diff --git a/src/lib/components/champion-search.svelte b/src/lib/components/champion-search.svelte
new file mode 100644
index 0000000..59a69ba
--- /dev/null
+++ b/src/lib/components/champion-search.svelte
@@ -0,0 +1,122 @@
+
+
+
+
= 0
+ ? `champion-option-${activeIndex}`
+ : undefined}
+ bind:value={query}
+ oninput={() => {
+ activeIndex = -1;
+ isOpen = true;
+ }}
+ onkeydown={handleKeyDown}
+ {disabled}
+ placeholder={disabled ? "Game over" : "Type a champion name..."}
+ autocomplete="off"
+ class="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)]"
+ />
+
+ {#if isVisible}
+
+ {/if}
+
+ Loading champions...
+
+{:else if error}
+
+ Failed to load champion data. Please refresh.
+
+{:else if game}
+
+
+
+
+
+
+ {#if stats}
+
+ {/if}
+
+
+
+
+ {game.maxGuesses > 0
+ ? `${game.guesses.length} / ${game.maxGuesses} guesses`
+ : `${game.guesses.length} guess${game.guesses.length !== 1 ? "es" : ""}`}
+
+
+
+
+ {#if game.isOver}
+
+ {/if}
+{/if}
diff --git a/src/lib/components/game-over.svelte b/src/lib/components/game-over.svelte
new file mode 100644
index 0000000..031bfdc
--- /dev/null
+++ b/src/lib/components/game-over.svelte
@@ -0,0 +1,46 @@
+
+
+
+
+ {isWon ? "You got it!" : "Game Over"}
+
+
+ {#if isWon}
+
+ You found {target.name} in
+ {guessCount}
+ guess{guessCount > 1 ? "es" : ""}!
+
+ {:else}
+
+ The champion was {target.name}
+
+
})
+ {/if}
+
+ {#if onNewGame}
+
+ {/if}
+
+
+
+
+
+ {#each rows as row (row.champion.id)}
+
+ {/each}
+
diff --git a/src/lib/components/guess-row.svelte b/src/lib/components/guess-row.svelte
new file mode 100644
index 0000000..7e7912c
--- /dev/null
+++ b/src/lib/components/guess-row.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
+
})
+
{champion.name}
+
+
+
+ {#each results as r, i (r.key)}
+
+ {r.guessValue}
+ {#if r.direction}
+
+ {r.direction === "up" ? " ↑" : " ↓"}
+
+ {/if}
+
+ {/each}
+
+ {#each items as { value, label } (label)}
+
+ {value}
+ {label}
+
+ {/each}
+