local boundary = {
    x = 200,
    y = 100, 
    w = 100, 
    h = 80,
}

local bg = {
    x = 200,
    y = 100, 
    w = 300, 
    h = 200
}
local p = {
    x = boundary.x + 10,
    y = boundary.y + 10,
    speed = 100,
}

function jin.core.onLoad()

end

local function clamp(x, a, b)
    return math.min(math.max(x, a), b)
end

function jin.core.onEvent(e)
    if e.type == "Quit" then 
        jin.core.stop()
    end
    if e.type == "KeyDown" then 
        if e.key == "Escape" then 
            jin.core.stop()
        end 
        if e.key == "Left" then 
            p.x = p.x - p.speed
        elseif e.key == "Right" then 
            p.x = p.x + p.speed
        elseif e.key == "Up" then 
            p.y = p.y - p.speed
        elseif e.key == "Down" then 
            p.y = p.y + p.speed
        end
        p.x = clamp(p.x, boundary.x, boundary.x + boundary.w)
        p.y = clamp(p.y, boundary.y, boundary.y + boundary.h)
    end 
end

local function updateBg()
    local x0 = boundary.x
    local x1 = boundary.x + boundary.w
    local tx = (p.x - x0) / (x1 - x0)
    bg.x = tx * (x1 - x0 - bg.w) + x0
    local y0 = boundary.y
    local y1 = boundary.y + boundary.h
    local ty = (p.y - y0) / (y1 - y0)
    bg.y = ty * (y1 - y0 - bg.h) + y0
end

function jin.core.onUpdate(dt)
    updateBg()
end

function jin.core.onDraw()
    jin.graphics.setColor(100, 100, 100, 255)
    jin.graphics.rect("fill", bg.x, bg.y, bg.w, bg.h)
    jin.graphics.setColor(255,255,255,255)
    jin.graphics.rect("line", boundary.x, boundary.y, boundary.w, boundary.h)
    jin.graphics.setColor(255,0,0,255)
    jin.graphics.rect("fill", p.x, p.y, 3, 3)
end