Mathle

Mathle is a static, front-end-only Next.js app for a Wordle-style arithmetic puzzle. The current codebase uses Next.js App Router, TypeScript, React, Tailwind CSS, and static export. You can play Mathle here.

Project Structure

mathle.org/
  app/                 # Next.js App Router pages and layouts
  src/                 # App components, game logic, messages, and browser utilities
  styles/              # Global CSS and Tailwind entry
  public/              # Static assets copied directly into the exported site
  out/                 # Static export output generated by `npm run build`
  .next/               # Next.js build cache and generated build files
  node_modules/        # Installed npm dependencies
  package.json         # Scripts and dependencies
  next.config.ts       # Next.js configuration
  tsconfig.json        # TypeScript configuration

The old captured/reconstructed projects are intentionally kept in the same parent folder:

mathlegame.com/        # Captured static mirror of the original site
reconstructed-mathle/  # Earlier JavaScript reconstruction

They are not part of the current Next.js App Router project.

App Router

The app/ directory defines the website routes:

app/(default)/page.tsx              -> /
app/(default)/[mode]/page.tsx       -> /daily/, /hourly/, /infinite/
app/(default)/changelog/page.tsx    -> /changelog/
app/(default)/privacy/page.tsx      -> /privacy/
app/(default)/layout.tsx            -> Default-language HTML shell
app/(localized)/de/page.tsx         -> /de/
app/(localized)/de/[mode]/page.tsx  -> /de/daily/, /de/hourly/, /de/infinite/
app/(localized)/de/layout.tsx       -> German HTML shell with the correct lang attribute
app/robots.ts                       -> Generated robots.txt
app/sitemap.ts                      -> Generated sitemap.xml

Think of app/ as the place that answers: "Which URL renders which page?"

Route groups such as (default) and (localized) organize the source files without adding those folder names to the public URL.

Source Code

The src/ directory contains the reusable pieces used by the pages:

src/components/
  GameClient.tsx          # Main browser-side game UI
  GameMount.tsx           # Client-only mount layer to avoid hydration mismatches
  MathlePage.tsx          # Game page composition: game, SEO content, and footer
  StaticSeoContent.tsx    # Static text that search engines and no-JS visitors can read
  SiteFooter.tsx          # Footer and language links
  StaticPageLayout.tsx    # Layout for static English pages
  IntlProviderClient.tsx  # react-intl provider for client components

src/lib/
  game.ts                 # Puzzle generation, modes, validation, scoring, and share text
  useLocalStorageState.ts # Typed localStorage React hook

src/i18n/
  config.ts               # Locale and mode paths, labels, alternates, and SEO metadata helpers

src/messages/
  en/common.json          # English shared game UI copy
  en/home.json            # English homepage copy
  en/daily.json           # English Daily mode page copy
  en/hourly.json          # English Hourly mode page copy
  en/infinite.json        # English Infinite mode page copy
  en/changelog.json       # English changelog page copy
  en/privacy.json         # English privacy page copy
  de/common.json          # German shared game UI copy
  de/home.json            # German homepage copy
  de/daily.json           # German Daily mode page copy
  de/hourly.json          # German Hourly mode page copy
  de/infinite.json        # German Infinite mode page copy
  index.ts                # Message JSON aggregation and locale/page types

Think of src/ as the place that answers: "What components, logic, and data do the pages use?"

Front-End Only

This project has no backend service. It does not use a database, user accounts, server API routes, or server-side score storage.

The app works like this:

• Next.js builds static HTML for the public pages.
• SEO text, metadata, canonical links, and footer content are included in the static output.
• The interactive game runs in the browser after the page loads.
• Puzzle progress, settings, selected mode, and rating state are saved in localStorage.
• Daily and Hourly puzzles are generated from deterministic browser-side schedules.
• Infinite mode keeps using a random browser-side seed.

Because next.config.ts sets output: "export", deployment output is static files in out/.

Scripts

npm run dev
npm run build

npm run dev starts the local development server.

npm run build type-checks, builds, and statically exports the site.

Deployment

Deploy the generated out/ directory to any static host, such as Cloudflare Pages, Netlify, Vercel static output, Nginx, S3, or another CDN-backed static hosting provider.