refactor(frontend): introduce DrawableStone interface and use in renderer

Replace the ad-hoc StoneState | {...} union in drawStone/draw with a named DrawableStone type.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/protocol.ts

@@ -26,6 +26,13 @@ export interface StoneState {
   active: boolean
 }
 
+export interface DrawableStone {
+  x: number
+  y: number
+  rotation: number
+  team: Team
+}
+
 export interface ClientThrowMessage {
   type: 'throw'
   broom_x: number

frontend/src/renderer.ts

@@ -9,8 +9,8 @@ import {
   STONE_RADIUS,
   TWELVE_FT_RADIUS,
   HOUSE_CENTER,
+  type DrawableStone,
   type StoneState,
-  type Team,
 } from './protocol'
 
 export interface Renderer {
@@ -23,7 +23,7 @@ export interface Renderer {
     stones: StoneState[]
     broom: { x: number; y: number } | null
     animating: boolean
-    activeStonePos: { x: number; y: number; rotation: number; team: Team } | null
+    activeStonePos: DrawableStone | null
   }) => void
 }
 
@@ -102,7 +102,7 @@ export function createRenderer(canvas: HTMLCanvasElement): Renderer {
     }
   }
 
-  const drawStone = (stone: StoneState | { x: number; y: number; rotation: number; team: Team }) => {
+  const drawStone = (stone: DrawableStone) => {
     const c = worldToScreen(stone.x, stone.y)
     const r = STONE_RADIUS * scale()
     const color = stone.team === 'red' ? '#d93025' : '#f9ab00'
@@ -129,7 +129,7 @@ export function createRenderer(canvas: HTMLCanvasElement): Renderer {
     stones: StoneState[]
     broom: { x: number; y: number } | null
     animating: boolean
-    activeStonePos: { x: number; y: number; rotation: number; team: Team } | null
+    activeStonePos: DrawableStone | null
   }) => {
     ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)