Sandwich Shift

Inspiration

The main idea behind Sandwich Shift is visual matching under transformation.

The player does not match identical pictures. Every source ingredient appears in a different form from the way it appears in the finished sandwich. Whole mushrooms become sliced mushrooms, a block of cheddar becomes a cheese slice, packaged hot dogs become prepared hot dogs, and a whole egg becomes a fried egg.

The challenge is to quickly recognize the visual relationship between the source ingredient and its transformed result.

I also wanted a simple mechanic that could create a large number of different orders from a relatively small set of reusable ingredients.

The current prototype supports up to 20 active ingredients across five categories. At that size, the possible combinations are:

3 × 6 × 3 × 4 × 4 = 864 possible orders

The game also adds a management layer around the matching mechanic. The player begins each shift with a smaller working menu, earns coins by completing orders, and decides how to invest those coins in additional ingredients. Each investment visibly grows the menu and changes the ingredient pool used in future orders.

What it does

Sandwich Shift is a portrait mobile web game that combines fast visual recognition with a simple earn, invest, and grow loop.

Each shift begins with 10 active ingredients, two from each category.

For each order, the game creates a finished sandwich and drink using ingredients from the player's current menu. The player must identify the five source ingredients used in that order.

Ingredients can be dragged into their category slots or tapped to place them automatically. Incorrect selections subtract 10 seconds from the timer.

Completing an order earns coins. Between orders, the player can invest those coins in additional ingredients or save them for later.

Purchased ingredients are added immediately to the active ingredient grid, become eligible for future orders, and remain visually marked with a gold star and highlighted border.

This creates a repeating loop:

complete orders → earn coins → invest → grow the menu → adapt to a larger ingredient pool

As the shift continues, the timer becomes more demanding while menu growth increases the number of possible choices.

The game includes start, play, investment, game-over, restart, Pause/Resume, sound effects, and background music.

How we built it

I built Sandwich Shift as a standalone mobile web game using HTML, CSS, and vanilla JavaScript.

Development was done iteratively in Google AI Studio using Gemini. Instead of asking for the entire game in one prompt, I used a sequence of focused prompts, tested each result, identified specific problems, and then asked Gemini to make narrow changes.

The first generated implementation used React, TypeScript, Vite, and several external dependencies. That was unnecessary for this prototype, so I directed Gemini to rebuild it as a small dependency-free project using only HTML, CSS, and JavaScript.

From there, I refined the game step by step: order generation, portrait layout, ingredient visuals, drag-and-drop and tap controls, target slots, penalties, timer progression, Pause/Resume, audio behavior, coin rewards, ingredient purchasing, and menu growth.

The ingredient catalog is stored in reusable data, while each shift tracks its own active ingredient set. Order generation and the visible grid both use that active set, allowing purchases to change the game system immediately.

The ingredient and sandwich artwork is generated locally with SVG graphics. The final build uses no external libraries, APIs, fonts, or remote assets and can run entirely offline.

I also added theme.mp3 as background music. It is an older music track that I own the copyright to and have used in my own games.

Challenges we ran into

One challenge was keeping the game centered on visual matching under transformation while making the ingredient relationships clear on a small portrait phone screen. Early versions relied too much on text and target hints. I removed ingredient names, enlarged the artwork, and replaced the hints with fixed category icons.

A second challenge was adding a Simulation & Management loop without creating a separate game system. The solution was to make investment directly affect the existing sandwich system: completing orders earns resources, spending those resources expands the menu, and that growth changes the ingredient pool used by future orders. This creates a readable invest → growth → system response loop while keeping the original matching mechanic at the center.

A third challenge was balancing player choice. The investment screen needed to create a real trade-off between purchasing an affordable ingredient now or saving coins for a later purchase, while keeping progression gradual enough that the menu still feels like it grows over the course of the shift.

Accomplishments that we're proud of

I am especially happy with how much variety the system creates from reusable ingredients. At the current prototype size, the ingredient categories can produce 864 possible orders.

I am also happy that the management layer changes the actual gameplay system rather than sitting beside it. The player earns coins, chooses how to invest them, sees the menu grow, and then encounters that expanded system in later orders.

The prototype is also completely standalone and dependency-free. It was tested successfully on desktop, iPhone, and Samsung devices, including touch controls, purchasing, audio, Pause/Resume, game-over, and restart behavior.

What we learned

The biggest lesson was how strongly visual clarity affects gameplay.

The matching mechanic improved substantially by removing unnecessary text, enlarging important visuals, improving the transformations between source and prepared ingredients, and making the category system understandable without taking up much screen space.

I also learned that a management loop can remain simple if the investment directly affects the core system. The player does not need a separate room, character, or mini-game to see growth. Expanding the ingredient menu changes both the available choices and the future order pool.

The iterative AI-assisted workflow also worked better when each prompt addressed one specific problem and was followed by testing before moving to the next change.

What's next for Sandwich Shift

The current prototype establishes the visual-matching core and the earn, invest, and grow management loop.

A future version could expand the ingredient catalog, add more categories and investment choices, and create substantially more order combinations while keeping the same central structure:

complete orders, earn coins, invest in the menu, and adapt as the system grows.