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>
This commit is contained in:
eros 2026-06-24 10:51:37 -07:00
parent 23a0cafe18
commit ef5349dfe3
2 changed files with 11 additions and 4 deletions

View File

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

View File

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