add achievements, switch to random clips playlist

sketch.js

@@ -8,6 +8,17 @@ const _sounds = {
 };
 
 const _musicList = ["./Punch Deck - Snowfall.wav", "./Punch Deck - Elegance in Simplicity.wav", "./Punch Deck - Under the Stars.wav"]
+const _clipList = {
+	'FrailBloodyYamKappaPride': 60,
+	'GlutenFreeSolidCocoaSwiftRage': 45,
+	'ShakingSpoopyMetalKappaWealth': 30,
+	'FurtiveAbstemiousKittenTwitchRaid': 38,
+	'RefinedWealthyGuanacoOhMyDog': 42
+};
+
+let _clipIndex = 0;
+
+const _achievements = {};
 
 const _elements = {};
 const _elementAttrs = {};
@@ -19,6 +30,8 @@ let _message = {
 	visible: true
 };
 
+let _toast = null;
+
 let _smokeLevel = 0;
 let _smokeParticles = [];
 
@@ -34,16 +47,27 @@ function setup() {
 
 	_elements.twitchFrame = createElement("iframe"); _elements.twitchFrame.parent('#elementContainer');
 	_elementAttrs.twitchFrame = {
-		src: `https://player.twitch.tv/?video=877583964&parent=${window.location.hostname}&autoplay=true&controls=false&muted=true&time=0h7m0s`,
 		frameborder: 0,
 		scrolling: 'no',
 		allowfullscreen: true
 	};
+
+	// update twitch clip in iframe; set timeout for clip length & call this function after it ends
+	function updateClipSrc() {
+		const keys = Object.keys(_clipList);
+		const key = keys[_clipIndex++ % keys.length];
+		_elementAttrs.twitchFrame.src = `https://clips.twitch.tv/embed?clip=${key}&parent=${window.location.hostname}&autoplay=true&controls=false&muted=true`;
+
+		setTimeout(updateClipSrc, (_clipList[key] * 1000) + 3000);
+	}
+
+	updateClipSrc();
 }
 
 function preload() {
 	_images.desk = loadImage('./scene-desk.jpg');
 	_images.corrupted = loadImage('./corrupted.png');
+	_images.trophy = loadImage('./trophy.png');
 }
 
 function draw() {
@@ -105,6 +129,46 @@ function draw() {
 			element.attribute("style", "display:none;");
 		});
 	}
+
+	// draw toast (if visible)
+	if (_toast) {
+		if (typeof _toast.startAt === 'undefined') {
+			_toast.startAt = frameCount;
+		}
+
+		let xDiff = 0;
+		if  (frameCount - _toast.startAt < 10) {
+			xDiff = (11 - (frameCount - _toast.startAt)) * 10;
+		}
+		if (frameCount - _toast.startAt > 90) {
+			xDiff = (frameCount - _toast.startAt - 90) * 10;
+		}
+
+		stroke(255, 255, 255);
+		strokeWeight(1);
+		fill(40, 40, 40);
+		rect(...percent(50 + xDiff, 0, 50, 15));
+
+		noStroke();
+		fill(255, 255, 255);
+		textSize(width/80);
+		text("Achievement Complete!", ...percent(52 + xDiff, 2, 56));
+
+		fill(200, 200, 200);
+		textSize(width/40);
+		text(_toast.title, ...percent(52 + xDiff, 5.5, 56));
+
+		fill(150, 150, 150);
+		textSize(width/60);
+		text(_toast.text, ...percent(52 + xDiff, 10, 56));
+
+		image(_images.trophy, ...percent(90 + xDiff, 3.5, 7, 8));
+
+		// clear toast once finished
+		if (frameCount - _toast.startAt > 100) {
+			_toast = null;
+		}
+	}
 }
 
 function draw_desk() {
@@ -152,6 +216,14 @@ function draw_desk() {
 				_sounds.music = new Audio(_musicList[Math.floor(Math.random() * _musicList.length)])
 				_sounds.music.volume = 0.2;
 				_sounds.music.play();
+
+				if (!_achievements.music) {
+					_achievements.music = true;
+					_toast = {
+						title: "Neat Grooves",
+						text: "Listen to some music."
+					};
+				}
 			} else {
 				_sounds.music.pause();
 			}
@@ -168,12 +240,25 @@ function draw_desk() {
 					text: "I've recently been setting up an external GPU for my laptop! The laptop runs Arch Linux - not Windows - and has a complicated window manager that makes things difficult. Sometimes when I run Zoom, the GPU decides it doesn't want to, and causes a kernel panic that locks out my entire PC!",
 					visible: true
 				};
+
+				if (_smokeLevel > 1 && !_achievements.smoke) {
+					_achievements.smoke = true;
+					_toast = {
+						title: "It's Smoke!",
+						text: "Make the GPU start overheating."
+					};
+				}
 			} else {
 				_scene = 'error';
 				_message = {
 					text: "Look what you did! The GPU had too many smoke effects to render and it crashed! Now I have to restart my laptop again...",
 					visible: true
 				};
+
+				_toast = {
+					title: "You broke it!",
+					text: "Render too many smoke effects and break the game."
+				};
 			}
 		}
 	});
@@ -216,11 +301,27 @@ function draw_desk() {
 				_sounds.slurp.volume = 0.4;
 				_sounds.slurp.currentTime = 0;
 				_sounds.slurp.play();
+
+				if (!_achievements.hydrate) {
+					_achievements.hydrate = true;
+					_toast = {
+						title: 'Hydrated',
+						text: 'Drink a glass of water.'
+					};
+				}
 			} else {
 				_slurpLevel = 0;
 				_sounds.flush.volume = 0.4;
 				_sounds.flush.currentTime = 0;
 				_sounds.flush.play();
+
+				if (!_achievements.flush) {
+					_achievements.flush = true;
+					_toast = {
+						title: 'Over-Hydrated',
+						text: 'Drink too much water.'
+					};
+				}
 			}
 		}
 	});