-- DreamStack Snake Viewer (Receiver)
-- Watches the snake game live via streaming relay.
--
-- Run with:
--   Tab 1: cargo run -p ds-stream                         (relay on :9100)
--   Tab 2: open examples/game-snake.html                  (player)
--   Tab 3: open this build in browser                     (viewer)

import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"

-- Connect to the snake game stream
let game = stream from "ws://localhost:9100/stream/snake"

view viewer = column [
  text "👁️ Snake Spectator" { variant: "title" }
  text "Watching the snake game live via relay" { variant: "subtitle" }

  row [
    Badge { label: "LIVE 🔴", variant: "error" }
    Badge { label: "Score: {game.score}", variant: "success" }
    Badge { label: "Length: {game.length}", variant: "info" }
    Badge { label: "Speed: {game.speed}ms", variant: "warning" }
  ]

  Card { title: "Game State" } [
    text "🐍 Head: ({game.headX}, {game.headY})" { variant: "title" }
    text "🍎 Food: ({game.foodX}, {game.foodY})"
    text "Direction: ({game.dirX}, {game.dirY})"

    when game.alive ->
      Badge { label: "PLAYING", variant: "success" }
    else ->
      Badge { label: "GAME OVER", variant: "error" }
  ]
]