Food Sort

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 mobile-friendly browser sorting game titled “Food Sort.” Use a full-screen Three.js-style 3D kitchen-table background behind a fixed HTML HUD. The background should be a warm, softly lit low-poly scene: a large round honey/orange wooden table with a pale cream circular cloth, a top-down-ish perspective camera looking toward the tabletop, soft shadows, warm cream/orange fog and background, and four colorful torus-like bowl/ring decorations around the table in fruit red, vegetable green, protein purple, and grain gold. Scatter small colorful spherical and cubical food-like decorations across the tabletop and gently animate the table/decorations, but keep the actual game interaction in the HUD rather than the 3D scene. Use a warm cream/orange page gradient, dark brown text, translucent off-white rounded panels, large rounded corners, soft shadows, and a friendly polished casual-game style.

The game loop is drag-and-drop classification. At the top, show four responsive stat panels labeled SCORE, ROUND, STREAK, and TIME; initialize them to 0, 1, 0, and 45. Below them show a centered instruction panel saying “Drag each food into the right food group.” Then show a tray of food cards. On narrow screens, cards use a 3-column grid; on wider screens, use up to 6 columns. Each card is a white/translucent rounded rectangle with a large native food emoji above a bold food name, and it can be dragged with mouse or touch using pointer events. The initial round contains 6 randomly selected distinct foods from this pool: Apple 🍎, Banana 🍌, Orange 🍊, Strawberry 🍓, Grapes 🍇, Carrot 🥕, Broccoli 🥦, Corn 🌽, Lettuce 🥬, Tomato 🍅, Egg 🥚, Chicken 🍗, Fish 🐟, Beans 🫘, Shrimp 🦐, Bread 🍞, Rice 🍚, Noodles 🍜, Croissant 🥐, and Pretzel 🥨. Each food has one fixed category: fruit includes Apple, Banana, Orange, Strawberry, Grapes; veg includes Carrot, Broccoli, Corn, Lettuce, Tomato; protein includes Egg, Chicken, Fish, Beans, Shrimp; grain includes Bread, Rice, Noodles, Croissant, Pretzel. Randomize the selected tray and card order each round.

At the bottom, show four large drop bins in a 2-by-2 grid on narrow screens and a 4-column row on wide screens. Each bin has a prominent dashed white border, rounded corners, colored gradient fill, and a title plus subtitle: red/pink “Fruits” — “Sweet, juicy, plant fruit”; green “Veggies” — “Leaves, roots, green stuff”; purple “Protein” — “Eggs, meat, beans, fish”; gold/orange “Grains” — “Bread, rice, cereal, pasta.” While dragging, the card follows the pointer with a slight scale-up and shadow; detect the bin under the pointer and highlight it. Dropping a food on the correct category marks that card as placed, fades/shrinks it in the tray, increases score by 10, shows a brief green “Correct!” toast, and briefly pulses the target bin. Dropping on a wrong bin leaves the food unplaced, subtracts 4 points but never below zero, resets the streak to zero, shows a brief red “Wrong basket” toast, and shakes/flashes the wrong bin. Dropping elsewhere has no scoring effect. Only cards, bins, and modal buttons should accept pointer interaction; the decorative canvas is noninteractive.

A round is won when all tray foods are placed before the countdown reaches zero. On clearing, award a completion bonus equal to the larger of 10 and the remaining whole seconds, plus round number times 5; increment the streak by 1; stop the timer; and show a centered modal titled “Round Clear!” with text such as “You sorted 6 foods. Ready for round 2?” The primary button becomes “Next Round.” Starting the next round increases the round by 1, creates one additional food (6 plus round minus 1, capped at 10), and sets the timer to max(20, 45 minus 2 seconds per round after round 1). Preserve the score and streak between cleared rounds. If the timer reaches zero first, stop the round, reset streak to zero, and show a modal titled “Time Up!” with text “Sort faster — start a fresh tray and try to beat your score.” The primary button becomes “Try Again”; starting after a timeout begins a fresh tray while retaining the current score unless the separate New Round button is used.

On initial load, show a centered translucent modal titled “Food Sort” with “Sort food into the right baskets. Finish each tray before time runs out.” and two buttons: dark primary “Start Game” and white secondary “New Round.” Start Game begins the current round and dismisses the modal. New Round resets score, round to 1, streak to 0, and starts a fresh first round. While idle, update the instruction text to “Tap Start Game to begin sorting.” After a clear, use “Round clear — tap Next Round.” After timeout, use “Time ran out — tap New Round.” Keep the HUD legible and compact with safe-area padding on phones, responsive typography, and no scrolling.”