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, 0, 1, 1)
        if (stroke) c.strokeRect(c.lineWidth / 2, 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.5, 0.5, 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")],
}