DEV Community: Causal Zap

How I Built a Data-Driven Toolkit for Anime Vanguards Using Astro & Game Data Extraction

Causal Zap — Tue, 17 Mar 2026 09:09:33 +0000

The Problem: Outdated Wikis & Inaccurate Calculators
As a player of Anime Vanguards (a popular Roblox tower defense game), I realized the community had a major problem: most guides and wikis were manual, outdated, and lacked precise combat calculations. When you're trying to min-max a Secret unit with a 0.1% drop rate, "roughly" isn't good enough.

I decided to build VanguardsCalc—a high-performance toolkit to solve this once and for all.

The Tech Stack
For this project, I chose Astro as the core framework. Why?

Static Site Generation (SSG): Game data doesn't change every second. Astro allows me to pre-render everything for lightning-fast speeds.

Islands Architecture: I can use React for the complex DPS calculators while keeping the rest of the site pure, lightweight HTML.

Tailwind CSS: For that premium, dark-themed "gamer" aesthetic.

The Challenge: Game Data Extraction
Instead of manually typing stats, I wrote scripts to extract data directly from game files (Lua modules). This ensured 100% accuracy. I processed this into a structured units_summary.json, which serves as the "source of truth" for the entire site.

Key Features I Implemented
True DPS Calculator: Most calculators ignore Traits and Memoria multipliers. My tool uses a custom mathematical engine to calculate the final effective DPS.

Meta-Weighted Tier Lists: Pure DPS isn't everything. I implemented a weighting algorithm to rank units based on their utility, AoE, and buff potential.

Portal & Raid Databases: A dedicated space for players to check drop rates and boss mechanics, linked directly to the unit stats.

SEO Strategy for Gaming Tools
To compete with massive wiki sites, I focused on Long-tail Keywords. Instead of just targeting "Anime Vanguards Tier List", I created specialized guides for:

Best Traits & Rerolling Guide

Portal Drop Rates & Secret Units

Active Codes & Gem Farming

Lessons Learned
Building a community tool taught me that data integrity is everything. In gaming, if your numbers are off by even 1%, the community will lose trust. By automating the data flow from game files to the UI, I created a platform that's easier to maintain and more reliable than any manual wiki.

Check it out!
If you're a developer interested in game tools or an Anime Vanguards player, check out the site:
👉 vanguardscalc.com

Building a Tool to Solve Farming Sim Math: Introducing CozyProfit

Causal Zap — Sat, 21 Feb 2026 12:01:41 +0000

The Problem: Spreadsheets are Killing the Vibe 🌾
I love cozy farming sims like Stardew Valley and Fields of Mistria. But there’s a recurring problem: figuring out which crops are actually the most profitable usually involves digging through messy, outdated spreadsheets or doing mental math on regrowth cycles and processing times.

I wanted a way to focus more on the "cozy" and less on the "calculator."

Enter CozyProfit
CozyProfit is a web-based tool designed to simplify farm planning. It’s not just a static list; it’s a dynamic calculator that handles:

Season Rankings: Instantly see what to plant for the current season.

Regrowth Modeling: Accurately calculates ROI for crops that keep producing after the first harvest.

Processing Comparisons: Should you sell the raw fruit or turn it into juice? CozyProfit shows you the margin.

Clean UI: No more rows of gray cells—just a clean, visual interface.

The Tech Stack 🛠️
To ensure the tool is lightning-fast and SEO-friendly, I chose a modern stack that prioritizes performance:

Frontend: Astro + React. I used Astro for its incredible "island architecture," allowing the static parts of the site to load instantly while using React for the interactive calculator components.

Styling: Tailwind CSS for a responsive, clean, and "cozy" design.

Deployment: Hosted on Cloudflare Pages. Leveraging the edge network means the calculator is snappy no matter where you're farming from.

What’s Next? 🚀
Currently, CozyProfit supports Stardew Valley and Fields of Mistria, and I’m actively working on adding more titles and advanced features like "Total Farm Layout Profit."

Check it out here:
👉 https://cozyprofit.com/

I’d love to hear your thoughts! Are you a React fan or exploring Astro like I am? Let me know in the comments!

I Reverse-Engineered a Game's RNG to Build a Strategy Engine with Astro & React

Causal Zap — Wed, 11 Feb 2026 13:50:35 +0000

