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
			
	const holder = new Container(stageW, stageH)
		.centerReg() // so animation rotates around the center
		.animate({
			wait:1,
			props:{rotation:360*3},
			rewind:true,
			rewindWait:1,
			ease:"backInOut",
			time:20,
			loopWait:1,
			loop:true
		});
	
	const emitter = new Emitter({
		obj:new Circle({min:30,max:100}, clear, yellow, 10),
		gravity:0,
		force:{min:2, max:10},
		num:5,
		startPaused:true
	}).center();
	
	// the animate() has a bounceOut ease 
	// and there is no event provided as to when fists first hit (only when the stop bouncing)
	// so we estimate .7 seconds with a timeout()
	// we call this function to start and each time the animate loops
	function bumpEffect() {
		timeout(.7, ()=>{
			emitter.spurt(20);
		});
	}
	bumpEffect();
	
	// we have basically the same animation so store it in a variable
	// to use twice - the second time we modify the x value 
	// note that "130" means a relative animation - so 130 from its current location 
	// whereas 130 would mean animate to an absolute value of 130 in its container
	const animation = {
		props:{x:"130"},
		ease:"bounceOut",
		time:2,
		loop:true,
		rewind:true,
		rewindTime:.5,
		rewindEase:"quadInOut",
		loopWait:1
	}	
	
	new Emoji("🤜",150)
		.center(holder) // add it to the holder so it rotates
		.mov(-200)
		.animate(animation);
	
	animation.props = {x:"-130"}; // adjust to animate to the left
	animation.loopCall = bumpEffect; // add the bumpEffect call to the end of the loop
	new Emoji("🤜",150)
		.sca(-1,1)
		.center(holder)
		.mov(200)
		.animate(animation);	
	
	frame.madeWith().pos(40,40,RIGHT,BOTTOM);
	createGreet(50,50);	
	        
    stage.update(); // needed to view changes
	
	// DOCS FOR ITEMS USED:
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Emoji
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=timeout
	
	
});