Style Studio

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.

Rebuild a browser-based 3D dress-up game titled “Style Studio.” Use Three.js with an animated low-poly Quaternius BaseCharacter.glb mannequin centered in a small dressing-room/runway scene. The character must always retain a permanent modest dark navy/black bodysuit-and-shorts base layer with a thin cyan glowing trim around the upper torso; only outer clothing and accessories change. Play the model’s Idle animation when available.

Camera and scene: use a perspective camera initially positioned around (0, 1.65, 5.2), aimed at the model’s torso, with damped orbit controls. Allow drag gestures to rotate around the model, without panning, and constrain zoom and polar angle. Set a dark purple background with subtle fog. Place the character on a dark circular floor/platform with a thin glowing violet runway ring that slowly rotates. Put a dark rectangular mirror/back-wall panel behind the model. Light the scene with soft pink/white studio lighting, a bright directional key light with shadows, and a pink point-light fill. Add about 18 small gold/cream octahedron sparkles floating around the model; have them slowly rotate and bob.

Core loop: show a current style challenge and let the player match its theme by selecting one item in each of four slots: headwear/hair, top, bottom, and shoes. Each slot cycles forward through four items, wrapping around. The player can tap the corresponding zone on the mannequin (head, torso, legs, or feet) or use the wardrobe buttons. A short click/tap on the model should cycle only the hit body zone; dragging rotates the camera and must not trigger an outfit change. Play a small triangle-wave blip on interactions after audio is enabled by user input. Show a temporary toast naming the selected item or action.

Wardrobe data and exact themes:
- Head: Loose Hair (casual, dark brown hair), Sun Cap (sporty, yellow cap), Tiara (formal, pale gold with pointed gems), Rain Hood (rainy, blue hood).
- Top: Cozy Tee (casual, pink shirt with short sleeves), Track Jacket (sporty, teal jacket with a white vertical stripe and sleeves), Sparkle Blazer (formal, purple blazer with gold lapels), Raincoat (rainy, yellow raincoat with a dark zipper).
- Bottom: Jeans (casual, blue two-leg jeans), Joggers (sporty, dark gray joggers with teal side stripes), Pleated Skirt (formal, pink flared skirt with a pale-gold hem), Splash Pants (rainy, blue pants).
- Shoes: Sneakers (sporty, white sneakers), Boots (rainy, dark brown/black rain boots), Dress Shoes (formal, black dress shoes), Slip-ons (casual, pale cream slip-ons).
Construct these as simple procedural meshes layered over the imported model: cylinders/capsules, boxes, cones, torus trim, and simple spheres as appropriate. Make the clothing visibly low-poly and give the materials the listed colors, with modest roughness and occasional metallic/emissive accents.

Challenges, in this exact cycle: Sporty Day (theme sporty; hint “cap, jacket, joggers, sneakers”), Rainy Walk (rainy; “hood, raincoat, splash pants, boots”), Fancy Party (formal; “tiara, blazer, skirt, dress shoes”), Casual Hangout (casual; “hair, tee, jeans, slip-ons”). Start on Sporty Day. The style score is the number of the four selected items whose theme matches the current challenge, divided by four and rounded to a percentage, so it displays 0, 25, 50, 75, or 100. Starting outfit is Loose Hair, Cozy Tee, Jeans, Sneakers, which therefore gives 25 against Sporty Day. “Dress Down” resets to Loose Hair, Cozy Tee, Jeans, and Slip-ons while preserving the permanent base suit. “New Challenge” advances to the next challenge and updates the displayed target, without automatically changing the outfit.

HUD/UI: overlay the canvas with translucent dark-purple glass panels, rounded corners, thin light borders, blur/shadow styling, and white sans-serif text. At the top, show a left card with the title “Style Studio” and the instruction “Tap the model to cycle outfit zones. The base suit always stays on.” On the right show “STYLE SCORE” and the large current percentage. Center below the top cards, show “Challenge: match the [challenge name] look.” with the challenge name highlighted pale yellow and a pill-shaped hint chip reading “Hint: [hint text].” At the bottom, show a rounded wardrobe panel with six buttons: “Hat / Hair,” “Top,” “Bottom,” “Shoes,” “Dress Down,” and “New Challenge.” Use neutral translucent buttons for the four slot controls, an orange/yellow warning gradient for Dress Down, and a pink-to-violet primary gradient for New Challenge. Arrange six columns on wide screens and three columns on small screens. Include responsive safe-area spacing and make buttons touch-friendly.

On initial load, create all permanent and selected clothing, initialize the HUD and score, add mannequin hit zones for head/torso/legs/feet, load the external GLB model, and continue to leave controls usable if the model fails to load. Expose window.getGameState() returning outfit indices, current item names, challenge, styleScore, and camera position; expose window.setGameState(patch) allowing outfit indices and challengeIndex to be set and then refreshing clothing/HUD.