const frame = new Frame("fit", 1024, 768, purple, 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
	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

	// game to keep the hair on Noodle's head
	// the head will move by physics spin() so it needs to be dynamic
	// but we want it to stay in one place
	// so use a revolute joint to a static object behind the head
	// drag everything but the head

	// Use contact to find out if a noodle has hit the floor
	// at which point the game is over until no noodles are on the floor
	// a timer keeps track of time
	// a scorer keeps track of the high score
	
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// PHYSICS

	const physics = new Physics();

	// normally we would just drag all dynamic objects with physics.drag();
	// but here we do not want to drag the head
	// so we need to keep track of the hair to drag
	const dragList = [];

	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// NOODLES
	
	// function to make a noodle from joined physics rectangles
	// tile the noodles in 12 flat rectangles across
	function noodle(x, y, color) {
		// obj, cols, rows, spacingH, spacingV
		let segs = new Tile(new Rectangle(50,10,color).centerReg(), 12, 1, -2).loc(x,y);
		var last;
		segs.loop(function (link, i) {
			// the segments are in a Tile which is its own container not at 0,0
			// move the segments to the stage so physics works on them properly
			// when we use addTo() ZIM will automatically take care of localToGlobal issues
			// when putting the segments from one coordinate space to the other
			// use linear and angular damping to slow down movement and speed up rotation
			link.addTo(stage).addPhysics({linear:.5, angular:5}).cur(); 
			// add a little dreadlock knot ;-)
			new Circle(6, color,dark).alp(.5).addTo(link).mov(0,5); // move down to center on rect
			dragList.push(link); // record for dragging
			// join the link to the last link at its end 
			// joints are measured from default center of body
			// only one joint point for revolute and we ignore min and max angle
			if (last) physics.join(link, last, new Point(link.x+link.width/2, link.y), null, null, null, "revolute")
			last = link;
		}, true); // loop backwards when removing children (from Tile to stage)
		return segs; // the Tile for the segments
	}

	// create the noodles
	// place them up top slightly off from one another
	// these will fall due to gravity onto our hero!
	loop([pink,blue,orange,green], (color,i)=>{
		let n = noodle(160+i*40,100-i*5,color);
	});
	
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// HEAD

	// pin the head to a static object (nice)
	// use a revolute joint, this time at center and with min and max rotation
	const pin = new Circle().center().addPhysics({dynamic:false});
	const head = new Circle(100, dark).centerReg().addPhysics();
	physics.join(head, pin, null, null, -20, 20, "revolute");

	const face = new Label({text:".T.", color:yellow})
		.sca(2,-3)
		.centerReg(head)
		.mov(0,5)

	// spin head with spin force (like impulse)
	interval({min:1000, max:2000}, ()=>{
		head.spin(rand(5,10,null,true)); // true is for negative range as well
	});

	// drag only the noodle parts
	physics.drag(dragList);

	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// HIT TEST FOR GROUND
	
	// contact() and contactEnd() can be used to keep track of hitting
	// this is physics based and is more accurate than hitTests on ZIM shapes
	// which are mapped to follow the phyics objects and may be slightly delayed

	// we can get when something starts a hit with contact()
	// but to tell if it is still hitting we need to watch contactEnd()
	// Use a Dictionary to keep track
	
	// A Dictionary is like an Object literal but uses any object as a key
	// rather than just a string like an Object literal can use
	// The Dictionary is just keeping track of things in an Array
	// but that keeping track of has already been done for us!
	const partsHitting = new Dictionary(true); // require unique
	var restartTimeout;
	let highScoreEmitted = false;
	const floor = new Rectangle(stageW, 10, yellow)
		.centerReg() // like all physics objects must be!
		.pos(0,0,null,true) // bottom
		.addPhysics(false) // make it not dynamic (static)
		.contact(function (obj) {
			// add object that is hitting floor to Dictionary
			partsHitting.add(obj, 1); // we need to add some value so use 1			
			if (!highScoreEmitted && timer.time > highScore) {
				highScore = decimals(timer.time);
				highScoreEmitted = true;
				timer.pause();
				score.score = highScore;
				if (localStorage) localStorage.noodle = highScore;
				// give a reward with Emitter (made later)
				reward.spurt(20);
			}
			floor.color = red; // bad
			face.color = grey; // sad
			timer.stop();
			// things bounce, timeout system helps settle the score
			if (restartTimeout) restartTimeout.clear();
		})
		.contactEnd(function (obj) {
			// remove part from Dictionary
			partsHitting.remove(obj);
			if (partsHitting.length == 0) {
				floor.color = yellow;
				face.color = yellow;
				// things bounce, timeout system helps settle the score
				restartTimeout = timeout(100, function () {
					highScoreEmitted = false
					timer.start(0);
				});
			}
		});

	
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// SCORES
	
	// Get any existing high score from localStorage 
	// NOTE: if forking this, localStorage might change between editing RUN and end user RUN
	// this is because they are on different subdomains - no big deal
	let highScore = 0;
	if (localStorage) {
		if (localStorage.noodle) highScore = localStorage.noodle;
	}
	const timer = new Timer(0,100,null,false).pos(30,30,true);
	const score = new Scorer(highScore).centerReg().pos(30,110,true);

	var reward = new Emitter({
		startPaused:true
	}).loc(score);


	const talk = new Label({
		text:"YO! I'M NOODLES\nKEEP MY HAIR ON!",
		lineHeight:80,
		color:white,
		size:80,
		align:"center",
		font:"impact"
	}).centerReg().rot(-25).pos(10,10).bot().sca(0).alp(0).animate({
		props:{alpha:.2, scale:1},
		wait:1000,
		time: 500,
		ease:"backOut"
	});


	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=Circle
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=addPhysics
	// 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=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=bot
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=addTo
	// 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=Physics
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=interval
	// https://zimjs.com/docs.html?item=decimals
	// https://zimjs.com/docs.html?item=Point
	// https://zimjs.com/docs.html?item=Dictionary
	// https://zimjs.com/docs.html?item=zog

	// FOOTER
	// make a greeting - come on in and join us on ZIM Slack!
	createGreet(); 

	// call remote script to make ZIM Foundation for Creative Coding icon
	createIcon(); 
	
	createNFT("https://teia.art/objkt/218474").sca(.8).loc(30,30)

}); // end of ready