import Bilza, { Ui, CompFactory as cf, hsl} from "../../src/bilza.js";

let bil = new Bilza("bilza", 70);
//-We gave size to canvas which will always be 640 X 360
bil.resizeCanvas(640 , 360);

const grid = bil.alwaysOn().grid(10,10,"grey");

const comp = bil.add(0,65).fillRect(hsl(240));
/**
 * Most important line should be applied immediately after creation
This will make the Dimentions (width and height) as 
non-responsive i.e they will use their values 
as raw numbers and not as percentage of screen 
width or height 
 */
comp.setRespDims(false);

comp.align(1,1);
comp.alignRotate(1,1);
comp.x.set(50);
comp.y.set(50);

comp.width.set(10);
comp.height.set(10);
//--note the value 10 to 300 is in pixels
comp.width.oscillate(1,60,10,300,5);
//--note the value 10 to 300 is in pixels
comp.height.oscillate(1,60,10,300,5);

const ui = new Ui(bil);
bil.draw();