A few days ago, I wrote about building a hardcore football draft simulator in React where the RNG was so punishing that I couldn't even beat my own game using underdog teams.

The feedback was awesome, but I quickly realized the game had limitations. The UI was a bit basic, the performance on mobile had quirks due to third-party scripts, and honestly, the concept needed to be bigger. With the 2026 World Cup on the horizon, I decided to tear down the codebase and rebuild it into something much more ambitious.

Today, I’m launching the evolved version: 8-0.online. Here is exactly what changed under the hood and how I scaled the architecture from a simple draft tool to a multi-mode simulator with a 100/100 Lighthouse score.

1. The Core Shift: From a Single Draft to 4 Game Modes
The original "7-0" version was a simple randomized draft. It was fun, but it got repetitive. For the new 8-0 version, I restructured the state management to support multiple isolated game flows. I introduced 4 entirely new modes, including:

2026 Random XI: Pure chaos. You get what you get.
The Redemption Tournament: A mode with slightly different risk/reward mechanics.
Tech difference: Instead of a monolithic match simulation hook, I had to decouple the simulation logic from the drafting phase, allowing different rulesets to be injected dynamically depending on the selected mode.

2. UI/UX Overhaul: Cinematic Dark Mode & Mobile App Shell
The old version had a standard, functional UI. For 8-0, I wanted a premium, cinematic feel. I completely ripped out the old CSS and implemented a comprehensive Dark Mode across the entire app.

Tech difference: I built a mobile-first App Shell with a cinematic fade-out splash screen. I also had to hunt down and refactor dozens of hardcoded inline styles that were causing contrast issues. The result is a much denser, more immersive UI that actually feels like a high-end gaming dashboard rather than a simple web utility.

3. Hitting 100/100 Lighthouse (Taming Render-Blocking Ads)
One of the biggest headaches in the previous build was mobile web performance, specifically how third-party ad networks (like Adsterra) were destroying my Core Web Vitals.

Tech difference: I implemented a strict lazy-loading strategy for the ad containers. By properly handling the visual whitespace (padding/margin) before the ads load, I eliminated layout shifts (CLS). Combined with ARIA accessibility patches and eliminating render-blocking dependencies, the React SPA now hits a perfect 100/100 on mobile PageSpeed.

4. Taking Multi-lingual SEO to the Next Level (IndexNow)
In my last post, I mentioned using a Node.js post-build script to generate 13 different language static index.html files with hreflang tags. That worked great for structure, but waiting for search engines to crawl all those new 8-0 routes was taking too long.

Tech difference: I didn't want to wait. Instead of manually submitting sitemaps via Bing/Yandex Webmaster UI, I wrote a custom Python automation script to integrate directly with the open IndexNow protocol. Now, whenever I push a new language update or a new game mode, the script pings the API with a custom verification key, forcing instant indexing across major search engines.

Try to beat the RNG (Again)
The game is now fully migrated to its new home at 👉 8-0.online

I still haven't managed to go undefeated in the 2026 Random XI mode with a tier-3 nation. If anyone manages to pull it off, please let me know what tactical setup you used!

Also, I'd love to hear from fellow React devs: how do you typically handle state persistence for multi-step progressive web games without overcomplicating things with Redux?