import Bilza, { Ui,hsl} from "../src/bilza.js";
//--------------------
//--Step-1 Create Bilza Engine. The first argument is the id of the canvas element and second argument tells bilza to set canvas equal to 70% of the window width.
const bil = new Bilza("bilza",70);
bil.background.color.set("darkblue");

//-- Add a Grid Element
bil.add(0,15).grid(10,10, "grey");

//---create a frameCounter component that counts running seconds.
bil.add(0,15).frameCounter(0);
//--------------------

//--create Text element

const txt = bil.add(2,8).text("Welcome To Bilza.js");
//--The text will appear after completion of 2nd sec
//-- and will stay on display till 8th second.

//-- Assign the jumbotron template to the text 
txt.templ.jumbotron();
//--set theme color to hsl=0 (red)
txt.theme.color( 0 );
//-- Set the entry animation 
txt.entryAni.topIn()
//-- Set the exit animation 
txt.exitAni.fadeOut();


//--------------------
//---These 2lines should always be the last lines of the animation code.
//--Ui object will enable the start and stop buttons on the screen to run and stop animation. Without this line the buttons will not work 
const ui = new Ui(bil);
//-- the draw line draw frame 0 onto the screen else the user will have to look at a blank screen unless play is clicked.
bil.draw();