Tide & Trade: Market Raider Project Report
1. The Concept
Tide & Trade: Market Raider is a lightweight, web-based nautical trading and risk simulator inspired by classic buy-low/sell-high games like Taipan! and Dope Wars. The player becomes a merchant captain trying to build wealth across dangerous ports while managing cargo, debt, heat, reputation, contracts, storms, pirates, and market swings. I chose this project because the core loop is simple but addictive: buy cargo in one port, sail to another, sell for profit, and decide when to take bigger risks. It was also a strong test for building a game with plain web technology while still aiming for a premium mobile-game feeling.
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript. The project uses a single-page structure with separate CSS and JavaScript files. There is no framework, no bundler, and no build tool. The game runs directly in a modern browser and uses local image assets, localStorage, and the Web Audio API for music and sound effects. The AI Assist: ChatGPT helped shape the original concept, target user, feature direction, and game-design analysis. OpenAI Codex was then used for the implementation phase, turning the concept into a working browser game with screens, game state, trading logic, routes, events, contracts, tutorial steps, audio, and premium visual assets.
3. The 1 Day Sprint
Morning (Hours 1-3): We started by analyzing the game idea and defining the target experience. The original concept was a nautical trading simulator with the tension of debt, limited cargo, uncertain prices, and dangerous voyages. We reviewed design notes and UI/UX rules, then planned the game as a mobile-first web game with a strong premium atmosphere instead of a basic prototype. Afternoon (Hours 4-6): The first playable version came together with the main trading loop: market, cargo, sailing, route risk, random events, debt, heat, upgrades, raids, and black-market choices. This phase also revealed the biggest problem: the UI looked too much like a prototype. Text overflowed boxes, buttons overlapped, popups fought with the screen, and several visual effects made the layout worse instead of better. A lot of time went into fixing spacing, readable text, mobile width safety, and popup focus. The Finish Line (Hour 7-8): The final push focused on making the game feel more complete. We added settings and mute controls, guided tutorial steps, intro flow, premium scene assets, contracts, reputation, faction progression, score/result polish, and a helper script for WebP asset conversion. The last checks focused on JavaScript syntax, asset presence, and making sure the main app did not accidentally use CSS gradients, SVG, canvas drawing, or other forbidden fake-art techniques.
4. The Roadblocks
Roadblocks: The hardest roadblock was visual consistency. The game needed to look premium, but the first versions had serious layout issues: text spilling outside boxes, buttons not aligning, popups appearing in the wrong place, and background effects that did not match the art direction. Fixing those problems took more effort than building the basic game logic. Another roadblock was asset handling. The game direction required real PNG/WebP artwork instead of CSS-drawn shapes, so every visual choice had to respect that rule. Premium scene images were added, but WebP compression could not be completed inside the current environment because no WebP encoder was installed. A conversion script was added so the assets can be compressed later with cwebp or ImageMagick.
5. Key Takeaways
What worked best was the core game loop. Trading, sailing, risk, debt, heat, and random events fit together naturally, and the added contract/reputation system gives the player more reasons to keep playing beyond simple profit. What worked worst was the UI polish cycle. A premium mobile-game interface is much harder than just adding beautiful images. The layout needs strict spacing, readable typography, centered buttons, controlled popups, and careful mobile testing. Without that discipline, premium art can actually make the game feel worse because the text and controls fight against it.
My final thought: If I had one more day, I would focus on full visual QA across every screen, convert all large PNG files to WebP, replace any remaining older gameplay assets, and add stronger progression systems such as ship damage, repairs, faction rewards, and better market forecasting. The game already has a strong foundation, but the next big improvement should be consistency: every screen should feel like it belongs to the same polished mobile game.