Google Balls: The Thrusting#

Push balls to opponent's side online. That's it. That's the game.

Run#

bun i
bun run dev

Theme System#

Colors are defined once in theme.ts and shared across:

1. Server - Direct import for puck colors
2. Client - CSS custom properties via getComputedStyle
3. CSS - Tailwind utilities via virtual import

How It Works#

styles.css: @import "virtual:theme.css"
     |
     v
theme-plugin.ts intercepts via globalThis.__tw_resolve / __tw_readFile
     |
     v
Generates @theme { --color-*: ... } block from theme.ts
     |
     v
Tailwind processes @theme directive -> CSS variables + utility classes

This produces Tailwind utilities like text-google-blue and CSS variables like --color-team-left.

Game Mechanics#

• Teams auto-balanced on join
• Field scales with player count (1000x600 to 1600x900)
• Puck count scales with players (4 base + 1 per 2 players)
• 60 second rounds
• Inactive players kicked at round end
• Max 3 connections per IP
• Max 50 players, overflow queued