type Component = (ctx: CanvasRenderingContext2D) => void
function base(fill: string, stroke?: string, stroke_width?: number): Component {
    return c => {
        c.fillStyle = fill;
        c.strokeStyle = stroke ?? "black";
        c.lineWidth = stroke_width ?? 0.05
        c.lineJoin = "miter"
        c.lineCap = "square"
        c.fillRect(-0.5, -0.5, 1,1)
        if (stroke) c.strokeRect(-0.5 + c.lineWidth / 2, -0.5 + c.lineWidth / 2, 1 - c.lineWidth, 1 - c.lineWidth)
    }
}
function circle(radius: number, fill: string, stroke?: string, stroke_width?: number): Component {
    return c => {
        c.fillStyle = fill;
        c.strokeStyle = stroke ?? "black";
        c.lineWidth = stroke_width ?? 0.05
        c.beginPath()
        c.arc(0.0, 0.0, radius, 0, Math.PI * 2)
        if (stroke) c.stroke()
        c.fill()
    }
}

const table = [base("rgb(133, 76, 38)")];
const floor = [base("#333", "#222", 0.05)];

export const FALLBACK_TILE: Component[] = [base("#f0f")];
export const TILES: { [key: string]: Component[] } = {
    "floor": floor,
    "table": table,
    "pan": [...table, circle(0.4, "#444", "#999")],
    "flour_bag": [...floor, circle(0.5, "#fff", "#ddd")],
}

export const FALLBACK_ITEM: Component[] = [circle(0.3, "#f0f")];
export const ITEMS: { [key: string]: Component[] } = {
    "raw-steak": [circle(0.3, "rgb(204, 55, 5)")],
    "steak": [circle(0.3, "rgb(112, 34, 0)")],
}