A League of Legends–inspired daily puzzle game with eight interactive modes and an Ultimate Bravery loadout generator. Wardle leverages Riot’s Community Dragon and Meraki Analytics APIs (with local JSON fallbacks) for real-time and offline-capable gameplay.

1. Project Overview

2. API Integration

3. Data Transformation

4. Game Modes

   • Classic Mode
   • Quote Mode
   • Ability Mode
   • Splash Art Mode
   • Ward Mode
   • Summoner Icon Mode
   • Summoner Spell Mode
   • Ultimate Bravery Mode

5. Technical Architecture

6. Project Structure

7. Data Directory

8. Assets Directory

9. Getting Started

10. Future Enhancements

11. Testing Recommendations

12. Notes & Known Issues

Wardle is a daily puzzle web app where players guess League of Legends champions, wards, icons, or spells across multiple modes. It features eight game modes plus an Ultimate Bravery loadout generator, uses a shared daily answer with a UTC reset, and supports offline play with local JSON fallbacks.

Primary Sources:

• Community Dragon (raw.communitydragon.org): champion-summary, skins, ward-skins, summoner-icons, summoner-spells, items
• Meraki Analytics (cdn.merakianalytics.com): detailed champion statistics and ability data

Fallback: On API failure, Wardle loads from local JSON files bundled in src/data/.

• Champions: Merged attributes from champion-summary.json and champions.json; normalized roles, genders, species, resources, regions, and ability icons.
• Summoner Spells: Filtered and formatted summoner-spells.json entries into SummonerSpell objects.
• Ward Skins: Extracted image paths from ward-skins.json.
• Summoner Icons: Constructed URLs and names from summoner-icons.json.
• Items: Filtered meta items from items.json.

All transformations unify API and local data formats for consistent use across the app.

• Guess a champion’s name.
• Feedback on 7 attributes: Gender, Position(s), Species, Resource, Range type, Region(s), Release year.
• Data from champion-summary.json.

• Identify the champion from a random voice line.
• Quotes sourced from champion-summary.json.

• Guess by viewing a single ability icon (Q/W/E/R).
• Icons from the champion JSON’s spells[].image.full.

• Cropped champion splash art that zooms out with each incorrect guess.
• Assets referenced in skins.json.

• Similar to Splash Art Mode but with ward-skin images.
• Zoom-out mechanic from 300% to 100%.
• Data from ward-skins.json.

• Guess the profile icon by image.
• Uses summoner-icons.json.

• Identify the spell (e.g., Flash, Ignite) by icon.
• Hints appear after wrong guesses.
• Data from summoner-spells.json.

• User selects or randomizes a champion.

• Generates a random loadout:

  • Items: 3 picks from items.json.
  • Summoner Spells: 2 picks from summoner-spells.json.
  • Runes/Perks: Random from each path in champion-summary.json.

• Displays build with portraits, item icons, spell icons, and runes.

• Framework: React 18 + TypeScript + Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• State Management: React hooks + localStorage
• Data Loading: useGameData hook with parallel fetch & fallback logic
• Daily Reset: UTC midnight seed-based generation

src/
├── components/
│   ├── modes/
│   │   ├── ClassicMode.tsx
│   │   ├── QuoteMode.tsx
│   │   ├── AbilityMode.tsx
│   │   ├── SplashArtMode.tsx
│   │   ├── WardMode.tsx
│   │   ├── SummonerIconMode.tsx
│   │   ├── SummonerSpellMode.tsx
│   │   └── UltimateBraveryMode.tsx
│   ├── Header.tsx
│   ├── ModeSelector.tsx
│   └── SearchInput.tsx
├── data/
│   ├── champion-summary.json
│   ├── champions.json
│   ├── skins.json
│   ├── ward-skins.json
│   ├── summoner-icons.json
│   ├── summoner-spells.json
│   └── items.json
├── hooks/
│   └── useGameData.ts
├── types/
│   └── index.ts
├── utils/
│   └── gameLogic.ts
└── App.tsx

All JSON files are stored under src/data/:

• champion-summary.json
• champions.json
• skins.json
• ward-skins.json
• summoner-icons.json
• summoner-spells.json
• items.json

These serve as fallbacks for offline play.

Organized static assets:

• images/ — splash arts, ability icons, ward icons, spell icons, etc.
• data/ — static JSON files for public access (if needed)

1. Install Dependencies

   npm install

2. Development Server

   npm run dev

3. Build for Production

   npm run build
   npm run preview

4. Linting

   npm run lint

1. Normal Operation: APIs available → loads live data.
2. API Failure: Offline or blocked → loads local JSON data.
3. Partial Failure: Some endpoints fail → fallback per-resource.
4. Complete Failure: Network + missing JSON → empty arrays, no crash.

• Sound effects & music
• Leaderboards & social sharing
• Mobile-responsive improvements
• Multi-language support
• Real-time patch updates

• First-load image latency due to CDN requests
• External URLs for some assets may need caching
• Mobile UI adjustments in progress