Mock mode

Mock mode runs the UI in a browser with test data. Use it to work on a screen without starting Unity or playing through the game to reach it.

Run npm run dev from UI/ and open the terminal’s URL. For a browser connected to live Unity state instead, use the URL shown by Loom Doctor during Play; see Development workflow.

Configure mocks

See the bootBridge reference for option types and the differences between live startup and browser previews.

Edit UI/src/bridge.ts, which calls bootBridge during app startup. Supply every generated state field except loom, plus the actions your scenario needs:

import { bootBridge } from '@loomgui/bridge'

export const bridge = bootBridge({
  initial: {
    currentScreen: 'MainMenu',
    playerName: 'Avery',
  },
  mockActions: ({ state }) => ({
    startGame: () => {
      state.currentScreen = 'Loading'
    },
  }),
})

Use a factory, as in this example, when an action changes mock state or fires an event. Otherwise, pass an object containing the handlers.

Keep initial and mock handlers aligned with the generated contract; run npm run typecheck after changing it. The examples below illustrate different contracts; adapt their fields to yours.

For Unity image fields, use createMockImageSource(url) with a browser asset; see Browser development and mocks.

Add scenarios

Use scenarios for common UI states:

bootBridge({
  initial: {
    currentScreen: 'MainMenu',
    health: 100,
  },
  mockScenarios: {
    'Main menu': ({ state }) => { state.currentScreen = 'MainMenu' },
    'Combat HUD': ({ state }) => {
      state.currentScreen = 'Hud'
      state.health = 42
    },
    'Paused': ({ state }) => { state.currentScreen = 'Pause' },
  },
})

Name scenarios after the screen or condition they reproduce, such as “Empty inventory” or “Purchase failed.”

When to switch back to Unity

Test in Unity when the screen depends on gameplay code, scene changes, or Unity input settings. Before shipping, test it in a player build too.