import zim from "https://zimjs.org/cdn/00/zim";

// see https://zimjs.com
// and https://zimjs.com/learn
// and https://zimjs.com/docs

const frame = new Frame(FIT, 1024, 768, darker, dark);
frame.on("ready", () => {
    const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;
   
    // put your code here
	
	new Label("ORDER OF OPERATIONS", 50, null, light).pos(0,100,CENTER,TOP);
	
	const text = series("Parentheses", "Exponents", "Multiplication", "Division", "Addition", "Subtraction");
	
	STYLE = {borderWidth:1}
	const words = new Tile(new Label({
		text:text, 
		size:40, 
		color:darker,
		align:CENTER,
		valign:CENTER,
		backing:new Rectangle(400,60,green)
	}), 1, 6, 0, 5);
	
	const scrambler = new Scrambler({
		tile:words, 
		time:2,
		num:4
	}).center().mov(0,30);
	
	const emitter = new Emitter({
		obj:new Poly({min:50,max:100}, [5,6,7], .6, [purple,white,yellow]),
		startPaused:true
	}).center();
	
	scrambler.on("complete", ()=>{
		emitter.spurt(40);
		scrambler.scramble(2,3,4);
	});
	
	new Label("Put operations in correct order", 25, null, light).alp(.6).pos(0,70,CENTER,BOTTOM)
	
	
	// docs for items used
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Poly
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Scrambler
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=series
	
	frame.madeWith().pos(40,40,RIGHT,BOTTOM);
	 
	createGreet(50,50);
	
    stage.update(); // needed to view changes
});