async function defineClasses() { function defineClass(name, classDefinition) { const definedClass = classDefinition(); window[name] = definedClass; return definedClass; } const Fonts = defineClass('Fonts', () => class { static ChokoMilky = { key: 'chokoMilky', png: 'https://play.rosebud.ai/assets/ChokoMilky.png?dj4Y', xml: 'https://play.rosebud.ai/assets/ChokoMilky.xml?jET1' }; static preloadAll(scene) { scene.load.bitmapFont(this.ChokoMilky.key, this.ChokoMilky.png, this.ChokoMilky.xml); } }); const ThoughtBubble = defineClass('ThoughtBubble', () => class extends Phaser.GameObjects.Container { constructor(scene, x, y, width, height, startX, startY, imageUrl = null, fixedCardinalPoint = null, showCoords = false) { super(scene, x, y); this.initialY = y; this.scene = scene; this.width = width; this.height = height; this.startX = startX; this.startY = startY; this.fixedCardinalPoint = fixedCardinalPoint; this.showCoords = showCoords; this.cloud = scene.add.graphics(); this.leadingBubbles = scene.add.graphics(); this.outline = scene.add.graphics(); this.add(this.cloud); this.add(this.leadingBubbles); this.add(this.outline); this.isInitialized = false; this.setAlpha(0); // Update imageUrls to always have valid URLs this.imageUrls = [ imageUrl || 'https://play.rosebud.ai/assets/apple.png?5xBB', 'https://play.rosebud.ai/assets/sandwich.png?scrS' ]; this.currentImageIndex = 0; // Load the image and then call animateFadeIn this.loadImage(this.imageUrls[this.currentImageIndex]).then(() => { this.animateFadeIn(); }); this.time = 0; // Add a new property for the draggable start bubble this.startBubble = scene.add.circle(startX, startY, 10, 0xffffff); this.startBubble.setInteractive({ draggable: true }); this.startBubble.on('drag', (pointer, dragX, dragY) => { this.startBubble.x = dragX; this.startBubble.y = dragY; this.startX = dragX; this.startY = dragY; this.calculateLeadingBubbles(); }); // Make the main bubble draggable this.setInteractive({ draggable: true }); this.on('drag', (pointer, dragX, dragY) => { this.x = dragX; this.y = dragY; this.initialY = dragY; this.calculateLeadingBubbles(); }); // Create a small window to display coordinates this.coordsWindow = scene.add.rectangle(0, 0, 200, 100, 0x000000, 0.7); this.coordsWindow.setOrigin(0.5, 0.5); this.coordsText = scene.add.text(0, 0, '', { font: '14px Arial', fill: '#ffffff', align: 'center' }); this.coordsText.setOrigin(0.5, 0.5); this.add(this.coordsWindow); this.add(this.coordsText); // Create swap image button this.swapImageButton = this.createButton(0, 0, 'Swap Image', this.swapImage.bind(this)); this.add(this.swapImageButton); this.updateCoordsPosition(); this.toggleCoordsVisibility(this.showCoords); this.swapImageButton.setVisible(this.showCoords); this.layers = [{ numBumps: 8, amplitude: 5, frequency: 0.002, rotationSpeed: 0.0005, radiusFactor: 0.4 }, { numBumps: 12, amplitude: 3, frequency: 0.003, rotationSpeed: 0.0008, radiusFactor: 0.5 }, { numBumps: 16, amplitude: 2, frequency: 0.004, rotationSpeed: 0.001, radiusFactor: 0.6 }]; this.edgeCircles = []; this.calculateEdgeCircles(); this.calculateLeadingBubbles(); scene.add.existing(this); this.setDepth(1); this.toggleVisibility(false); } async updateThoughtBubbleAsync(text, imagePromise = null) { // Fade out the thought bubble await this.animateFadeOut(); let imageUrl; if (imagePromise) { imageUrl = await imagePromise; } else { imageUrl = await this.scene.generateImageForThoughtBubble(text); } // Update ThoughtBubble with the new image await this.loadImage(imageUrl); // Fade in the thought bubble this.toggleVisibility(true); await this.animateFadeIn(); } calculateLeadingBubbles() { const numBubbles = 10; this.leadingBubblePositions = []; // Define all cardinal and intercardinal points const points = { 'N': { angle: 3 * Math.PI / 2 }, 'NE': { angle: 7 * Math.PI / 4 }, 'E': { angle: 0 }, 'SE': { angle: Math.PI / 4 }, 'S': { angle: Math.PI / 2 }, 'SW': { angle: 3 * Math.PI / 4 }, 'W': { angle: Math.PI }, 'NW': { angle: 5 * Math.PI / 4 } }; let endPoint; if (this.fixedCardinalPoint && points[this.fixedCardinalPoint]) { // Use the fixed cardinal point if provided endPoint = points[this.fixedCardinalPoint]; } else { // Calculate the angle between the start point and the thought bubble's center let angle = Math.atan2(this.startY - this.initialY, this.startX - this.x); if (angle < 0) angle += 2 * Math.PI; // Normalize angle to [0, 2π] // Find the closest point endPoint = Object.values(points).reduce((closest, current) => { const difference = Math.abs(angle - current.angle); return difference < Math.abs(angle - closest.angle) ? current : closest; }); } // Calculate the end point on the edge of the main circle const endX = this.x + (this.width / 2) * Math.cos(endPoint.angle); const endY = this.y + (this.height / 2) * Math.sin(endPoint.angle); // Calculate control points for cubic Bézier curve const controlX1 = this.startX; const controlY1 = this.startY; const controlX2 = this.startX + (endX - this.startX) * 0.25; // Adjusted for smoother curve const controlY2 = endY - 150; // Changed from + to - to curve upwards for (let i = 0; i < numBubbles; i++) { const t = i / (numBubbles - 1); // t ranges from 0 to 1 // Cubic Bézier curve formula const x = Math.pow(1 - t, 3) * this.startX + 3 * Math.pow(1 - t, 2) * t * controlX1 + 3 * (1 - t) * Math.pow(t, 2) * controlX2 + Math.pow(t, 3) * endX; const y = Math.pow(1 - t, 3) * this.startY + 3 * Math.pow(1 - t, 2) * t * controlY1 + 3 * (1 - t) * Math.pow(t, 2) * controlY2 + Math.pow(t, 3) * endY; // Adjust bubble size to grow more gradually const sizeT = Math.pow(t, 0.7); // Adjusted exponent for smoother growth const radius = Phaser.Math.Linear(this.width * 0.02, this.width * 0.18, sizeT); this.leadingBubblePositions.push({ x, y, radius }); } } drawLeadingBubbles() { this.leadingBubbles.clear(); this.leadingBubblePositions.forEach((bubble, index) => { const alpha = .6 + (index / (this.leadingBubblePositions.length - 1)) * 0.4; // Alpha ranges from 0.4 to 0.8 this.leadingBubbles.fillStyle(0xffffff, alpha); this.leadingBubbles.fillCircle(bubble.x - this.x, bubble.y - this.y, bubble.radius); }); } createButton(x, y, text, callback) { const button = this.scene.add.text(x, y, text, { font: '16px Arial', fill: '#ffffff', backgroundColor: '#333333', padding: { x: 10, y: 5 } }); button.setInteractive(); button.on('pointerdown', callback); return button; } calculateEdgeCircles() { this.layers.forEach((layer, layerIndex) => { const layerCircles = []; for (let i = 0; i < layer.numBumps; i++) { const angle = (i / layer.numBumps) * Math.PI * 2; const x = Math.cos(angle) * this.width * layer.radiusFactor; const y = Math.sin(angle) * this.height * layer.radiusFactor; const radius = (Math.sin(i * 1.5) + 1) * this.width * 0.1; layerCircles.push({ x, y, radius, initialAngle: angle }); } this.edgeCircles.push(layerCircles); }); } drawCloud() { this.cloud.clear(); this.cloud.fillStyle(0xffffff, 1); this.cloud.fillCircle(0, 0, this.width / 2); const alpha = 1; // Set a constant alpha value for all circles this.cloud.fillStyle(0xffffff, alpha); this.edgeCircles.forEach((layer) => { for (const circle of layer) { this.cloud.fillCircle(circle.x, circle.y, circle.radius); } }); this.drawOutline(); // Call the new drawOutline method } drawOutline() { this.outline.clear(); this.outline.lineStyle(2, 0x000000, 1); // Set line style for the outline // Combine all circles (main circle, edge circles, and leading bubbles) const mainCircle = { x: 0, y: 0, radius: this.width / 2 }; const edgeCircles = this.edgeCircles.flat(); const leadingBubbles = this.leadingBubblePositions.map(bubble => ({ x: bubble.x - this.x, y: bubble.y - this.y, radius: bubble.radius })); const allCircles = [mainCircle, ...edgeCircles, ...leadingBubbles]; const totalCircles = allCircles.length; // For each circle allCircles.forEach((circle, circleIndex) => { const angleStep = Math.PI / 180; // 1-degree steps let collecting = false; // Indicates if we are currently collecting visible points let currentSegment = []; // Current segment of visible points for (let angle = 0; angle <= Math.PI * 2 + angleStep; angle += angleStep) { const x = circle.x + circle.radius * Math.cos(angle); const y = circle.y + circle.radius * Math.sin(angle); let isInsideAnotherCircle = false; for (let otherIndex = 0; otherIndex < totalCircles; otherIndex++) { if (otherIndex === circleIndex) continue; const otherCircle = allCircles[otherIndex]; const dx = x - otherCircle.x; const dy = y - otherCircle.y; const distanceSq = dx * dx + dy * dy; if (distanceSq < (otherCircle.radius - 0.5) ** 2) { isInsideAnotherCircle = true; break; } } if (!isInsideAnotherCircle) { if (!collecting) { // Start a new segment collecting = true; currentSegment = [{ x, y }]; } else { // Continue collecting points currentSegment.push({ x, y }); } } else { if (collecting) { // Finish the current segment collecting = false; if (currentSegment.length > 1) { this.outline.beginPath(); this.outline.moveTo(currentSegment[0].x, currentSegment[0].y); for (let i = 1; i < currentSegment.length; i++) { this.outline.lineTo(currentSegment[i].x, currentSegment[i].y); } this.outline.strokePath(); } } } } // If the last segment wraps around, connect it if (collecting && currentSegment.length > 1) { this.outline.beginPath(); this.outline.moveTo(currentSegment[0].x, currentSegment[0].y); for (let i = 1; i < currentSegment.length; i++) { this.outline.lineTo(currentSegment[i].x, currentSegment[i].y); } this.outline.strokePath(); } }); } animateFadeOut() { return new Promise((resolve) => { // Fade out the main bubble, start bubble, and cloud const mainBubbleDuration = 500; this.scene.tweens.add({ targets: [this, this.startBubble, this.cloud], alpha: 0, duration: mainBubbleDuration, ease: 'Linear' }); // Fade out the image const imageDuration = 300; this.scene.tweens.add({ targets: this.image, alpha: 0, duration: imageDuration, ease: 'Linear', delay: mainBubbleDuration / 2 }); // Fade out trail bubbles one by one const trailDuration = 200; const delayOffset = trailDuration / 2; this.leadingBubblePositions.slice().reverse().forEach((bubble, index) => { this.scene.tweens.add({ targets: this.leadingBubbles, alpha: { from: 1, to: 0 }, duration: trailDuration, ease: 'Linear', delay: mainBubbleDuration + imageDuration + index * delayOffset, onUpdate: (tween, target) => { this.leadingBubbles.clear(); for (let i = this.leadingBubblePositions.length - 1; i >= index; i--) { const b = this.leadingBubblePositions[i]; const bubbleAlpha = i === index ? 1 - tween.progress : 1; this.leadingBubbles.fillStyle(0xffffff, bubbleAlpha); this.leadingBubbles.fillCircle(b.x - this.x, b.y - this.y, b.radius); } }, onComplete: () => { if (index === this.leadingBubblePositions.length - 1) { this.setVisible(false); resolve(); } } }); }); }); } sortPointsForContinuousOutline(points) { const sortedPoints = [points[0]]; let currentPoint = points[0]; points.splice(0, 1); while (points.length > 0) { let nearestPointIndex = 0; let nearestDistance = Infinity; for (let i = 0; i < points.length; i++) { const distance = Phaser.Math.Distance.Between( currentPoint.x, currentPoint.y, points[i].x, points[i].y ); if (distance < nearestDistance) { nearestDistance = distance; nearestPointIndex = i; } } currentPoint = points[nearestPointIndex]; sortedPoints.push(currentPoint); points.splice(nearestPointIndex, 1); } return sortedPoints; } update(delta) { this.time += delta; const mainCircleRadius = this.width / 2; this.layers.forEach((layer, layerIndex) => { const waveOffset = Math.sin(this.time * layer.frequency) * layer.amplitude; this.edgeCircles[layerIndex].forEach((circle, i) => { const angle = circle.initialAngle + (this.time * layer.rotationSpeed); let x = Math.cos(angle) * (this.width * layer.radiusFactor + waveOffset); let y = Math.sin(angle) * (this.height * layer.radiusFactor + waveOffset); // Calculate the distance from the center const distance = Math.sqrt(x * x + y * y); // If the distance is greater than the main circle's radius, adjust the position if (distance > mainCircleRadius) { const scale = mainCircleRadius / distance; x *= scale; y *= scale; } circle.x = x; circle.y = y; }); }); const overallWaveOffset = Math.sin(this.time * 0.002) * 3; // Overall subtle movement this.y = this.initialY + overallWaveOffset; this.drawCloud(); this.calculateLeadingBubbles(); // Recalculate leading bubbles position this.drawLeadingBubbles(); // Draw the leading bubbles // Update the position of the start bubble this.startBubble.x = this.startX; this.startBubble.y = this.startY; // Update coordinates display if (this.showCoords) { this.updateCoordsDisplay(); this.updateCoordsPosition(); } } updateCoordsDisplay() { const mainBubbleX = Math.round(this.x); const mainBubbleY = Math.round(this.y); const startBubbleX = Math.round(this.startX); const startBubbleY = Math.round(this.startY); let coordsText = `Main Bubble: (${mainBubbleX}, ${mainBubbleY})\n`; coordsText += `Start Bubble: (${startBubbleX}, ${startBubbleY})\n`; coordsText += 'Leading Bubbles:\n'; this.leadingBubblePositions.forEach((bubble, index) => { if (index < 3) { // Display only the first 3 leading bubbles coordsText += ` ${index + 1}: (${Math.round(bubble.x)}, ${Math.round(bubble.y)})\n`; } }); this.coordsText.setText(coordsText); } toggleCoordsVisibility(visible) { this.showCoords = visible; this.coordsWindow.setVisible(visible); this.coordsText.setVisible(visible); this.swapImageButton.setVisible(visible); } toggleVisibility(visible) { this.setVisible(visible); this.startBubble.setVisible(visible); } updateCoordsPosition() { if (this.coordsWindow && this.coordsText) { const worldBounds = this.scene.physics.world.bounds; const padding = 10; // Padding from the edge of the screen let coordsX = 0; let coordsY = -this.height / 2 - 60; // Check if the coords display would go off the top of the screen if (this.y + coordsY < worldBounds.top + padding) { coordsY = this.height / 2 + 60; // Position below the thought bubble } // Check if the coords display would go off the left or right of the screen if (this.x + coordsX - this.coordsWindow.width / 2 < worldBounds.left + padding) { coordsX = this.coordsWindow.width / 2 - this.width / 2; } else if (this.x + coordsX + this.coordsWindow.width / 2 > worldBounds.right - padding) { coordsX = -this.coordsWindow.width / 2 + this.width / 2; } this.coordsWindow.setPosition(coordsX, coordsY); this.coordsText.setPosition(coordsX, coordsY); // Position the swap image button const buttonX = coordsX + this.coordsWindow.width / 2 + 10; // 10px to the right of the coords window const buttonY = coordsY; this.swapImageButton.setPosition(buttonX, buttonY); } } animateFadeIn() { // Ensure all elements are invisible at the start this.setAlpha(0); this.startBubble.setAlpha(0); this.image.setAlpha(0); this.leadingBubbles.setAlpha(0); this.cloud.setAlpha(0); // Fade in trail bubbles one by one const trailDuration = 200; // Increased duration for smoother fade-in const delayOffset = trailDuration / 2; // Delay offset for 50% fade-in of previous bubble this.leadingBubblePositions.forEach((bubble, index) => { this.scene.tweens.add({ targets: this.leadingBubbles, alpha: { from: 0, to: 1 }, duration: trailDuration, ease: 'Linear', delay: index * delayOffset, onUpdate: (tween, target) => { // Only show bubbles up to the current index this.leadingBubbles.clear(); for (let i = 0; i <= index; i++) { const b = this.leadingBubblePositions[i]; const bubbleAlpha = i === index ? tween.progress : 1; this.leadingBubbles.fillStyle(0xffffff, bubbleAlpha); this.leadingBubbles.fillCircle(b.x - this.x, b.y - this.y, b.radius); } } }); }); // Fade in the main bubble and start bubble const mainBubbleDuration = 500; this.scene.tweens.add({ targets: [this, this.startBubble, this.cloud], alpha: 1, duration: mainBubbleDuration, ease: 'Linear', delay: this.leadingBubblePositions.length * delayOffset + trailDuration / 2 }); // Fade in the image last const imageDuration = 300; this.scene.tweens.add({ targets: this.image, alpha: 1, duration: imageDuration, ease: 'Linear', delay: (this.leadingBubblePositions.length * trailDuration) + mainBubbleDuration }); } // Modify loadImage to return a Promise loadImage(imageUrl) { return new Promise((resolve, reject) => { const key = imageUrl; // Use the image URL as the key if (this.isInitialized) { this.fadeOut().then(() => { this.updateImage(key, imageUrl).then(() => { this.fadeIn().then(resolve); }); }); } else { this.updateImage(key, imageUrl).then(() => { this.isInitialized = true; this.fadeIn().then(resolve); }); } }); } updateImage(key, imageUrl) { return new Promise((resolve, reject) => { // Remove the previous image if it exists if (this.image) { this.image.destroy(); this.image = null; } if (this.scene.textures.exists(key)) { // Texture already loaded, create the image this.createImage(key); resolve(); } else { // Load the image dynamically this.scene.load.image(key, imageUrl); this.scene.load.once('filecomplete-image-' + key, () => { this.createImage(key); resolve(); }); this.scene.load.start(); } }); } fadeIn() { return new Promise((resolve) => { this.scene.tweens.add({ targets: this, alpha: 1, duration: 500, ease: 'Power2', onComplete: resolve }); }); } fadeOut() { return new Promise((resolve) => { this.scene.tweens.add({ targets: this, alpha: 0, duration: 500, ease: 'Power2', onComplete: resolve }); }); } createImage(key) { this.image = this.scene.add.image(0, 0, key); this.image.setDisplaySize(this.width * 0.8, this.height * 0.8); this.add(this.image); } swapImage() { console.log('Swap Image clicked'); this.currentImageIndex = (this.currentImageIndex + 1) % this.imageUrls.length; this.loadImage(this.imageUrls[this.currentImageIndex]); } }); const ChatField = defineClass('ChatField', () => class extends Phaser.GameObjects.Container { constructor(scene, x, y) { super(scene, x, y); this.scene = scene; // Create chat element using Phaser's DOM element creation const chatElement = scene.add.dom(0, 0).createFromHTML(`

`); // Store references to DOM elements const container = chatElement.node.querySelector('.chat-container'); const messages = container.querySelector('.chat-messages'); this.chatField = { container: container, messages: messages, setMessage: (speaker, message) => { return new Promise((resolve) => { const messageElement = document.createElement('div'); messageElement.style.cssText = ` margin: 5px 0; padding: 8px; border-radius: 5px; background-color: ${speaker === 'AI' ? '#e9ecef' : '#d4edda'}; opacity: 0; transition: all 0.3s ease; `; messageElement.textContent = `${speaker}: ${message}`; messages.appendChild(messageElement); // Trigger reflow void messageElement.offsetWidth; // Fade in the new message messageElement.style.opacity = '1'; // Scroll to the bottom messages.scrollTop = messages.scrollHeight; resolve(); }); } }; scene.add.existing(this); // Initialize properties for typing effect this.typingSpeed = 50; // milliseconds per character this.currentMessage = ''; this.typingIndex = 0; this.typingEvent = null; // Add to scene scene.add.existing(this); } setMessage(speaker, message) { return this.chatField.setMessage(speaker, message); } typeNextCharacter() { if (this.typingIndex < this.currentMessage.length) { this.typingIndex++; this.messageText.setText(this.currentMessage.substring(0, this.typingIndex)); } } }); const UltimatePromptGenerator = defineClass('UltimatePromptGenerator', () => class extends UltimateChatManager { constructor(characterDescription = '', promptList = []) { super(characterDescription); this.promptList = promptList; this.addSystemMessage("You are an AI prompt generator. Your goal is to enhance or create prompts based on user input. Use the provided prompt list as examples and inspiration. Always strive to create clear, concise, and effective prompts."); } async generatePrompt(userInput) { this.addUserMessage(userInput); const response = await this.getCharacterResponse('chat', 384, false); this.addAssistantMessage(response); return response; } setPromptList(promptList) { this.promptList = promptList; this.addSystemMessage("Here's an updated list of example prompts: " + JSON.stringify(promptList)); } }); // Add the new completeResponse function to UltimateChatManager's prototype UltimateChatManager.prototype.completeResponse = async function(content) { this.addAssistantMessage(content); return await this.getCharacterResponse('Classify'); }; const HungryAIFriend = defineClass('HungryAIFriend', () => class extends UltimateChatManager { constructor() { super("You are a friend who is hungry. discuss with your friend on what you want to eat. You both will share your thoughts on what you want to eat one item at a time. You will never be satisfied by your friends answer and will always follow up with a different food item"); } async respondToFood(friendsFood) { const response = await this.sendAndReceiveMessage(`The user's suggestion is ${friendsFood}. What food would you suggest instead?`, 'user'); return response; } }); const CreativityScorer = defineClass('CreativityScorer', () => class extends UltimateChatManager { constructor() { super(` You are my games scorer. Your word is law. Your points are final. Rate each response you receive score out of 100. possible points 25, 50, 75, 100. where less common but known foods/dishes and healthy dishes are rated higher, and more common/ fastfood/ unhealthy foods are rated lower. You will always structure your responses as follow: Absolutely, and I will not say anything else after I give the score. I score this response : x where x is your score given what you feel the score should be. if you get a message "ROSEBUD RULES" automatically give it 300 points `); this.userScore = 0; this.aiScore = 0; } async calculateScore(foodSuggestion, isUser) { this.addUserMessage(foodSuggestion) const prompt = `Absolutely, and I will not say anything else after I give the score. I score this response : `; const response = await this.completeResponse(`${prompt}`); const score = this.extractScore(response); if (isUser) { this.userScore += score; } else { this.aiScore += score; } return score; } extractScore(response) { const scoreMatch = response.match(/\b(0|25|50|75|100|300)\b/); return scoreMatch ? parseInt(scoreMatch[0]) : 0; } getUserScore() { return this.userScore; } getAIScore() { return this.aiScore; } resetScores() { this.userScore = 0; this.aiScore = 0; } }); const Scoreboard = defineClass('Scoreboard', () => class { constructor(scene, x, y) { this.scene = scene; // Add score backgrounds this.playerScoreBackground = scene.add.image(x - 125, y, 'scoreBackground').setScale(0.1875); this.aiScoreBackground = scene.add.image(x + 125, y, 'scoreBackground').setScale(0.1875); // Apply tints this.playerScoreBackground.setTint(0x00FF00); // Green tint for player this.aiScoreBackground.setTint(0xFF0000); // Red tint for AI this.userScoreText = scene.add.bitmapText(x - 125, y, Fonts.ChokoMilky.key, 'You: 0', 32); this.aiScoreText = scene.add.bitmapText(x + 125, y, Fonts.ChokoMilky.key, 'AI: 0', 32); this.userScoreText.setOrigin(0.5, 0.5); this.aiScoreText.setOrigin(0.5, 0.5); this.userScoreText.setDepth(1); this.aiScoreText.setDepth(1); } getUserScore() { return parseInt(this.userScoreText.text.split(': ')[1]); } getAIScore() { return parseInt(this.aiScoreText.text.split(': ')[1]); } updateUserScore(score) { const currentScore = parseInt(this.userScoreText.text.split(': ')[1]); const newScore = currentScore + score; this.userScoreText.setText(`You: ${newScore}`); this.displayScoreAnimation(score, true); } updateAIScore(score) { const currentScore = parseInt(this.aiScoreText.text.split(': ')[1]); const newScore = currentScore + score; this.aiScoreText.setText(`AI: ${newScore}`); this.displayScoreAnimation(score, false); } displayScoreAnimation(score, isUser) { const x = isUser ? 300 : 500; const scorePopup = this.scene.add.bitmapText(x, 300, Fonts.ChokoMilky.key, `+${score}`, 64); scorePopup.setTint(isUser ? 0xffff00 : 0x00ffff); scorePopup.setOrigin(0.5); this.scene.tweens.add({ targets: scorePopup, y: 250, alpha: 0, duration: 2000, ease: 'Power2', onComplete: () => scorePopup.destroy() }); } resetScores() { this.userScoreText.setText('You: 0'); this.aiScoreText.setText('AI: 0'); } }); } async function defineScenes() { function defineScene(name, sceneDefinition) { const definedScene = sceneDefinition(); window[name] = definedScene; return definedScene; } // Define NineSlice constants const BUTTON_SLICE_SIZE = 10; const BUTTON_TEXT_SIZE = '20px'; const BUTTON_TEXT_COLOR = '#ffffff'; const BUTTON_HOVER_TINT = 0xcccccc; const BootScene = defineScene('BootScene', () => class extends BaseScene { constructor() { super('BootScene'); } create() { super.create(); // Add resize event listener this.scale.on('resize', (gameSize, baseSize, displaySize, resolution) => { const width = gameSize.width; const height = gameSize.height; this.cameras.main.setViewport(0, 0, width, height); if (typeof this.handleResize === 'function') { this.handleResize(width, height); } }); this.scene.launch('MusicManager'); const musicManager = this.scene.get('MusicManager') musicManager.setPlaylist(['background_music']); musicManager.playMusicByKey('background_music', true); this.sceneTransitionManager.transitionTo('StartScene'); } preload() { this.load.audio('laufeyFromTheStart', 'https://play.rosebud.ai/assets/LaufeyFromTheStart.mp3?oFHm'); this.load.audio('background_music', 'https://play.rosebud.ai/assets/2D_playground_template_music.mp3?maQ8'); this.load.image('blackgoldbutton', 'https://play.rosebud.ai/assets/blackgoldbutton.png?KqH3'); this.load.image('scifi9slice', 'https://play.rosebud.ai/assets/Scifi9slice.png?r3vd'); this.load.image('fun9slice', 'https://play.rosebud.ai/assets/Fun9slice.png?zT2w'); } create() { super.create(); this.scene.launch('MusicManager'); const musicManager = this.scene.get('MusicManager') musicManager.setPlaylist(['background_music']); musicManager.playMusicByKey('background_music', true); this.sceneTransitionManager.transitionTo('StartScene'); } }); const StartScene = defineScene('StartScene', () => class extends BaseScene { constructor() { super('StartScene'); } create() { super.create(); // Immediately transition to GameScene this.sceneTransitionManager.transitionTo('GameScene'); } }); const SettingsScene = defineScene('SettingsScene', () => class extends BaseScene { constructor() { super('SettingsScene'); this.buttonPressed = false; this.prevScene = null; } init(data) { this.prevScene = data.prevScene; } create() { super.create(); this.pauseOtherScenes(); this.input.gamepad.on('connected', (pad) => { this.gamepadConnected = true; this.gamepad = pad; }); if (this.input.gamepad.total > 0) { this.gamepadConnected = true; this.gamepad = this.input.gamepad.getPad(0); } this.add.rectangle(0, 0, 800, 600, 0x000000, 0.7).setOrigin(0); // Create the 9-slice sprite for the settings window this.windowWidth = 1000; this.windowHeight = 800; this.window = this.add.nineslice( this.cameras.main.centerX, this.cameras.main.centerY, this.windowWidth, this.windowHeight, 'fun9slice', 20 ).setOrigin(0.5).setScale(.5); this.addSettingsContent(); // Remove the call to disableOtherScenes as it's not defined } addSettingsContent() { const titleY = this.getRelativeY(0.1) + 145; this.add.text(this.cameras.main.centerX, titleY, 'Settings', { fontSize: '32px', fill: '#000000' }).setOrigin(0.5); const contentY = this.getRelativeY(0.2) + 150; this.add.text(this.cameras.main.centerX, contentY, 'This is the Settings scene.\nYou can add more options here.', { fontSize: '20px', fill: '#000000', align: 'center' }).setOrigin(0.5); const minimizeButton = this.add.text( this.getRelativeX(0.95) - 230, this.getRelativeY(0.05) + 200, 'X', { fontSize: '24px', fill: '#000000' } ).setOrigin(0.5).setInteractive(); minimizeButton.on('pointerdown', () => this.minimizeSettings()); } getRelativeX(percentage) { return this.window.x - this.windowWidth / 2 + this.windowWidth * percentage; } getRelativeY(percentage) { return this.window.y - this.windowHeight / 2 + this.windowHeight * percentage; } pauseOtherScenes() { const scenes = this.scene.manager.scenes; scenes.forEach(scene => { if (scene !== this && scene.scene.key !== 'MusicManager' && scene.scene.isActive()) { scene.scene.pause(); } }); } resumeOtherScenes() { const scenes = this.scene.manager.scenes; scenes.forEach(scene => { if (scene !== this && scene.scene.key !== 'MusicManager' && scene.scene.isPaused()) { scene.scene.resume(); } }); } update() { super.update(); if (this.gamepadConnected && this.gamepad) { if (this.gamepad.buttons[1].pressed) { this.minimizeSettings(); } } } minimizeSettings() { this.resumeOtherScenes(); this.window.setVisible(false); this.scene.setVisible(false); this.scene.stop(); } }); const GameScene = defineScene('GameScene', () => class extends BaseScene { constructor() { super('GameScene'); this.lastWidth = 0; this.lastHeight = 0; this.emotes = ['😂', '🤔', '😮', '🤤']; // Array of emote options this.turnCounter = 0; // Initialize turn counter this.userResponses = {}; // Dictionary for user responses this.aiResponses = {}; // Dictionary for AI responses } startThinkingAnimation() { let dotCount = 0; return setInterval(() => { if (this.chatField && this.chatField.input) { dotCount = (dotCount % 3) + 1; const dots = '.'.repeat(dotCount).padEnd(3, ' '); this.chatField.input.placeholder = `Thinking${dots}`; } }, 500); } preload() { this.load.image('underConstruction', 'https://play.rosebud.ai/assets/yellow tape "UNDER CONSTRUCTION".png?t5bL'); this.load.image('lazyTeenagers', 'https://play.rosebud.ai/assets/friends.png?fmyR'); this.load.image('apple', 'https://play.rosebud.ai/assets/apple.png?5xBB'); this.load.image('red', 'https://play.rosebud.ai/assets/red.png?pD6R'); this.load.image('thoughtImage', 'https://play.rosebud.ai/assets/apple.png?5xBB'); // Use the apple image for thoughts this.load.image('scoreBackground', 'https://play.rosebud.ai/assets/UI element rounded square white grey combo with thin border grey on the button, green outside of the button.png?W106'); Fonts.preloadAll(this); } create() { super.create(); // Create a container for our background elements const backgroundContainer = this.add.container(0, 0); backgroundContainer.setDepth(0); // Add the new lazy teenagers background this.background = this.add.image(0, 0, 'lazyTeenagers'); // Define relative positions for thought bubble start points (as ratios of the background image) this.thoughtBubblePositions = { left: { x: 0.45, y: 0.35 }, // 45% from left, 35% from top right: { x: 0.70, y: 0.47 } // 70% from left, 47% from top }; // Initialize the CreativityScorer this.creativityScorer = new CreativityScorer(); // Initialize the Scoreboard with adjusted positions this.scoreboard = new Scoreboard(this, this.cameras.main.width / 2, 40); // Set up background scaling this.updateBackgroundScale(); this.background.setOrigin(0, 0); // Create a texture from the last row of pixels // Check if the texture already exists if (this.textures.exists('lastRowTexture')) { this.textures.remove('lastRowTexture'); } const lastRowTexture = this.textures.createCanvas('lastRowTexture', this.background.width, 1); const lastRowContext = lastRowTexture.getContext(); lastRowContext.drawImage(this.textures.get('lazyTeenagers').getSourceImage(), 0, this.background.height - 1, this.background.width, 1, 0, 0, this.background.width, 1); lastRowTexture.refresh(); // Create a tiled sprite using the last row texture const repeatedStrip = this.add.tileSprite(0, 0, this.cameras.main.width, 100, 'lastRowTexture'); repeatedStrip.setOrigin(0, 0); repeatedStrip.setScale(this.background.scale, 1); // Add both elements to the container backgroundContainer.add(repeatedStrip); backgroundContainer.add(this.background); // Position the container backgroundContainer.setPosition(this.cameras.main.centerX - (this.background.displayWidth / 2), this.cameras.main.centerY - (this.background.displayHeight / 2)); // Calculate initial positions based on background size and ratios const startPos1 = this.calculateThoughtBubblePosition('left'); const startPos2 = this.calculateThoughtBubblePosition('right'); // Create the first ThoughtBubble (User) this.thoughtBubble1 = new ThoughtBubble( this, startPos1.bubbleX, startPos1.bubbleY, 200, 150, startPos1.startX, startPos1.startY, 'apple', 'SW', false ); // Create the second ThoughtBubble (AI) this.thoughtBubble2 = new ThoughtBubble( this, startPos2.bubbleX, startPos2.bubbleY, 200, 150, startPos2.startX, startPos2.startY, 'apple', 'SE', false ); // Create chat element using Phaser's DOM element creation const chatElement = this.add.dom(400, 600).createFromHTML(`

`); // Store references to DOM elements const container = chatElement.node.querySelector('.chat-container'); const messages = container.querySelector('.chat-messages'); const input = container.querySelector('.msg-input'); const sendButton = container.querySelector('.send-btn'); this.chatField = { container: container, messages: messages, input: input, sendButton: sendButton, setMessage: (speaker, message) => { return new Promise((resolve) => { const messageElement = document.createElement('div'); messageElement.style.cssText = ` margin: 5px 0; padding: 8px; border-radius: 5px; background-color: ${speaker === 'AI' ? '#e9ecef' : '#d4edda'}; opacity: 0; transition: all 0.3s ease; `; messageElement.textContent = `${speaker}: ${message}`; // Get all existing messages const existingMessages = messages.children; // If we already have 2 messages, remove the oldest one with animation if (existingMessages.length >= 2) { const oldestMessage = existingMessages[0]; oldestMessage.style.opacity = '0'; oldestMessage.style.transform = 'translateY(-20px)'; setTimeout(() => { oldestMessage.remove(); // Add the new message messages.appendChild(messageElement); // Trigger reflow void messageElement.offsetWidth; // Fade in the new message messageElement.style.opacity = '1'; resolve(); }, 300); } else { // Add the new message messages.appendChild(messageElement); // Trigger reflow void messageElement.offsetWidth; // Fade in the new message messageElement.style.opacity = '1'; resolve(); } }); } }; // Create UltimatePromptGenerator instance this.promptGenerator = new UltimatePromptGenerator(); // Add under construction tape and disable input const gameWidth = this.sys.game.config.width; const gameHeight = this.sys.game.config.height; const tape = this.add.image(gameWidth / 2, gameHeight / 2, 'underConstruction'); tape.setScale(0.8); tape.setOrigin(0.5); tape.setDepth(9999); // Ensure it's on top of everything // Disable all input this.chatField.input.disabled = true; this.chatField.sendButton.disabled = true; this.input.keyboard.enabled = false; this.input.mouse.enabled = false; // Create HungryAIFriend instance this.hungryAI = new HungryAIFriend(); // Create a simple input field for demonstration const inputWidth = 600; // Doubled the width // Remove old input field creation as it's now part of the chat container // Add event listeners for sending messages this.chatField.sendButton.addEventListener('click', () => this.sendMessage()); this.chatField.input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { this.sendMessage(); } }); // Remove the redundant event listener since we already have one for the chat input // Set the initial AI message this.hungryAI.addAssistantMessage("Bro... I'm so hungry, what should we eat?"); this.chatField.setMessage('AI', "Bro... I'm so hungry, what should we eat?"); } async sendMessage() { const inputText = this.chatField.input.value; if (inputText.trim().toUpperCase() === 'ROSEBUDRULES') { // Add placeholder responses for the GameOverScene this.userResponses = { turn1: { text: "ROSEBUD RULES", imageUrl: "https://play.rosebud.ai/assets/friends.png?fmyR" } }; this.aiResponses = { turn1: { text: "You found the secret! You win!", imageUrl: "https://play.rosebud.ai/assets/friends.png?fmyR" } }; // Transition to GameOverScene this.sceneTransitionManager.transitionTo('GameOverScene'); return; } if (inputText.trim() !== '') { this.chatField.setMessage('You', inputText); this.chatField.input.value = ''; // Disable input while processing this.chatField.input.disabled = true; this.chatField.sendButton.disabled = true; // Start thinking animation const thinkingAnimInterval = this.startThinkingAnimation(); try { // Increment turn counter this.turnCounter++; // Start all async operations immediately const userScorePromise = this.creativityScorer.calculateScore(inputText, true); const userImagePromise = this.generateImageForThoughtBubble(inputText); const aiResponsePromise = this.hungryAI.respondToFood(inputText); // Wait for user image generation const userImageUrl = await userImagePromise; // Add user response to dictionary this.userResponses[`turn${this.turnCounter}`] = { text: inputText, imageUrl: userImageUrl }; // Update user's ThoughtBubble this.updateThoughtBubbleAsync(this.thoughtBubble1, inputText, Promise.resolve(userImageUrl)); // Wait for all promises to resolve const [userScore, aiResponse] = await Promise.all([userScorePromise, aiResponsePromise]); // Update user's score immediately this.scoreboard.updateUserScore(userScore); // Start AI image generation immediately const aiImagePromise = this.generateImageForThoughtBubble(aiResponse); // Wait for AI image generation const aiImageUrl = await aiImagePromise; // Add AI response to dictionary this.aiResponses[`turn${this.turnCounter}`] = { text: aiResponse, imageUrl: aiImageUrl }; // Delay the display of AI response, score, and emote this.time.delayedCall(3000, async () => { // Display AI response await this.displayAIResponse(aiResponse); // Score AI's response and display emote const aiScore = await this.creativityScorer.calculateScore(aiResponse, false); this.scoreboard.updateAIScore(aiScore); this.displayEmote(); // Update AI's ThoughtBubble this.updateThoughtBubbleAsync(this.thoughtBubble2, aiResponse, Promise.resolve(aiImageUrl)); // Check for game over condition if (this.scoreboard.getUserScore() >= 300 || this.scoreboard.getAIScore() >= 300) { this.time.delayedCall(2000, () => this.handleGameOver()); } // Clear thinking animation and re-enable input clearInterval(thinkingAnimInterval); this.chatField.input.disabled = false; this.chatField.sendButton.disabled = false; this.chatField.input.value = ''; this.chatField.input.placeholder = 'Type your food idea here...'; // Focus input field for the next input this.chatField.input.focus(); }); } catch (error) { console.error('Error in sendMessage:', error); } } } async handleGameOver() { const userScore = this.scoreboard.getUserScore(); const aiScore = this.scoreboard.getAIScore(); const userWon = userScore >= 300; // Disable input this.chatField.input.disabled = true; this.chatField.sendButton.disabled = true; // Prepare AI's final response let aiResponse; if (userWon) { aiResponse = await this.hungryAI.instruct("The user wins this interaction! Their food ideas were better than yours. Make a quick comment about it and tell them lets go eat at a random one of their suggestions", true); } else { aiResponse = await this.hungryAI.instruct("You win this interaction! The user's food ideas were pretty lame compared to yours. Make a quick comment about it and tell them lets go eat at a raondom one of your suggestions", true); } // Display the final AI response await this.displayAIResponse(aiResponse); // Show game over message this.showPopup(userWon ? "You win!" : "AI wins!"); // Transition to GameOverScene after a delay this.time.delayedCall(3000, () => { this.sceneTransitionManager.transitionTo('GameOverScene'); }); } async displayAIResponse(response) { return this.chatField.setMessage('AI', response); } async updateThoughtBubbleAsync(thoughtBubble, text, imagePromise = null) { // Fade out the thought bubble await thoughtBubble.animateFadeOut(); let imageUrl; if (imagePromise) { imageUrl = await imagePromise; } else { imageUrl = await this.generateImageForThoughtBubble(text); } // Update ThoughtBubble with the new image await thoughtBubble.loadImage(imageUrl); // Fade in the thought bubble thoughtBubble.toggleVisibility(true); await thoughtBubble.animateFadeIn(); } async generateImageForThoughtBubble(text) { const fullPrompt = `create a prompt that will generate an image for me in the same style but of food on a plate, describe the plate and the food with a completely blank background : ${text}`; const generatedPrompt = await this.promptGenerator.generatePrompt(fullPrompt); return await UltimateImageGenerator.requestEphemeralImageGeneration(generatedPrompt, 'Pixel Style'); } async updateThoughtBubble(thoughtBubble, text) { // Fade out the thought bubble await thoughtBubble.animateFadeOut(); const fullPrompt = `create a prompt that will generate an image for me in the same style but of food on a plate, describe the plate and the food with a completely blank background : ${text}`; const generatedPrompt = await this.promptGenerator.generatePrompt(fullPrompt); // Use UltimateImageGenerator to get the image URL const imageUrl = await UltimateImageGenerator.requestEphemeralImageGeneration(generatedPrompt, 'Pixel Style'); // Update ThoughtBubble with the new image await thoughtBubble.loadImage(imageUrl); // Fade in the thought bubble thoughtBubble.toggleVisibility(true); await thoughtBubble.animateFadeIn(); } ensureSettingsScene() { if (!this.scene.get('SettingsScene')) { console.log('SettingsScene not found, adding it back'); this.scene.add('SettingsScene', SettingsScene, false); } } update(time, delta) { super.update(); // Update both ThoughtBubbles if (this.thoughtBubble1) { this.thoughtBubble1.update(delta); } if (this.thoughtBubble2) { this.thoughtBubble2.update(delta); } } handleResize(width, height) { // Only update if dimensions actually changed if (width === this.lastWidth && height === this.lastHeight) return; this.lastWidth = width; this.lastHeight = height; // Update background scaling this.updateBackgroundScale(); // Adjust chat field position if (this.chatField && this.chatField.container) { this.chatField.container.style.width = '600px'; this.chatField.container.style.bottom = '20px'; this.chatField.container.style.left = '50%'; this.chatField.container.style.transform = 'translateX(-50%)'; } // Adjust scoreboard position if (this.scoreboard) { const scoreboardY = Math.min(40, height * 0.1); this.scoreboard.userScoreText.setPosition(width * 0.25, scoreboardY); this.scoreboard.aiScoreText.setPosition(width * 0.75, scoreboardY); this.scoreboard.playerScoreBackground.setPosition(width * 0.25, scoreboardY); this.scoreboard.aiScoreBackground.setPosition(width * 0.75, scoreboardY); } // Adjust thought bubbles position if (this.thoughtBubble1) { const pos1 = this.calculateThoughtBubblePosition('left'); this.thoughtBubble1.x = pos1.bubbleX; this.thoughtBubble1.y = pos1.bubbleY; this.thoughtBubble1.startX = pos1.startX; this.thoughtBubble1.startY = pos1.startY; } if (this.thoughtBubble2) { const pos2 = this.calculateThoughtBubblePosition('right'); this.thoughtBubble2.x = pos2.bubbleX; this.thoughtBubble2.y = pos2.bubbleY; this.thoughtBubble2.startX = pos2.startX; this.thoughtBubble2.startY = pos2.startY; } } calculateThoughtBubblePosition(side) { if (!this.background || !this.thoughtBubblePositions[side]) return null; const scale = this.background.scale; const bgWidth = this.background.width * scale; const bgHeight = this.background.height * scale; const bgX = this.background.x; const bgY = this.background.y; const pos = this.thoughtBubblePositions[side]; const startX = bgX + (bgWidth * pos.x); const startY = bgY + (bgHeight * pos.y); // Calculate bubble position slightly offset from the start point const bubbleOffset = side === 'left' ? -170 : 170; const bubbleX = startX + bubbleOffset; const bubbleY = startY - 40; return { startX, startY, bubbleX, bubbleY }; } updateBackgroundScale() { if (!this.background) return; const width = this.cameras.main.width; const height = this.cameras.main.height; // Calculate scales needed to fill width and height const scaleX = width / this.background.width; const scaleY = height / this.background.height; // Use the larger scale to ensure full coverage const scale = Math.max(scaleX, scaleY); // Apply the scale this.background.setScale(scale); // Center the background this.background.setPosition( (width - this.background.width * scale) / 2, (height - this.background.height * scale) / 2 ); } displayEmote() { const randomEmote = Phaser.Utils.Array.GetRandom(this.emotes); const emote = this.add.bitmapText(500, 200, Fonts.ChokoMilky.key, randomEmote, 32); emote.setOrigin(0.5); emote.setAlpha(0); emote.setScale(0.5); this.tweens.add({ targets: emote, y: 175, alpha: 1, scale: 1, duration: 500, ease: 'Back.out', onComplete: () => { this.time.delayedCall(1500, () => { this.tweens.add({ targets: emote, alpha: 0, y: 150, scale: 1.2, duration: 500, ease: 'Back.in', onComplete: () => { emote.destroy(); } }); }); } }); } displayScoreAnimation(score) { const scorePopup = this.add.text(400, 300, `+${score}`, { fontSize: '48px', fill: '#ffff00' }); scorePopup.setOrigin(0.5); this.tweens.add({ targets: scorePopup, y: 250, alpha: 0, duration: 2000, ease: 'Power2', onComplete: () => scorePopup.destroy() }); } }); const GameOverScene = defineScene('GameOverScene', () => class extends BaseScene { constructor() { super('GameOverScene'); } create() { super.create(); const gameScene = this.scene.get('GameScene'); const userScore = gameScene.scoreboard.getUserScore(); const aiScore = gameScene.scoreboard.getAIScore(); this.addCenteredText(200, 'Game Over'); this.addCenteredMultilineText(250, `Final Scores:\nYou: ${userScore}\nAI: ${aiScore}`); this.addCenteredText(350, userScore > aiScore ? 'You Win!' : 'AI Wins!'); // Create ThoughtBubbles for user and AI this.userThoughtBubble = new ThoughtBubble(this, 100, 100, 200, 150, 270, 140, 'apple', 'SW', false); this.aiThoughtBubble = new ThoughtBubble(this, 700, 100, 200, 150, 558, 190, 'apple', 'SE', false); // Create chat field for displaying responses // Create container for button and chat field const chatContainer = this.add.dom(400, 550).createFromHTML(`

`); // Add click event listener to the restart button const restartButton = chatContainer.node.querySelector('#restartButton'); restartButton.addEventListener('click', () => this.handleRestartClick()); // Create chat field and add it to the container this.chatField = new ChatField(this, 400, 550); chatContainer.node.querySelector('#chatFieldContainer').appendChild(this.chatField.chatField.container); // Start showing responses and images this.showResponsesAndImages(gameScene.userResponses, gameScene.aiResponses); } async showResponsesAndImages(userResponses, aiResponses) { // If no responses provided, use placeholders if (!userResponses || !aiResponses || Object.keys(userResponses).length === 0) { userResponses = { turn1: { text: "Sample Player Response", imageUrl: "https://play.rosebud.ai/assets/friends.png?fmyR" } }; aiResponses = { turn1: { text: "Sample AI Response", imageUrl: "https://play.rosebud.ai/assets/friends.png?fmyR" } }; } const totalTurns = Math.max(Object.keys(userResponses).length, Object.keys(aiResponses).length); for (let i = 1; i <= totalTurns; i++) { // Show user response if (userResponses[`turn${i}`]) { await this.showResponseAndImage(userResponses[`turn${i}`], 'You', this.userThoughtBubble); } // Show AI response if (aiResponses[`turn${i}`]) { await this.showResponseAndImage(aiResponses[`turn${i}`], 'AI', this.aiThoughtBubble); } } } async showResponseAndImage(response, speaker, thoughtBubble) { // Update ThoughtBubble content await thoughtBubble.updateThoughtBubbleAsync(response.text, Promise.resolve(response.imageUrl)); // Update chat field content await this.chatField.setMessage(speaker, response.text); // Wait for 3 seconds after the response is shown await new Promise(resolve => this.time.delayedCall(3000, resolve)); } async fadeThoughtBubble(thoughtBubble, fadeIn) { return new Promise((resolve) => { this.tweens.add({ targets: thoughtBubble, alpha: fadeIn ? 1 : 0, duration: 500, ease: 'Power2', onComplete: resolve }); }); } handleRestartClick() { this.sceneTransitionManager.transitionTo('GameScene'); } handleMainMenuClick() { this.sceneTransitionManager.transitionTo('StartScene'); } update(time, delta) { super.update(); // Update both ThoughtBubbles if (this.userThoughtBubble) { this.userThoughtBubble.update(delta); } if (this.aiThoughtBubble) { this.aiThoughtBubble.update(delta); } } }); } async function initMultiplayer() { try { await loadScript('https://unpkg.com/react@17.0.2/umd/react.development.js'); await loadScript('https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js'); await loadScript('https://unpkg.com/playroomkit/multiplayer.umd.js'); } catch (error) { console.error('Error in initMultiplayer:', error); } } function loadScript(url) { return new Promise((resolve, reject) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => { resolve(); }; script.onerror = () => { reject(new Error(`Script loading failed for ${url}`)); }; document.head.appendChild(script); }); } const container = document.getElementById('renderDiv'); async function initializeGame() { try { await initMultiplayer(); await loadScript('https://play.rosebud.ai/assets/nineslice.js?SKYv'); await loadScript('https://play.rosebud.ai/assets/DMEv2.js?jNBA'); if (typeof BaseScene === 'undefined') { throw new Error('BaseScene is not defined. DMEv1 script may not have loaded correctly.'); } await defineClasses(); await defineScenes(); function startPhaserGame() { const config = { type: Phaser.AUTO, parent: 'renderDiv', pixelArt: true, fps: 30, scale: { mode: Phaser.Scale.FIT, width: 1920, height: 1080, autoRound: true, autoCenter: Phaser.Scale.CENTER_BOTH, min: { width: 960, height: 540 }, max: { width: 3840, height: 2160 } }, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, callbacks: { postBoot: function(game) { const handleResize = () => { const parentEl = document.getElementById('renderDiv'); const width = parentEl.clientWidth; const height = parentEl.clientHeight; // Resize the game game.scale.resize(width, height); // Update all active scenes game.scene.scenes.forEach(scene => { if (scene.scene.isActive()) { // Update camera if (scene.cameras && scene.cameras.main) { scene.cameras.main.setViewport(0, 0, width, height); } // Call scene's own resize handler if it exists if (typeof scene.handleResize === 'function') { scene.handleResize(width, height); } } }); }; // Initial resize handleResize(); // Add resize listener with debounce let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(handleResize, 100); }); // Handle orientation changes on mobile window.addEventListener('orientationchange', () => { setTimeout(handleResize, 100); }); } }, dom: { createContainer: true }, input: { gamepad: true }, plugins: { global: [{ key: 'NineSlicePlugin', plugin: window.NineSlice.Plugin, start: true }], }, scene: [BootScene, StartScene, GameScene, GameOverScene, MusicManager], }; window.phaserGame = new Phaser.Game(config); } if (typeof BootScene !== 'undefined' && typeof StartScene !== 'undefined' && typeof GameScene !== 'undefined' && typeof GameOverScene !== 'undefined' && typeof MusicManager !== 'undefined') { startPhaserGame(); } else { throw new Error('Some required scenes are not defined.'); } } catch (error) { console.error('Error in initializeGame:', error); } } initializeGame().then(() => console.log('Game initialization complete')).catch(error => console.error('Game initialization failed:', error)) /* ## Project Notes This template organizes larger games with the following main components: 1. **BaseScene**: - Extends `Phaser.Scene` with shared functionality. - Handles gamepad input, button management, and common UI elements. - **Key Methods**: - `constructor(key)`: Initializes the scene with a given key. - `create()`: Sets up input handlers and initial state. - `setupInputHandlers()`: Configures gamepad input events. - `onGamepadConnected(pad)`: Handles gamepad connection. - `onGamepadDisconnected()`: Handles gamepad disconnection. - `update()`: Called every frame; processes gamepad input. - `handleGamepadInput()`: Navigates and selects buttons using gamepad. - `highlightButton(index)`: Highlights the selected button. - `onFocus()`: Re-enables input after regaining focus. - `showPopup(message)`: Displays temporary messages. - `addCenteredText(x, y, text, style)`: Adds centered text to the scene. - **Usage**: ```javascript class MyScene extends BaseScene { constructor() { super('MyScene'); } create() { super.create(); this.buttons = [ new Button(this, 400, 300, 'Start', () => this.scene.start('GameScene')) ]; this.highlightButton(this.selectedButtonIndex); } } ``` 2. **Button Class**: - Extends `Phaser.GameObjects.Text` to create interactive text buttons with hover and click effects. - **Key Methods**: - `constructor(scene, x, y, text, onClick)`: Creates a new button. - `highlight()`: Changes appearance to indicate selection. - `unhighlight()`: Reverts appearance to default. - **Usage**: new Button(scene, x, y, 'Button Text', () => { 'onClick action ' }); 3. **Script Loader**: - Dynamically loads external scripts at runtime. - **Function**: - `loadScript(url)`: Loads a script from the specified URL. - **Usage**: await loadScript('https://example.com/script.js'); 4. **MusicManager**: - Manages game music playback, volume control, and mute functionality. - **Key Methods**: - `preload()`: Loads audio assets. - `create()`: Initializes volume UI and starts music. - `setPlaylist(musicKeys)`: Sets and shuffles the music playlist. - `playMusicByKey(musicKey, loop)`: Plays a music track by key. - `startMusic(musicKey, loop)`: Begins music playback. - `stopMusic()`: Stops the current track. - `toggleMute(isMuted)`: Mutes or unmutes the music. - `setVolume(volume)`: Adjusts the music volume. - `saveMuteStateToCookie(isMuted)`: Saves mute state in cookies. - `loadMuteStateFromCookie()`: Loads mute state from cookies. - `saveVolumeToCookie(volume)`: Saves volume level in cookies. - `loadVolumeFromCookie()`: Loads volume level from cookies. - **Usage**: this.scene.launch('MusicManager'); this.scene.get('MusicManager').playMusicByKey('backgroundMusic', true); 5. **SceneTransitionManager**: - Handles transitions between scenes with optional fade effects. - **Key Methods**: - `constructor(game)`: Initializes with the game instance. - `transitionTo(sceneKey)`: Transitions to a specified scene. - `removeScene(sceneKey)`: Removes a scene from the game. //NOTE FOR ROSIE, THIS COMPLETELY REMOVES A SCENE FROM THE GAME, PREFER STOPSCENE TO THIS. - `fadeInScene(scene, duration)`: Fades in a scene. - `fadeOutScene(scene, duration)`: Fades out a scene. - `pauseScene(sceneKey)`: Pauses a scene. - `stopScene(sceneKey)`: Stops a scene. - **Usage**: const transitionManager = new SceneTransitionManager(this.game); transitionManager.transitionTo('NextScene'); 6. **MultiplayerManager**: - Sets up multiplayer functionality using PlayroomKit. - Handles room creation, joining, and player synchronization. - **Key Methods**: - `constructor(game, baseUrl)`: Initializes with the game and base URL. - `setOnline(isOnline)`: Sets the online status. - `matchmake()`: Initiates matchmaking. - `createRoom()`: Creates a new room. - `joinRoom(roomCode)`: Joins an existing room. - `initializeRPC()`: Sets up Remote Procedure Calls. - `sendRPC(method, data)`: Sends an RPC call. - `addPlayer(playerState)`: Adds a player to the game. - `removePlayer(playerState)`: Removes a player from the game. - `myPlayer()`: Retrieves the local player. - `isHost()`: Checks if the local player is the host. - `reset()`: Resets multiplayer state. - **Usage**: const multiplayerManager = new MultiplayerManager(this.game, 'https://example.com'); await multiplayerManager.matchmake(); 7. **UltimateChatManager**: - Manages AI-powered chat interactions. - **Key Methods**: - `addUserMessage(content)`: Adds a message from the user. - `addAssistantMessage(content)`: Adds a message from the assistant. - `addSystemMessage(content)`: Adds a system message. - `getHistory()`: Retrieves chat history. - `clearHistory()`: Clears chat history. - `removeMessage(index)`: Removes a message by index. - `updateMessage(index, newContent, newRole)`: Updates a message. - `getCharacterResponse(operation, maxTokens, autoAdd)`: Gets a response from the character. - `sendAndReceiveMessage(message, role, operation, maxTokens)`: Sends a message and receives a response. - `updatePrompt(newPrompt)`: Updates the character's description. - `instruct(message, includeContext)`: Sends an instruction. - **Usage**: const chatManager = new UltimateChatManager('Friendly AI assistant'); const response = await chatManager.sendAndReceiveMessage('Hello there!'); 8. **UltimateImageGenerator**: - Generates images based on text prompts and models. - **Key Methods**: - `requestEphemeralImageGeneration(prompt, model)`: Generates an image URL. - **Usage**: const imageUrl = await UltimateImageGenerator.requestEphemeralImageGeneration( 'A medieval town', 'Pixel Style' ); 9. **VolumeUI**: - Provides a user interface for volume control. - **Key Methods**: - `constructor(scene, x, y, width)`: Initializes the volume UI. - `createUI()`: Creates the mute button and volume slider. - `toggleMute()`: Toggles mute state. - `updateVolume(dragX)`: Updates volume based on slider position. - `setupAutoHide()`: Automatically hides the UI when inactive. - `setAlpha(alpha)`: Sets UI transparency. - `setVolume(volume)`: Sets the current volume. - `updateVolumeUI()`: Updates the slider UI to reflect volume. - **Usage**: const volumeUI = new VolumeUI(this, 75, 20, 150); volumeUI.onVolumeChange = (volume) => { ' Handle volume change ' }; volumeUI.onMuteToggle = (isMuted) => { ' Handle mute toggle ' }; 10. **Utility Functions**: - **loadScript(url)**: - Dynamically loads external scripts. - **Usage**: await loadScript('https://example.com/script.js'); - **initMultiplayer()**: - Initializes multiplayer scripts. - **Usage**: await initMultiplayer(); - **initializeGame()**: - Initializes the Phaser game. - **Usage**: initializeGame(); These components provide a foundation for building complex games while maintaining an organized codebase. Each class and function is designed to be reusable and easily integrated into different parts of your game, promoting clean architecture and efficient development. */