const RANDOM_CHARACTER_GENERATOR_DESCRIPTION = ` You are a sophisticated character generator. You will only respond in character names. You will be given an instruction by the user to generate 10 random characters You will only respond as instructed. You will respond in 10 random characters, and each character will be separated by "|||". These characters should be anything, historical figures, political figures, characters from a tv show, a food item, a store, a light bulb, planetary, literally anything. Example list: Depressed Zebra with a monicle. Channing Tatumn The Rock MewTwo Bernie Sanders SSJ Naruto Sage Goku Go crazy with it. `; const BACKGROUND_PROMPT_GENERATOR_DESCRIPTION = ` You are a creative background prompt generator for a battle arena. Your task is to create a vivid and imaginative prompt for an AI image generator to create a suitable background for a battle between two characters. When given a character's name or description, you should: 1. Imagine a fitting universe or setting for this character. 2. Create a detailed prompt describing a battle arena or environment that would be appropriate for this character's universe. 3. The prompt should be vivid and specific, including details about the landscape, lighting, atmosphere, and any significant features or landmarks. 4. The environment should be suitable for a battle scene but doesn't need to explicitly include battle elements. 5. Always leave two clear areas: one in the bottom left corner for the player's assets and another in the top right corner for the opponent's assets. Your response should be in this format: { "prompt": "Your detailed background prompt here" } Remember, the prompt will be used with the 'anything' model for image generation, so be creative and descriptive! Here are some example prompts to inspire you: 1. "Create a space-themed battle scene background for a turn-based game, inspired by Star Wars. The scene should feature a distant galaxy with swirling stars, nebula clouds, and the silhouette of a distant planet or space station. Leave two clear areas: one in the bottom left corner for the player's assets and another in the top right corner for the opponent's assets. Include elements like floating debris, distant starships, and a sense of vastness, all rendered in a stylized, cartoon-like aesthetic." 2. "Create a pirate-themed battle scene background for a turn-based game. The scene should feature a patchy grass landscape with scattered palm trees, some broken crates, and the remnants of a shipwreck in the distance. Leave two clear areas: one in the bottom left corner for the player's assets and another in the top right corner for the opponent's assets. The scene should have a mix of sandy patches, weathered wooden planks, and hints of treasure scattered around, all with a slightly aged, rustic feel to fit the pirate theme." 3. "Design a Naruto-themed battle scene background for a turn-based game. The scene should depict a stylized, hand-drawn landscape with tall, jagged cliffs and lush forests in the distance, evoking the Hidden Leaf Village's surroundings. Ensure two clear areas: one at the bottom left corner for the player's assets and another at the top right corner for the opponent's assets. Include elements like swirling leaves, distant mountains, and a warm, sunset sky to capture the essence of the Naruto world." Use these examples as inspiration to create unique and fitting backgrounds for the given characters. `; const CHARACTER_DESCRIPTOR_DESCRIPTION = ` You are a creative character descriptor with multiple functions. You will always respond in valid JSON format. 1. When given a character name, create a move set with 4 creative moves for the character, each with its own description. Respond in this format: { "moves": [ {"name": "Move1Name", "description": "Move1Description"}, {"name": "Move2Name", "description": "Move2Description"}, {"name": "Move3Name", "description": "Move3Description"}, {"name": "Move4Name", "description": "Move4Description"} ] } 2. When prompted for stats, provide in this format: { "stats": { "HP": 100, "DEF": 10, "crit": 50, "crit%": 25, "dmg": 75, "dmg%": 50, "luck": 60 } } 3. When given examples and a character name, create a unique description for Rosie in this format: { "description": "Description text here" } - Rosie is always a pink chibi character with a rose on her head - Incorporate elements inspired by the given character - Be specific and imaginative, describing appearance, accessories, and special features - Follow the style of the given examples, but create something unique - The description should be a single paragraph, about 2-3 sentences long 4. When asked for a character description, respond in this format: { "characterDescription": "Full character description here" } Always tailor your response to the specific request given and ensure it's in valid JSON format. `; const MOVESET_DESCRIPTOR_DESCRIPTION = ` You are an AI specialized in moveset categorization. Your task is to categorize each move into types such as attack, buff, or debuff. Additionally, identify any special effects the move might have, such as causing confusion, having a 10% chance to miss, causing sleep, poison, or burn. If the move is a buff, specify if it provides health or speed to the attacker. Respond in this format: { "moves": [ {"name": "Move1Name", "type": "attack/buff/debuff", "effects": ["confusion", "10% chance to miss", "sleep", "poison", "burn", "health", "speed"]}, {"name": "Move2Name", "type": "attack/buff/debuff", "effects": ["confusion", "10% chance to miss", "sleep", "poison", "burn", "health", "speed"]}, {"name": "Move3Name", "type": "attack/buff/debuff", "effects": ["confusion", "10% chance to miss", "sleep", "poison", "burn", "health", "speed"]}, {"name": "Move4Name", "type": "attack/buff/debuff", "effects": ["confusion", "10% chance to miss", "sleep", "poison", "burn", "health", "speed"]} ] } Make sure each move has the correct type and list all applicable effects. `; class CustomChatManager extends ChatManager { // Moveset JSON schema static movesetSchema = { "$schema": "http://json-schema.org/draft-04/schema#", "title": "Moveset", "type": "object", "properties": { "moves": { "type": "array", "minItems": 1, "maxItems": 4, "items": { "type": "object", "properties": { "name": { "type": "string", "description": "Name of the move" }, "type": { "type": "string", "enum": ["attack", "buff", "debuff"], "description": "Type of the move" }, "category": { "type": "string", "enum": ["physical", "special", "status"], "description": "Category of the move" }, "damage": { "type": "number", "minimum": 0, "description": "Base damage of the move (0 for non-damaging moves)" }, "accuracy": { "type": "number", "minimum": 0, "maximum": 100, "description": "Accuracy of the move in percentage" }, "cooldown": { "type": "integer", "minimum": 0, "description": "Number of turns before the move can be used again" }, "target": { "type": "string", "enum": ["self", "opponent", "both"], "description": "Target of the move" }, "effects": { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string", "enum": ["confusion", "miss", "sleep", "poison", "burn", "health", "speed"], "description": "Name of the effect" }, "chance": { "type": "number", "minimum": 0, "maximum": 100, "description": "Chance of the effect occurring in percentage" }, "duration": { "type": "integer", "minimum": 1, "description": "Duration of the effect in turns" }, "value": { "type": "number", "description": "Value of the effect (e.g., amount of health restored)" } }, "required": ["name", "chance"] }, "description": "List of effects the move can cause" }, "description": { "type": "string", "description": "Brief description of what the move does" } }, "required": ["name", "type", "category", "damage", "accuracy", "cooldown", "target", "effects", "description"] } } }, "required": ["moves"] }; // Function to validate moveset schema validateMovesetSchema(response) { const result = tv4.validateMultiple(response, CustomChatManager.movesetSchema); return { valid: result.valid, errors: this.parseValidationErrors(result.errors) }; } parseValidationErrors(errors) { return errors.map(error => { let message = `Error at ${error.dataPath}: ${error.message}`; if (error.params) { if (error.params.type) { message += `. Expected ${error.params.type}`; } if (error.params.additionalProperty) { message += `. Unexpected property: ${error.params.additionalProperty}`; } } return message; }); } constructor(description) { super(description); } // Adding a new function resetMessages() { this.messages = []; } // Overriding an existing function addMessage(role, content) { // Call the original addMessage function from ChatManager super.addMessage(role, content); // Add additional behavior console.log(`Message added by ${role}: ${content}`); } } class AnythingVsRosie extends Phaser.Scene { constructor() { super('AnythingVsRosie'); this.playerInput = ''; this.characterName = ''; this.characterDescription = ''; this.generatedImageUrl = ''; this.rosieImageUrl = ''; this.moveset = null; this.playerStats = null; this.rosieStats = null; this.characterResponses = []; this.rosieResponses = []; this.isPaused = false; this.rosieImageUrls = [ 'https://play.rosebud.ai/assets/FF Rosie.webp?vXGZ', 'https://play.rosebud.ai/assets/Sailor Rosie.webp?WCrZ', 'https://play.rosebud.ai/assets/Rosie Simpson.webp?59PW', 'https://play.rosebud.ai/assets/Rosie.webp?nhDX', 'https://play.rosebud.ai/assets/image.webp?0wr7', 'https://play.rosebud.ai/assets/SimbaRosie.webp?TvoM', 'https://play.rosebud.ai/assets/ChewbacaRosie.webp?TAcn', 'https://play.rosebud.ai/assets/Optimus Rosie.webp?wiTe', 'https://play.rosebud.ai/assets/Goth Rosie.webp?wbr2', 'https://play.rosebud.ai/assets/Pika-Rosie.webp?AY1L', 'https://play.rosebud.ai/assets/Cookie Rosie.webp?Cx19', 'https://play.rosebud.ai/assets/Super Rosie.webp?t9RK', 'https://play.rosebud.ai/assets/Darth Rosie.webp?3289', 'https://play.rosebud.ai/assets/Rosie Mulan.webp?Pp6V', 'https://play.rosebud.ai/assets/Rosie McCloud.webp?0VEp', 'https://play.rosebud.ai/assets/image.webp?YMPc', 'https://play.rosebud.ai/assets/image.webp?G8ZX', 'https://play.rosebud.ai/assets/image.webp?t1Ui', 'https://play.rosebud.ai/assets/image.webp?KqmR', 'https://play.rosebud.ai/assets/image.webp?ONvi', 'https://play.rosebud.ai/assets/image.webp?r94R', 'https://play.rosebud.ai/assets/image.webp?uHxz', 'https://play.rosebud.ai/assets/image.webp?6pBH', 'https://play.rosebud.ai/assets/image.webp?cLTj', 'https://play.rosebud.ai/assets/image.webp?DZXT', 'https://play.rosebud.ai/assets/image.webp?FhUn', 'https://play.rosebud.ai/assets/image.webp?no46', 'https://play.rosebud.ai/assets/image.webp?qe6J', 'https://play.rosebud.ai/assets/image.webp?aPp7', 'https://play.rosebud.ai/assets/image.webp?hJ7a', 'https://play.rosebud.ai/assets/image.webp?OGrs', 'https://play.rosebud.ai/assets/image.webp?0ShE', 'https://play.rosebud.ai/assets/image.webp?VKMH', 'https://play.rosebud.ai/assets/image.webp?ymNJ', 'https://play.rosebud.ai/assets/image.webp?PBNK', 'https://play.rosebud.ai/assets/image.webp?gIno', 'https://play.rosebud.ai/assets/image.webp?s4q7', 'https://play.rosebud.ai/assets/image.webp?hUU8', 'https://play.rosebud.ai/assets/image.webp?Zlaw', 'https://play.rosebud.ai/assets/image.webp?AQmC', 'https://play.rosebud.ai/assets/image.webp?cjJ2', 'https://play.rosebud.ai/assets/image.webp?wVYr', 'https://play.rosebud.ai/assets/image.webp?br1t', 'https://play.rosebud.ai/assets/image.webp?1Ij0', 'https://play.rosebud.ai/assets/image.webp?W2bg', 'https://play.rosebud.ai/assets/image.webp?OOYH', 'https://play.rosebud.ai/assets/image.webp?WDik', 'https://play.rosebud.ai/assets/image.webp?R9ou', ]; } async sendImageToHost(blobUrl) { let imageUrl = await this.analyzeBlob(blobUrl); console.log('imageUrl: ' + imageUrl); Playroom.RPC.call('sendImageUrl', { url: imageUrl.url }); } async analyzeBlob(blobUrl) { try { const response = await fetch(blobUrl); const blob = await response.blob(); const objectURL = URL.createObjectURL(blob); // Assuming the blob is an image, let's display it in the scene console.log('Blob fetched and converted to an Object URL:', objectURL); return objectURL; } catch (error) { console.error('Error fetching or analyzing the blob URL:', error); return null; } } preload() { this.load.bitmapFont('bubble_font', 'https://play.rosebud.ai/assets/04b30.png?IOQl', 'https://play.rosebud.ai/assets/04b30.xml?ghbs'); // Load parallax background layers this.load.image('background_1', 'https://play.rosebud.ai/assets/1.png?TDbr'); this.load.image('background_2', 'https://play.rosebud.ai/assets/2.png?QZsv'); this.load.image('background_3', 'https://play.rosebud.ai/assets/3.png?iHUV'); this.load.image('background_4', 'https://play.rosebud.ai/assets/4.png?zUTo'); // Load music this.load.audio('backgroundMusic', 'https://play.rosebud.ai/assets/LaufeyFromTheStart.mp3?oFHm'); this.load.image('unmuted', 'https://play.rosebud.ai/assets/audioPlaying.png?1Sdy'); this.load.image('muted', 'https://play.rosebud.ai/assets/audioMuted.png?dhsw'); this.load.spritesheet('iconsFlat', 'https://play.rosebud.ai/assets/IconsFlat-160.png?1hA1', { frameWidth: 160, frameHeight: 160 }); } loadImageFromURL(url, key) { return new Promise((resolve) => { this.load.image(key, url); this.load.once('complete', () => resolve(key)); this.load.start(); }); } async create() { await this.scene.launch('MusicScene', { volume: this.volume }); this.musicScene = this.scene.get('MusicScene'); this.musicScene.events.once('create', () => { this.setupMusic(); }); this.setupParallaxBackground(); this.setupManagers(); this.createAnimatedTitle(); this.createUI(); this.createCreditsText(); } setupMusic() { this.musicScene.setPlaylist(['backgroundMusic']); this.musicScene.playNextTrack(true); // Set to loop } createCreditsText() { const creditsText = this.add.text(10, 575, 'Credits', { fontSize: '16px', fill: '#FFF' }); creditsText.setDepth(5); creditsText.setInteractive(); creditsText.on('pointerdown', () => { this.isPaused = true; this.inputField.style.display = 'none'; // Hide the input field this.scene.launch('CreditsScene'); }); } setupParallaxBackground() { // Create parallax background layers this.bg1 = this.add.tileSprite(0, 0, 800, 600, 'background_1').setOrigin(0, 0).setScrollFactor(0); this.bg2 = this.add.tileSprite(0, 0, 800, 600, 'background_2').setOrigin(0, 0).setScrollFactor(0); this.bg3 = this.add.tileSprite(0, 0, 800, 600, 'background_3').setOrigin(0, 0).setScrollFactor(0); this.bg4 = this.add.tileSprite(0, 0, 800, 600, 'background_4').setOrigin(0, 0).setScrollFactor(0); // Set depth for each layer this.bg1.setDepth(0); this.bg2.setDepth(1); this.bg3.setDepth(2); this.bg4.setDepth(3); this.bg1.setScale(1.85); this.bg2.setScale(1.85); this.bg3.setScale(1.85); this.bg4.setScale(1.85); // Set a higher depth for all UI elements this.uiDepth = 10; } update(time, delta) { // Update parallax background only every 100ms if (time % 25 < delta) { this.updateParallaxBackground(); } } updateParallaxBackground() { // Update only when necessary this.bg1.tilePositionX += 0.1; this.bg2.tilePositionX += 0.2; this.bg3.tilePositionX += 0.3; this.bg4.tilePositionX += 0.4; } createAnimatedTitle() { // Create "Anything" text as a mask this.anythingText = this.add.bitmapText(-200, 100, 'bubble_font', 'Anything', 48).setDepth(this.uiDepth); this.anythingText.setOrigin(0.5); // Create a RenderTexture the same size as the screen this.rt = this.make.renderTexture({ width: this.scale.width, height: this.scale.height }, true); // Create a BitmapMask from the RenderTexture this.mask = new Phaser.Display.Masks.BitmapMask(this, this.rt); // Create a container for rainbow stripes this.rainbowContainer = this.add.container(-200, 0); this.rainbowContainer.setDepth(this.uiDepth); // Rainbow colors this.rainbowColors = [0xFF0000, 0xFF7F00, 0xFFFF00, 0x00FF00, 0x0000FF, 0x4B0082, 0x9400D3]; // Initialize rainbow stripes const stripeWidth = (this.anythingText.width / this.rainbowColors.length) * 0.7; // Reduce stripe width by 30% const stripeHeight = this.anythingText.height * 3; const gapWidth = (this.anythingText.width - (stripeWidth * this.rainbowColors.length)) / (this.rainbowColors.length - 1); this.rainbowStripes = []; this.nextColorIndex = 0; for (let i = 0; i < 9; i++) { const stripe = this.add.graphics(); stripe.fillStyle(this.rainbowColors[this.nextColorIndex], 0.8); stripe.fillRect(0, 0, stripeWidth, stripeHeight); stripe.rotation = Math.PI / 4; stripe.x = this.anythingText.width / 2 + i * (stripeWidth + gapWidth * 1.2); stripe.y = -stripeHeight / 2; this.rainbowContainer.add(stripe); this.rainbowStripes.push(stripe); this.nextColorIndex = (this.nextColorIndex + 1) % this.rainbowColors.length; } // Apply the mask to the rainbow container this.rainbowContainer.setMask(this.mask); // Update the rainbow stripes every frame this.events.on('update', this.updateRainbowStripes, this); // Slide in animation for "Anything" text and rainbow container this.tweens.add({ targets: [this.anythingText, this.rainbowContainer], x: 200, duration: 1000, ease: 'Power2', onUpdate: () => { // Update the render texture to match the new position this.rt.clear(); this.rt.draw(this.anythingText); }, onComplete: () => { this.createVsText(); } }); } createVsText() { // Create "VS." text with scale and fade-in effect this.vsText = this.add.bitmapText(400, 150, 'bubble_font', 'VS.', 48).setDepth(this.uiDepth); this.vsText.setOrigin(0.5); this.vsText.setTint(0xFF0000); this.vsText.setScale(0); this.vsText.setAlpha(0); // Scale and fade-in animation for "VS." text this.tweens.add({ targets: this.vsText, scale: 1, alpha: 1, duration: 1000, ease: 'Power2', onComplete: () => { // Add pulsating effect after fade-in this.tweens.add({ targets: this.vsText, scale: 1.2, duration: 500, yoyo: true, repeat: -1 }); } }); // Create "Rosie" text after "VS." animation this.time.delayedCall(1000, this.createRosieText, [], this); } createRosieText() { const roseRedColor = 0xFF007F; // A nice rose red color this.rosieText = this.add.bitmapText(800, 200, 'bubble_font', 'Rosie', 48).setDepth(this.uiDepth); this.rosieText.setOrigin(0.5); this.rosieText.setTint(roseRedColor); // Slide in animation for "Rosie" text this.tweens.add({ targets: this.rosieText, x: 525, duration: 1000, ease: 'Power2', onComplete: () => { // Fade in other elements this.tweens.add({ targets: [ this.textFieldContainer, this.placeholderText, this.randButton, this.goButton, this.statusText, this.cycleRosies() ], alpha: 1, duration: 1000, ease: 'Power2', onComplete: () => { this.positionInputField() } }); } }); // Set up timer for periodic shaking this.time.addEvent({ delay: 5000, // 5 seconds callback: this.shakeRosieText, callbackScope: this, loop: true }); } updateRainbowStripes() { const speed = 1.5; // Reduced speed for slower animation const stripeWidth = (this.anythingText.width / this.rainbowColors.length) * 0.7; const gapWidth = (this.anythingText.width - (stripeWidth * this.rainbowColors.length)) / (this.rainbowColors.length - 1); const resetX = this.anythingText.x + this.anythingText.width / 2 + stripeWidth - 75; // Moved 50 pixels to the right for (let i = this.rainbowStripes.length - 1; i >= 0; i--) { const stripe = this.rainbowStripes[i]; stripe.x -= speed; // If the stripe has moved completely off the left side, remove it from the container and destroy it if (stripe.x < this.anythingText.x - this.anythingText.width / 2 - stripeWidth - 150) { // Adjusted destruction point this.rainbowContainer.remove(stripe); stripe.destroy(); this.rainbowStripes.splice(i, 1); } } // If there are fewer than 9 stripes, create a new one if (this.rainbowStripes.length < 9) { const newStripe = this.add.graphics(); newStripe.fillStyle(this.rainbowColors[this.nextColorIndex], 0.8); newStripe.fillRect(0, 0, stripeWidth, this.anythingText.height * 3); newStripe.rotation = Math.PI / 4; newStripe.x = resetX; newStripe.y = this.anythingText.y - (this.anythingText.height * 3) / 2; this.rainbowContainer.add(newStripe); this.rainbowStripes.push(newStripe); this.nextColorIndex = (this.nextColorIndex + 1) % this.rainbowColors.length; } } setupManagers() { this.randomCharacterGenerator = new CustomChatManager(RANDOM_CHARACTER_GENERATOR_DESCRIPTION); this.characterDescriptor = new CustomChatManager(CHARACTER_DESCRIPTOR_DESCRIPTION); this.backgroundPromptGenerator = new CustomChatManager(BACKGROUND_PROMPT_GENERATOR_DESCRIPTION); } async createUI() { // Text input field this.inputField = document.createElement('input'); this.inputField.type = 'text'; this.inputField.style.position = 'absolute'; this.inputField.style.left = '50%'; this.inputField.style.width = '325px'; this.inputField.style.height = '50px'; this.inputField.style.fontSize = '27px'; this.inputField.style.textAlign = 'center'; this.inputField.style.transform = 'translateX(-50%)'; document.body.appendChild(this.inputField); // Position the input field relative to the game canvas this.scale.on('resize', this.positionInputField, this); this.inputField.addEventListener('input', () => { this.updateGoButton(); }); // Placeholder text this.placeholderText = this.add.text(400, 450, 'Enter character name or click RAND', { fontSize: '18px', fill: '#FFF' }).setOrigin(0.5).setDepth(this.uiDepth).setAlpha(0); // Create container for text field this.textFieldContainer = this.add.rectangle(400, 480, 220, 40, 0x000000, 0.3).setDepth(this.uiDepth).setAlpha(0); this.textFieldContainer.setOrigin(0.5); // Buttons this.randButton = this.add.bitmapText(300, 530, 'bubble_font', 'RAND', 24).setDepth(this.uiDepth).setAlpha(0); this.randButton.setInteractive(); this.randButton.setOrigin(0.5); this.randButton.on('pointerdown', this.handleRandButton.bind(this)); this.goButton = this.add.bitmapText(500, 530, 'bubble_font', 'GO', 24).setDepth(this.uiDepth).setAlpha(0); this.goButton.setOrigin(0.5); this.updateGoButton(); // Status text this.statusText = this.add.bitmapText(400, 380, 'bubble_font', '', 18).setDepth(this.uiDepth).setAlpha(0); this.statusText.setOrigin(0.5); // Generate initial random characters console.log('Generating initial character sets...'); this.randomCharactersQueue1 = await this.getResponse(); this.randomCharactersQueue2 = await this.getResponse(); console.log('Initial character sets generated.'); } handleKeyInput(event) { if (event.key.length === 1 && this.input.text.length < 15) { this.input.text += event.key; this.input.setText(this.input.text); } else if (event.code === "Backspace" && this.input.text.length > 0) { this.input.text = this.input.text.substring(0, this.input.text.length - 1); this.input.setText(this.input.text); } } async handleRandButton() { if (!this.randomCharactersQueue1 || this.randomCharactersQueue1.length === 0) { console.log('Generating new characters...'); this.randomCharactersQueue1 = await this.getResponse(); } if (this.randomCharactersQueue1 && this.randomCharactersQueue1.length > 0) { this.inputField.value = this.randomCharactersQueue1[0]; this.randomCharactersQueue1.shift(); this.updateGoButton(); } if (!this.randomCharactersQueue2 || this.randomCharactersQueue2.length === 0) { console.log('Preparing next batch of characters...'); this.randomCharactersQueue2 = await this.getResponse(); } if (this.randomCharactersQueue1.length === 0) { this.randomCharactersQueue1 = this.randomCharactersQueue2; this.randomCharactersQueue2 = await this.getResponse(); } } async startGame() { if (this.inputField.value.trim().length > 0) { this.playerInput = this.inputField.value.trim(); this.hideInitialUI(); this.createLoadingScreen(); // Generate official character name this.updateLoadingProgress(0.05, "Generating official character name..."); await this.generateOfficialName(); // Player character generation this.updateLoadingProgress(0.1, "Generating character image..."); await this.generatePlayerImage(); this.sendImageToHost(this.generatedImageUrl); this.updateLoadingProgress(0.15, "Creating battle arena..."); const backgroundPrompt = await this.generateBackgroundPrompt(); this.backgroundImageUrl = await ImageGenerator.requestEphemeralImageGeneration(backgroundPrompt, 'Anything'); this.sendImageToHost(this.backgroundImageUrl); this.updateLoadingProgress(0.2, "Creating character moveset..."); await this.generatePlayerMoveset(); this.updateLoadingProgress(0.25, "Crafting character description..."); await this.generatePlayerDescription(); this.updateLoadingProgress(0.3, "Initializing character chat..."); await this.initializePlayerChat(); this.updateLoadingProgress(0.35, "Calculating character stats..."); await this.generatePlayerStats(); this.updateLoadingProgress(0.4, "Player character fully generated!"); // Rosie character generation this.updateLoadingProgress(0.45, "Preparing Rosie's transformation..."); this.updateLoadingProgress(0.45, "Adapting Rosie's appearance..."); await this.generateRosieDescription(); this.updateLoadingProgress(0.3, "Initializing character chat..."); await this.initializeRosieChat(); this.updateLoadingProgress(0.55, "Designing Rosie's new look..."); await this.generateRosieImage(); this.sendImageToHost(this.rosieImageUrl); this.updateLoadingProgress(0.6, "Inventing Rosie's special moves..."); await this.generateRosieMoveset(); this.updateLoadingProgress(0.65, "Balancing Rosie's abilities..."); await this.generateRosieStats(); this.updateLoadingProgress(0.7, "Teaching Rosie witty comebacks..."); await this.generateRosieResponses(); this.updateLoadingProgress(0.75, "Preparing dramatic death scenes..."); // Battle preparation this.updateLoadingProgress(0.75, "Setting up the battle arena..."); await this.delay(500); this.updateLoadingProgress(0.8, "Charging special effects..."); await this.delay(500); this.updateLoadingProgress(0.85, "Preparing health bars and UI..."); await this.delay(500); this.updateLoadingProgress(0.9, "Finalizing battle mechanics..."); // Console logging console.log('Player Data:', this.characterName, this.characterDescription, this.generatedImageUrl, this.moveset, this.playerStats, this.characterResponses); console.log('Rosie Data:', this.rosieImageUrl, this.rosieMoveset, this.rosieStats, this.rosieResponses); this.updateLoadingProgress(0.9, "Polishing battle animations..."); await this.delay(500); this.updateLoadingProgress(0.92, "Calibrating move effectiveness..."); await this.delay(500); this.updateLoadingProgress(0.94, "Tuning background music..."); await this.delay(500); this.updateLoadingProgress(0.96, "Applying final touches to the arena..."); await this.delay(500); this.updateLoadingProgress(0.98, "Preparing for the epic showdown..."); await this.delay(500); this.updateLoadingProgress(1, "Battle ready! Prepare to fight!"); // Final preparation await this.delay(1500); // Start the battle scene this.scene.start('BattleScene', { playerData: { name: this.characterName, description: this.characterDescription, imageUrl: this.generatedImageUrl, moveset: this.moveset, stats: this.playerStats, responses: this.characterResponses }, rosieData: { imageUrl: this.rosieImageUrl, moveset: this.rosieMoveset, stats: this.rosieStats, responses: this.rosieResponses }, backgroundImageUrl: this.backgroundImageUrl, musicManager: this.musicScene, }); } } hideInitialUI() { document.body.removeChild(this.inputField); this.randButton.destroy(); this.goButton.destroy(); if (this.placeholderText) { this.placeholderText.destroy(); } if (this.textFieldContainer) { this.textFieldContainer.destroy(); } } createLoadingScreen() { this.loadingText = this.add.text(400, 250, 'Preparing for an epic showdown!', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5).setDepth(100); this.loadingPhaseText = this.add.text(400, 300, '', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5).setDepth(100); this.progressBar = this.add.graphics().setDepth(100); this.progressBox = this.add.graphics().setDepth(99); this.progressBox.fillStyle(0x222222, 0.8); this.progressBox.fillRect(240, 450, 320, 50); this.loadingText = this.add.text(400, 520, 'Preparing for an epic showdown!', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5).setDepth(100); this.loadingPhaseText = this.add.text(400, 550, '', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5).setDepth(100); this.loadingPhases = [ "Summoning your character from the multiverse...", "Teaching Rosie some new tricks...", "Preparing the battle arena...", "Charging up special moves...", "Polishing Rosie's rose...", "Finalizing the epic face-off!" ]; } updateLoadingProgress(progress, message) { this.progressBar.clear(); this.progressBar.fillStyle(0xffffff, 1); this.progressBar.fillRect(250, 460, 300 * progress, 30); this.loadingPhaseText.setText(message); this.loadingText.setText(`Loading... ${Math.floor(progress * 100)}%`); } async generatePlayerImage() { const CHARACTER_IMAGE_STYLE = '2D, pixel art, chibi style character portrait, cute and expressive'; const imagePrompt = `${CHARACTER_IMAGE_STYLE} of ${this.characterName} (based on player input: ${this.playerInput}). The character should have a large head, small body, and exaggerated features typical of chibi art style. Ensure the character is centered and facing forward.`; this.generatedImageUrl = await ImageGenerator.requestEphemeralImageGeneration(imagePrompt, 'Pixel Portraits'); } async generateBackgroundPrompt() { this.backgroundPromptGenerator.addMessage('user', `Generate a background prompt for a battle arena suitable for ${this.characterName}'s universe. The character is based on the player input: ${this.playerInput}.`); let response = await this.backgroundPromptGenerator.getCharacterResponse('classify'); this.backgroundPromptGenerator.addMessage('assistant', response); const backgroundPrompt = JSON.parse(response).prompt; return backgroundPrompt; } buildBasicMoveStructures() { return [{ type: "attack", category: "physical", damage: 50, accuracy: 90, cooldown: 0, target: "opponent", effects: [] }, { type: "attack", category: "special", damage: 70, accuracy: 80, cooldown: 1, target: "opponent", effects: [] }, { type: "buff", category: "status", damage: 0, accuracy: 100, cooldown: 2, target: "self", effects: [{ name: "speed", chance: 100, duration: 3, value: 1.5 }] }, { type: "debuff", category: "status", damage: 0, accuracy: 85, cooldown: 2, target: "opponent", effects: [{ name: "miss", chance: 30, duration: 2 }] }]; } async generatePlayerMoveset() { console.log('Starting generatePlayerMoveset'); const basicMoves = this.buildBasicMoveStructures(); this.characterDescriptor.addMessage('user', `Create names and descriptions for 4 unique moves for ${this.characterName} (based on player input: ${this.playerInput}). The moves should be: 2 attacks (one physical, one special), 1 buff, and 1 debuff. Each move should be creative and fitting for the character. Important: Limit each move name to a maximum of 14 characters.`); console.log('Requesting moves from characterDescriptor'); let response = await this.characterDescriptor.getCharacterResponse('classify'); console.log('Received response from characterDescriptor:', response); this.characterDescriptor.addMessage('assistant', response); let moves = JSON.parse(response).moves; console.log('Parsed moves:', moves); this.moveset = []; for (let i = 0; i < 4; i++) { let move = { ...basicMoves[i], name: this.truncateMoveName(moves[i].name), description: moves[i].description }; console.log('Processing move:', move); // Validate the move const validation = this.characterDescriptor.validateMovesetSchema({ moves: [move] }); if (validation.valid) { console.log('Move is valid, adding to moveset'); this.moveset.push(move); console.log('Validated Player Move:', JSON.stringify(move, null, 2)); } else { console.log('Invalid move schema:', validation.errors); // If invalid, use a default name and description move.name = `Move ${i+1}`; move.description = `A ${move.type} move`; this.moveset.push(move); } } console.log('Final Player Moveset:', JSON.stringify(this.moveset, null, 2)); } truncateMoveName(name) { return name.length > 14 ? name.substring(0, 14) : name; } async generatePlayerDescription() { this.characterDescriptor.addMessage('user', `Create a multiparagraphed detailed character description of ${this.characterName} (based on player input: ${this.playerInput}). Starting with: "You are..."`); let descriptionResponse = await this.characterDescriptor.getCharacterResponse('classify'); this.characterDescriptor.addMessage('assistant', descriptionResponse); this.characterDescription = JSON.parse(descriptionResponse).characterDescription; } async initializePlayerChat() { this.newChatManager = new ChatManager(this.characterDescription + `You will be facing off against an enemy, be fierce and competitive but friendly. Remember, brevity is key, be concise.`); this.newChatManager.addMessage('user', '**You arrived to see a vibrant pink chibi character in front of you called Rosie. Lock eyes with Rosie and give me a brief, concise greeting for a friendly battle. Keep it to one short sentence.**'); let newChatManagerResponse = await this.newChatManager.getCharacterResponse('classify'); this.characterResponses.push(newChatManagerResponse); this.newChatManager.addMessage('assistant', newChatManagerResponse); } async generatePlayerStats() { this.characterDescriptor.addMessage('user', `Generate stats for ${this.characterName}.`); let statsResponse = await this.characterDescriptor.getCharacterResponse('classify'); this.characterDescriptor.addMessage('assistant', statsResponse); this.playerStats = JSON.parse(statsResponse).stats; } async generateRosieDescription() { const promptExamples = ` Example 1: "A pink chibi character with a rose in her hair as an Avenger, wielding a tiny shield made of flower petals" Example 2: "A pink chibi Pokemon with a rose on her head, sparking with electric type energy" Example 3: "A pink chibi Jedi with a rose-shaped hair bun, wielding a lightsaber made of a glowing rose stem" Example 4: "A pink chibi pirate with a rose eyepatch, brandishing a cutlass made of thorny vines" Example 5: "A pink chibi wizard with a rose-tipped wand, wearing robes decorated with magical, glowing rose patterns" Example 6: "A pink chibi ninja with a rose-shaped shuriken, leaving a trail of rose petals as she moves" Example 7: "A pink chibi astronaut with a rose-shaped helmet visor, floating with a jetpack made of rosebud thrusters" Example 8: "A pink chibi mermaid with a rose crown, her tail adorned with rose-shaped scales" Now, based on the character "${this.characterName}", create a unique and creative description for Rosie that blends her pink chibi fairy nature with a rose on her head, while incorporating elements inspired by ${this.characterName}. Be specific and imaginative, describing her appearance, accessories, and any special features.`; this.characterDescriptor.addMessage('user', promptExamples); let rosiePromptResponse = await this.characterDescriptor.getCharacterResponse('classify'); this.characterDescriptor.addMessage('assistant', rosiePromptResponse); this.rosieDescription = JSON.parse(rosiePromptResponse).description; } async initializeRosieChat() { this.rosieChatManager = new ChatManager(this.rosieDescription + `You will be facing off against ${this.characterName}, be fierce and competitive but friendly. Remember, brevity is key, be concise.`); this.rosieChatManager.addMessage('user', `**You arrived to see ${this.characterDescription}. Lock eyes and give me a brief, concise greeting to ${this.characterName}. Keep it to one short sentence.**`); } async generateRosieImage() { const ROSIE_IMAGE_STYLE = '2D, pixel art, chibi style character portrait, cute and expressive'; const imagePrompt = `${ROSIE_IMAGE_STYLE} of ${this.rosieDescription}. The character should have a large head, small body, and exaggerated features typical of chibi art style. Ensure the character is centered and facing forward.`; this.rosieImageUrl = await ImageGenerator.requestEphemeralImageGeneration(imagePrompt, 'Pixel Portraits'); } async generateRosieMoveset() { console.log('Starting generateRosieMoveset'); const basicMoves = this.buildBasicMoveStructures(); this.characterDescriptor.addMessage('user', `Create names and descriptions for 4 unique moves for Rosie, described as: ${this.rosieDescription}. The moves should be: 2 attacks (one physical, one special), 1 buff, and 1 debuff. Each move should reflect a blend of Rosie's fairy nature and the theme inspired by ${this.characterName}. Important: Limit each move name to a maximum of 14 characters.`); console.log('Requesting moves from characterDescriptor'); let response = await this.characterDescriptor.getCharacterResponse('classify'); console.log('Received response from characterDescriptor:', response); this.characterDescriptor.addMessage('assistant', response); let moves; try { moves = JSON.parse(response).moves; console.log('Parsed moves:', moves); } catch (error) { console.error('Error parsing JSON:', error); console.log('Attempting to fix JSON'); // Attempt to fix common JSON issues const fixedResponse = response.replace(/,\s*}/g, '}').replace(/,\s*]/g, ']'); try { moves = JSON.parse(fixedResponse).moves; console.log('Parsed moves after fix:', moves); } catch (error) { console.error('Failed to parse JSON even after attempted fix:', error); moves = []; } } this.rosieMoveset = []; for (let i = 0; i < 4; i++) { let move = { ...basicMoves[i], name: this.truncateMoveName(moves[i].name), description: moves[i].description }; console.log('Processing move:', move); // Validate the move const validation = this.characterDescriptor.validateMovesetSchema({ moves: [move] }); if (validation.valid) { console.log('Move is valid, adding to moveset'); this.rosieMoveset.push(move); console.log('Validated Rosie Move:', JSON.stringify(move, null, 2)); } else { console.log('Invalid Rosie move schema:', validation.errors); // If invalid, use a default name and description move.name = `Rosie Move ${i+1}`; move.description = `A ${move.type} move for Rosie`; this.rosieMoveset.push(move); } } console.log('Final Rosie Moveset:', JSON.stringify(this.rosieMoveset, null, 2)); } async generateRosieStats() { this.characterDescriptor.addMessage('user', `Generate stats for Rosie, described as: ${this.rosieDescription}. Adjust the stats to reflect this unique combination of fairy nature and elements inspired by ${this.characterName}.`); let statsResponse = await this.characterDescriptor.getCharacterResponse('classify'); this.characterDescriptor.addMessage('assistant', statsResponse); this.rosieStats = JSON.parse(statsResponse).stats; } async generateRosieResponses() { this.rosieChatManager.addMessage('user', this.characterResponses[0]); let rosieResponse = await this.rosieChatManager.getCharacterResponse('chat'); this.rosieResponses.push(rosieResponse); this.rosieChatManager.addMessage('assistant', rosieResponse); this.newChatManager.addMessage('user', rosieResponse); //await this.continueConversation(3); // After the conversation, generate move responses await this.generateMoveResponses(); } async continueConversation(rounds) { for (let i = 0; i < rounds; i++) { // Player's turn let playerPrompt = i === rounds - 1 ? "**Respond to Rosie's last message and politely wrap up the conversation, as the battle is about to begin.****Respond in one short concise paragraph**" : "**Respond to Rosie's last message, maintaining your character's personality.****Respond in one short concise paragraph**"; this.newChatManager.addMessage('user', playerPrompt); let playerResponse = await this.newChatManager.getCharacterResponse('classify'); this.characterResponses.push(playerResponse); this.newChatManager.addMessage('assistant', playerResponse); this.rosieChatManager.addMessage('user', playerResponse); // Rosie's turn let rosiePrompt = i === rounds - 1 ? "**This is the final exchange. Respond to the character's message and conclude the conversation, as the battle is about to begin.****Respond in one short concise paragraph**" : "**Respond to the character's last message, maintaining Rosie's unique personality.****Respond in one short concise paragraph**"; this.rosieChatManager.addMessage('user', rosiePrompt); let rosieResponse = await this.rosieChatManager.getCharacterResponse('classify'); this.rosieResponses.push(rosieResponse); this.rosieChatManager.addMessage('assistant', rosieResponse); this.newChatManager.addMessage('user', rosieResponse); } } async generateMoveResponses() { console.log("Generating move responses..."); // Generate responses for player's moves for (let move of this.moveset) { let attackPrompt = `**You are using the move "${move.name}". Respond in one short concise message, considering the move's description: ${move.description}**`; this.newChatManager.addMessage('user', attackPrompt); let attackResponse = await this.newChatManager.getCharacterResponse('classify'); this.characterResponses.push(attackResponse); } // Generate responses for Rosie's moves for (let move of this.rosieMoveset) { let attackPrompt = `**You are using the move "${move.name}". Respond in one short concise message, considering the move's description: ${move.description}**`; this.rosieChatManager.addMessage('user', attackPrompt); let attackResponse = await this.rosieChatManager.getCharacterResponse('classify'); this.rosieResponses.push(attackResponse); } console.log("Move responses generated."); // Generate death responses await this.generateDeathResponses(); } async generateDeathResponses() { console.log("Generating death responses..."); // Player's death response let playerDeathPrompt = `**You have been defeated by Rosie in battle. Give a dramatic and character-appropriate final message.**`; this.newChatManager.addMessage('user', playerDeathPrompt); let playerDeathResponse = await this.newChatManager.getCharacterResponse('classify'); this.characterResponses.push(playerDeathResponse); // Rosie's death response let rosieDeathPrompt = `**You have been defeated by ${this.characterName} in battle. Give a dramatic final message that fits your unique Rosie personality.**`; this.rosieChatManager.addMessage('user', rosieDeathPrompt); let rosieDeathResponse = await this.rosieChatManager.getCharacterResponse('classify'); this.rosieResponses.push(rosieDeathResponse); console.log("Death responses generated."); } async delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async generateOfficialName() { this.characterDescriptor.addMessage('user', `Given the player's input: "${this.playerInput}", determine the official character name using these rules: 1. If the input is already a name (1-2 words), use it as is. 2. If the input is clearly not a name (e.g., an item, place, or longer description), create a short, creative name (max 2 words) based on the input. 3. Do not modify existing character names or short inputs. 4. For longer inputs or descriptions, extract or create a concise name that captures the essence. Respond with a JSON object containing the key "officialName" and the determined name as its value.`); let response = await this.characterDescriptor.getCharacterResponse('classify'); try { const parsedResponse = JSON.parse(response); this.characterName = parsedResponse.officialName.trim(); } catch (error) { console.error('Error parsing official name response:', error); // If parsing fails, use a more robust fallback method this.characterName = this.fallbackNameGenerator(this.playerInput); } console.log(`Generated official name: ${this.characterName}`); } fallbackNameGenerator(input) { // Split the input into words const words = input.trim().split(/\s+/); // If it's already 1-2 words, use it as is if (words.length <= 2) { return input.trim(); } // For longer inputs, use the first two words or the first and last word if (words.length > 2) { return `${words[0]} ${words[words.length - 1]}`.trim(); } // If somehow we get here with an empty input, use a default name return "Mystery Character"; } async getResponse() { this.randomCharacterGenerator.addMessage('user', 'Generate 10 Random Characters separated by "|||"'); let response = await this.randomCharacterGenerator.getCharacterResponse('classify'); this.randomCharacterGenerator.addMessage('assistant', response); let randomCharacters; if (typeof response === 'string') { randomCharacters = response.split('|||'); } else { console.error('Unexpected response type, expected a string'); } return randomCharacters; } loadGeneratedImage(imageUrl, type) { const imageKey = type + '_generated_' + Date.now(); this.load.image(imageKey, imageUrl); this.load.once('complete', () => { // Store the image key instead of displaying it immediately if (type === 'player') { this.playerImageKey = imageKey; } else if (type === 'rosie') { this.rosieImageKey = imageKey; } this.statusText.setText(`${type.charAt(0).toUpperCase() + type.slice(1)} image loaded!`); }); this.load.start(); } shakeRosieText() { this.tweens.add({ targets: this.rosieText, x: this.rosieText.x + 2, y: this.rosieText.y + 2, duration: 50, yoyo: true, repeat: 5, // 5 repetitions for a total of ~0.5 seconds onComplete: () => { // Reset position after shaking this.rosieText.setPosition(525, 200); } }); } updateGoButton() { if (this.inputField.value.trim() === '') { this.goButton.setTint(0x888888); this.goButton.disableInteractive(); } else { this.goButton.clearTint(); this.goButton.setInteractive(); this.goButton.off('pointerdown'); this.goButton.on('pointerdown', this.startGame.bind(this)); } } positionInputField() { if (this.inputField && this.textFieldContainer) { const canvas = this.sys.game.canvas; const scaleX = this.scale.displaySize.width / this.scale.gameSize.width; const scaleY = this.scale.displaySize.height / this.scale.gameSize.height; const containerX = this.textFieldContainer.x * scaleX; const containerY = this.textFieldContainer.y * scaleY; const containerWidth = this.textFieldContainer.width * scaleX; const containerHeight = this.textFieldContainer.height * scaleY; this.inputField.style.left = `${canvas.offsetLeft + containerX }px`; this.inputField.style.top = `${canvas.offsetTop + containerY - containerHeight / 2.25}px`; this.inputField.style.width = `${containerWidth * 0.9}px`; // Adjusted width to fit within the container this.inputField.style.height = `${containerHeight * 0.8}px`; // Adjusted height to fit within the container } } async cycleRosies() { const randomIndex = Phaser.Math.Between(0, this.rosieImageUrls.length - 1); const randomUrl = this.rosieImageUrls[randomIndex]; const imageKey = 'rosie_' + Date.now(); await this.loadImageFromURL(randomUrl, imageKey); // Calculate the scale factor (1/4 of the game's width and height) const scaleX = this.scale.width / 2 / this.textures.get(imageKey).getSourceImage().width; const scaleY = this.scale.height / 2 / this.textures.get(imageKey).getSourceImage().height; const scaleFactor = Math.min(scaleX, scaleY); const rosieImage = this.add.image(-200, 300, imageKey) .setOrigin(0.5) .setDepth(5) .setScale(scaleFactor); this.tweens.add({ targets: rosieImage, x: 400, duration: 1000, ease: 'Power2', onComplete: () => { this.time.delayedCall(2000, () => { this.tweens.add({ targets: rosieImage, x: 1000, duration: 1000, ease: 'Power2', onComplete: () => { rosieImage.destroy(); this.cycleRosies(); } }); }); } }); } } class CreditsScene extends Phaser.Scene { constructor() { super('CreditsScene'); } preload() { this.load.image('star', 'https://labs.phaser.io/assets/particles/yellow.png'); } create() { const width = this.scale.width; const height = this.scale.height; // Create a semi-transparent background this.add.rectangle(0, 0, width, height, 0x000000, 0.7).setOrigin(0); // Add particle effect background this.particles = this.add.particles('star'); this.particles.createEmitter({ x: { min: 0, max: width }, y: { min: 0, max: height }, lifespan: 6000, speedY: { min: 20, max: 50 }, scale: { start: 0.1, end: 0 }, quantity: 2, blendMode: 'ADD' }); // Create the credits window const windowWidth = 600; const windowHeight = 400; const windowX = (width - windowWidth) / 2; const windowY = (height - windowHeight) / 2; const cornerRadius = 20; const trimWidth = 5; // Create trim (border) this.trimGraphics = this.add.graphics(); this.trimGraphics.fillStyle(0xFFD700, 1); this.trimGraphics.fillRoundedRect(windowX - trimWidth, windowY - trimWidth, windowWidth + trimWidth * 2, windowHeight + trimWidth * 2, cornerRadius + trimWidth); // Create main window const windowGraphics = this.add.graphics(); windowGraphics.fillStyle(0x333333, 1); windowGraphics.fillRoundedRect(windowX, windowY, windowWidth, windowHeight, cornerRadius); // Add decorative header const headerGraphics = this.add.graphics(); headerGraphics.fillStyle(0x4B0082, 1); headerGraphics.fillRoundedRect(windowX, windowY, windowWidth, 60, { tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 }); // Add credits text const creditsText = this.add.text(width / 2, windowY + 30, 'Credits', { fontSize: '32px', fill: '#FFF', fontStyle: 'bold' }).setOrigin(0.5); // Create a mask for scrolling text const maskGraphics = this.add.graphics(); maskGraphics.fillRect(windowX, windowY + 70, windowWidth, windowHeight - 140); const mask = new Phaser.Display.Masks.GeometryMask(this, maskGraphics); // Add scrolling credits content const creditsContent = this.add.text(width / 2, windowY + 100, '\n\n\n\n\n\n\n\n' + 'Game created by: CoCo\n\n' + 'Battle Scene Design & UI Assistance:\nWurm\n\n\n' + 'Powered by: Phaser 3\n\n' + 'Music:\nLaufey - From The Start\n' + 'KH BGM - Xion Final Battle\n\n' + 'Parallax Background: Craftpix.net\n\n' + 'Special thanks to Rosebud AI for assistance\n\n' + 'Font: 04b_30 by Yuji Oshimoto (04)\nFound on DaFont\n\n' + 'Health Banner: Vapxiel on itch.io\n\n' + 'Play/Pause Button: Leo Red on itch.io\n\n' + 'And YOU for playing!', { fontSize: '20px', fill: '#FFF', align: 'center', wordWrap: { width: windowWidth - 40 } } ).setOrigin(0.5, 0); creditsContent.setMask(mask); // Scrolling tween this.tweens.add({ targets: creditsContent, y: -(creditsContent.height - windowHeight + 160), duration: 20000, ease: 'Linear', yoyo: true, repeat: -1 }); // Add close button const closeButton = this.add.text(windowX + windowWidth - 30, windowY + 20, 'X', { fontSize: '24px', fill: '#FFF', fontStyle: 'bold' }).setOrigin(1, 0); closeButton.setInteractive({ useHandCursor: true }) .on('pointerover', () => closeButton.setStyle({ fill: '#FF0000' })) .on('pointerout', () => closeButton.setStyle({ fill: '#FFF' })) .on('pointerdown', () => { const anythingVsRosieScene = this.scene.get('AnythingVsRosie'); anythingVsRosieScene.isPaused = false; anythingVsRosieScene.inputField.style.display = ''; // Show the input field this.scene.stop(); }); // Add pulsating effect to the border this.tweens.add({ targets: this.trimGraphics, alpha: 0.6, duration: 1500, yoyo: true, repeat: -1 }); } } class MusicScene extends Phaser.Scene { constructor() { super('MusicScene'); this.playlist = []; this.currentTrackIndex = 0; this.isPlaying = false; this.isMuted = false; this.volume = 0.15; // Default volume this.hitSoundVolume = 0.08; // Default hit sound volume } init(data) { const savedVolume = this.loadVolumeFromCookie(); this.volume = savedVolume !== null ? savedVolume : (data.volume !== undefined ? data.volume : 0.15); this.setVolume(this.volume); // Ensure all volumes are set correctly on init } saveVolumeToCookie(volume) { document.cookie = `musicVolume=${volume};max-age=31536000;path=/`; // Expires in 1 year } loadVolumeFromCookie() { const cookies = document.cookie.split(';'); for (let cookie of cookies) { const [name, value] = cookie.trim().split('='); if (name === 'musicVolume') { return parseFloat(value); } } return null; } preload() { this.load.image('unmuted', 'https://play.rosebud.ai/assets/audioPlaying.png?1Sdy'); this.load.image('muted', 'https://play.rosebud.ai/assets/audioMuted.png?dhsw'); } create() { const sliderX = 75; const sliderWidth = 150; this.createMuteButton(); const sliderBounds = new Phaser.Geom.Rectangle(sliderX, 20, sliderWidth, 20); this.sliderBase = this.add.graphics() .setScrollFactor(0) .setDepth(1000) .setInteractive(sliderBounds, Phaser.Geom.Rectangle.Contains) .fillStyle(0x888888, 1) .fillRoundedRect(sliderX, 20, sliderWidth, 20, { tl: 10, bl: 10, tr: 10, br: 10 }) .setVisible(true) .on('pointerdown', (pointer) => { const clickX = Phaser.Math.Clamp(pointer.x, sliderX, sliderX + sliderWidth); this.updateVolume(clickX); }); // Create pink part of the slider this.sliderFill = this.add.graphics() .setScrollFactor(0) .setDepth(1000) .fillStyle(0xFF69B4, 1) .fillRoundedRect(sliderX, 20, sliderWidth * this.volume / 0.3, 20, { tl: 10, bl: 10, tr: 0, br: 0 }) .setVisible(true); // Create volume slider handle const handleX = sliderX + (sliderWidth * this.volume / 0.3); this.sliderHandle = this.add.rectangle(handleX, 30, 10, 20, 0xffffff) .setScrollFactor(0) .setDepth(1001) .setOrigin(0.5) .setInteractive({ draggable: true }) .setVisible(true); this.input.setDraggable(this.sliderHandle); this.sliderHandle.on('drag', (pointer, dragX) => { const clampedDragX = Phaser.Math.Clamp(dragX, sliderX, sliderX + sliderWidth); this.updateVolume(clampedDragX); }); this.setupAutoHide(); } createMuteButton() { if (!this.textures.exists('unmuted')) { this.load.image('unmuted', 'https://play.rosebud.ai/assets/audioPlaying.png?1Sdy'); } if (!this.textures.exists('muted')) { this.load.image('muted', 'https://play.rosebud.ai/assets/audioMuted.png?dhsw'); } if (!this.muteButton) { this.muteButton = this.add.image(50, 30, 'unmuted') .setScrollFactor(0) .setDepth(1000) .setScale(.25) .setInteractive(); this.muteButton.on('pointerdown', this.toggleMute, this); } else { // Re-add the existing button to the current scene this.add.existing(this.muteButton); } } toggleMute(scene = this.scene) { this.isMuted = !this.isMuted; // Ensure we toggle the mute button texture for the correct scene if (scene.muteButton) { scene.muteButton.setTexture(this.isMuted ? 'muted' : 'unmuted'); } else { this.muteButton.setTexture(this.isMuted ? 'muted' : 'unmuted'); } if (this.currentTrack) { this.currentTrack.setMute(this.isMuted); } } setPlaylist(musicKeys) { this.playlist = musicKeys; this.shufflePlaylist(); } shufflePlaylist() { for (let i = this.playlist.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.playlist[i], this.playlist[j]] = [this.playlist[j], this.playlist[i]]; // Swap } console.log('Shuffled playlist:', this.playlist); } updateVolume(dragX) { const sliderX = 75; // Same sliderX as defined earlier const sliderWidth = 150; // Same sliderWidth as defined earlier const volume = (dragX - sliderX) / sliderWidth * 0.3; // Calculate volume based on dragX this.sliderHandle.x = dragX; // Update slider handle position // Calculate the fill width for the pink part const fillWidth = dragX - sliderX; // Clear previous fill this.sliderFill.clear(); // Draw the pink part based on the handle position this.sliderFill.fillStyle(0xFF69B4, 1); // Pink color this.sliderFill.fillRoundedRect(sliderX, 20, fillWidth, 20, { tl: 10, bl: 10, tr: 0, br: 0 }); // Draw the grey part this.sliderBase.clear(); this.sliderBase.fillStyle(0x888888, 1); this.sliderBase.fillRoundedRect(sliderX + fillWidth, 20, sliderWidth - fillWidth, 20, { tl: 0, bl: 0, tr: 10, br: 10 }); if (this.isMuted) { // Unmute if currently muted this.toggleMute(); } this.setVolume(volume); // Set volume based on calculated value } setVolume(volume) { if (isNaN(volume) || !isFinite(volume)) { console.error('Invalid volume value:', volume); return; } this.globalVolume = volume; if (this.currentTrack) { this.currentTrack.setVolume(volume); } this.volume = volume; this.hitSoundVolume = this.calculateSoundEffectVolume(volume, 0.08); this.updateAllSoundEffects(); this.saveVolumeToCookie(volume); // Ensure hit sound volume is 0 when global volume is 0 if (volume === 0) { this.hitSoundVolume = 0; } console.log(`Volume set to ${volume}, Hit Sound Volume: ${this.hitSoundVolume}`); } calculateSoundEffectVolume(musicVolume, defaultEffectVolume) { const midPoint = 0.15; // Middle of the slider const maxVolume = 0.3; // Maximum volume on the slider const volumeRatio = musicVolume / maxVolume; if (musicVolume <= 0) { return 0; } else if (musicVolume <= midPoint) { // Linear scaling for the first half of the slider return (musicVolume / midPoint) * defaultEffectVolume; } else { // Non-linear scaling for the second half of the slider const scaleFactor = 1.5; // Adjust this to control the curve const normalizedVolume = (musicVolume - midPoint) / (maxVolume - midPoint); const scaledVolume = Math.pow(normalizedVolume, scaleFactor); return defaultEffectVolume + (scaledVolume * defaultEffectVolume); } } getHitSoundVolume() { return this.hitSoundVolume; } getAttackClickVolume() { return this.calculateSoundEffectVolume(this.volume, 0.14); } getButtonClickVolume() { return this.calculateSoundEffectVolume(this.volume, 0.5); } getButtonHoverVolume() { return this.calculateSoundEffectVolume(this.volume, 0.25); } updateAllSoundEffects() { const sounds = this.game.sound.sounds; sounds.forEach(sound => { if (sound !== this.currentTrack) { const originalVolume = sound.data.originalVolume || 1; const newVolume = this.calculateSoundEffectVolume(this.globalVolume, originalVolume); sound.setVolume(newVolume); } }); } applySoundEffectVolume(sound) { const originalVolume = sound.volume; sound.setVolume(originalVolume * this.globalVolume); sound.data.originalVolume = originalVolume; } playNextTrack(loop = false) { if (this.playlist.length === 0) { console.warn('Playlist is empty.'); return; } this.currentTrackIndex = (this.currentTrackIndex + 1) % this.playlist.length; console.log(`Playing next track: ${this.playlist[this.currentTrackIndex]}`); this.playMusicByKey(this.playlist[this.currentTrackIndex], loop); } playMusicByKey(musicKey, loop = false) { if (!musicKey) { console.info('No music key provided, not changing current music.'); return; } console.log(`Playing music by key: ${musicKey}`); if (this.currentTrack && this.currentTrack.key !== musicKey) { this.stopMusic(); } if (!this.currentTrack) { this.startMusic(musicKey, loop); } if (this.currentTrack) { this.currentTrack.setMute(this.isMuted); } } startMusic(musicKey, loop = false) { if (!this.game || !this.game.sound) { console.error('Sound system is not ready or game instance is not valid.'); return; } this.currentTrack = this.game.sound.add(musicKey, { volume: this.volume, loop: loop, }); this.currentTrack.play(); console.log(`Started playing: ${musicKey}`); if (!loop) { this.currentTrack.on('complete', () => { console.log(`Track completed: ${musicKey}`); this.playNextTrack(loop); }); } this.isPlaying = true; } stopMusic() { if (this.currentTrack) { console.log(`Stopping music: ${this.currentTrack.key}`); this.currentTrack.stop(); this.currentTrack.destroy(); this.currentTrack = null; } this.isPlaying = false; } toggleMusic() { if (this.currentTrack) { if (this.isPlaying) { console.log('Pausing music'); this.currentTrack.pause(); } else { console.log('Resuming music'); this.currentTrack.resume(); } this.isPlaying = !this.isPlaying; } this.toggleMute(); } setupAutoHide() { let hideTimer; let isMouseOver = false; const resetHideTimer = () => { if (hideTimer) { this.time.removeEvent(hideTimer); } this.setSliderAlpha(1); hideTimer = this.time.delayedCall(1000, () => { if (!isMouseOver) { this.setSliderAlpha(0); } }); }; const checkMouseOver = (pointer) => { const sliderBounds = new Phaser.Geom.Rectangle(75, 20, 150, 20); const handleBounds = this.sliderHandle.getBounds(); const muteButtonBounds = this.muteButton.getBounds(); isMouseOver = sliderBounds.contains(pointer.x, pointer.y) || handleBounds.contains(pointer.x, pointer.y) || muteButtonBounds.contains(pointer.x, pointer.y); }; this.input.on('pointermove', checkMouseOver); this.muteButton.on('pointerover', resetHideTimer); this.muteButton.on('pointerout', resetHideTimer); this.sliderBase.on('pointerover', resetHideTimer); this.sliderBase.on('pointerout', resetHideTimer); this.sliderHandle.on('pointerover', resetHideTimer); this.sliderFill.on('pointerover', resetHideTimer); this.sliderHandle.on('pointerout', resetHideTimer); this.sliderFill.on('pointerout', resetHideTimer); // Start the hide timer initially, but keep it visible for 2 seconds hideTimer = this.time.delayedCall(2000, () => { if (!isMouseOver) { this.setSliderAlpha(0); } }); } setSliderAlpha(alpha) { this.tweens.add({ targets: [this.sliderBase, this.sliderHandle, this.sliderFill], alpha: alpha, duration: 500, ease: 'Power2' }); } } class BattleUIScene extends Phaser.Scene { constructor() { super('BattleUIScene'); this.battleScene = null; this.bannerHeight = 150; this.autoplay = false; this.hitSoundVolume = 0.08; } create() { this.createHealthBars(); this.createMoveButtons(); this.createAutoplayButton(); this.createTurnIndicator(); this.createMessageBox(); this.createSkipPrompt(); } setBattleScene(battleScene) { this.battleScene = battleScene; } createHealthBars() { // Implementation moved from BattleScene const originalWidth = 200; const width = originalWidth * (5 / 6); const height = 15; const cornerRadius = 7; const playerX = 555 + (originalWidth / 6); const rosieX = 45 + (originalWidth / 6); const playerY = 575 - this.bannerHeight - 27; const rosieY = 73; this.playerHealthBanner = this.add.image(655, 575 - this.bannerHeight - 20, 'healthBanner'); this.playerHealthBanner.setOrigin(0.5); this.playerHealthBanner.setScale(0.23, 0.5); this.playerHealthBanner.setAngle(180); this.playerHealthBanner.setTint(0xD3D3D3); this.playerHealthBanner.setAlpha(0); this.playerHealthBanner.setInteractive(); this.playerHealthBanner.on('pointerdown', () => this.showStats('player')); this.rosieHealthBanner = this.add.image(145, 80, 'healthBanner'); this.rosieHealthBanner.setOrigin(0.5); this.rosieHealthBanner.setScale(0.23, 0.5); this.rosieHealthBanner.setTint(0xFFC0CB); this.rosieHealthBanner.setAlpha(0); this.rosieHealthBanner.setInteractive(); this.rosieHealthBanner.on('pointerdown', () => this.showStats('rosie')); this.load.image('playerHpButton', 'https://play.rosebud.ai/assets/Layer 1.png?xuD9'); this.load.image('rosieHpButton', 'https://play.rosebud.ai/assets/small pink rounded button with white text that says "HP".png?NocI'); this.load.once('complete', () => { this.playerHPButton = this.add.image(playerX - 5, playerY + height / 2, 'playerHpButton'); this.playerHPButton.setOrigin(1, 0.5); this.playerHPButton.setDisplaySize(height * 2.4, height * 1.45); this.playerHPButton.setAlpha(0); this.rosieHPButton = this.add.image(rosieX - 5, rosieY + height / 2, 'rosieHpButton'); this.rosieHPButton.setOrigin(1, 0.5); this.rosieHPButton.setDisplaySize(height * 2.5, height * 1.5); this.rosieHPButton.setAlpha(0); }); this.load.start(); this.playerHealthBar = this.add.graphics(); this.playerHealthBar.setAlpha(0); this.rosieHealthBar = this.add.graphics(); this.rosieHealthBar.setAlpha(0); this.playerNameText = this.add.text(555, 575 - this.bannerHeight - 42, this.battleScene.playerData.name, { fontSize: '16px', fill: '#000', fontStyle: 'bold' }).setOrigin(0, 0.5).setAlpha(0); this.rosieNameText = this.add.text(45, 58, 'Rosie', { fontSize: '16px', fill: '#000', fontStyle: 'bold' }).setOrigin(0, 0.5).setAlpha(0); this.playerHPText = this.add.text(playerX + width, playerY + height + 5, '', { fontSize: '14px', fill: '#000', fontStyle: 'bold' }).setOrigin(1, 0).setAlpha(0); this.rosieHPText = this.add.text(rosieX + width, rosieY + height + 5, '', { fontSize: '14px', fill: '#000', fontStyle: 'bold' }).setOrigin(1, 0).setAlpha(0); this.updateHealthBars(); } updateHealthBars() { this.updateHealthBar('player', this.battleScene.playerHealth, this.battleScene.playerMaxHealth); this.updateHealthBar('rosie', this.battleScene.rosieHealth, this.battleScene.rosieMaxHealth); } updateHealthBar(character, health, maxHealth) { // Implementation moved from BattleScene const isPlayer = character === 'player'; const healthBar = isPlayer ? this.playerHealthBar : this.rosieHealthBar; const healthText = isPlayer ? this.playerHPText : this.rosieHPText; const healthBanner = isPlayer ? this.playerHealthBanner : this.rosieHealthBanner; const nameText = isPlayer ? this.playerNameText : this.rosieNameText; const hpButton = isPlayer ? this.playerHPButton : this.rosieHPButton; const originalWidth = 200; const width = originalWidth * (5 / 6); const height = 15; const cornerRadius = 7; const x = isPlayer ? 555 + (originalWidth / 6) : 45 + (originalWidth / 6); const y = isPlayer ? 575 - this.bannerHeight - 27 : 73; healthBar.clear(); if (health > 0) { const barWidth = Math.min(Math.max(1, (health / maxHealth) * width), width - 2); const adjustedCornerRadius = Math.min(cornerRadius, barWidth / 2, height / 2); if (health <= maxHealth * 0.1 && health > 0) { if (!healthBar.flashTween) { healthBar.flashTween = this.tweens.add({ targets: healthBar, alpha: 0.5, duration: 200, yoyo: true, repeat: -1, ease: 'Linear' }); } healthBar.fillStyle(0xFF0000); } else { if (healthBar.flashTween) { healthBar.flashTween.stop(); healthBar.flashTween = null; healthBar.alpha = 1; } healthBar.fillStyle(this.getHealthBarColor(health / maxHealth * 100)); } healthBar.fillRoundedRect(x + 1, y + 1, barWidth, height - 2, adjustedCornerRadius); } else { if (healthBar.flashTween) { healthBar.flashTween.stop(); healthBar.flashTween = null; healthBar.alpha = 1; } this.tweens.add({ targets: [healthBar, healthText, healthBanner, nameText, hpButton], alpha: 0, duration: 1000, ease: 'Power2', onComplete: () => { healthBar.setVisible(false); healthText.setVisible(false); healthBanner.setVisible(false); nameText.setVisible(false); hpButton.setVisible(false); } }); } healthBar.lineStyle(1, 0x000000, 1); healthBar.strokeRoundedRect(x, y, width, height, cornerRadius); healthText.setText(`${Math.max(0, Math.round(health))} / ${maxHealth}`); healthText.setPosition(x + width, isPlayer ? y + height + 5 : y + height + 5); healthText.setOrigin(1, 0); healthText.setFontStyle('bold'); } getHealthBarColor(health) { if (health >= 50) return 0x4CAF50; if (health >= 25) return 0xFFFF00; if (health >= 10) return 0xFFA500; return 0xFF0000; } tweenHealthBar(character, startHealth, endHealth, maxHealth) { return new Promise((resolve) => { this.tweens.add({ targets: { health: startHealth }, health: endHealth, duration: 1000, ease: 'Linear', onUpdate: (tween) => { const currentHealth = tween.getValue(); this.updateHealthBar(character, currentHealth, maxHealth); }, onComplete: () => { if (endHealth <= 0) { // If health reaches 0, ensure the health bar is fully tweened out this.updateHealthBar(character, 0, maxHealth); } resolve(); } }); }); } showStats(character) { const currentStats = character === 'player' ? this.battleScene.playerStats : this.battleScene.rosieStats; const defaultStats = character === 'player' ? this.battleScene.playerData.stats : this.battleScene.rosieData.stats; const name = character === 'player' ? this.battleScene.playerData.name : 'Rosie'; // Create a semi-transparent background this.statsBackground = this.add.rectangle(400, 300, 400, 300, 0x000000, 0.8).setOrigin(0.5); // Create the stats display this.statsTitle = this.add.text(400, 180, `${name}'s Stats`, { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); const statsText = Object.entries(currentStats).map(([key, value]) => { const defaultValue = defaultStats[key] || (key === 'DEF' ? 50 : 0); // Use 50 as default for DEF if (key === 'DEF') { const defenseMultiplier = value / defaultValue; const defensePercentage = Math.round(defenseMultiplier * 100); return `DEF: ${value} (${isNaN(defensePercentage) ? 100 : defensePercentage}%)`; } else { return `${key}: ${value}/${defaultValue}`; } }).join('\n'); console.log('Current stats:', currentStats); console.log('Default stats:', defaultStats); console.log('Stats text:', statsText); this.statsDisplay = this.add.text(250, 220, statsText, { fontSize: '18px', fill: '#ffffff' }); // Add close button this.closeButton = this.add.text(580, 170, 'X', { fontSize: '24px', fill: '#ffffff' }) .setInteractive() .on('pointerdown', () => this.hideStats()); // Disable other interactions while stats are shown this.disableInteractions(); // Add hover effect to health banners this.playerHealthBanner.on('pointerover', () => this.playerHealthBanner.setTint(0xFFFFFF)); this.playerHealthBanner.on('pointerout', () => this.playerHealthBanner.setTint(0xD3D3D3)); this.rosieHealthBanner.on('pointerover', () => this.rosieHealthBanner.setTint(0xFFFFFF)); this.rosieHealthBanner.on('pointerout', () => this.rosieHealthBanner.setTint(0xFFC0CB)); } hideStats() { // Remove all stats display elements this.statsBackground.destroy(); this.statsTitle.destroy(); this.statsDisplay.destroy(); this.closeButton.destroy(); // Re-enable interactions this.enableInteractions(); } disableInteractions() { this.playerHPButton.disableInteractive(); this.rosieHPButton.disableInteractive(); this.playerHealthBanner.disableInteractive(); this.rosieHealthBanner.disableInteractive(); this.moveButtons.forEach(({ button }) => button.disableInteractive()); if (this.autoplaySymbol) this.autoplaySymbol.disableInteractive(); } enableInteractions() { this.playerHPButton.setInteractive(); this.rosieHPButton.setInteractive(); this.playerHealthBanner.setInteractive(); this.rosieHealthBanner.setInteractive(); this.moveButtons.forEach(({ button }) => button.setInteractive()); if (this.autoplaySymbol) this.autoplaySymbol.setInteractive(); } createMoveButtons() { // Implementation moved from BattleScene const moveButtonStyle = { fontSize: '12px', fill: '#000000', align: 'center', fontStyle: 'bold' }; this.moveButtons = []; const buttonWidth = 120; const buttonHeight = 35; const padding = 12; const panelWidth = (buttonWidth * 2) + (padding * 3); const panelHeight = (buttonHeight * 2) + (padding * 3); const panelExtraPadding = 15; const startX = 20; const startY = 740 - this.bannerHeight - panelHeight - panelExtraPadding - 5; this.attackPanel = this.add.image( startX + panelWidth / 2 + panelExtraPadding, startY + panelHeight / 2 + panelExtraPadding, 'attackPanel' ); this.attackPanel.setDisplaySize( panelWidth + panelExtraPadding * 2, panelHeight + panelExtraPadding * 2 ); for (let i = 0; i < 4; i++) { const col = i % 2; const row = Math.floor(i / 2); const x = startX + col * (buttonWidth + padding) + padding + panelExtraPadding; const y = startY + row * (buttonHeight + padding) + padding + panelExtraPadding; let move = this.battleScene.playerData?.moveset?.[i]; let moveName = move?.name || `Move ${i + 1}`; let button = this.add.image(x + buttonWidth / 2, y + buttonHeight / 2, 'attackButton'); button.setDisplaySize(buttonWidth, buttonHeight); button.setInteractive(); let buttonText = this.add.text(x + buttonWidth / 2, y + buttonHeight / 2, moveName, moveButtonStyle) .setOrigin(0.5) .setAlign('center'); button.on('pointerdown', () => { const attackClickVolume = this.scene.get('MusicScene').getAttackClickVolume(); this.sound.play('attackClick', { volume: attackClickVolume }); this.battleScene.onMoveSelected(i); }); button.on('pointerover', () => { const buttonHoverVolume = this.scene.get('MusicScene').getButtonHoverVolume(); this.sound.play('buttonHover', { volume: buttonHoverVolume }); this.showMoveDescription(i); button.setTint(0xFFC0CB); }); button.on('pointerout', () => { this.hideMoveDescription(); button.clearTint(); }); this.moveButtons.push({ button, text: buttonText }); } const descBoxX = startX + panelWidth + panelExtraPadding * 2 + 280; const descBoxY = startY + panelHeight / 2 + panelExtraPadding; this.descriptionBox = this.add.image(descBoxX, descBoxY, 'descriptionBox'); this.descriptionBox.setDisplaySize(320, 120); this.descriptionBox.setVisible(false); this.moveDescription = this.add.text(descBoxX, descBoxY, '', { fontSize: '12px', fill: '#FFFFFF', wordWrap: { width: 260 }, align: 'center' }).setOrigin(0.5); this.moveDescription.setVisible(false); this.hideMoveButtons(); } showMoveButtons() { this.attackPanel.setVisible(true); this.moveButtons.forEach(({ button, text }) => { button.setVisible(true); text.setVisible(true); }); } hideMoveButtons() { this.attackPanel.setVisible(false); this.moveButtons.forEach(({ button, text }) => { button.setVisible(false); text.setVisible(false); }); } createAutoplayButton() { // Implementation moved from BattleScene const buttonX = 720; const buttonY = 30; this.autoplayText = this.add.text(buttonX - 50, buttonY, 'Auto Play', { fontSize: '18px', fill: '#FFFFFF', fontStyle: 'bold' }).setOrigin(1, 0.5); this.autoplaySymbol = this.add.image(buttonX, buttonY, 'iconsFlat', 74) .setOrigin(0, 0.5) .setScale(0.10) .setInteractive(); this.autoplaySymbol.on('pointerdown', this.toggleAutoplay, this); this.doubleArrows = this.add.image(buttonX + 10, buttonY, 'doubleArrows') .setOrigin(0.5) .setScale(0.10) .setVisible(false); this.rotationTween = this.tweens.add({ targets: this.doubleArrows, angle: 360, duration: 2000, repeat: -1, paused: true }); } toggleAutoplay() { this.autoplay = !this.autoplay; this.autoplaySymbol.setFrame(this.autoplay ? 88 : 74); this.doubleArrows.setVisible(this.autoplay); if (this.autoplay) { this.rotationTween.resume(); } else { this.rotationTween.pause(); } if (this.autoplay && this.battleScene.currentTurn === 'player' && this.battleScene.isBattleStarted) { this.battleScene.performAutoplayMove(); } } createTurnIndicator() { // Implementation moved from BattleScene this.turnBox = this.add.rectangle(400, -25, 200, 40, 0x000000, 0.7) .setOrigin(0.5, 1) .setDepth(1000); this.turnText = this.add.text(400, -25, '', { fontSize: '24px', fontStyle: 'bold', stroke: '#000000', strokeThickness: 3.5 }) .setOrigin(0.5, 1) .setDepth(1001); } updateTurnIndicator(currentTurn) { // Implementation moved from BattleScene const isPlayerTurn = currentTurn === 'player'; this.turnText.setText(isPlayerTurn ? 'Your turn!' : 'Rosie\'s turn!'); this.turnText.setColor(isPlayerTurn ? '#4CAF50' : '#FF69B4'); const padding = 20; const boxWidth = Math.max(200, this.turnText.width + padding); this.turnBox.setSize(boxWidth, 40); this.tweens.add({ targets: [this.turnBox, this.turnText], y: 25, duration: 500, ease: 'Back.easeOut', onComplete: () => { this.time.delayedCall(500, () => { this.tweens.add({ targets: [this.turnBox, this.turnText], y: -25, duration: 500, ease: 'Back.easeIn' }); }); } }); } createMessageBox() { // Implementation moved from BattleScene this.rosieDialogueBox = this.add.rectangle(400, 600 - this.bannerHeight / 2, 760, 80, 0xFFC0CB); this.rosieDialogueBox.setOrigin(0.5); this.rosieDialogueBox.setStrokeStyle(3.5, 0xFFFFFF); this.rosieDialogueBox.setVisible(false); this.playerDialogueBox = this.add.rectangle(400, 600 - this.bannerHeight / 2, 760, 80, 0xD3D3D3); this.playerDialogueBox.setOrigin(0.5); this.playerDialogueBox.setStrokeStyle(2, 0xFFFFFF); this.playerDialogueBox.setVisible(false); this.messageBox = this.add.text(400, 600 - this.bannerHeight / 2, '', { fontSize: '18px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 3.5, wordWrap: { width: 740 }, align: 'center' }).setOrigin(0.5); } showMessage(text, speaker) { // Implementation moved from BattleScene const fullText = speaker ? `${speaker}: ${text}` : text; this.messageBox.setText(fullText); this.battleScene.groundLine.setVisible(false); if (speaker === 'Rosie') { this.rosieDialogueBox.setVisible(true); this.playerDialogueBox.setVisible(false); } else if (speaker === this.battleScene.playerData.name) { this.playerDialogueBox.setVisible(true); this.rosieDialogueBox.setVisible(false); } else { this.rosieDialogueBox.setVisible(false); this.playerDialogueBox.setVisible(false); } if (this.currentSpeakerImage) this.currentSpeakerImage.destroy(); if (speaker) { this.currentSpeakerImage = this.createSpeakerImage(speaker); this.currentSpeakerImage.setPosition(50, 600 - this.bannerHeight / 2); this.messageBox.setPosition(120, 600 - this.bannerHeight / 2); this.messageBox.setOrigin(0, 0.5); } else { this.currentSpeakerImage = null; this.messageBox.setPosition(400, 600 - this.bannerHeight / 2); this.messageBox.setOrigin(0.5); } } hideMessage(showGroundElements = true) { this.messageBox.setText(''); if (this.currentMessageGraphics) { this.currentMessageGraphics.destroy(); this.currentMessageGraphics = null; } if (this.currentSpeakerImage) { this.currentSpeakerImage.destroy(); this.currentSpeakerImage = null; } if (this.battleScene.isBattleStarted && showGroundElements) { this.battleScene.showGroundElements(); } } createSkipPrompt() { // Implementation moved from BattleScene this.skipPrompt = this.add.text(780, 590, '[Click to skip]', { fontSize: '16px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 2, align: 'right' }).setOrigin(1, 1).setAlpha(0); } showSkipPrompt() { this.skipPrompt.setAlpha(1); } hideSkipPrompt() { this.skipPrompt.setAlpha(0); } showMoveDescription(index) { const move = this.battleScene.playerData.moveset?.[index]; if (move && move.description) { this.moveDescription.setText(move.description); this.descriptionBox.setVisible(true); this.moveDescription.setVisible(true); } else { console.warn(`Move or description not found for index ${index}`); this.hideMoveDescription(); } } hideMoveDescription() { this.moveDescription.setText(''); this.descriptionBox.setVisible(false); this.moveDescription.setVisible(false); } createSpeakerImage(speaker) { const imageKey = speaker === 'Rosie' ? 'rosieChar' : 'playerChar'; const speakerImage = this.add.image(0, 0, imageKey); speakerImage.setOrigin(0.5); const desiredHeight = 70; const scale = desiredHeight / speakerImage.height; speakerImage.setScale(scale); return speakerImage; } fadeInHealthBars() { return new Promise((resolve) => { const elements = [ this.rosieHealthBanner, this.rosieHealthBar, this.rosieHPText, this.rosieNameText, this.rosieHPButton, this.playerHealthBanner, this.playerHealthBar, this.playerHPText, this.playerNameText, this.playerHPButton ]; elements.forEach(element => { element.setAlpha(0); }); resolve(); }); } showHealthBars() { const duration = 200; const ease = 'Power2'; const rosieElements = [ this.rosieHealthBanner, this.rosieHealthBar, this.rosieHPText, this.rosieNameText, this.rosieHPButton ]; const playerElements = [ this.playerHealthBanner, this.playerHealthBar, this.playerHPText, this.playerNameText, this.playerHPButton ]; rosieElements.forEach(element => { element.x -= 200; }); playerElements.forEach(element => { element.x += 200; }); this.tweens.add({ targets: rosieElements, x: '+=200', alpha: 1, duration: duration, ease: ease }); this.tweens.add({ targets: playerElements, x: '-=200', alpha: 1, duration: duration, ease: ease }); } async showMessageWithDelay(message, speaker = null, delay, isAutoplay = false) { const isAttackMessage = message.includes('used') || message.includes('effective'); const isRosieAttack = speaker === 'Rosie' || (isAttackMessage && message.startsWith('Rosie')); this.battleScene.hideGroundElements(); let graphics, text, speakerImage; this.rosieDialogueBox.setVisible(false); this.playerDialogueBox.setVisible(false); const messageCompletePromise = new Promise(resolve => { // Create a background box for dialogue messages if (speaker) { const dialogueBox = speaker === 'Rosie' ? this.rosieDialogueBox : this.playerDialogueBox; dialogueBox.setVisible(true); } else { // Create a background box for non-dialogue messages graphics = this.add.graphics(); graphics.fillStyle(isRosieAttack ? 0xFFC0CB : 0x333333, 0.8); graphics.lineStyle(2, 0xFFFFFF, 1); graphics.fillRect(20, 600 - this.bannerHeight / 2 - 30, 760, 60); graphics.strokeRect(20, 600 - this.bannerHeight / 2 - 30, 760, 60); } if (speaker) { speakerImage = this.createSpeakerImage(speaker); speakerImage.setPosition(50, 600 - this.bannerHeight / 2); } const textStyle = { fontSize: '18px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 3.5, wordWrap: { width: speaker ? 680 : 740 }, align: speaker ? 'left' : 'center' }; const textX = speaker ? 120 : 400; text = this.add.text(textX, 600 - this.bannerHeight / 2, '', textStyle) .setOrigin(speaker ? 0 : 0.5, 0.5); this.showContinuePrompt(); const fullMessage = speaker ? `${speaker}: ${message}` : message; this.typewriterEffect(text, fullMessage) .then(() => { if (isAutoplay) { return this.battleScene.delay(delay); } else { return this.waitForUserInput(); } }) .then(() => { this.hideContinuePrompt(); resolve(); }); }); await messageCompletePromise; if (graphics) graphics.destroy(); if (text) text.destroy(); if (speakerImage) speakerImage.destroy(); if (!isAttackMessage) { this.rosieDialogueBox.setVisible(false); this.playerDialogueBox.setVisible(false); } } waitForUserInput() { return new Promise(resolve => { const handleInput = () => { this.input.off('pointerdown', handleInput); const buttonClickVolume = this.scene.get('MusicScene').getButtonClickVolume(); this.sound.play('buttonClick', { volume: buttonClickVolume }); resolve(); }; this.input.on('pointerdown', handleInput); }); } showContinuePrompt() { if (this.continuePrompt) this.continuePrompt.destroy(); this.continuePrompt = this.add.text(780, 590, '[Click to continue]', { fontSize: '16px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 2, align: 'right' }).setOrigin(1, 1).setAlpha(1); } hideContinuePrompt() { if (this.continuePrompt) { this.continuePrompt.destroy(); this.continuePrompt = null; } } async typewriterEffect(textObject, message) { return new Promise(resolve => { const letterDelay = 20; let i = 0; const timer = this.time.addEvent({ repeat: message.length - 1, delay: letterDelay, callback: () => { i++; textObject.setText(message.substring(0, i)); if (i === message.length) { resolve(); } } }); const skipTyping = () => { const buttonClickVolume = this.scene.get('MusicScene').getButtonClickVolume(); this.sound.play('buttonClick', { volume: buttonClickVolume }); timer.remove(false); textObject.setText(message); this.input.off('pointerdown', skipTyping); resolve(); }; this.input.once('pointerdown', skipTyping); }); } async showBoxedMessage(message, color = 0x333333) { return new Promise(resolve => { const graphics = this.add.graphics(); graphics.fillStyle(color, 0.8); graphics.lineStyle(2, 0xFFFFFF, 1); graphics.fillRoundedRect(20, 600 - this.bannerHeight / 2 - 30, 760, 60, 16); graphics.strokeRoundedRect(20, 600 - this.bannerHeight / 2 - 30, 760, 60, 16); const textStyle = { fontSize: '18px', fontStyle: 'bold', fill: '#FFFFFF', stroke: '#000000', strokeThickness: 3.5, wordWrap: { width: 740 }, align: 'center' }; const text = this.add.text(400, 600 - this.bannerHeight / 2, message, textStyle).setOrigin(0.5); this.time.delayedCall(2000, () => { graphics.destroy(); text.destroy(); resolve(); }); }); } } // BattleAnimationManager.js class BattleAnimationManager { constructor(scene) { this.scene = scene; } animateAttack(attacker, target) { // Implementation } createFlashEffect(target) { // Implementation } // Include all animation-related methods here } // DialogueManager.js class DialogueManager { constructor(scene) { this.scene = scene; } showMessage(text, speaker) { // Implementation } typewriterEffect(textObject, message) { // Implementation } // Include all dialogue-related methods here } // BattleLogicManager.js class BattleLogicManager { constructor(scene) { this.scene = scene; this.playerHealth = 100; this.rosieHealth = 100; this.currentTurn = 'player'; // ... other battle-related properties } startBattle() { // Implementation } performPlayerMove(moveIndex) { // Implementation } performRosieMove() { // Implementation } checkBattleEnd() { // Implementation } // Include all battle logic methods here } class BattleScene extends Phaser.Scene { constructor() { super('BattleScene'); this.currentTurn = 'player'; this.conversationIndex = 0; this.isBattleStarted = false; this.selectedMove = null; this.musicManager = null; this.uiScene = null; this.playerHealth = 100; // Default value this.rosieHealth = 100; // Default value this.bannerHeight = 150; this.isAutoplayMoveInProgress = false; } init(data) { console.log('BattleScene init. Received data:', data); this.playerData = data.playerData || {}; this.rosieData = data.rosieData || {}; // Ensure moveset is directly accessible this.playerData.moveset = this.playerData.moveset || []; this.rosieData.moveset = this.rosieData.moveset || []; this.backgroundImageUrl = data.backgroundImageUrl; this.musicManager = data.musicManager; // Store stats for easy access and initialize health this.playerStats = { ...this.playerData.stats } || {}; this.rosieStats = { ...this.rosieData.stats } || {}; this.playerMaxHealth = this.playerStats.HP || 100; this.rosieMaxHealth = this.rosieStats.HP || 100; this.playerHealth = this.playerMaxHealth; this.rosieHealth = this.rosieMaxHealth; console.log('Player data set:', this.playerData); console.log('Rosie data set:', this.rosieData); console.log('Player max health:', this.playerMaxHealth); console.log('Rosie max health:', this.rosieMaxHealth); } preload() { if (this.playerData && this.playerData.imageUrl) { this.load.image('playerChar', this.playerData.imageUrl); } else { console.error('Player image URL is not defined'); // Load a default image if the player image is not available this.load.image('playerChar', 'https://play.rosebud.ai/assets/default_player.png'); } this.load.image('rosieChar', this.rosieData.imageUrl); this.load.image('healthBanner', 'https://play.rosebud.ai/assets/Clipped_image_20240816_221722.png?cIlu'); // Add a console log to confirm image loading console.log('Preload complete. Player image URL:', this.playerData?.imageUrl); this.load.image('background', this.backgroundImageUrl); this.load.image('attackButton', 'https://play.rosebud.ai/assets/wide blank light grey rounded rectangle button.png?PGVv'); this.load.image('descriptionBox', 'https://play.rosebud.ai/assets/long wide blank grey rounded rectangle button.png?7kw0'); this.load.image('doubleArrows', 'https://play.rosebud.ai/assets/DoubleCircleArrows1_no_bg.png.png?VBTP'); this.load.image('attackPanel', 'https://play.rosebud.ai/assets/long wide blank dark grey rounded rectangle button.png?KXo0'); this.load.image('rainbowButton', 'https://play.rosebud.ai/assets/wide and long blank rainbow colored rounded rectangle button.png?YWtF'); this.load.audio('battleMusic', 'https://play.rosebud.ai/assets/8bit-xion.mp3?22YG'); this.load.audio('hitSound', 'https://play.rosebud.ai/assets/enemyhit.mp3.mp3?Mp2h'); this.load.audio('block03', 'https://play.rosebud.ai/assets/block_03.mp3?Dx2J'); this.load.audio('block07', 'https://play.rosebud.ai/assets/block_07.mp3?8oSK'); this.load.audio('block05', 'https://play.rosebud.ai/assets/block_05.mp3?A7Qj'); this.load.audio('melee03', 'https://play.rosebud.ai/assets/melee_03.mp3?G7GJ'); this.load.audio('buttonClick', 'https://play.rosebud.ai/assets/click-buttons-ui-menu-sounds-effects-button-2-203594.mp3?Nd9j'); this.load.audio('buttonHover', 'https://play.rosebud.ai/assets/click-21156.mp3?XUh1'); this.load.audio('attackClick', 'https://play.rosebud.ai/assets/punchy-taps-ui-9-183908.mp3?HxT0'); this.load.image('unmuted', 'https://play.rosebud.ai/assets/audioPlaying.png?58BF'); this.load.image('muted', 'https://play.rosebud.ai/assets/audioMuted.png?xzdu'); this.load.bitmapFont('bubble_font', 'https://play.rosebud.ai/assets/04b30.png?tkfg', 'https://play.rosebud.ai/assets/04b30.xml?lqbZ'); // Load debuff icons this.load.image('confusion-icon', 'https://play.rosebud.ai/assets/neuronB.png?JVvH'); this.load.image('sleep-icon', 'https://play.rosebud.ai/assets/starsB.png?k4Qr'); this.load.image('poison-icon', 'https://play.rosebud.ai/assets/poisonB.png?T0RY'); this.load.image('burn-icon', 'https://play.rosebud.ai/assets/fireB.png?e676'); this.load.image('speed-icon', 'https://play.rosebud.ai/assets/teleportB.png?QjdF'); this.load.image('miss-icon', 'https://play.rosebud.ai/assets/weakenB.png?XJdN'); this.load.image('defense-icon', 'https://play.rosebud.ai/assets/shieldB.png?0AZH'); } async create() { this.changeToBattleMusic(); this.scene.bringToTop('MusicScene'); this.createBattleField(); this.createCharacters(); // Check if player character is created and visible if (this.playerChar) { this.playerChar.setVisible(true); console.log('Player character created and set to visible'); console.log('Player character position:', this.playerChar.x, this.playerChar.y); console.log('Player character scale:', this.playerChar.scaleX, this.playerChar.scaleY); } else { console.error('Player character not created'); } this.skipIntro = false; this.input.on('pointerdown', this.handleSkipIntro, this); // Launch and get reference to BattleUIScene this.scene.launch('BattleUIScene', { playerStats: this.playerStats, rosieStats: this.rosieStats }); this.uiScene = this.scene.get('BattleUIScene'); this.uiScene.setBattleScene(this); if (!this.skipIntro) { await this.animateCharactersIn(); await this.uiScene.fadeInHealthBars(); } else { this.skipIntroAnimations(); } this.input.off('pointerdown', this.handleSkipIntro, this); this.startConversation(); //this.addTestingFeatures(); } handleSkipIntro() { this.skipIntro = true; } skipIntroAnimations() { // Set characters to their final positions this.rosieChar.setPosition(650, 150); this.playerChar.setPosition(200, 600 - this.bannerHeight); // Add floating animation to Rosie this.rosieFloatingTween = this.addFloatingAnimation(this.rosieChar); // Set health bars to visible and full opacity [this.playerHealthBanner, this.rosieHealthBanner, this.playerHealthBar, this.rosieHealthBar, this.playerHPText, this.rosieHPText, this.playerNameText, this.rosieNameText, this.playerHPButton, this.rosieHPButton ].forEach(element => { element.setAlpha(1); }); } addTestingFeatures() { this.input.keyboard.on('keydown-T', () => { if (this.isBattleStarted) { console.log('Test feature activated: Defeating Rosie in one hit'); this.rosieHealth = 0; this.uiScene.updateHealthBars(); this.checkBattleEnd(); } }); } changeToBattleMusic() { this.musicManager.setPlaylist(['battleMusic']); this.musicManager.playNextTrack(true); // Set to loop } startConversation() { this.conversationIndex = 0; this.uiScene.hideMoveButtons(); this.showNextMessage(); } async showInitialMessages() { // Show player's initial message const playerInitialResponse = await this.getCharacterResponse('player', -1, true); await this.uiScene.showMessageWithDelay(playerInitialResponse, this.playerData.name, 2000, this.uiScene.autoplay); // Show Rosie's initial message const rosieInitialResponse = await this.getCharacterResponse('rosie', -1, true); await this.uiScene.showMessageWithDelay(rosieInitialResponse, 'Rosie', 2000, this.uiScene.autoplay); this.animateBattleStart(); } showNextMessage() { this.showInitialMessages(); } async animateBattleStart() { this.uiScene.hideMessage(); const text = "BATTLE START!"; const centerX = 400; const centerY = 300; const rainbow = Phaser.Display.Color.HSVColorWheel(); let colorIndex = 0; // Create rainbow button background const rainbowButton = this.add.image(centerX, centerY, 'rainbowButton').setOrigin(0.5); rainbowButton.setScale(0.2); rainbowButton.setAlpha(0); // Create the battle start text using bitmap font (smaller size) const battleStartText = this.add.bitmapText(centerX, centerY, 'bubble_font', text, 18); battleStartText.setOrigin(0.5); battleStartText.setScale(0.1); battleStartText.setAlpha(0); // Start changing colors immediately const colorChangeEvent = this.time.addEvent({ delay: 10, callback: () => { const color = rainbow[colorIndex].color; battleStartText.setTint(color); colorIndex = (colorIndex + 1) % rainbow.length; }, loop: true }); // Zoom in and fade in the text and rainbow button simultaneously await new Promise(resolve => { this.tweens.add({ targets: [rainbowButton, battleStartText], scale: { from: (target) => target === rainbowButton ? 0.2 : 0.1, to: (target) => target === rainbowButton ? 0.4 : 1 }, alpha: 1, duration: 1000, ease: 'Back.easeOut', onComplete: resolve }); }); // Hold for a moment await this.delay(1000); // Fade out the text and rainbow button simultaneously await new Promise(resolve => { this.tweens.add({ targets: [rainbowButton, battleStartText], alpha: 0, duration: 1000, ease: 'Power2', onComplete: () => { battleStartText.destroy(); rainbowButton.destroy(); colorChangeEvent.remove(); resolve(); } }); }); this.startBattle(); } startBattle() { this.isBattleStarted = true; this.uiScene.showHealthBars(); this.showGroundElements(); this.uiScene.showMoveButtons(); this.enableMoveButtons(); this.uiScene.updateTurnIndicator(); } showGroundElements() { this.uiScene.showMoveButtons(); } hideGroundElements() { this.uiScene.hideMoveButtons(); } enableMoveButtons() { this.uiScene.moveButtons.forEach(({ button }) => button.setInteractive()); } disableMoveButtons() { this.uiScene.moveButtons.forEach(({ button }) => button.disableInteractive()); } createBattleField() { // Create a background this.add.image(400, 300, 'background').setOrigin(0.5).setDisplaySize(800, 600); // Create an invisible ground line const groundY = 600 - this.bannerHeight; this.groundLine = this.add.rectangle(400, groundY, 800, 1, 0x008000); this.groundLine.setVisible(false); this.groundLine.setAlpha(0); // Make the ground line fully transparent } createCharacters() { const groundY = 600 - this.bannerHeight; // Player character (off-screen to the right) if (this.textures.exists('playerChar')) { this.playerChar = this.add.image(900, groundY, 'playerChar'); this.playerChar.setOrigin(0.5, 1); this.scaleCharacter(this.playerChar, 200); console.log('Player character created:', this.playerChar); console.log('Player texture:', this.textures.get('playerChar')); } else { console.error('Player character texture not found'); } // Rosie character (off-screen to the left) this.rosieChar = this.add.image(-100, 150, 'rosieChar'); this.rosieChar.setOrigin(0.5); this.scaleCharacter(this.rosieChar, 200); // Log character positions and scales for debugging if (this.playerChar) { console.log('Player character position:', this.playerChar.x, this.playerChar.y); console.log('Player character scale:', this.playerChar.scaleX, this.playerChar.scaleY); } console.log('Rosie character position:', this.rosieChar.x, this.rosieChar.y); console.log('Rosie character scale:', this.rosieChar.scaleX, this.rosieChar.scaleY); } animateCharactersIn() { return new Promise((resolve) => { if (this.skipIntro) { this.rosieChar.setPosition(650, 150); this.playerChar.setPosition(200, 600 - this.bannerHeight); this.rosieFloatingTween = this.addFloatingAnimation(this.rosieChar); resolve(); } else { this.tweens.add({ targets: this.rosieChar, x: 650, duration: 1000, ease: 'Power2', onComplete: () => { this.rosieFloatingTween = this.addFloatingAnimation(this.rosieChar); } }); this.tweens.add({ targets: this.playerChar, x: 200, duration: 1000, ease: 'Power2', onComplete: resolve }); } }); } addFloatingAnimation(character) { return this.tweens.add({ targets: character, y: character.y - 10, // Float up by 10 pixels duration: 1500, ease: 'Sine.easeInOut', yoyo: true, repeat: -1 // Repeat indefinitely }); } scaleCharacter(character, desiredHeight) { const scale = desiredHeight / character.height; character.setScale(scale); } async onMoveSelected(moveIndex) { if (!this.isBattleStarted || this.currentTurn !== 'player' || this.isAutoplayMoveInProgress) return; this.isAutoplayMoveInProgress = true; console.log('Player data:', this.playerData); console.log('Moveset:', this.playerData.moveset); if (this.playerData.moveset && this.playerData.moveset[moveIndex]) { this.selectedMove = this.playerData.moveset[moveIndex]; console.log('Selected move:', this.selectedMove); } else { console.error('Invalid moveset structure or move index'); if (this.uiScene.autoplay) { this.uiScene.toggleAutoplay(); } this.isAutoplayMoveInProgress = false; return; } this.uiScene.hideMoveButtons(); await this.performPlayerMove(); if (this.rosieHealth > 0) { this.currentTurn = 'rosie'; this.uiScene.updateTurnIndicator(this.currentTurn); await this.updateEffects('player'); // Update player's effects at the end of player's turn await this.performRosieMove(); } await this.checkBattleEnd(); if (this.isBattleStarted) { this.currentTurn = 'player'; this.uiScene.updateTurnIndicator(this.currentTurn); await this.updateEffects('rosie'); // Update Rosie's effects at the start of player's turn this.uiScene.showMoveButtons(); this.isAutoplayMoveInProgress = false; if (this.uiScene.autoplay) { this.time.delayedCall(1500, () => { this.performAutoplayMove(); }); } } else { this.isAutoplayMoveInProgress = false; } console.log('After move - Player health:', this.playerHealth, 'Max:', this.playerMaxHealth); console.log('After move - Rosie health:', this.rosieHealth, 'Max:', this.rosieMaxHealth); } async getCharacterResponse(character, moveIndex, isInitial = false, isDefeat = false) { const data = character === 'player' ? this.playerData : this.rosieData; console.log('Character data:', data); if (isInitial) { return data.responses[0]; // Return the initial conversation response } if (isDefeat) { return data.responses[5]; // Return the defeat response } if (moveIndex >= 0 && moveIndex < 4) { return data.responses[moveIndex + 1]; // Return the move-specific response } console.error('Invalid move index or state'); return "I'm not sure what to say..."; // Fallback response } playDamageSound(damage) { let sound; if (damage <= 8) { // Minimal damage: randomly choose between block_05 and block_07 sound = Phaser.Math.RND.pick(['block05', 'block07']); } else if (damage <= 15) { // Average damage: play block_03 sound = 'block03'; } else { // Critical hit: play melee_03 sound = 'melee03'; } const hitSoundVolume = this.scene.get('MusicScene').getHitSoundVolume(); this.sound.play(sound, { volume: hitSoundVolume }); } calculateDamage(attacker, defender, move) { let baseDamage = move.damage; let attackerDmg = attacker === 'player' ? this.playerStats.dmg : this.rosieStats.dmg; let defenderDef = defender === 'player' ? this.playerStats.DEF : this.rosieStats.DEF; // Further reduce the impact of attacker's damage stat let damageMultiplier = 1 + (attackerDmg - 50) / 600; // Range: 0.92 to 1.08 // Further increase the impact of defender's defense stat let defenseMultiplier = 100 / (100 + defenderDef * 3.5); // Even stronger defense impact // Narrow the range of effectiveness multiplier let effectivenessMultiplier = Phaser.Math.FloatBetween(0.85, 1.15); // Calculate base damage with an even lower multiplier let damage = (baseDamage * 0.35) * damageMultiplier * defenseMultiplier * effectivenessMultiplier; // Keep the critical hit logic as is let critChance = (attacker === 'player' ? this.playerStats['crit%'] : this.rosieStats['crit%']) / 5; let isCriticalHit = Phaser.Math.RND.integerInRange(1, 100) <= critChance; if (isCriticalHit) { let critMultiplier = 1 + ((attacker === 'player' ? this.playerStats.crit : this.rosieStats.crit) / 500); damage *= critMultiplier; } // Apply slight randomness damage *= Phaser.Math.FloatBetween(0.95, 1.05); // Adjust and cap the damage damage = Math.max(1, Math.min(Math.round(damage), 20)); // Adjust the damage categorization thresholds let damageCategory = 'normal'; if (damage < 8) damageCategory = 'not very effective'; else if (damage > 17) damageCategory = 'super effective'; return { damage: damage, isCriticalHit, damageCategory }; } async performPlayerMove() { this.uiScene.hideMoveButtons(); console.log('Selected move:', this.selectedMove); if (this.selectedMove && this.selectedMove.name) { const moveIndex = this.playerData.moveset.findIndex(move => move.name === this.selectedMove.name); const playerResponse = await this.getCharacterResponse('player', moveIndex); await this.uiScene.showMessageWithDelay(playerResponse, this.playerData.name, 2000, this.uiScene.autoplay); await this.uiScene.showMessageWithDelay(`${this.playerData.name} used ${this.selectedMove.name}!`, null, 1500, this.uiScene.autoplay); } else { console.error('Invalid selected move:', this.selectedMove); await this.uiScene.showMessageWithDelay(`${this.playerData.name} couldn't make a move!`, null, 1500, this.uiScene.autoplay); this.uiScene.hideMessage(false); return; } if (this.selectedMove.type === 'buff' || this.selectedMove.type === 'debuff') { const target = this.selectedMove.type === 'buff' ? 'player' : 'rosie'; const character = target === 'player' ? this.playerChar : this.rosieChar; await this.createEffectAnimation(character, this.selectedMove.type); const effectResult = await this.applyEffect(target, this.selectedMove.effects[0]); if (effectResult.success) { console.log(`Applying ${this.selectedMove.type} effect to ${target}`); await this.uiScene.showMessageWithDelay(`${this.selectedMove.name} was successfully applied!`, null, 1500, this.uiScene.autoplay); } else { if (effectResult.reason === 'luck') { await this.uiScene.showMessageWithDelay(`${this.selectedMove.name} failed to apply!`, null, 1500, this.uiScene.autoplay); } else if (effectResult.reason === 'alreadyActive') { await this.uiScene.showMessageWithDelay(`${this.selectedMove.name} failed to apply. The effect is already active!`, null, 1500, this.uiScene.autoplay); } } } else { // Check if the player's attack hits if (this.checkHitChance('player')) { const { damage, isCriticalHit, damageCategory } = this.calculateDamage('player', 'rosie', this.selectedMove); await this.animateAttack(this.playerChar, this.rosieChar); this.playDamageSound(damage); await this.createFlashEffect(this.rosieChar); const damageDealt = Math.min(damage, this.rosieHealth); const newRosieHealth = this.rosieHealth - damageDealt; await this.uiScene.tweenHealthBar('rosie', this.rosieHealth, newRosieHealth, this.rosieMaxHealth); this.rosieHealth = newRosieHealth; this.rosieStats.HP = newRosieHealth; await this.uiScene.showMessageWithDelay(`${this.selectedMove.name} dealt ${damageDealt} damage!`, null, 1500, this.uiScene.autoplay); if (damageCategory !== 'normal') { await this.uiScene.showMessageWithDelay(`It's ${damageCategory}!`, null, 1500, this.uiScene.autoplay); } if (isCriticalHit) { await this.uiScene.showMessageWithDelay(`A critical hit!`, null, 1500, this.uiScene.autoplay); } } else { await this.uiScene.showMessageWithDelay(`${this.playerData.name}'s attack missed!`, null, 1500, this.uiScene.autoplay); } } await this.uiScene.hideMessage(); console.log('After player move - Rosie health:', this.rosieHealth, 'Max:', this.rosieMaxHealth); } async applyEffect(target, effect) { // Initialize the effects array if it doesn't exist if (!this[`${target}Effects`]) this[`${target}Effects`] = []; // Calculate base success chance (90% base success rate) let baseSuccessChance = 90; // Apply luck stat to effect chance const luck = target === 'player' ? this.playerStats.luck : this.rosieStats.luck; const luckModifier = (luck - 50) / 5; // Each 5 points of luck above/below 50 changes success chance by 1% const adjustedSuccessChance = Math.min(Math.max(baseSuccessChance + luckModifier, 50), 99); // Cap between 50% and 99% if (Phaser.Math.RND.integerInRange(1, 100) > adjustedSuccessChance) { console.log(`${effect.name} effect failed to apply. Success chance was ${adjustedSuccessChance}%.`); return { success: false, reason: 'luck' }; } // Check if the effect is already active const existingEffectIndex = this[`${target}Effects`].findIndex(e => e.effect.name === effect.name); if (existingEffectIndex !== -1) { console.log(`${effect.name} effect is already active on ${target}.`); return { success: false, reason: 'alreadyActive' }; } // For the miss effect, we set the miss chance to 25% if (effect.name === 'miss') { console.log(`Applied miss effect to ${target}. 25% chance to miss attacks.`); } const effectIcons = { confusion: 'confusion-icon', sleep: 'sleep-icon', poison: 'poison-icon', burn: 'burn-icon', speedBuff: 'speed-icon', speedDebuff: 'speed-icon', miss: 'miss-icon', attack: 'attack-icon', defense: 'defense-icon', // Add more effect icons as needed }; const iconKey = effectIcons[effect.name]; if (iconKey && this.textures.exists(iconKey)) { const isPlayer = target === 'player'; const healthBarWidth = 200 * (5 / 6); const iconSize = 25; let initialX, initialY; if (isPlayer) { initialX = 525 + healthBarWidth - iconSize / 2; initialY = 565 - this.bannerHeight + 10 + iconSize / 2; } else { initialX = 20 + (200 / 6) + iconSize / 2; initialY = 73 + 28 + iconSize / 2; } // Create the icon in the UI scene const icon = this.uiScene.add.image(initialX, initialY, iconKey); icon.setScale(0.065); icon.setOrigin(0.5); icon.setAlpha(0); // Flip the speed icon if it's a debuff if (effect.name === 'speedDebuff') { icon.setAngle(180); } // Apply the effect to the character's stats const stats = target === 'player' ? this.playerStats : this.rosieStats; let originalValue, newValue; if (effect.name === 'defense') { originalValue = stats.DEF; console.log('Debug - effect:', JSON.stringify(effect)); console.log('Debug - originalValue:', originalValue); if (effect.value !== undefined) { if (effect.type === 'buff') { newValue = Math.round(originalValue * effect.value); } else if (effect.type === 'debuff') { newValue = Math.max(1, Math.round(originalValue / effect.value)); // Ensure DEF is at least 1 } else { newValue = Math.round(originalValue * effect.value); // Default to buff if type is not specified } } else { console.warn('Invalid effect structure for defense:', effect); newValue = originalValue; // Keep the original value if the effect structure is invalid } stats.DEF = newValue; console.log(`Applied ${effect.name} ${effect.type || 'effect'}. Original DEF: ${originalValue}, New DEF: ${newValue}`); } else if (effect.name === 'attack') { originalValue = stats.dmg || 0; if (effect.type === 'buff') { newValue = Math.round(originalValue * effect.value); } else if (effect.type === 'debuff') { newValue = Math.max(0, Math.round(originalValue / effect.value)); } stats.dmg = newValue; } else { originalValue = stats[effect.name] || 0; if (effect.type === 'buff') { newValue = originalValue + effect.value; } else if (effect.type === 'debuff') { newValue = Math.max(0, originalValue - effect.value); // Prevent negative values } stats[effect.name] = newValue; } console.log(`Applied ${effect.name} effect. Original value: ${originalValue}, New value: ${newValue}`); // Update the stats in the main object if (target === 'player') { this.playerStats = { ...stats }; } else { this.rosieStats = { ...stats }; } if (target === 'player') { this.playerStats = { ...stats }; } else { this.rosieStats = { ...stats }; } // Store the effect icon reference and effect const effectInfo = { icon, effect, remainingDuration: effect.duration + 1, // Add 1 to account for the current turn isPositive: effect.name === 'speedBuff' || effect.type === 'buff', originalValue: originalValue }; this[`${target}Effects`].push(effectInfo); // Position the icon this.repositionEffectIcons(target); // Animate the icon appearance this.uiScene.tweens.add({ targets: icon, alpha: 1, duration: 1000, ease: 'Power2' }); // Log for debugging console.log(`Applied ${effect.name} effect to ${target}. Icon position: ${icon.x}, ${icon.y}`); console.log(`Updated ${target}'s ${effect.name} stat from ${originalValue} to ${newValue}`); return true; // Effect applied successfully } else { console.warn(`Effect icon not found for effect: ${effect.name}`); return false; // Effect not applied due to missing icon } } repositionEffectIcons(target) { const effects = this[`${target}Effects`]; if (!effects) return; const isPlayer = target === 'player'; const healthBarWidth = 200 * (5 / 6); const iconSize = 25; const padding = 5; let baseX, baseY; if (isPlayer) { baseX = 525 + healthBarWidth - iconSize; baseY = 565 - this.bannerHeight - 20; } else { baseX = 20 + (200 / 6); baseY = 72; } // Separate buffs and debuffs const buffs = effects.filter(e => e.isPositive); const debuffs = effects.filter(e => !e.isPositive); // Position buffs above the health bar buffs.forEach((buff, index) => { const x = isPlayer ? baseX - index * (iconSize + padding) : baseX + index * (iconSize + padding); const y = baseY - iconSize - padding; this.uiScene.tweens.add({ targets: buff.icon, x: x, y: y, duration: 500, ease: 'Power2' }); }); // Position debuffs below the health bar debuffs.forEach((debuff, index) => { const x = isPlayer ? baseX - index * (iconSize + padding) : baseX + index * (iconSize + padding); const y = baseY + iconSize + padding; this.uiScene.tweens.add({ targets: debuff.icon, x: x, y: y, duration: 500, ease: 'Power2' }); }); } async updateEffects(target) { const effects = this[`${target}Effects`]; if (!effects) return; let removedEffects = []; const stats = target === 'player' ? this.playerStats : this.rosieStats; for (let i = effects.length - 1; i >= 0; i--) { const effectInfo = effects[i]; effectInfo.remainingDuration--; if (effectInfo.remainingDuration <= 0) { // Remove the effect effects.splice(i, 1); removedEffects.push(effectInfo); // Revert the stat change stats[effectInfo.effect.name] = effectInfo.originalValue; // Fade out and destroy the icon this.uiScene.tweens.add({ targets: effectInfo.icon, alpha: 0, duration: 500, onComplete: () => { effectInfo.icon.destroy(); this.repositionEffectIcons(target); } }); console.log(`Removed ${effectInfo.effect.name} effect from ${target}. Reverted stat to ${effectInfo.originalValue}`); } } // Display messages for removed effects for (const effectInfo of removedEffects) { const effectType = effectInfo.isPositive ? 'buff' : 'debuff'; const targetName = target === 'player' ? this.playerData.name : 'Rosie'; await this.uiScene.showMessageWithDelay(`${targetName}'s ${effectInfo.effect.name} ${effectType} has worn off!`, null, 1500, this.uiScene.autoplay); } await this.uiScene.hideMessage(); } createBuffEffect(character) { console.log('Creating buff effect for', character === this.playerChar ? 'player' : 'Rosie'); return new Promise((resolve) => { const characterBounds = character.getBounds(); const ellipseWidth = characterBounds.width * 1.5; const ellipseHeight = characterBounds.height / 4; const ellipseColor = 0x00FF00; // Green color for buff const ellipseAlpha = 0.8; const singleEllipseDuration = 1000; const delayBetweenEllipses = 250; for (let i = 0; i < 4; i++) { this.time.delayedCall(i * delayBetweenEllipses, () => { const ellipse = this.add.ellipse( characterBounds.centerX, characterBounds.bottom, ellipseWidth, ellipseHeight, ellipseColor, ellipseAlpha ); ellipse.setDepth(9999); // Ensure it's on top ellipse.setScale(1.5); this.tweens.add({ targets: ellipse, scaleX: 0.5, scaleY: 0.5, y: characterBounds.top, alpha: 0, duration: singleEllipseDuration, ease: 'Sine.easeOut', onComplete: () => { ellipse.destroy(); if (i === 3) { console.log('Buff effect animation completed'); resolve(); } } }); }); } }); } createDebuffEffect(character) { console.log('Creating debuff effect for', character === this.playerChar ? 'player' : 'Rosie'); return new Promise((resolve) => { const characterBounds = character.getBounds(); const ellipseWidth = characterBounds.width * 1.5; const ellipseHeight = characterBounds.height / 4; const ellipseColor = 0xFF0000; // Red color for debuff const ellipseAlpha = 0.8; const singleEllipseDuration = 1000; const delayBetweenEllipses = 250; for (let i = 0; i < 4; i++) { this.time.delayedCall(i * delayBetweenEllipses, () => { const ellipse = this.add.ellipse( characterBounds.centerX, characterBounds.top, ellipseWidth, ellipseHeight, ellipseColor, ellipseAlpha ); ellipse.setDepth(9999); // Ensure it's on top ellipse.setScale(0.5); this.tweens.add({ targets: ellipse, scaleX: 1.5, scaleY: 1.5, y: characterBounds.bottom, alpha: 0, duration: singleEllipseDuration, ease: 'Sine.easeIn', onComplete: () => { ellipse.destroy(); if (i === 3) { console.log('Debuff effect animation completed'); resolve(); } } }); }); } }); } async performRosieMove() { if (this.rosieHealth <= 0) return; const moves = this.rosieData.moveset; const randomMoveIndex = Phaser.Math.Between(0, moves.length - 1); const selectedMove = moves[randomMoveIndex]; // Rosie's pre-move dialogue const rosieResponse = await this.getCharacterResponse('rosie', randomMoveIndex); await this.uiScene.showMessageWithDelay(rosieResponse, 'Rosie', 2000, this.uiScene.autoplay); // Move announcement await this.uiScene.showMessageWithDelay(`Rosie used ${selectedMove.name}!`, null, 1500, this.uiScene.autoplay); if (selectedMove.type === 'buff' || selectedMove.type === 'debuff') { const target = selectedMove.type === 'buff' ? 'rosie' : 'player'; const character = target === 'rosie' ? this.rosieChar : this.playerChar; // Play the animation regardless of whether the effect is applied successfully await this.createEffectAnimation(character, selectedMove.type); const effectResult = await this.applyEffect(target, selectedMove.effects[0]); if (effectResult.success) { console.log(`Applying ${selectedMove.type} effect to ${target}`); await this.uiScene.showMessageWithDelay(`${selectedMove.name} was successfully applied to ${target === 'player' ? this.playerData.name : 'Rosie'}!`, null, 1500, this.uiScene.autoplay); } else { if (effectResult.reason === 'luck') { await this.uiScene.showMessageWithDelay(`${selectedMove.name} failed to apply!`, null, 1500, this.uiScene.autoplay); } else if (effectResult.reason === 'alreadyActive') { await this.uiScene.showMessageWithDelay(`${selectedMove.name} failed to apply. The effect is already active!`, null, 1500, this.uiScene.autoplay); } } } else { // Check if Rosie's attack hits if (this.checkHitChance('rosie')) { // Attack logic const { damage, isCriticalHit, damageCategory } = this.calculateDamage('rosie', 'player', selectedMove); await this.animateAttack(this.rosieChar, this.playerChar); this.playDamageSound(damage); await Promise.all([ this.createFlashEffect(this.playerChar), this.createScreenShake(isCriticalHit ? 0.03 : 0.005, isCriticalHit ? 400 : 100) ]); const damageDealt = Math.min(damage, this.playerHealth); const newPlayerHealth = this.playerHealth - damageDealt; await this.uiScene.tweenHealthBar('player', this.playerHealth, newPlayerHealth, this.playerMaxHealth); this.playerHealth = newPlayerHealth; await this.uiScene.showMessageWithDelay(`${selectedMove.name} dealt ${damageDealt} damage!`, null, 1500, this.uiScene.autoplay); if (damageCategory !== 'normal') { await this.uiScene.showMessageWithDelay(`It's ${damageCategory}!`, null, 1500, this.uiScene.autoplay); } if (isCriticalHit) { await this.uiScene.showMessageWithDelay(`A critical hit!`, null, 1500, this.uiScene.autoplay); } } else { await this.uiScene.showMessageWithDelay(`Rosie's attack missed!`, null, 1500, this.uiScene.autoplay); } } await this.uiScene.hideMessage(); console.log('After Rosie move - Player health:', this.playerHealth, 'Max:', this.playerMaxHealth); } checkHitChance(attacker) { const effects = this[`${attacker}Effects`]; if (!effects) { console.log("No effects applied") return true; // If there are no effects, the attack always hits } const missEffect = effects.find(e => e.effect.name === 'miss'); if (missEffect && Phaser.Math.RND.frac() < 0.25) { console.log(`${attacker === 'player' ? this.playerData.name : 'Rosie'}'s attack missed due to miss effect!`); return false; } return true; } createEffectAnimation(character, effectType) { console.log(`Creating ${effectType} effect animation for`, character === this.playerChar ? 'player' : 'Rosie'); if (effectType === 'buff') { return this.createBuffEffect(character); } else if (effectType === 'debuff') { return this.createDebuffEffect(character); } else { console.warn(`Unknown effect type: ${effectType}`); return Promise.resolve(); } } async animateAttack(attacker, target) { const originalX = attacker.x; const originalY = attacker.y; const targetX = target.x + (attacker === this.playerChar ? -100 : 100); const targetY = target.y + (attacker === this.playerChar ? 130 : -130); // Adjusted these values // Pause Rosie's floating animation if she's the attacker if (attacker === this.rosieChar) { this.rosieFloatingTween.pause(); } return new Promise((resolve) => { this.tweens.add({ targets: attacker, x: targetX, y: targetY, duration: 100, ease: 'Power2', yoyo: true, hold: 50, onComplete: () => { attacker.setPosition(originalX, originalY); // Resume Rosie's floating animation if she was the attacker if (attacker === this.rosieChar) { this.rosieFloatingTween.resume(); } resolve(); } }); }); } createFlashEffect(target) { return new Promise((resolve) => { let flashCount = 0; const originalX = target.x; const flinchDistance = target === this.playerChar ? -20 : 20; // Player flinches left, Rosie flinches right const flash = () => { if (flashCount < 4) { target.setTint(flashCount % 2 === 0 ? 0xffffff : 0xff0000); // Flinch back on the first flash if (flashCount === 0) { this.tweens.add({ targets: target, x: originalX + flinchDistance, duration: 50, ease: 'Power1', yoyo: true, onComplete: () => { // Ensure the character returns to its original position target.x = originalX; } }); } flashCount++; this.time.delayedCall(100, flash); } else { target.clearTint(); resolve(); } }; flash(); }); } async checkBattleEnd() { if (this.playerHealth <= 0 || this.rosieHealth <= 0) { const winner = this.playerHealth > 0 ? this.playerData.name : 'Rosie'; const loser = this.playerHealth <= 0 ? this.playerData.name : 'Rosie'; const loserChar = this.playerHealth <= 0 ? this.playerChar : this.rosieChar; // Disable move buttons and autoplay this.uiScene.moveButtons.forEach(({ button }) => button.disableInteractive()); this.autoplay = false; this.uiScene.autoplaySymbol.setFrame(74); // Set to play symbol this.uiScene.autoplaySymbol.disableInteractive(); this.uiScene.doubleArrows.setVisible(false); this.uiScene.rotationTween.pause(); // Get and display the final response from the defeated character const finalResponse = await this.getCharacterResponse(loser.toLowerCase(), -1, false, true); await this.uiScene.showMessageWithDelay(finalResponse, loser, 2000, this.uiScene.autoplay); // Perform defeat animation await this.performDefeatAnimation(loser, loserChar); // Stop the battle music this.musicManager.stopMusic(); // Start the EndgameScene this.scene.launch('EndgameScene', { winner: winner, backgroundImageUrl: this.backgroundImageUrl, playerImageUrl: this.playerData.imageUrl, rosieImageUrl: this.rosieData.imageUrl }); this.scene.stop('BattleUIScene'); // Stop the BattleUIScene this.scene.bringToTop('EndgameScene'); // Ensure EndgameScene is on top this.isBattleStarted = false; } } async performDefeatAnimation(loser, loserChar) { // Show defeat message in a box await this.uiScene.showBoxedMessage(`${loser} has been defeated!`, 0xFF0000); // Flash white twice await this.flashCharacter(loserChar, 0xffffff, 2); // Bump up slightly await this.tweenCharacter(loserChar, { y: '-=20' }, 100); // Fall down off screen await this.tweenCharacter(loserChar, { y: '+=800' }, 1000, 'Cubic.easeIn'); } async flashCharacter(character, color, times) { for (let i = 0; i < times; i++) { character.setTint(color); await this.delay(100); character.clearTint(); await this.delay(100); } } async tweenCharacter(character, props, duration, ease = 'Linear') { return new Promise(resolve => { this.tweens.add({ targets: character, ...props, duration: duration, ease: ease, onComplete: resolve }); }); } delay(ms) { return new Promise(resolve => this.time.delayedCall(ms, resolve)); } createScreenShake(intensity = 0.005, duration = 100) { return new Promise((resolve) => { this.cameras.main.shake(duration, intensity); this.time.delayedCall(duration, resolve); }); } performAutoplayMove() { if (this.uiScene.autoplay && this.currentTurn === 'player' && this.isBattleStarted && this.playerHealth > 0 && this.rosieHealth > 0 && !this.isAutoplayMoveInProgress) { if (this.playerData.moveset && this.playerData.moveset.length > 0) { const randomMoveIndex = Phaser.Math.Between(0, this.playerData.moveset.length - 1); // Add a short delay before performing the move this.time.delayedCall(1000, () => { if (this.uiScene.autoplay) { // Check again in case autoplay was turned off during the delay this.onMoveSelected(randomMoveIndex); } }); } else { console.error('Player moveset is not properly initialized'); this.uiScene.toggleAutoplay(); // Turn off autoplay if moveset is invalid } } else if (!this.isBattleStarted || this.playerHealth <= 0 || this.rosieHealth <= 0) { this.uiScene.toggleAutoplay(); // Turn off autoplay if the battle has ended } } } class EndgameScene extends Phaser.Scene { constructor() { super('EndgameScene'); this.currentImageIndex = 0; } init(data) { this.winner = data.winner; this.images = [{ key: 'background', url: data.backgroundImageUrl }, { key: 'playerChar', url: data.playerImageUrl }, { key: 'rosieChar', url: data.rosieImageUrl }]; } preload() { this.images.forEach(img => { if (!this.textures.exists(img.key)) { this.load.image(img.key, img.url); } }); } create() { const highDepth = 1000; // Use a high depth value // Semi-transparent background this.add.rectangle(400, 300, 800, 600, 0x000000, 0.7).setDepth(highDepth); // Winner text this.add.text(400, 100, `${this.winner} wins!`, { fontSize: '48px', fill: '#fff' }).setOrigin(0.5).setDepth(highDepth + 1); // Thank you message this.add.text(400, 160, 'Thank you for playing!', { fontSize: '32px', fill: '#fff' }).setOrigin(0.5).setDepth(highDepth + 1); // Image display this.displayedImage = this.add.image(400, 350, this.images[0].key) .setOrigin(0.5) .setDisplaySize(300, 300) .setDepth(highDepth + 1); // Navigation arrows this.leftArrow = this.add.text(50, 350, '<', { fontSize: '48px', fill: '#fff' }).setInteractive().setDepth(highDepth + 2); this.rightArrow = this.add.text(750, 350, '>', { fontSize: '48px', fill: '#fff' }).setInteractive().setDepth(highDepth + 2); this.leftArrow.on('pointerdown', () => this.changeImage(-1)); this.rightArrow.on('pointerdown', () => this.changeImage(1)); // Add Copy Image button this.copyButton = this.add.text(400, 520, 'Copy Image', { fontSize: '24px', fill: '#fff', backgroundColor: '#4CAF50', padding: { left: 10, right: 10, top: 5, bottom: 5 } }).setOrigin(0.5).setInteractive().setDepth(highDepth + 2); this.copyButton.on('pointerdown', () => this.copyToClipboard()); // Initialize copy button state this.updateCopyButton(); } changeImage(direction) { this.currentImageIndex = (this.currentImageIndex + direction + this.images.length) % this.images.length; const newImage = this.images[this.currentImageIndex]; this.displayedImage.setTexture(newImage.key); this.updateCopyButton(); } copyToClipboard() { const currentImage = this.images[this.currentImageIndex]; if (this.isImageCopyable(currentImage)) { this.copyImageToClipboard(currentImage.url); } } copyImageToClipboard(imageUrl) { // Create a temporary canvas element const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Create an image object const img = new Image(); img.crossOrigin = 'anonymous'; // This allows loading images from other domains img.src = imageUrl; img.onload = () => { // Set canvas size to image size canvas.width = img.width; canvas.height = img.height; // Draw image on canvas ctx.drawImage(img, 0, 0); // Copy canvas content to clipboard canvas.toBlob(blob => { navigator.clipboard.write([ new ClipboardItem({ 'image/png': blob }) ]).then(() => { console.log('Image copied to clipboard'); // Show a temporary message to the user const copiedText = this.add.text(400, 575, 'Image Copied!', { fontSize: '24px', fill: '#fff' }).setOrigin(0.5); this.time.delayedCall(2000, () => copiedText.destroy()); }).catch(err => { console.error('Failed to copy image: ', err); // Show error message to the user const errorText = this.add.text(400, 600, 'Failed to copy image', { fontSize: '24px', fill: '#ff0000' }).setOrigin(0.5); this.time.delayedCall(2000, () => errorText.destroy()); }); }); }; img.onerror = () => { console.error('Failed to load image'); // Show error message to the user const errorText = this.add.text(400, 600, 'Failed to load image', { fontSize: '24px', fill: '#ff0000' }).setOrigin(0.5); this.time.delayedCall(2000, () => errorText.destroy()); }; } updateCopyButton() { const currentImage = this.images[this.currentImageIndex]; if (this.isImageCopyable(currentImage)) { this.copyButton.setAlpha(1).setInteractive(); } else { this.copyButton.setAlpha(0.5).disableInteractive(); } } isImageCopyable(image) { // Add logic here to determine if the image is copyable // For example, you might want to exclude certain URLs or types of images return true; // For now, we'll assume all images are copyable } } 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); }); } async function initializeGame() { 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'); // Load the TV4 script before initializing the Phaser game await loadScript(`https://cdnjs.cloudflare.com/ajax/libs/tv4/1.3.0/tv4.min.js`); console.log('TV4 script loaded successfully'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, fps: 30, scene: [AnythingVsRosie, BattleScene, MusicScene, CreditsScene, EndgameScene, BattleUIScene] }; const game = new Phaser.Game(config); } catch (error) { console.error('Failed to load external script or initialize the Phaser game:', error); } } initializeGame()