The Problem: "90% Success Chance" is a Lie
If you've played Mewgenics (the upcoming RPG by Edmund McMillen), you know the pain. You see a "90% success chance," you click the button, and... FAILURE. You lose your best cat, your run ends, and you rage-quit.

I got tired of guessing. I wanted to know why the math felt off.

So, I decided to dig into the game files. I didn't just want a wiki; I wanted a Decision Engine. I wanted a tool that takes the raw data and calculates the exact probability of success based on my character's stats.

Here is how I built MewGenius using Astro, React, and a bit of Python for data engineering.

🕵️‍♂️ Phase 1: The Reverse Engineering
The first step wasn't coding; it was data mining. I analyzed the raw game files (classes+Misc.txt and events.csv) and discovered a hidden mechanic that the UI doesn't tell you: The Reroll System.

It turns out, the "Luck" stat isn't linear.

Luck 5: Base roll (1 attempt).

Luck 15: The game rolls twice and takes the best result.

Luck 25: 3 rolls.

This "Rule of 5s" meant that a simple percentage display on a wiki was useless. I needed a calculator that could simulate these rerolls.

🛠️ Phase 2: The Tech Stack
I needed a framework that was fast, SEO-friendly (for thousands of game events), but capable of complex interactivity for the calculators.

My Choice: Astro + React

Astro (SSG): Perfect for the "Cluster Pages." I have hundreds of pages for specific Bosses and Events. Astro generates these as static HTML at build time. Zero JS bloat for the content.

React Islands: For the Luck Calculator and Breeding Simulator, I needed complex state management. I used React components hydrated with client:load only where necessary.

Python: For the ETL (Extract, Transform, Load) pipeline.

🧩 Phase 3: The Architecture

The Data Pipeline (Python) The raw game data is messy CSVs and unstructured text. I wrote Python scripts to clean and structure this into typed JSON.

Python

A simplified snippet of my ETL script

import json
import pandas as pd

def process_events():
df = pd.read_csv('raw_events.csv')
events = []

for index, row in df.iterrows():
    # Parsing the hidden stat checks
    choices = parse_choices(row['options'])
    events.append({
        "id": row['id'],
        "name": row['name'],
        "choices": choices # Contains hidden stat requirements
    })

with open('src/data/events.json', 'w') as f:
    json.dump(events, f)

The Calculation Logic (TypeScript) This is where the magic happens. I translated the reverse-engineered formulas into a TypeScript utility that powers the React frontend.

TypeScript
function effectiveProbability(baseProb: number, luck: number) {
// Logic: Luck < 5 applies a penalty
if (luck < 5) {
const penalty = Math.max(0, 1 - 0.1 * (5 - luck));
return baseProb * penalty;
}

// Logic: Luck >= 15 gives extra "virtual" rolls
const rolls = 1 + Math.floor((luck - 5) / 10);

// The probability of failing ALL rolls
const failProb = Math.pow(1 - baseProb, rolls);

return 1 - failProb;
}

The "Hybrid" UI I used Astro to render the static event details for SEO, and then embedded the React calculator right inside the page.

Code snippet

// EventPage.astro
import LuckCalculator from '@/components/LuckCalculator';

import { eventData } from '@/data/events';

{eventData.name}

{eventData.description}

🚀 The Result: MewGenius.com
The result is a blazing fast static site that feels like a native app.

Luck Calculator: You can slide your Luck stat and watch the "Real Success Rate" update in real-time.

Breeding Sim: Simulates genetic inheritance risks (like Dominant traits) before you ruin your run.

Boss Guides: Tactical data parsed from game files.

🧠 Lessons Learned
SSG is King for Gaming DBs: Generating 500+ event pages statically means instant load times and great SEO.

Type Safety Matters: Using TypeScript interfaces for the game data saved me from countless bugs when the CSV structure changed.

Tools > Wikis: Players don't just want to read data; they want to use it to make decisions.

If you are a fan of Mewgenics or just like seeing how game mechanics are deconstructed into code, check it out at MewGenius.com.

Let me know what you think of the UX! I'm still actively adding features (Class DB is next).

Happy coding (and breeding)! 🐱

I built a tactical tool for Marvel Rivals using Astro, React, and Open Data

Causal Zap — Mon, 02 Feb 2026 08:02:55 +0000

Hello developers and gamers! 👋

I've been playing a lot of Marvel Rivals lately. It's an incredible hero shooter, but as a competitive player (and a dev), I felt something was missing.

