# First Game

This walkthrough draws every touch and Piece the device reports. It is the smallest useful Board program: subscribe to input, and render what comes back.

## Subscribe to input

The input system delivers a full snapshot of every active contact each frame. You do not get individual touch-down or touch-up events; you get the current set of contacts, and your game diffs against the previous frame if it needs to.

```
import { Board } from "@board.fun/web-sdk";

const canvas = document.querySelector("canvas")!;
const ctx = canvas.getContext("2d")!;
let contacts: BoardContact[] = [];

if (Board.isOnDevice) {
  Board.input.subscribe((snapshot) => {
    contacts = snapshot;
    draw();
  });
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const c of contacts) {
    ctx.beginPath();
    ctx.arc(c.x, c.y, 40, 0, Math.PI * 2);
    ctx.fillStyle = "white";
    ctx.fill();
  }
}
```

## Tell fingers from Pieces

Each contact carries a `type`. Fingers report as `BoardContactType.Finger`. Pieces report as `BoardContactType.Glyph` and carry a `glyphId` you use to tell one Piece from another.

```
import { Board, BoardContactType } from "@board.fun/web-sdk";

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const c of contacts) {
    if (c.type === BoardContactType.Glyph) {
      // Identify a specific Piece by its glyphId, not by the type.
      ctx.fillStyle = colorForGlyph(c.glyphId);
      drawCircle(c.x, c.y, 50);
    } else {
      ctx.fillStyle = "white";
      drawCircle(c.x, c.y, 40);
    }
  }
}
```

> Identify Pieces by `glyphId`. The `type` only tells you it is a Piece. The `glyphId` tells you _which_ Piece, so branch on `glyphId` when you care about a specific Glyph.

## Coordinates

Contact positions are in device pixels with the origin at the top-left. `x` increases to the right and `y` increases downward. No vertical flip is required. See [Touch Coordinates](https://docs.dev.board.fun/web/reference/touch-coordinates) for the full mapping.

## Run it on a device

A desktop browser reports no touch input, so drawing there shows nothing. To see contacts, build, pack, and deploy to a device, see [Build & Deploy](https://docs.dev.board.fun/web/getting-started/build-and-deploy).

## Next

- Read the [Input & Pieces](https://docs.dev.board.fun/guides/touch-input) guide for the full contact model.
- Browse the other [Guides](https://docs.dev.board.fun/guides/) for session, saves, avatars, and more.