# Trophies scene

The trophies scene shows everything a year earned at once: a grid of plates, each with its pixel art, name and rarity, hardest first. The ones the scan has not found yet stay a question mark. Use it near the end, before the summary.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/
>
> Four trophies found and two still hidden.

## Installation

```bash
pnpm add @react-wrapped/scenes @react-wrapped/core gsap
```

## Usage

Call `trophiesScene` with what the scene says, then with the key and the label it goes by. What comes back is a scene placed in a video: put it in the `scenes` array of a [player](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/). The code below places the scene in the preview above.

```tsx
import { PIXEL_ART } from "@react-wrapped/core";
import { trophiesScene } from "@react-wrapped/scenes";

export const scene = trophiesScene(
  {
    eyebrow: "Your trophy case",
    title: ["*5* achievements", "and *1* easter egg."],
    lede: "**2** still hiding in your year.",
    items: [
      { name: "All Weather", kind: "Achievement", rarity: "legendary", art: PIXEL_ART.crown },
      { name: "Long Haul", kind: "Achievement", rarity: "epic", art: PIXEL_ART.flame },
      { name: "Launch Day", kind: "Achievement", rarity: "rare", art: PIXEL_ART.rocket },
      { name: "Friday Shipper", kind: "Achievement", rarity: "common", art: PIXEL_ART.calendar },
      {
        name: "Night Watch",
        kind: "Achievement",
        rarity: "rare",
        art: PIXEL_ART.owl,
        hidden: true,
      },
      {
        name: "Rubber Duck",
        kind: "Easter egg",
        rarity: "legendary",
        art: PIXEL_ART.duck,
        hidden: true,
      },
    ],
  },
  { key: "trophies", label: "Trophy case", locked: true },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line above the headline. |
| `title` | `readonly string[]` | The headline, one entry per line. |
| `lede` | `string` | The line under the headline, above the case. |
| `items` | `readonly (WrappedToken & { hidden?: boolean })[]` | The trophies, hardest first. A `hidden` one is drawn as a question mark. The first twelve are shown and the rest become "+N more". |

> This scene has no texts to rewrite: what it shows was earned, so the editor only offers its transition.

## What a viewer can rewrite

Nothing. This scene has no fields, so the [scene editor](https://bettertyped.github.io/react-wrapped/docs/player/scene-editor/) only offers the transition out of it.

## How it comes in

The headline and the line come in, then the plates pop up one after another. The epic and legendary ones catch the light once everything has landed, and the hidden ones shake. The scene then holds for at least as long as its text takes to read. The way out is not the scene's: the player adds a [transition](https://bettertyped.github.io/react-wrapped/docs/transitions/).

## In a real year

The sample rebuilds the case every time the scan finds a drop, so a question mark turns into a trophy.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Fact scene](https://bettertyped.github.io/react-wrapped/docs/scenes/fact/)
- [Summary scene](https://bettertyped.github.io/react-wrapped/docs/scenes/summary/)
- [Persona scene](https://bettertyped.github.io/react-wrapped/docs/scenes/persona/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

Source: https://bettertyped.github.io/react-wrapped/docs/scenes/trophies/