A 3-Minute Card Game Compresses 10,000 Years of Civilization Into One File, Built Entirely in a Single AI Chat

See the Result First

• Online demo: https://codeganhaoz.github.io/civilization-battery/
• Open source repo: https://github.com/CodeGanHaoZ/civilization-battery

One sentence about this game: you are the decision maker of a history of civilization. In front of you are four power bars—energy, ecology, knowledge, cooperation—and on the table are 35 decision cards passed down from ten thousand years ago. Swipe left, or swipe right, each card charges some bars and drains others. If any bar hits zero, civilization freezes to death; if any bar fills to overload, civilization burns to death.

Survive all 35 cards and you send humanity to the doorstep of a Type I civilization. Fail, and you get a settlement sheet like this—

The whole project went from a vague idea to an accessible online work without me ever leaving TRAE. This article is a complete retrospective of the process: how requirements were broken down, how code was generated, how bugs were fixed, and how the product was launched.

Requirement Breakdown: Three Conflicting Design Constraints

First, why does this project look like this? It came from TRAE's blind box development challenge: the rule is to randomly lock three keywords—one theme, one function, one style—and build a work around them. The three dice I drew were:

Civilization, power meter, Nordic minimalist style. That is, the theme must be civilization, the core mechanic must be a power meter, and the visual must be Nordic minimalist.

Grand narrative, industrial instrumentation, minimalist aesthetics—these three things are naturally mutually exclusive. My first step was not to write code, but to send the brief as-is to TRAE and ask it for a plan:

It gave four at once: a giant civilization instrument panel, a ten-thousand-year timeline, a civilization physical exam questionnaire, and a technology battery wall. I picked two that looked reasonable and built them to see the effect—they ran, the layout was refined, and the minimalist style was on point.

Then I stared at these two pages for ten minutes and made a decision: scrap them all.

The reason is direct: they look good, but they're not fun. You can look, you can read, but you can't touch them. A pure showcase page has no reason for anyone to remember it. My exact words to TRAE were:

"This kind of showcase page has poor effect and no highlight, the interactivity is very poor, can you change it to a highly interactive mini-game page, keeping the keywords tightly."

Its answer was Reigns-style swipe decision—a card mechanic of swiping left or right to make choices. At that moment, the three awkward constraints suddenly fell into place:

• Civilization turned from text on a board into 35 cards. The first campfire, the first seed, the first steam engine… each card is a real historical dilemma: cut forest to plant fields, feed cooperation, drain ecology.
• The power meter turned from decoration into life. Four power bars are the balance sheet of civilization, and overload is as deadly as zero—civilization's enemies are never just scarcity, but also loss of control.
• Nordic minimalist style provides the contrast. Paper gray, ink black, mist blue, restrained thin lines. The colder the picture, the sharper the red flash and screen shake when civilization goes out.

Looking back, this step is the most valuable part of the whole project: the extra hour spent in requirement breakdown saved all the rework hesitation later.

Development: A Game Skeleton That Took Shape in One Go

Once the direction was set, TRAE wrote a complete playable version in one shot: a single-file HTML, zero frameworks, zero build, double-click to play. The core data structure is as clean as a spreadsheet:

const DOM = [
  { k: "eng", cn: "Energy",   v: 50 },
  { k: "eco", cn: "Ecology", v: 55 },
  { k: "kno", cn: "Knowledge", v: 45 },
  { k: "soc", cn: "Cooperation", v: 50 },
];
// Each card: { q, l, r, L:{domain:±n}, R:{domain:±n} }
// 8 death endings, scoring by Kardashev scale on completion

Drag interaction, card fly-out animation, power bar charge/discharge, era switching, death detection—all usable. This is where TRAE's Agent mode shows its power most clearly: it's not completing a line of code, it's understanding the goal of 'make a game' and delivering the interface, logic, state machine, and animation as a whole.

Testing and Verification: AI-Written Code Must Still Pass Through My Fingers

Runnable doesn't mean playable. Testing hit three real pitfalls, each worth mentioning:

"The card won't drag." The earliest version couldn't drag cards on mobile at all. TRAE traced it to setPointerCapture throwing an exception in some browsers, which killed the entire drag chain. The fix was to attach move/up events to window and wrap capture in a try/catch. The problem is not hard, but only a real device exposes it.

