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	
	
	// Create board and pieces using Tile 
	// could use loops, etc. but perhaps this is conceptually easier
	
	const a = pink;
	const b = purple;
	const c = white;
	const d = black;
	const s = 80;
	
	const colors = series(a,b,a,b,a,b,a,b).flip();	
    const board = new Tile(new Rectangle(s,s,colors),8,8).center();

	const colorsA = series(d,c,d,c,d,c,d,c).flip();
	const piecesA = new Tile(new Circle(s/2,colorsA),8,3).loc(board);
	
	const colorsB = series(d,c,d,c,d,c,d,c).flip();	
	const piecesB = new Tile(new Circle(s/2,colorsB),8,3).pos(0,0,LEFT,BOTTOM,board);
	
	
	// loop through the pieces and adjust them
	// while we are at it, add each piece to a pool to pick the next move from
	// if a piece is picked and it has no move it will be removed from the pool 
	// and another piece is picked
	// once the turn is over all the existing pieces get added to the pool again
	
	// store the pieces opposite side as other property
	
	piecesA.pool = [];
	piecesA.loop(piece=>{
		if (piece.color!=c) piece.removeFrom();
		else {
			piece.sca(.8);
			piece.other = piecesB;
			piecesA.pool.push(piece);
		}
	}, true); // loop backwards when removing from container
	
	piecesB.pool = [];
	piecesB.loop(piece=>{
		if (piece.color!=d) piece.removeFrom();
		else {
			piece.sca(.8);
			piece.other = piecesA;
			piecesB.pool.push(piece);
		}
	}, true); // loop backwards when removing from container
	
	
	// these are the directions that we can try to move each piece
	
	const directions = [{x:s,y:s},{x:-s,y:s},{x:s,y:-s},{x:-s,y:-s}];
	
	const emitter = new Emitter({startPaused:true});
		
	
	let pieces;
	let count = 0; // use this to figure the side we are moving
	move();
	function move() {
		
		pieces = count++%2==0?piecesB:piecesA;
		
		// ZIM loops have no continue nor break
		// but rather use return for continue
		// and return a value to break 
		// the return value goes is returned by the loop
		// NOTE: a return value of true is given to the loop 
		// if it finishes looping 
		
		// so here, we will eventually return a "done" to status
		// if the piece has taken another or moved to a square 
				
		let status = false;
		while(status!="done" && pieces.pool.length>0) {

			// grab a piece
			let piece = pluck(pieces.pool, true);	// remove from pool
			piece.start = {x:piece.x, y:piece.y}; // record where we start

			shuffle(directions); // just go any which way!
			status = loop(directions, d=>{ // get a movement

				// relocate the piece to start then do the movement
				piece.loc(piece.start).mov(d.x,d.y)
				if (!piece.hitTestBounds(board)) return; // continue the loop

				let attack = piece.other.loop(other=>{
					if (piece.hitTestBounds(other)) {
						emitter.loc(other).spurt(10);
						other.alp(0).removeFrom();
						return "success";
					}
				});
				if (attack == "success") return "done"; // breaks the loop

				let empty = piece.parent.loop(sibling=>{ // loop our own pieces
					if (sibling == piece) return; 
					if (piece.hitTestBounds(sibling)) return false;
				});
				if (empty) return "done"; // otherwise will try another direction

			});
			if (status != "done") piece.loc(piece.start);	
		}
		
		// add all pieces back to pool - next time might be different arrangement
		pieces.pool = [];
		pieces.loop(piece=>{pieces.pool.push(piece);});
		
		stage.update();
		
		if (piecesA.numChildren==0 || piecesB.numChildren==0) {
			endGame();
			return;
		}
		
		timeout(.3, move);
	}
	
	function endGame() {
		frame.color = green;
		stage.update();
		timeout(2,()=>{
			new Pane(stageW+40,200,"💙 CREATIVE CODING LESSONS on CODEPEN",yellow).show(()=>{
				zgo("https://codepen.io/collection/JGNqmz?sort_by=item_created_at", "_blank")
			});
		});
	}	
	
	frame.madeWith().pos(30,30,RIGHT,BOTTOM)
	
	// docs for items used
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Pane
	// https://zimjs.com/docs.html?item=hitTestBounds
	// https://zimjs.com/docs.html?item=move
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=removeFrom
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=series

	createGreet(50,50);


});