←All posts

The Tutorial Blocked the Action It Asked Me to Take

The first-action prompt highlighted the input while its own backdrop swallowed every click

4 min read
playtesting
tutorial
interface
midnight-cargo

Midnight Cargo opens with a tutorial prompt: type "I look around" and press Enter. The action field was ringed in gold, the rest of the screen darkened, and the player could not click into the field. The tutorial had placed an invisible wall over its own target.

In a screenshot, the step looked correct. The spotlight sat in the right place and the instruction pointed at the right control. During play, onboarding stopped before the first turn because the browser still saw a full-screen layer covering the input.

The Spotlight Was Still a Wall

The first version used one dark backdrop across the entire viewport. A bright border and a large shadow created the appearance of a cutout around the target. That cutout existed only in the image presented to the player; the backdrop remained one solid interactive rectangle.

The replacement uses four backdrop panels arranged around the highlighted control. There is no overlay element inside the opening, so pointer and keyboard events reach the real input below. The opening and its tooltip are recalculated when the page scrolls or the viewport changes, which keeps the guide attached to controls inside the game's scrolling panels.

The first-action step now advances only after the player submits an action. There is no Next button that lets the guide claim the step was completed. A visible skip option remains available, with its confirmation inside the tutorial rather than in a browser alert.

One Screen Had Several Owners

Fixing the blocked input exposed a second problem. The tutorial managed its own timing while the opening narration, dice prompt, danger confirmation, combat transition, loot screen, and episode ending each managed theirs. Any one of those surfaces could take over the screen while the tutorial continued counting time behind it.

That produced stale guidance. A step could advance while hidden, then return pointing at a control the player had never used. A higher stacking order would only choose which overlay obscured the others; it would not decide which interaction deserved the player's attention.

The game now treats those moments as protected focus. The tutorial disappears and pauses on its current step whenever a blocking surface opens. It resumes from the same place after the player rolls, confirms a dangerous action, enters combat, collects loot, or closes the episode screen.

Dangerous actions also have a dedicated confirmation panel with Proceed and Cancel controls. While that decision is open, the normal action field and quick actions are disabled. The player gets one decision at a time, and the interface cannot accept an unrelated command behind the warning.

A Set of Features Still Felt Like a Set

Once the interactions stopped colliding, the visual seams became harder to ignore. The level-up screen used bright gradients and confetti. Combat used a light parchment treatment. Other dialogs used the game's dark stone and copper frame. Each component made sense alone, but the opening felt like several interfaces taking turns.

I moved the surfaces used during the opening onto the existing dialog frame and typography. Tutorial steps, dice rolls, combat transitions, loot, level-ups, victory moments, table chatter, recaps, and episode endings now share the same materials. Combat keeps its own identity through spacing and information density rather than changing the entire palette.

This pass also removed a width-based episode progress animation that caused needless layout work and replaced it with a transform. That detail will never appear in a feature list. It matters when several layered surfaces are trying to stay smooth on a small screen.

What Is Still Open

Automated checks now pin the tutorial around the game page, require manual steps to wait for the requested action, pause the guide behind blocking surfaces, and keep the opening dialogs on the shared frame. They also cover the paths where combat begins without a transition screen, which previously left an active fight hidden behind the normal game view.

Those checks cannot prove that every tooltip stays reachable on a phone or that a full Midnight Cargo run feels orderly. The next authenticated desktop and mobile playthrough still has to answer that. If the guide covers its target or returns at the wrong moment, the first turn is still unfinished.

A tutorial belongs to the game loop. It has to yield the screen, wait for the player, and survive the systems it is teaching.