Phone Case DIY

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive 2D canvas game titled “Phone Case DIY,” presented in a soft, polished pastel mobile-game style. Use a fixed logical design area around 1120x760 that scales to fit the browser with letterboxing/centering, and support mouse and touch pointer input. The background should be a vertical gradient from near-white pink (#fff7fd) at the top to very pale lavender (#f4edff) at the bottom, with faint translucent bubbles and large subtle lavender circles. Use rounded cards, pill buttons, soft drop shadows, friendly dark-plum typography, and bright candy colors.

Start on a menu screen. Center the large heading “PHONE CASE” in dark plum and “DIY” in large bright pink below it, followed by “Make it clean. Make it colorful. Make it yours.” Show three small tilted sample phone cases across the middle: a pink case with a heart, a purple case with a star, and a cyan case with a sun-like symbol, with gentle floating motion. Place a large pink rounded PLAY button near the bottom center, with the text “A 1–3 minute creative makeover” and “Tap or click PLAY to start” underneath. Include a small Sound toggle pill at the top-right of gameplay screens, showing a speaker icon and “Sound,” or “🔇 Sound off” when muted; clicking it toggles audio. The game also supports the M key as a mute toggle.

Clicking PLAY begins a three-step makeover workflow, resetting all case content. Gameplay uses a centered, upright smartphone case: a large pale lavender/white rounded rectangle with a thick rounded silhouette, subtle outline, inner white panel, and a camera bump near the upper-left of the inner panel. The camera bump is a rounded lavender-gray rectangle with two dark circular lenses and a small yellow flash. The editable area is the lower interior of the case, beneath the camera bump. At the top-left show “Phone Case DIY” and a subtitle that changes by stage: “Fresh start,” “Color studio,” or “Sticker party.” Across the upper center show a three-step progress indicator labeled “1 CLEAN,” “2 SPRAY,” and “3 DECORATE,” with pink completed/current circles and connecting lines.

Stage 1 CLEAN: display many irregular-looking circular dirt spots inside the editable case area in gray, mauve, and dusty pink, some with small highlights. The bottom white rounded control panel says “Wipe away every speck,” has a pink progress bar and a “CLEANING ##%” label, and a right-side button initially disabled-looking and labeled “CLEANING.” The player wipes/drags over the case with mouse or touch; each dirt spot within reach disappears, with small white bubble particles and light cleaning sounds. Once every one of the approximately 58 generated spots has been removed, progress reaches 100% and the right button becomes green and says NEXT. Clicking it advances to spraying.

Stage 2 SPRAY: show the clean phone case with a translucent painted surface built from many soft, semitransparent circular spray dabs clipped inside the editable area. The bottom panel says “Pick a color and paint inside the case.” Provide eight circular color swatches in this order: pink, purple, blue, green, yellow, orange, red, cyan. The selected swatch has a dark outline. Dragging inside the case sprays random-size, low-opacity dabs of the selected color, with colored spark particles and a short spray sound. Add a hint card to the right of the case reading “Drag to spray paint” and “inside the phone case.” Provide UNDO and CLEAR pill buttons at the lower right: UNDO restores the prior stroke snapshot when available; CLEAR removes all paint while preserving undo history. A green NEXT button above them is enabled only after at least one paint stroke; otherwise it reads PAINT in a disabled gray-lavender style. Clicking NEXT advances to decoration. Keep painting clipped to the inner editable case region so the camera area and case border remain visible.

Stage 3 DECORATE: retain the painted case and show a bottom panel reading “Drag stickers onto your case.” Present five sticker choices: heart, star, flower, cat, and rainbow. The sticker drawings should be bright, simple, outlined cartoon shapes: a pink heart with white outline, yellow star with white outline, five-petal pink flower with yellow center, orange cat face with ears/eyes/smile/whiskers, and a multicolor arched rainbow with white cloud ends. Clicking a catalog sticker creates it at a random position within the case at approximately 0.8 scale, then lets the player drag it. Clicking an existing sticker selects it and brings it to the front; dragging keeps it constrained inside the case. Moving a sticker emits tiny white spark particles. The hint card says “Tap a sticker, then drag it” and “double tap = delete.” Double-clicking a sticker removes it. The lower-right button is disabled-looking “ADD STICKER” until at least one sticker exists, then becomes green “DONE.” The implementation may show a contextual control strip for the selected sticker with L, R, SIZE, and DELETE SELECTED labels as part of the visual UI, but the actual implemented interactions are selecting, dragging, and double-click deletion. Clicking DONE with at least one sticker completes the game.

On completion show a result screen with the finished phone case enlarged and centered, gently rotating/scaling for a celebratory idle animation. Keep the user’s paint and sticker design visible. Add a white rounded panel on the left reading “YOUR DESIGN!” and “A one-of-a-kind case ✦.” Fill the scene with colorful falling confetti squares and twinkling yellow stars/sparkles around the case. Put a large pink PLAY AGAIN pill near the bottom center; clicking it returns to CLEAN and resets the case. Use light synthesized UI feedback tones for buttons, cleaning, spraying, and completion, with all sounds disabled when muted. Include subtle particles throughout, but keep the overall aesthetic clean, cheerful, spacious, and tactile rather than realistic.