Real-time Combo Calculation
The real challenge was the calculation engine. Certain items trigger "Synergy Buffs" (e.g., matching a Kawaii headpiece with Gothic boots). Running O(N^2) checks on every UI click killed the frame rate on older mobile devices.
To solve this, I compiled the game's combo rules into a bitwise matrix lookup table. Each outfit item is assigned a specific bitmask. Checking for combos is simplified to a series of fast bitwise AND operations in the main React render loop, bringing the computation time down to less than 0.1ms.
Keeping It Zero-Server
Since I'm hosting this on a tight indie budget, I wanted the simulator to be completely serverless. The entire state of the Layering Simulator is serialized into a lightweight Base64 string appended to the URL path. This allows users to share their custom builds instantly with just a link, without me needing a database.
Check out the live simulator at dresstheduel.com and let me know if you have any ideas on how to optimize asset pre-loading even further!
Top comments (0)