---
title: GameOverlay
description: "Renders help and game results from an overlay controller."
---

```tsx
import { GameOverlay } from 'filedom';

<GameOverlay
  control={controls}
  status={status}
  width={1440}
  height={900}
  iconSize={96}
/>
```

Create `controls` with [useGameControls](/docs/reference/hooks/use-game-controls) or [useGameOverlay](/docs/reference/hooks/use-game-overlay). Render GameOverlay inside a [StageProvider](/docs/reference/components/stage-provider), after the play stage, so its files are created last and draw on top. The overlay runs its own Stage and park, and inherits the cover colour from the enclosing provider.

The overlay draws two [Text](/docs/reference/components/text) blocks: the `?` help
panel, shown only while `status` is `playing`, and the result banner, shown for
`won`, `lost` and `draw`. Their tiles own their files. On a win it also shows up
to four accent icons. The accents are its only pooled sprites and the only thing
its stage prebakes (`gameOverlayPrebake(handle)`); `winEffect: 'none'` turns
them off. The controller's `help` and `banner`
[TextStyle](/docs/reference/hooks/use-game-overlay#textstyle) options set how each
text block is drawn. A help panel with a `grid` shape is anchored at the bottom
of the desktop instead of the center.

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `control` | `GameOverlayController` | - | Overlay configuration and help state. |
| `status` | `GameResultStatus` | - | playing, won, lost, or draw. |
| `width` | `number` | - | Desktop width; the overlay centers on it. |
| `height` | `number` | - | Desktop height; the overlay centers on it. |
| `iconSize` | `number` | - | Finder icon size, used to scale the text and accents. |
| `park?` | `StagePoint` | - | Park override. Defaults to { x: width - iconSize, y: height - iconSize }. |