jasonlooked #1
@ -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
|
||||||
|
|
|||||||
|
|||||||
@ -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)
|
||||||
|
|
||||||
|
eros
commented
draw stones animations all at the same time. not one animation after another. draw stones animations all at the same time. not one animation after another.
eros
commented
active stones don't need to be distinct from inactive stones. they can be all be active unless they go out of bounds active stones don't need to be distinct from inactive stones. they can be all be active unless they go out of bounds
|
|||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user
stone trajectory data structucture should be called trajectories with shape something like {stones: [{stoneid, rotation, team, trajectory:[x,y,theta]}])
same on the backend