Unveiling 'Porchi's Gift Shop' on Zigzag

The team implemented Porchi's Gift Shop, which runs in a webview inside the Zigzag app, using a React + TypeScript + Next.js environment. Early on, they quickly built a physics-based MVP with Matter.js and first completed the core flow of a puzzle-style physics game where fruits fall, collide, and merge into bigger fruits.

The roles were separated so that React focuses on screen rendering and input delivery rather than game logic, while Matter.js handles falling, collision, merging, and game-clear determination. Next-fruit preview, score updates, and restart handling were all connected while maintaining this boundary.

However, basic rendering alone made it hard to fully convey a "game-like feel" — merge effects, game-over presentation, star candy sparkle, sound and vibration. So they switched to Phaser.js, which excels at rendering and scene management, while continuing to use Matter.js for the physics engine, improving both the presentation and the structure.

During the transition, several real-world issues came up.

• All fruit assets were made circular for collision performance and stability.
• Random generation was changed to be seed-based and reproducible by introducing the Mulberry32 PRNG.
• In the Next.js SSR environment, Phaser initialization referenced window.navigator.userAgent and caused errors, so browser-only loading was separated out using dynamic(..., { ssr: false }).
• The DPR (Device Pixel Ratio) issue was addressed by reflecting window.devicePixelRatio, so the display wasn't blurry even on high-resolution screens.

Work was also done in parallel to reduce the "web-like" feel. They blocked the iOS back-swipe gesture and vertical scroll bounce, and designed different vibration durations for button clicks, toggles, merges, and game-over, creating feedback closer to a mobile game.

After launch, there was ongoing VOC (voice of customer) saying "the game suddenly ends during play," and the cause turned out to be timer-based determination and simple determination that only looked at the y-coordinate. They fixed the malfunction by splitting each fruit's current state into dropping / settled, switching it to the settled state upon collision, and changing the logic so that only settled fruits are included in the baseline determination.

In the end, on top of a structure that separates the responsibilities of physics computation and UI, they built a more polished mini-game by combining Phaser.js's scene presentation with Matter.js's physics simulation.