Display Tetris game state in Web UI

[Copilot]

The Tetris game board was only visible during active gameplay on the touchscreen. This adds a public (no login required) server-side-rendered page at /tetris/ showing the live game state.

Changes

• blueprints/tetris.py — New blueprint querying TetrisGame (board, score, level, lines, next/reserve blocks) and TetrisPlayer+Account (player color map). Converts the stored board JSON ([[cell_type, account_id], …]) into {css_class, color} dicts for the template. Includes current-session and all-time scoreboards. O-piece cells emit an additional cell-o CSS class to distinguish them visually.

• templates/tetris/index.html — Three-column layout: left sidebar (reserve + next block previews), centre (board grid), right sidebar (stats + scoreboards). Gracefully handles no-game state. Player colours are stored as data-color attributes rather than inline styles; vanilla JS reveals them on hover or board click/tap.

• static/css/tetris.css — CSS-only block rendering matched to the pygame sprite designs:

  • J/L/S/T/Z (cell-filled): three-layer background reproducing the outer frame → dark hollow → bright centre dot sprite pattern.
  • O (cell-filled cell-o): same frame + hollow, centre dot removed — visually distinct from the other tile pieces.
  • I-piece (cell-i-h1/h2/h3, cell-i-v1/v2/v3): stipple-dot radial-gradient tile with directional box-shadow highlights, replicating the pygame tube texture.
  • Walls use repeating-linear-gradient for a brick pattern.
  • A --tetris-cell-size CSS variable (default 16px) is overridden inside @media (max-width: 600px) to calc((100vw − 2×padding − 10px) / 12) so the board fills the full viewport width on mobile. Sidebars collapse to a wrapping row.
  • Blocks default to the site's primary blue; player colours are only applied via JavaScript on hover (individual cell) or board click/tap (toggle all).

• webserver.py — Registers blueprint at /tetris, adds "Tetris" nav entry.

Screenshots

Default view (blocks distinguishable by CSS style, player colours hidden):

After clicking the board (player colours revealed):

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Display Tetris in Web UI</issue_title>
<issue_description>Currently, the game state of tetris can only be viewed when a user bought a drink (so when he plays).
Add the current status of the Tetris game to website as well. It should be publicly viewable (no login required).

While the block style should be similar to the blocks used in the pygame version, it shouldn't reuse the exact assets, but use proper CSS design that fits the style of the rest of the page.

No need for live updates via JS or whatsover - just a server side rendered HTML like the rest of the page.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Display Tetris in Web UI #349

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[soerface]

Thanks for your contribution! I have a couple remarks:

• Block style: The stones are indistinguishable from each other, since every square looks the same. Please align with the style from the pygame version, so blocks can be told apart
• Mobile version: The full width of a mobile screen is not used
• Highlight of player colors: By default, don't color the blocks by player color. Instead, only color them if hovered over them or if activated by click / tap. You may use vanilla JavaScript for this

CC @dargmuesli

[soerface]

@copilot Thanks for your contribution! I have a couple remarks:

Block style: The stones are indistinguishable from each other, since every square looks the same. Please align with the style from the pygame version, so blocks can be told apart
Mobile version: The full width of a mobile screen is not used
Highlight of player colors: By default, don't color the blocks by player color. Instead, only color them if hovered over them or if activated by click / tap. You may use vanilla JavaScript for this
CC @dargmuesli

[dargmuesli]

@copilot feedback to implement arrived:

• Block style: The stones are indistinguishable from each other, since every square looks the same. Please align with the style from the pygame version, so blocks can be told apart
• Mobile version: The full width of a mobile screen is not used
• Highlight of player colors: By default, don't color the blocks by player color. Instead, only color them if hovered over them or if activated by click / tap. You may use vanilla JavaScript for this