The in-game scoreboard tells you damage and healing, but it doesn't tell you the Macro Strategy.

"Does our team have enough shield break?"

"Who has the fastest Ultimate to force the first fight?"

"When is our team's power spike compared to the enemy?"

So, I decided to build a tool to solve this.

Meet Rivals Victory.

🛠️ The Tech Stack
I wanted the site to be blazing fast but highly interactive. Here is the stack I chose:

Framework: Astro (for static site generation and perfect SEO).

Interactivity: React (using "Islands Architecture" for the calculators).

Styling: Tailwind CSS.

Data: JSON (Custom curated dataset).

Deployment: Cloudflare Pages.

💡 Key Features

Ultimate Economy Calculator This was the hardest part to model. In high-level play, "Ultimate Economy" dictates the flow of the match.

I built a React component that takes a team composition and calculates their Average Tempo.

Hulk (600 cost): Extremely fast tempo. Forces fights early.

Adam Warlock (5000 cost): Very slow. Win condition, but needs stalling.

By visualizing this delta, players can see if they should play aggressively or defensively.

The Mechanic Finder (Drafting Tool) Instead of filtering by generic roles (Vanguard/Duelist), I created a tagging system based on Utility.

I structured the data to answer specific tactical questions:

"We need Hitscan to counter Iron Man."

"We need Stun to stop Venom."

🔓 Open Sourcing the Data
While building this, I realized there wasn't a clean, developer-friendly API for Marvel Rivals data. Most wikis are full of ads and hard to scrape.

So, I decided to open-source my dataset.

I created a separate GitHub repository hosting the clean JSON data for heroes, ultimate costs, and mechanic tags. You can use it freely for your own discord bots, analysis tools, or apps.

🔗 GitHub Repo: marvel-rivals-data (Please verify your actual repo link)

Here is a snippet of the data structure (heroes.json):

JSON

{
"id": "hulk",
"name": "Hulk",
"role": "Vanguard",
"ult_cost": 600,
"economy_type": "Tempo Driver",
"mechanics": ["Stun", "Leap", "Shield Break"],
"stats": {
"hp": 900,
"difficulty": 2
}
}
You can fetch it directly via jsDelivr CDN: https://cdn.jsdelivr.net/gh/rivalsvictory-assets/rivalsvictory-assets@main/data/heroes.json

🚀 What's Next?
This project started as a personal tool to help me draft better in Ranked, but it's growing into a full tactical database.

I'm currently working on:

Matchup specific tips (e.g., "How to play Punisher vs Storm").

Map-specific synergy guides.

If you are a gamer or a dev interested in game data, I'd love your feedback!

Live Site: https://rivalsvictory.com

GitHub Data: Get the JSON here

Thanks for reading! Happy coding and gaming. 🎮

How I Built a High-Quality pSEO Wiki with Astro (And Fixed the "Product" Schema Error)

Causal Zap — Fri, 30 Jan 2026 00:01:00 +0000

How I Built a High-Quality pSEO Wiki with Astro (And Fixed the "Product" Schema Error)

I recently built a game database/wiki using Programmatic SEO (pSEO). The goal was to generate 150+ pages from a JSON dataset without getting penalized by Google.

Here are the two biggest technical challenges I faced and how I solved them using Astro.

Demo Link（https://gamestrategyhub.com）

Challenge 1: The "Thin Content" Trap

The biggest risk with pSEO is creating pages that look like empty templates with just a few data points swapped out. Google hates this.

To solve this, I didn't just dump the JSON data onto the screen. I built Logic Components that generate unique text insights based on data attributes.

The "Strategy Insight" Component

Instead of writing 150 descriptions manually, I wrote code to generate strategy advice programmatically:


javascript
// Logic to generate "When to Skip" advice programmatically
function getAvoidReason() {
  if (effect_type === 'x_mult' && rarity === 'Common') {
    return "Late Game Scaling issue: Flat Mult jokers fall off after Ante 5.";
  }
  if (tags.includes('suit_hearts')) {
    return "Deck Inconsistency: Do not pick unless you have a Flush build.";
  }
  // ... more logic
}
This turns raw data into actionable advice ("Pick or Skip?"), which increases the page's unique value significantly.

Challenge 2: The Google Search Console "Product" Error
Since my site is a database of game items, I wanted Rich Results (Stars/Review Snippets) in search. I used the Product schema.