"AI says there's a bug in the code, I say there isn't." I used browser automation to test dragging, but synthetic events couldn't swipe no matter what, and I briefly thought it was a code bug. After manually checking the input chain line by line, I confirmed: the code was correct, and the difference between the automation tool and real touch events was deceiving me. This pitfall taught me: AI can help you verify functionality, but 'feel' can only be voted by your fingers.

"Why does the shimmer sometimes appear and sometimes not?" A shimmer animation across the power bar was intermittent. I described the symptom to TRAE, and it deduced the root cause: the background shorthand property completely overwrote backgroundImage. Splitting the assignment fixed it. This kind of CSS ghost bug might take an evening of reading code with your eyes—describing the symptom clearly, AI's error analysis ability exceeds my expectations.

[Screenshot: TRAE's conversation debugging the drag bug]

Iteration Polish: Three One-Sentence Requirements Plus One 'Self-Rejection'

After it was playable, came three rounds of one-sentence requirement iterations:

"Too monotonous." — So there were 7 AI-generated images, all filtered and desaturated uniformly to keep the minimalist style intact.

"Not enough motion effects." — So there are dust particles that change color with the era, 3D tilt and parallax on cards, red flash and screen shake on death, and a quietly sliding curtain during era transitions:

"New players are confused." — This round best shows the human-machine division of labor. TRAE first made a masked-tutorial overlay, and I rejected it on sight: the whole card was covered in white fog, and the highlight position was off. I switched plans to a step-by-step guide with 'element pulse outline + floating small bubbles', and the bubble on the first step even hides a swipe-gesture mini animation.

Along the way I also added a character: a floating power sprite on the right, a round, minimalist little fellow. Click it, and it tells a piece of cold knowledge based on the current era—during the Steam Era it will tell you that the Great Smog of London in 1952 killed four thousand people and gave birth to the world's first Clean Air Act.

[Screenshot: power sprite and knowledge bubble]

[GIF/recording: a full game session with swipe operations]

Delivery: From Local File to World-Accessible Link

The last step is deployment. The repo is on GitHub, the game file copied as index.html, and after enabling Pages, it auto-builds, yielding an address anyone can access: https://codeganhaoz.github.io/civilization-battery/

The only hiccup: push kept failing, with an error showing it was connecting to 127.0.0.1. TRAE used git config --list --show-origin to find the culprit: my global config had a leftover domain-level github.com entry pointing to a local proxy port—the proxy software wasn't running, so all requests went into thin air. Cleaned it up, push succeeded.

That closes the loop: requirement breakdown → code generation → test verification → iteration polish → deploy and deliver, all in one tool, one chat box.

Retrospective: How Good Is This Full-Chain Capability, Really?

Back to the most practical question: how does it actually feel to run a complete project with TRAE? My three honest impressions:

First, it doesn't change the speed of writing code, it changes the cost of trial and error. Scrapping two polished showcase pages and remaking a game version—in the past, I would have hesitated for a long time, because those were two working deliverables. But when starting over only costs one conversation, the judgment 'this isn't good enough' becomes easy to say. The most correct decision in this project was exactly a scrapping.

Second, Agent mode's boundary lies in 'sense of goal'. As long as I can state a requirement as a sentence with a clear goal—"change it to a highly interactive mini-game" "too few motion effects" "new players are confused"—it can deliver a complete thing. But the judgment of the goal itself, like "showcase page has no highlight" or "masked tutorial doesn't look good," can only be made by me. AI pushes the cost of 'making it happen' close to zero, and human value becomes more concentrated on 'what to make, what counts as good'.

Third, the meaning of full-chain is 'no gaps'. Planning, code, bug fixes, images, deployment, debugging git config—if each step requires a different tool, the context switching alone would have been enough to kill this small project. Doing it all from start to finish in one chat box is the real reason this project ran through in a single evening.

Three conflicting design constraints ended up as a history of civilization that can be held in your hand and swiped. If you also have an idea you've thought about for a long time but always felt too troublesome—the current toolchain might really be enough.

---

Project keywords: civilization × power meter × Nordic minimalist | Single-file H5 · No build · Double-click to play