Rebuild the web shell to match the UI mockup (tabs and widget slots) #63

Open
opened 2026-10-03 19:09:15 +02:00 by PestoRosso · 0 comments
Collaborator

Requested by PestoRosso (project manager and game designer)

Rebuild the web shell to match the UI mockup (attached: UI mockup web.png). This is the desktop/web version; a mobile mockup will follow later.

Layout

  • A top bar with seven tabs: GAME, POKEDEX, ONLINE, MAP, WIDGETS, SAVES, OPTIONS.
  • Two widget slots stacked on the left, and the gameplay area taking the rest of the width, on the right.
  • With widgets off (the default), the gameplay area should use the full width. The mockup only shows the widgets-on layout, so this still needs a mockup or confirmation.

Decisions already made

  • ONLINE is a single tab replacing the current Link and Friends tabs. Online play is parked (#42), so for now it is an empty shell that says what is planned.
  • SAVES is the current Savegames tab.
  • OPTIONS holds app-level settings and stays separate from the in-game OPTION screen (see #56 for the palette option, which lives in the in-game OPTION screen).
  • WIDGETS is a new concept: visual gameplay elements shown beside the game, for example badges, the map, the party with health bars, and the Pokémon in the boxes.
    • The player chooses two widgets from the WIDGETS tab to fill the two slots.
    • Widgets are off by default. The WIDGETS button always stays in the top bar.
    • Widgets are an optional companion layer: they show more than the original game does, so the game itself must stay as the original has it when they are off.

Out of scope here

  • The individual widgets (party, badges, map, boxes and others). They will be separate tickets once the shell exists.
  • The mobile layout.

Notes

  • Does not serve 1:1 parity with the original, so the priority is low.
  • The existing tabs are listed in the README: Game, Savegames, Map, Pokédex, Link and Friends.
**Requested by PestoRosso (project manager and game designer)** Rebuild the web shell to match the UI mockup (attached: `UI mockup web.png`). This is the desktop/web version; a mobile mockup will follow later. **Layout** - A top bar with seven tabs: GAME, POKEDEX, ONLINE, MAP, WIDGETS, SAVES, OPTIONS. - Two widget slots stacked on the left, and the gameplay area taking the rest of the width, on the right. - With widgets off (the default), the gameplay area should use the full width. The mockup only shows the widgets-on layout, so this still needs a mockup or confirmation. **Decisions already made** - **ONLINE** is a single tab replacing the current Link and Friends tabs. Online play is parked (#42), so for now it is an empty shell that says what is planned. - **SAVES** is the current Savegames tab. - **OPTIONS** holds app-level settings and stays separate from the in-game OPTION screen (see #56 for the palette option, which lives in the in-game OPTION screen). - **WIDGETS** is a new concept: visual gameplay elements shown beside the game, for example badges, the map, the party with health bars, and the Pokémon in the boxes. - The player chooses two widgets from the WIDGETS tab to fill the two slots. - Widgets are off by default. The WIDGETS button always stays in the top bar. - Widgets are an optional companion layer: they show more than the original game does, so the game itself must stay as the original has it when they are off. **Out of scope here** - The individual widgets (party, badges, map, boxes and others). They will be separate tickets once the shell exists. - The mobile layout. **Notes** - Does not serve 1:1 parity with the original, so the priority is low. - The existing tabs are listed in the README: Game, Savegames, Map, Pokédex, Link and Friends.
PestoRosso added the P3 - someday label 2026-10-03 19:09:15 +02:00
samy was assigned by PestoRosso 2026-10-03 19:09:15 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kawa/Crystal#63