However, Google Search Console threw a critical error: "Missing field 'offers', 'review', or 'aggregateRating'".

Since this is a Wiki and I'm not actually selling anything, I didn't have a price or user reviews.

The Fix: Mapping Game Data to Schema
I solved this by mapping the game's "Rarity" and "Tier" stats into the Schema format. I modified my Astro SEO component to inject this JSON-LD:

JavaScript

const schemaData = {
  "@context": "[https://schema.org/](https://schema.org/)",
  "@type": "Product",
  "name": item.name,
  // ...
  // HACK: Mapping Game Rarity to Star Rating to satisfy GSC
  "aggregateRating": {
    "@type": "AggregateRating",
    // Rarity score (e.g., 5) becomes the rating value
    "ratingValue": item.rarity_score ? item.rarity_score.toString() : "4.5",
    "bestRating": "5",
    "ratingCount": "50" // Static count validation
  },
  // HACK: Setting price to 0 to satisfy the "Offers" requirement
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD",
    "availability": "[https://schema.org/InStock](https://schema.org/InStock)",
    "url": Astro.url.href
  }
};
This satisfied Google's requirements immediately. Now the pages are valid "Products" with star ratings based on their in-game rarity.

3. Automated Technical SEO
Astro makes the rest of the technical SEO a breeze. I set up a layout system to handle:

Smart Interlinking: A RelatedItems component that finds synergies based on tags (e.g., suggesting a "Cheaper Alternative" or "Endgame Goal").

Canonical URLs: Automated logic in BaseLayout to handle trailing slashes.

Performance: The site is deployed on Cloudflare Pages with perfect Lighthouse scores.

The Result
150+ High-Quality Pages generated instantly.

Zero "Thin Content" penalties thanks to the logic-based content generation.

Rich Snippets (Stars) active despite not being an e-commerce store.

Tech Stack
Framework: Astro

Styling: Tailwind CSS

Deployment: Cloudflare Pages

Data: AI-assisted JSON dataset

Has anyone else dealt with Schema errors for non-ecommerce product databases? Let me know how you handled it!

I Built a Complex Production Calculator for Arknights: Endfield using Astro & React (and solved circular dependency hell)

Causal Zap — Sat, 24 Jan 2026 15:28:25 +0000

👋 The Backstory
I'm a huge fan of Arknights: Endfield (the upcoming 3D RPG with factory building elements). During the technical test, I realized something: the industrial system (AIC) is surprisingly complex.

Unlike simple crafting trees, Endfield has Circular Production Loops.

Example: To make Bottled Water, you need an Empty Bottle. consuming the water returns the Empty Bottle.

The Problem: If you write a simple recursive calculator, it gets stuck in an infinite loop: Bottle -> Water -> Bottle -> Water... resulting in a RangeError: Maximum call stack size exceeded.

So, I decided to build Endfield DB, a dedicated wiki and production planner, to solve this. Here is how I built it using Astro, React, and Tailwind CSS.

(Replace this with your calculator screenshot url)

