const frame = new Frame("fit", 1024, 768, black, darker);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation
	// see https://codepen.io/topic/zim/ for ZIM on CodePen
	
	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE
	
	// A classic concentration-like card-flipping game
	// Could easily add picture and sound assets - see https://zimjs.com/elearning/quiz.html
	
	new Label("T E T R A D I C   C O N C E N T R A T I O N", 22, null, light).pos(null,40,CENTER);
	new Label("Made with ZIM", 22, null, light, yellow)
		.cur()
		.pos(0,40,CENTER,BOTTOM)
		.tap(()=>{zgo("https://zimjs.com","_blank")});

	const colors = ["#1E00FF","#FF0061","#E1FF00","#00FF9E"];
	let answers = shuffle(colors.concat(colors,colors,colors)); // four sets or two sets of matches
	let index = 0;
	
	function makeCard() {
		let front = stage.frame.makeIcon().sca(1.1);
		let answer = answers[index++];
		let back = new Rectangle(front.width,front.height,answer);
		let card = new Flipper(front, back, null, null, null, null, null, false, false).centerReg({add:false});
		card.answer = answer; // store on card for ease of collection
		return card;
	}

	const cards = new Tile({
		obj:makeCard,
		cols:4,
		rows:4,
		spacingH:20,
		spacingV:15,
		clone:false // so keeps proper answer
	}).center().cur();

	let cardCount = 0;
	let testing = false;
	let lastCard;
	cards.on("mousedown", e=>{
		if (testing) return;
		let card = e.target.flipper;
		cardCount++;
		card.flip();
		card.noMouse();
		if (cardCount%2 == 0) {
			testing = true;
			if (lastCard.answer != card.answer)  {
				timeout(.5, () => {
					timeout(1, ()=> {
						card.flip();
						lastCard.flip();
						card.mouse();
						lastCard.mouse();
						testing = false;
						lastCard = null;
					});
				});
			} else {
				// correct match
				// let them look a little
				timeout(1, ()=>{
					card.animate({rotation:720, alpha:0}, 1, "backIn");
					lastCard.animate({
						props:{rotation:720, alpha:0},
						time:1,
						ease:"backIn",
						wait:.3,
						call:() => {
							card.rotation = 0;
							lastCard.rotation = 0;
							testing = false;
							lastCard = null;
							// test for last match
							let done = cards.loop(card=>{
								if (card.alpha > 0) return false;
							});
							if (done) {
								// shuffle the cards
								shuffle(answers);
								let index = 0;
								cards.loop(card=>{									
									let answer = answers[index++];
									card.back.color = answer;
									card.flip(false, 0);
									card.answer = answer;
									card.mouse();
								});
								cards.animate({
									props:{alpha:1},
									time:.7,
									sequence:.1
								}); // end getting all new cards 
							} // end done
						} // end card animate call
					}); // end card animate
				}); // end timeout
			} // end correct match
		} else { // only the first card flipped in pair
			lastCard = card;
		}
	});

	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=mouse
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=cur
	// https://zimjs.com/docs.html?item=pos
	// 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=Tile
	// https://zimjs.com/docs.html?item=Flipper
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=zog

}); // end of ready