// ASSETS
// leave the sounds for later
let assets = {font:"game", src:"game.ttf"};
let path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";

const frame = new Frame("fit", 1024, 768, "#111", "#222", assets, path);
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
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

    // REFERENCES for ZIM at http://zimjs.com
    // see http://zimjs.com/learn.html for video and code tutorials
    // see http://zimjs.com/docs.html for documentation
    // see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
    // see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

    // CODE HERE
    const time = 10;
    const colors = [green, pink, blue, orange, yellow];
    const wrong = new Rectangle(stageW, stageH, red);

		// create intro screen
    const intro = new Container(stageW, stageH).addTo();
    new Blob({
        controlType:"none",
        points:6,
        color:blue,
        interactive:false
    }).center(intro).sca(5, 3).sha("rgba(0,0,0,.3)", 10, 15, 10);

    // LOGO
    // we make the logo intro relevant to the game
    // we pretend to place the logo on the shadow
    new Label("PolyPlace", 130, "game", dark).center(intro).mov(10,10);
    const polyLogo = new Label("PolyPlace", 130, "game", pink).center(intro);
    polyLogo.wiggle("x", polyLogo.x, -5, 10, 700, 1000);
    polyLogo.wiggle("y", polyLogo.y, -5, 10, 700, 1000);
    var start = new Button({
        width:200,
        height:80,
        corner:0,
        backgroundColor:black,
        rollBackgroundColor:pink,
        label:"LOADING"
    }).center(intro).mov(0,150).tap(()=>{
				// the sound loading changes this to PLAY
        if (start.text == "PLAY") { 
            intro.removeFrom();
            frame.color = light;
            startGame();
        }
    });

    // Load sounds in after showing intro screen
    var sounds = ["bounce.mp3", "good.mp3", "bad.mp3", "backing.mp3"];
    loop(8, i=>{
    	sounds.push("b0"+(i+1)+".mp3"); // b01.mp3, b02.mp3, etc.
    });
    const soundLoader = frame.loadAssets(sounds, path);
    soundLoader.on("complete", ()=>{
        start.text = "PLAY"; // change button to play
        stage.update();
    });


    function startGame() {

			frame.asset("backing.mp3").play({loop:true, volume:.1});
			
			const time = 10;
			const colors = [green, pink, blue, orange, yellow];
			const wrong = new Rectangle(stageW, stageH, red);

			// POLYGONS
			// this function makes the polygons show up
			function makeTest(num) {
					let level = 0; // used to make the drop sound increase in pitch

					// the bounce sound introduces the polygons 
					// there is two notes to the sound 
					// so bring the base in for the first note 
					// and the player for the second
					frame.asset("bounce.mp3").play({volume:.7});

					let base = new Blob({
							controlType:"none",
							points:num,
							borderColor:grey,
							borderWidth:40,
							interactive:false
					})
							.center()
							.animate({alpha:0}, 10000); // slowly animate out base

					// this is how to get the edge angle for a regular polygon
					let angle = 360 / num; 
					// randomize point positions - but do not want to cross lines (not a polygon)
					loop(base.pointControls, (point, i)=>{
							// distribute the points randomly along rays from the center at each angle
							let a = angle*i;
							point.loc(
									// start the point at least 100 from center 
									// and then no more than 20 pixels from the top and bottom
									rand(100, stageH/2-20)*Math.sin(a*Math.PI/180),
									rand(100, stageH/2-20)*Math.cos(a*Math.PI/180)
							);
					});
					base.update(); // any manual setting of Blob points needs updating

					// Create the player but wait for second note in bounce sound to show it
					player = new Blob({
							controlType:"none",
							points:num,
							borderColor:colors[num-4], // each type gets different color
							borderWidth:30,
							handleSize:40,
							move:false,
							editPoints:false,
							selectPoints:false,
							allowToggle:false
					});
					timeout(250, ()=>{
							player.center();
							stage.update(); // remember update to see change
					})
					player.on("pressup", ()=>{
							// check if current point is on a base point 
							loop(base.pointControls, point=>{
									if (player.lastSelected.hitTestReg(point)) {
											// might press the same point more than once so use modulus
											frame.asset("b0"+(level%8+1)+".mp3").play({volume:.4});
											level++;
									}
							});

							// check to see if all points have been completed
							let remaining = loop(base.pointControls, point=>{
									let result = loop(player.pointControls, control=>{
											// for a ZIM loop a return is like a continue in a for loop 
											// and returning a value is like a break in a for loop 
											// the returned value is the returned value for loop 
											// so result will be true if the this player point hits a base point
											// if no value is returned, then loop value is undefined
											// so result would be undefined
											if (control.hitTestReg(point)) return true;
									});								
									if (!result) return true; // there are some remaining
							});
							// now that we have checked all the base points 
							// check to see if there are any remaining to be connected
							// if not, then player is done and we reset with a true parameter
							if (!remaining) {
									score++;
									scoreText.text = score;
									stage.update();
									reset(true);
							}
					})

					// TIMER
					// if we have hit the end of the timer without the player being done 
					// then we reset the game passing a false parameter
					let timerID = interval(1000, obj=>{
							timer.text = time-obj.count;
							if (obj.count == time) {
									reset(false);
							}
							stage.update()
					}, time); // how many times and start right away

					// END FUNCTION
					function reset(win) {
							// don't let user change player
							player.interactive = false;
							player.removeAllEventListeners();
							timerID.clear();
							if (!win) { 
									// if did not win, remove things and show red screen
									frame.asset("bad.mp3").play({volume:.8});
									base.removeFrom();
									player.removeFrom();
									wrong.addTo(); // could set under logo, etc...
									stage.update();
									timeout(1000, ()=>{
											// remove the red screen and make another test
											score--;
											scoreText.text = score;
											wrong.removeFrom();
											timer.text = time;
											makeTest(rand(4,6)); // just lost so make less sides
											stage.update();
									});
							} else {
									// when player wins animate the base
									frame.asset("good.mp3").play({volume:.8});                
									base.stopAnimate().alp(1).animate({
											props:{borderWidth:100},
											time:1200,
											ease:"elasticOut",
											call:()=>{
													// let user see then make a new test
													timeout(700, ()=>{
															base.removeFrom();
															player.removeFrom();
															timer.text = time;
															makeTest(rand(5,8)); // won so make more sides
													});
											}
									});
							}
					}
			}
			makeTest(5);

			// SCORE AND TIMER LABELS
			let score = 0;
			const scoreText = new Label({
					text:"0",
					backing:new Rectangle(100,54,purple),
					color:white,
					align:"center"
			}).alp(.8).pos(130,20,true)
			const timer = new Label({
					text:"10",
					backing:new Rectangle(100,54,blue),
					color:white,
					align:"center"
			}).alp(.8).pos(30,20,true)

			// LOGO LABELS
			// we make the logo intro relevant to the game 
			// we pretend to place the logo on the shadow
			// for real, might have started with this bigger in middle
			new Label("PolyPlace", 50, "game", dark).pos(33,33)
			const logo = new Label("PolyPlace", 50, "game", pink).pos(30,30);
			const startX = logo.x;
			const startY = logo.y;
			logo.wiggle("x", startX, -5, 10, 700, 1000, 4000);
			logo.wiggle("y", startY, -5, 10, 700, 1000, 4000);
			logo.on("wigglestop", ()=>{
					logo.animate({x:startX, y:startY}, 600); // final position
			});

			// MUTE
			new CheckBox(40, "SOUND", true).pos(30,30,false,true).alp(.5).change(e=>{
					createjs.Sound.muted = !e.target.checked;
			}); 

			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=Blob
		// https://zimjs.com/docs.html?item=Label
		// https://zimjs.com/docs.html?item=CheckBox
		// https://zimjs.com/docs.html?item=Button
		// https://zimjs.com/docs.html?item=Waiter
		// https://zimjs.com/docs.html?item=change
		// https://zimjs.com/docs.html?item=hitTestReg
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=stopAnimate
		// https://zimjs.com/docs.html?item=wiggle
		// https://zimjs.com/docs.html?item=loop
		// https://zimjs.com/docs.html?item=pos
		// https://zimjs.com/docs.html?item=alp
		// https://zimjs.com/docs.html?item=addTo
		// https://zimjs.com/docs.html?item=removeFrom
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=rand
		// https://zimjs.com/docs.html?item=loop
		// https://zimjs.com/docs.html?item=timeout
		// https://zimjs.com/docs.html?item=interval
		// https://zimjs.com/docs.html?item=zog

		// FOOTER
		// call remote script to make ZIM Foundation for Creative Coding icon
		createIcon(frame); 

}); // end of ready