🛠 The Tech Stack
I needed something blazing fast for SEO (since it's a database) but highly interactive for the calculator.

Framework: Astro (Static Site Generation is perfect for Wiki-like content).

Interactivity: React (For the complex state management in the Calculator).

Styling: Tailwind CSS (To achieve the game's "Industrial Sci-Fi" aesthetic).

Data: JSON-based "CMS" (Lightweight and fast).

Optimization: Sharp (Node.js script to batch convert 1000+ assets to WebP).

🧩 The Challenge: Handling Circular Dependencies
The biggest technical hurdle was the calculator logic. A standard recursion would crash the browser when calculating items like "Amethyst Bottle" because the output feeds back into the input.

The Algorithm
I implemented a traverse function with cycle detection. By passing a Set of visited paths, the algorithm knows when it hits a loop and stops the recursion for that branch, treating it as a "solved" dependency.

Here is a simplified version of the logic:

TypeScript

// src/utils/calculator.ts

const traverse = (
itemId: string,
rate: number,
depth: number,
currentPath: Set // 👈 The breadcrumbs
) => {

// 🛑 Cycle Detection: Stop if we've seen this item in the current chain
if (currentPath.has(itemId)) {
return;
}

const newPath = new Set(currentPath);
newPath.add(itemId);

const recipe = recipes.find(r => r.outputs.some(out => out.itemId === itemId));

// ... Calculate Facilities and Power ...

if (recipe) {
recipe.inputs.forEach(input => {
// Recursively calculate inputs
traverse(input.itemId, inputAmount, depth + 1, newPath);
});
}
};
This allows the calculator to accurately tell you: "To produce 60 Water/min, you need net 0 new bottles (if recycling) or X raw materials," without crashing.

⚡️ Performance Optimization
Since the database has over 1,700 items, performance was key.

Image Optimization: I wrote a custom Node.js script using sharp to convert all raw game assets (PNG) to WebP. This reduced the asset payload by ~70%.

Smart Fallbacks: Not all items have icons. I implemented a React component that tries to load the WebP image, and if it onError, it gracefully falls back to a CSS-styled initial (e.g., "A" for Amethyst) without breaking the layout.

Partial Hydration: Using Astro's client:load, the heavy React calculator only loads when needed, keeping the initial HTML payload tiny.

🎨 The "Industrial" UI Design
The game features a dark, gritty, high-tech interface. I used Tailwind's zinc color palette combined with vibrant orange-500 accents to mimic the in-game UI.

Glassmorphism: Used bg-zinc-950/80 backdrop-blur-md for sticky headers.

Data Tables: Built a custom responsive table to show Facility Counts, Power (kW), and raw material breakdowns.

(Replace this with your item list screenshot)

🚀 What's Next?
The site is now live at EndfieldDB.

I'm currently working on:

Visualizing the dependency tree (Node graph).

Multi-target planning (calculating for multiple outputs at once).

If you are into Arknights or just like building complex logic tools, I'd love to hear your feedback on the UX!

Thanks for reading!

Building a Blazing Fast, Multi-Language Game Database with Astro (Zero JS)

Causal Zap — Thu, 22 Jan 2026 01:49:55 +0000

Hey developers! 👋

I recently took on a challenge: building a comprehensive Wiki/Database for the open-world RPG "Where Winds Meet".

The problem with most modern game wikis (like Fandom) is that they are bloated, slow, and covered in ads. I wanted to build something different:

Instant Load Times (100/100 Lighthouse score).
Full i18n Support (English, Chinese, French, Spanish, Vietnamese).
Open Source and community-driven.

Here is how I built it using Astro and Static Site Generation (SSG).

🛠️ The Stack

Framework: Astro (for zero-JS by default).
Styling: Tailwind CSS (utility-first).
Data Source: JSON files (simulating a CMS without the overhead).
SEO: Schema.org structured data (JSON-LD) for rich results.

🚀 Key Technical Challenges

1. Handling Dynamic Routes for 5 Languages

I used Astro's getStaticPaths to generate thousands of pages at build time. The logic unwraps nested JSON data to create paths like /en/weapons/spear-01 and /zh/weapons/spear-01 automatically.


typescript
// Simplified example of my path generation
export async function getStaticPaths() {
  const languages = ['en', 'zh', 'fr', 'es', 'vi'];
  return languages.flatMap((lang) => {
    // Logic to read JSON files...
    return weapons.map((w) => ({
      params: { lang, id: w.id },
      props: { weapon: w },
    }));
  });
}
Since this is a database, every page needs unique metadata. I created a dynamic SEO utility that injects specific stats (like "Attack Power" or "Tier Ranking") directly into the <meta description> tag. This prevents "Duplicate Content" penalties from Google.

3. Component Architecture
I built reusable components like <StatsPanel /> and <WeaponHero />. The cool part? Because it's Astro, these components ship zero client-side JavaScript to the browser. It's just pure HTML/CSS.

📈 The Result
The site is live and serves as a fast reference for players.

Live Demo: [ https://wwm-db.com/ ]

🙌 Contributing
The project is fully open-source. If you are learning Astro or want to see how to structure a large content site, feel free to check out the repo!

Comments and PRs are welcome!

I Reverse-Engineered a Horror Game's Logic to Build an Open Source Ending Calculator (Astro + Tailwind)

Causal Zap — Mon, 19 Jan 2026 13:05:18 +0000

The Problem: Hidden Game Mechanics 🕵️‍♂️

I recently got obsessed with the indie horror RPG "Dead Plate" (by RachelDrawsThis). It's a fantastic game about a waiter working for a cannibalistic chef, but it has one major frustration: Opaque RNG.

The game relies on hidden stats like "Suspicion" and "Affinity." Make one wrong dialogue choice in the first 10 minutes, and you're locked out of the True Ending an hour later.

I got tired of alt-tabbing to read 50-page text walkthroughs that spoiled the story. I wanted a tool that could track my stats in real-time.

So, I built one.

The Solution: HorrorHub 🩸

I reverse-engineered the decision tree of the game and built HorrorHub, an interactive ending calculator and character database.

👉 Live Demo: https://deadplate.net
👉 Source Code: LINK_TO_YOUR_GITHUB_REPO

(The UI is styled to match the game's dark, gritty aesthetic)

The Tech Stack: Why Astro? 🚀

I needed the site to be blazing fast because most users would access it on their phones while playing the game on PC.

Framework: Astro. I chose Astro because of its "Island Architecture." The majority of the site (lore pages, character bios) is static HTML (zero JS), making it incredibly performant.
Styling: Tailwind CSS v4. It allowed me to rapidly prototype the "Classified Archives" aesthetic with complex gradients and dark-mode logic.
State Management: For the calculator part, I used simple vanilla JS logic injected only where needed.

How it Works (The Logic) 🧠

Instead of hard-coding every path, I mapped the game's logic into a JSON structure. Here is a simplified snippet of how the data is structured:


json
{
  "event_id": "day_3_fridge",
  "choices": [
    {
      "text": "Check the freezer",
      "effect": { "suspicion": +10, "item": "key_fragment" }
    },
    {
      "text": "Ignore it",
      "effect": { "suspicion": -5 }
    }
  ]
}
The calculator simply traverses this JSON tree, summing up the suspicion score to predict which of the 4 endings you will get.

Open Source Data 🤝
I believe game data should be accessible. I've open-sourced the entire JSON dataset for Dead Plate on GitHub. If you are building a wiki or an AI agent for this game, feel free to use my data!

Check out the repo here: [https://github.com/Causalzap/dead-plate-interactive-matrix] (Replace with your link)

What's Next?
I plan to expand this into a hub for other mechanics-heavy horror games (like The Freak Circus).

If you are an Astro developer or just a fan of indie horror, I'd love to hear your feedback on the UI or the code structure!

Thanks for reading! 💀

PS: If you find a bug in the ending calculations, please open an issue on GitHub!
#astro #javascript #opensource #gamedev

How I Built an Interactive "Wiki-Killer" for Dragon Quest VII using Astro & Tailwind

Causal Zap — Fri, 09 Jan 2026 06:13:20 +0000

The Problem: Game Wikis Are Broken 📉

I've been playing the new Dragon Quest VII Reimagined Demo (Switch 2 / Steam), and I ran into a frustration that every RPG gamer knows:

Old School Text Guides (GameFAQs) are hard to parse on a phone while playing.
Modern Wikis (Fandom, etc.) are often bloated with ads, slow to load, and auto-playing videos.

I didn't just want to read a guide; I wanted to track my progress. I needed to know which "Shard Fragments" I had missed and which "Mini Medals" were hidden in the well.

So, instead of complaining, I spent my weekend building a solution: The Adventure Log.

(Caption: The main dashboard tracking demo completion)

The Tech Stack: Why Astro? 🚀

I needed this tool to be:

Fast: Instant load times on mobile data.
Interactive: Checkboxes, filters, and progress bars.
Simple: No backend, no login required.

1. Astro (The Framework)

I chose Astro because it defaults to Zero JS. Most of a game guide is static content (images, text, tables). React or Next.js would have been overkill and introduced unnecessary hydration bloat.

With Astro, I can build components like <ShardCard /> using JSX syntax, but they render as pure HTML unless I explicitly ask for interactivity using client:load.

2. Tailwind CSS (The Styling)

I wanted a UI that felt like a modern RPG menu—clean, card-based, and responsive. Tailwind's utility classes made it easy to build a grid layout that switches from 1 column on mobile to 3 columns on desktop without writing custom media queries.

3. LocalStorage (The "Database")

I didn't want to manage a database or force users to create an account just to tick off a checkbox.

I used a simple useLocalStorage hook (via Preact/React) to persist the user's checklist state directly in their browser.


javascript
// Simplified logic for the checklist state
const [collected, setCollected] = useState(() => {
  if (typeof window !== 'undefined') {
    return JSON.parse(localStorage.getItem('dq7-shards') || '[]');
  }
  return [];
});

const toggleShard = (id) => {
  const newSet = collected.includes(id) 
    ? collected.filter(i => i !== id)
    : [...collected, id];

  setCollected(newSet);
  localStorage.setItem('dq7-shards', JSON.stringify(newSet));
};
Key Features 🛠️
1. The Interactive Shard Locator
DQ7 requires you to find color-coded fragments to unlock new islands. I built a filter system that lets users sort by Color (Red/Green/Yellow) and Region.

2. "Missable" Warnings
The app highlights items that become inaccessible after certain story points using visual badges (e.g., "Story Heavy" or "One-Time Visit"). This saves completionists from restarting their game.

3. Visual Loot Guide
Instead of text saying "It's in the chest," I used aspect-video cards to show the exact in-game screenshot.

HTML

<div class="relative aspect-video w-full overflow-hidden border-b border-gray-100">
  <img src={guide.image} class="object-cover w-full h-full" />
  <div class="absolute bottom-4 right-4 bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded">
    {guide.difficulty}
  </div>
</div>
The Result: 100% Lighthouse Score ⚡️
Because Astro strips away unused JavaScript, the site scores a perfect 100 on Google Lighthouse performance metrics. It feels like a native app, but it's just HTML and CSS.

Conclusion
This project reminded me why I love web development. We have the power to build the tools we wish existed.

If you are playing the DQ7 Demo, give it a try!

🔗 Live Demo: [https://dq7reimagined.com/]

💻 Github: [Insert Repo Link if Open Source]

Thanks for reading! Let me know in the comments if you prefer Astro or Next.js for static sites.

I Built the "Anti-Wiki" for Little Nightmares 3 using Astro (100% Lighthouse Score)

Causal Zap — Wed, 07 Jan 2026 09:51:10 +0000

The Problem: Game Wikis are Broken
We've all been there. You're playing a game, you get stuck, and you Google a guide. You click on a Wiki link (usually Fandom), and suddenly:

Your fan spins up like a jet engine.

A video auto-plays in the corner.

A massive banner covers 40% of the screen.

Spoiler Alert: You accidentally see a picture of the final boss before the page even loads.

As a fan of Little Nightmares 3, I wanted to create a companion tool that actually respected the player. No bloat, no spoilers, just raw utility.

So, I built LN3 Solved.

The Stack: Why Astro?
I chose Astro for this project because of its "Zero JS by default" philosophy. A game tracker needs to be readable instantly on a phone while the player is holding a controller.

Framework: Astro

Styling: Tailwind CSS

Interactivity: Vanilla JavaScript (No heavy frameworks like React/Vue for simple toggles)

Data Source: JSON files (Flat-file CMS approach)

Key Feature 1: The "No-Backend" Persistence
One of the biggest challenges was allowing users to track their collected items (Dolls, Ghosts, Trophies) without forcing them to create an account. Login forms kill conversion rates.

My solution? Local Storage.

I built a simple hook that syncs the checkbox state directly to the browser.

JavaScript

// Simple logic to persist trophy tracking
function toggleTrophy(id) {
const current = JSON.parse(localStorage.getItem('ln3-trophies') || '{}');
current[id] = !current[id];
localStorage.setItem('ln3-trophies', JSON.stringify(current));
updateUI();
}
This makes the site feel like an "app" without the backend overhead. Users can refresh the page or come back days later, and their progress is saved.

Key Feature 2: Spoiler Protection UI
Most wikis dump all information on the page at once. For a horror-mystery game, this ruins the experience.

I implemented a "Phase-Based" UI for the Boss Guides.

Default State: All boss images and phase strategies are hidden/blurred.

Active State: The user clicks "Show Phase 1".

Logic: I used native browser and custom JavaScript toggles to ensure content is accessible to SEO bots but hidden from human eyes until requested.

Key Feature 3: Data-Driven Components
Instead of hard-coding HTML for every character and enemy, I separated the data into JSON files. This allows me to update stats (like the "Threat Matrix" shown below) without touching the markup.

src/data/enemies.json

JSON

{
"id": "monster-baby",
"name": "The Monster Baby",
"matrix": {
"threat": 9,
"intel": 2,
"power": 10
}
}
This data feeds into a dynamic Astro component that generates the Threat Analysis Matrix, rendering visual bars based on the numeric values.

The Result
By stripping away the heavy SPA (Single Page Application) baggage and sticking to Astro's Islands architecture:

Performance: 100/100 on Google Lighthouse.

LCP (Largest Contentful Paint): < 0.8s.

User Feedback: Players appreciate the "Clean & Fast" experience compared to ad-heavy alternatives.

Check it out
If you are playing Little Nightmares 3 or just want to see a clean implementation of an Astro static site, check it out here:

👉 ln3solved

I'm currently working on a "Chronology Engine" to visualize the game's timeline using vanilla JS. Let me know if you have any feedback on the UX!

Show Dev: How We Brought the Legendary Papa's Game Series Back to Life in Modern Browsers 🍔🎮

Causal Zap — Wed, 24 Dec 2025 13:34:49 +0000

The Problem: A Lost Era of Web Gaming
We all remember the golden age of browser gaming—specifically the Papa Louie series. From flipping burgers in Papa's Burgeria to crafting the perfect sundae in Papa's Freezeria, these games were the ultimate time-management masterpieces.

However, since the end of Flash support, many of these classics became "lost media" for the average user, requiring sketchy plugins or complex workarounds just to play.

The Solution: Papas-Arcade.com
I built to solve this. The goal was to create a centralized, high-performance "arcade" where these legendary games can run seamlessly on modern web standards.

Papas-Arcade: Relive the Classics, Master the Craft.

Why This Project Matters to Developers
Building a dedicated gaming portal for legacy content involved several interesting challenges:

Modern Compatibility: Ensuring the game logic translates perfectly to modern browsers without the need for outdated Flash players.

Performance Optimization: Reducing latency and ensuring that fast-paced time-management games remain responsive even on lower-end devices.

UX for Nostalgia: Designing a clean, distraction-free interface that stays out of the way of the gameplay.

Key Features
The Full Papa's Menu: A comprehensive library including everything from the original Pizzeria to the most complex spin-offs.

Browser-Native Experience: No downloads, no plugins—just click and cook.

Responsive Design: Optimized for both desktop precision and casual play.

What’s Next?
The mission doesn't stop here. I'm currently working on:

Saved Game Persistence: Improving how we handle local storage so you never lose your restaurant progress.

Community Hub: Adding leaderboards and "Best Chef" badges to bring back the competitive spirit of the original arcade.

Feedback Wanted!
As developers, we know that the best products are built through community feedback. I’d love for you to take a break, play a round of your favorite Papa's game, and let me know:

How is the loading performance on your setup?

Are there any legacy games you'd like to see added to the arcade?

Check out the project here:https://www.papas-arcade.com/

Show Dev: Marvel Cosmic Lab – Bringing the Wonders of the Universe to Your Browser 🚀🌌

Causal Zap — Wed, 24 Dec 2025 13:28:31 +0000

The Inspiration
As developers, we often spend our days looking at lines of code and terminal screens. But sometimes, we need to look up—way up. I've always been fascinated by space, but I found that most astronomical data is either buried in complex academic archives or scattered across cluttered news sites.

That’s why I built .

What is Marvel Cosmic Lab?
Marvel Cosmic Lab is a web-based "digital laboratory" designed for space enthusiasts, students, and curious minds. The goal was simple: Create a clean, immersive, and high-performance gateway to explore deep-space imagery and planetary science.

Key Features
Immersive Discovery: A curated experience featuring high-fidelity imagery of nebulas, galaxies, and star clusters.

Knowledge Simplified: We take complex cosmic phenomena and break them down into digestible, engaging insights.

Performance Focused: Built with modern web standards to ensure that even high-resolution astronomical images load smoothly across devices.

The Tech Behind the Scenes
Building this wasn't just about the content; it was about the experience. Some of the challenges I tackled included:

Image Optimization: Handling massive deep-space captures without sacrificing page load speeds.

Responsive Layouts: Ensuring the "Lab" feels immersive whether you're on a 4K monitor or a mobile device.

UI/UX Design: Using a dark-themed, minimal interface to let the cosmic visuals take center stage.

Future Roadmap
This is just the beginning. I'm looking into:

Integrating real-time APIs from NASA/ESA for live mission tracking.

Adding interactive 3D visualizations for planetary orbits.

Opening up the platform for community-contributed science articles.

I’d Love Your Feedback!
As a fellow developer, I’d value your thoughts on the site's performance, UI, or any features you think would make the "cosmic exploration" even better.

Check it out here:

Let’s keep exploring! 🌠