import Bilza, { Ui, CompFactory as cf, hsl} from "../../src/bilza.js";
let bil = new Bilza("bilza", 70);

bil.alwaysOn().grid(10,10,"grey");
//--------------------
const caption = bil.add(0,15).text("blue",hsl(240));
caption.align(1,2)// --x align mid , y align bottom
caption.x.set(50);
caption.y.set(95);
caption.fontSize.set(100);
//--------------------
const comp = bil.add(0,15).line(10,50,90,50,hsl(240));

// comp.x.set(50);
// comp.y.set(50);
//---for line we use lineWidth instead of width ????
comp.lineWidth.set(50);
// comp.height.set(50);

// comp.align(1,1);

//---Goto commands for fillRect and text components

comp.color.goto(2, hsl( 0 ));
caption.color.goto(2, hsl( 0 ));
caption.content.goto(2, "red");
///////////////////////////////
comp.color.goto(4, hsl( 120 ));
caption.color.goto(4, hsl( 120 ));
caption.content.goto(4, "green");
///////////////////////////////
comp.color.goto(6, hsl( 240 ));
caption.color.goto(6, hsl( 240 ));
caption.content.goto(6, "blue");
///////////////////////////////
comp.color.goto(8, hsl( 180 ));
caption.color.goto(8, hsl( 180 ));
caption.content.goto(8, "cyan");
///////////////////////////////
comp.color.goto(10, hsl(300 ));
caption.color.goto(10, hsl( 300 ));
caption.content.goto(10, "megenta");
/////////////////////////////////
comp.color.goto(12, hsl( 60 ));
caption.color.goto(12, hsl( 60 ));
caption.content.goto(12, "yellow");
///////////////////////////////
const ui = new Ui(bil);
bil.draw();