Spaces:

Trudy
/

3-dots-live-api-game

Running

File size: 16,441 Bytes

21daab4

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta name="description" content="Web site created using create-react-app" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
		rel="stylesheet" />
	<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block"
		rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
	<title>Multimodal Live - Console</title>
</head>

<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<script>
		let mySketch;
		let osc; // oscillator for the tone
		let freq = 261; // base frequency of the tone
		let selectedCircleIndex = -1;
		let currentLevel = 1;
		let targetCircles = [];
		let matchThreshold = 20; // threshold for position and size matching
		let levelComplete = false;
		let score = 0;
		let moveCount = 0; // track number of moves in current level
		let totalMoves = 0; // track total moves across all levels
		let matchedCircles = []; // track which circles are matched
		let matchAnimationTime = []; // track animation time for each circle
		let gameComplete = false; // track if the entire game is complete
		let gameOver = false;
		let timeLeft = 30;
		let timerStarted = false;
		let timerInterval = null;
		const FINAL_LEVEL = 5; // number of levels in the game
		const VIBRANT_COLORS = [
			'#FF0000', // Red
			'#00FF00', // Lime
			'#0000FF', // Blue
			'#FF00FF', // Magenta
			'#00FFFF', // Cyan
			'#FFD700', // Gold
			'#FF4500', // OrangeRed
			'#32CD32', // LimeGreen
			'#8A2BE2', // BlueViolet
			'#FF1493'  // DeepPink
		];
		
		// Function to get n unique random colors from the VIBRANT_COLORS array
		function getRandomColors(n) {
			const shuffled = [...VIBRANT_COLORS];
			for (let i = shuffled.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
			}
			return shuffled.slice(0, n);
		}

		function calculateLevelScore() {
			// Base score for completing level
			const baseScore = 1000;
			// Penalty for number of moves (encourage efficiency)
			const movePenalty = Math.min(moveCount * 10, 500); // cap penalty at 500
			return Math.max(baseScore - movePenalty, 100); // minimum 100 points
		}

		function isCircleMatched(circle, target) {
			const maxDistance = target.radius * 0.20; // 5% of target radius for position tolerance
			const maxSizeDiff = target.radius * 0.20; // 5% of target radius for size tolerance
			
			const distX = Math.abs(circle.x - target.x);
			const distY = Math.abs(circle.y - target.y);
			const distRadius = Math.abs(circle.radius - target.radius);
			
			console.log(`Checking circle ${circle.color}:`);
			console.log(`  Position: (${circle.x.toFixed(2)}, ${circle.y.toFixed(2)}) vs target (${target.x.toFixed(2)}, ${target.y.toFixed(2)})`);
			console.log(`  Distance: X=${distX.toFixed(2)}, Y=${distY.toFixed(2)} (max allowed: ${maxDistance.toFixed(2)})`);
			console.log(`  Radius: ${circle.radius.toFixed(2)} vs ${target.radius.toFixed(2)} (diff: ${distRadius.toFixed(2)}, max allowed: ${maxSizeDiff.toFixed(2)})`);
			
			const isMatched = distX <= maxDistance && 
							 distY <= maxDistance && 
							 distRadius <= maxSizeDiff;
							 
			console.log(`  MATCH: ${isMatched}`);
			return isMatched;
		}

		function startTimer() {
			if (!timerStarted) {
				timerStarted = true;
				timeLeft = 30;
				timerInterval = setInterval(() => {
					timeLeft--;
					if (timeLeft <= 0) {
						clearInterval(timerInterval);
						gameOver = true;
					}
				}, 1000);
			}
		}

		function resetGame() {
			currentLevel = 1;
			score = 0;
			moveCount = 0;
			totalMoves = 0;
			gameComplete = false;
			gameOver = false;
			timerStarted = false;
			timeLeft = 30;
			if (timerInterval) {
				clearInterval(timerInterval);
			}
			matchedCircles = new Array(currentLevel).fill(false);
			matchAnimationTime = new Array(currentLevel).fill(0);
			generateTargets();
		}

		function checkMatch() {
			console.log("\n=== Checking Matches ===");
			// Check each circle individually
			let allMatched = true;
			let anyNewMatch = false;
			
			for(let i = 0; i < window.circles.length; i++) {
				const wasMatched = matchedCircles[i];
				const newMatch = isCircleMatched(window.circles[i], targetCircles[i]);
				
				if (newMatch !== matchedCircles[i]) {
					console.log(`Circle ${window.circles[i].color} match status changed: ${wasMatched} -> ${newMatch}`);
				}
				
				matchedCircles[i] = newMatch;
				
				if (matchedCircles[i] && !wasMatched) {
					// New match - play a tone and start animation
					anyNewMatch = true;
					matchAnimationTime[i] = 0;
					if (osc) {
						osc.freq(440 + i * 100); // Different tone for each circle
						osc.start();
						osc.amp(0.2);
						osc.fade(0, 0.3);
					}
				}
				
				if (!matchedCircles[i]) {
					allMatched = false;
				}
			}
			
			console.log("Current match status:", matchedCircles);
			console.log("All matched:", allMatched);
			
			if(allMatched && !levelComplete) {
				console.log("*** LEVEL COMPLETE! ***");
				levelComplete = true;
				currentLevel++;
				score += calculateLevelScore();
				totalMoves += moveCount;

				// Reset timer for next level
				timerStarted = false;
				if (timerInterval) {
					clearInterval(timerInterval);
				}
				timeLeft = 30;

				// Play success sound
				if (osc) {
					osc.freq(880); // Higher note for level complete
					osc.start();
					osc.amp(0.3);
					osc.fade(0, 0.5);
				}

				if (currentLevel > FINAL_LEVEL) {
					gameComplete = true;
					// Play victory sound
					if (osc) {
						osc.freq(1320); // Even higher note for game complete
						osc.start();
						osc.amp(0.4);
						osc.fade(0, 1.0);
					}
				} else {
					setTimeout(() => {
						levelComplete = false;
						generateTargets();
						matchedCircles = new Array(currentLevel).fill(false);
						matchAnimationTime = new Array(currentLevel).fill(0);
					}, 2000); // Changed to 2 seconds
				}
			}
		}

		function generateTargets() {
			// Reset move counter for new level
			moveCount = 0;
			matchedCircles = new Array(currentLevel).fill(false);
			matchAnimationTime = new Array(currentLevel).fill(0);
			
			// Calculate the middle 75% of the screen
			const margin = {
				x: window.innerWidth * 0.125,  // 12.5% margin on each side
				y: window.innerHeight * 0.125  // 12.5% margin on each side
			};
			const playArea = {
				width: window.innerWidth * 0.75,   // 75% of screen width
				height: window.innerHeight * 0.75   // 75% of screen height
			};
			
			// Get random colors for this level
			const levelColors = getRandomColors(currentLevel);
			
			// Generate new random positions for target circles
			targetCircles = [];
			window.circles = [];
			
			// Add circles based on current level (one more circle per level)
			for (let i = 0; i < currentLevel; i++) {
				const color = levelColors[i];
				const target = {
					color: color,
					x: margin.x + Math.random() * playArea.width,
					y: margin.y + Math.random() * playArea.height,
					radius: Math.random() * 50 + 75
				};
				targetCircles.push(target);
				
				// Create corresponding movable circle, positioned in a line in the middle 75% of screen
				const startX = margin.x + (playArea.width * (i + 1) / (currentLevel + 1));
				window.circles.push({
					color: color,
					x: startX,
					y: window.innerHeight/2,
					radius: 100
				});
			}
			
			// Update current circles copy
			window.circlesCurrent = window.circles.map((c) => ({ ...c }));
		}

		window.get_circles = function () {
			return {
				circles: window.circles,
				targets: targetCircles,
				level: currentLevel,
				isComplete: levelComplete
			};
		};

		window.change_circle = function (args) {
			if (!timerStarted) {
				startTimer();
			}
			moveCount++; // increment move counter
			// Play the tone here
			if (osc) {
				osc.start();
				osc.freq(freq);
				osc.amp(0.3);
				osc.fade(0, 0.2);
			}

			window.circlesCurrent = window.circles.map((c) => ({ ...c }))

			const color = args.color;
			const findIndex = window.circles.findIndex(
				(c) => c.color.toLowerCase() === color.toLowerCase(),
			);
			window.circles.splice(findIndex, 1, args);

			checkMatch();
		};
		
		window.circles = [
			{color: "#00FF00", x: window.innerWidth/2, y: window.innerHeight/2, radius: 100},
		];

		// Generate initial target positions
		generateTargets();

		// make a copy of it
		window.circlesCurrent = window.circles.map((c) => ({ ...c }))

		window.initSketch = function (container) {
			console.log("initialize sketch in public/index.html");

			console.log(container);
			if (mySketch) {
				return;
			}
			mySketch = new p5((p) => {
				p.setup = function () {
					console.log(p);
					
					p.createCanvas(window.innerWidth, window.innerHeight);
					container.innerHTMl = "";
					container.appendChild(p._renderer.canvas);

					// Create the oscillator here, after p5.sound has been initialized
					osc = new p5.Oscillator('sine');
					osc.amp(0); // Start with zero amplitude
				};

				function getSelectedCircleIndex() {
					for (let i = 0; i < circles.length; i++) {
						const circle = circles[i];
						if (
							p.mouseX > circle.x - circle.radius &&
							p.mouseX < circle.x + circle.radius &&
							p.mouseY > circle.y - circle.radius &&
							p.mouseY < circle.y + circle.radius
						) {
							console.log("clicked : " + i);
							return i;
						}
					}
					return -1;
				}

				p.mousePressed = function () {
					selectedCircleIndex = getSelectedCircleIndex();
				};

				p.mouseDragged = function () {
					if (selectedCircleIndex > -1) {
						moveCount++;
						const circle = circles[selectedCircleIndex];
						circle.x = p.mouseX;
						circle.y = p.mouseY;
						checkMatch();
					}
				};

				p.mouseReleased = function () {
					selectedCircleIndex = -1;
				};

				p.draw = function draw() {
					p.background(0);
					p.blendMode(p.BLEND);
					
					if (gameComplete || gameOver) {
						// Draw modal overlay
						p.background(0, 200);
						
						// Create centered content box
						const boxWidth = 500;
						const boxHeight = 400;
						const boxX = p.width/2 - boxWidth/2;
						const boxY = p.height/2 - boxHeight/2;
						
						// Draw box background
						p.fill(20);
						p.stroke(255);
						p.strokeWeight(2);
						p.rect(boxX, boxY, boxWidth, boxHeight, 20);
						
						// Draw content
						p.fill(255);
						p.noStroke();
						p.textFont('Space Mono');
						p.textAlign(p.CENTER, p.CENTER);
						
						// Title
						p.textSize(48);
						p.text(gameOver ? 'Time\'s Up!' : 'Game Complete!', p.width/2, boxY + 80);
						
						if (!gameOver) {
							// Game complete stats
							p.textSize(24);
							p.fill(200);
							p.text(`Final Score: ${score}`, p.width/2, boxY + 160);
							p.text(`Total Moves: ${totalMoves}`, p.width/2, boxY + 200);
							p.text(`Average Moves Per Level: ${(totalMoves/FINAL_LEVEL).toFixed(1)}`, p.width/2, boxY + 240);
							
							// Message
							p.textSize(18);
							p.fill(150);
							const efficiency = totalMoves < FINAL_LEVEL * 10 ? "Amazing efficiency!" :
											totalMoves < FINAL_LEVEL * 20 ? "Great job!" :
											"Well done!";
							p.text(efficiency, p.width/2, boxY + 280);
						} else {
							// Game over message
							p.textSize(24);
							p.fill(200);
							p.text(`Total Levels Completed: ${currentLevel - 1}`, p.width/2, boxY + 160);
							p.text(`Total Moves Made: ${totalMoves + moveCount}`, p.width/2, boxY + 200);
							p.text(`Circles Matched: ${matchedCircles.filter(m => m).length}/${currentLevel}`, p.width/2, boxY + 240);
							
							p.textSize(18);
							p.fill(150);
							p.text('Keep trying! You can do it!', p.width/2, boxY + 280);
						}
						
						// Draw try again/play again button
						const buttonWidth = 200;
						const buttonHeight = 50;
						const buttonX = p.width/2 - buttonWidth/2;
						const buttonY = boxY + boxHeight - 80;
						
						// Check if mouse is over button
						const mouseOverButton = p.mouseX > buttonX && p.mouseX < buttonX + buttonWidth &&
											 p.mouseY > buttonY && p.mouseY < buttonY + buttonHeight;
						
						// Draw button
						p.fill(mouseOverButton ? 40 : 30);
						p.stroke(255);
						p.strokeWeight(2);
						p.rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);
						
						// Button text
						p.fill(255);
						p.noStroke();
						p.textSize(24);
						p.text(gameOver ? 'Try Again' : 'Play Again', p.width/2, buttonY + buttonHeight/2);
						
						// Add click handler for button
						if (mouseOverButton && p.mouseIsPressed) {
							resetGame();
						}
						
						return; // Don't draw the rest of the game
					}
					
					// Draw target circles first (semi-transparent)
					for(let i = 0; i < targetCircles.length; i++) {
						const target = targetCircles[i];
						p.noStroke();
						p.blendMode(p.SCREEN);
						const targetColor = p.color(target.color);
						targetColor.setAlpha(50);
						p.fill(targetColor);
						p.circle(target.x, target.y, target.radius * 2);
					}
					
					// Update animation times
					for(let i = 0; i < matchAnimationTime.length; i++) {
						if (matchedCircles[i]) {
							matchAnimationTime[i] = (matchAnimationTime[i] + 0.1) % (Math.PI * 2);
						}
					}
					
					// Draw the movable circles
					for(let i = 0; i < window.circles.length; i++) {
						const circle = window.circles[i];
						p.noStroke();
						p.blendMode(p.SCREEN);
						p.fill(circle.color);
						
						// ease towards the final position
						const easing = 0.15;
						circlesCurrent[i].x = circlesCurrent[i].x + (circle.x - circlesCurrent[i].x) * easing;
						circlesCurrent[i].y = circlesCurrent[i].y + (circle.y - circlesCurrent[i].y) * easing;
						circlesCurrent[i].radius = circlesCurrent[i].radius + (circle.radius - circlesCurrent[i].radius) * easing;
						
						// If circle is matched, add white border and pulse animation
						if (matchedCircles[i]) {
							const pulseAmount = Math.sin(matchAnimationTime[i]) * 5;
							p.stroke(255);
							p.strokeWeight(2);
							p.circle(circlesCurrent[i].x, circlesCurrent[i].y, (circlesCurrent[i].radius * 2) + pulseAmount);
							p.noStroke();
							p.circle(circlesCurrent[i].x, circlesCurrent[i].y, circlesCurrent[i].radius * 2);
						} else {
							p.circle(circlesCurrent[i].x, circlesCurrent[i].y, circlesCurrent[i].radius * 2);
						}
					}

					// Draw UI elements with BLEND mode
					p.blendMode(p.BLEND);
					
					// Draw dark semi-transparent background for UI
					p.noStroke();
					p.fill(0, 180);
					p.rect(0, 20, p.width, 100);
					
					// Draw level and timer
					p.fill(255);
					p.textFont('Space Mono');
					p.textSize(24);
					p.textAlign(p.CENTER, p.TOP);
					p.text(`Level: ${window.circles.length} | Time Left: ${timeLeft}s`, p.width/2, 40);
					
					// Draw instructions
					p.textSize(14);
					p.fill(180);
					p.text('Speak to Gemini to move the circle to their place', p.width/2, 75);
					
					if(levelComplete) {
						p.textSize(32);
						p.textAlign(p.CENTER, p.CENTER);
						p.fill(255);
						p.text('Level Complete!', p.width/2, 170);
					}
				};
			});
		};
	</script>
</body>

</html>