[{"_1":2,"_185":-5,"_186":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_183":-5,"_105":-5,"_184":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":61,"_62":63,"_64":59,"_65":59,"_66":59,"_67":59,"_68":59,"_69":59,"_70":17,"_71":25,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_96":97,"_148":17,"_149":150,"_105":31,"_107":181,"_182":17},"id","6158225865cfc11b0a69","isMyApp",false,"name","the boys go fishing","description","The ultimate social fishing frenzy where you and your friends compete in real-time to reel in the biggest catches while still drowning in your favorite content! Watch as your fishing buddies' avatars frantically cast lines across your screen in a chaotic multiplayer ecosystem of distraction.","brief","","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/6158225865cfc11b0a69/46683_8353a17c.webp","cdnUrl","https://cdn.dev.fun/app/6158225865cfc11b0a69/46683","createdAt",["D",1743888296931],"updatedAt",["D",1743954303135],"lastCommitId",["B","46683"],"tier",1,"credits",79,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":53,"_54":55},"46c87991-407f-42a0-9a88-9d9c1dee10e8","uniqueId","89sFxq9mLKJLsb8WDzjm3kiXFnQhAQYyJypfRBQexE8a","username","solanaWallet","displayName","89s...E8a","bio","(buidl, buidl)","avatar","/avatar.svg","commitCount",43,"forkCount",0,"likeCount",4,"runsCount",60,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import * as Phaser from \"phaser\";\nimport { io } from \"socket.io-client\";\nclass BootScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"BootScene\"\n });\n }\n preload() {\n this.createPixelTextures();\n const skyGradient = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const skyColors = [{\n y: 0,\n color: 0x1A237E\n }, {\n y: 50,\n color: 0x303F9F\n }, {\n y: 100,\n color: 0x5C6BC0\n }, {\n y: 150,\n color: 0xFFA726\n }, {\n y: 200,\n color: 0xFF7043\n }, {\n y: 250,\n color: 0xFFB74D\n }];\n for (let i = 0; i < skyColors.length - 1; i++) {\n const current = skyColors[i];\n const next = skyColors[i + 1];\n const height = next.y - current.y;\n skyGradient.fillStyle(current.color, 1);\n skyGradient.fillRect(0, current.y, 800, height);\n }\n skyGradient.fillStyle(0x1A1A2E, 1);\n skyGradient.fillTriangle(0, 250, 200, 150, 400, 250);\n skyGradient.fillTriangle(350, 250, 550, 170, 750, 250);\n skyGradient.fillTriangle(700, 250, 800, 200, 850, 250);\n skyGradient.generateTexture('skyTexture', 800, 300);\n const waterSheet = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const waterBaseColor = 0x3498DB;\n const waterHighlightColor = 0x67E8F9;\n const waterShadowColor = 0x2874A6;\n for (let frame = 0; frame < 4; frame++) {\n waterSheet.fillStyle(waterBaseColor, 1);\n waterSheet.fillRect(frame * 800, 0, 800, 200);\n waterSheet.fillStyle(waterHighlightColor, 0.8);\n const offset = frame * 8;\n const pixelSize = 4;\n for (let i = 0; i < 40; i++) {\n for (let j = 0; j < 10; j++) {\n if ((i + j + frame) % 4 === 0) {\n const x = i * 20 + j % 3 * 5 + offset;\n const y = j * 20 + Math.sin(i * 0.2 + frame * 0.5) * 10;\n waterSheet.fillRect(frame * 800 + x, y, pixelSize, pixelSize);\n }\n }\n }\n waterSheet.fillStyle(waterShadowColor, 0.5);\n for (let i = 0; i < 800; i += pixelSize * 4) {\n for (let j = 0; j < 200; j += pixelSize * 4) {\n if (Math.sin(i * 0.1 + j * 0.1 + frame * 0.5) > 0.7) {\n waterSheet.fillRect(frame * 800 + i, j, pixelSize * 2, pixelSize * 2);\n }\n }\n }\n }\n waterSheet.generateTexture('waterSheet', 800 * 4, 200);\n const cloudTexture = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n cloudTexture.fillStyle(0xFFFFFF, 0.9);\n cloudTexture.fillRect(15, 5, 30, 5);\n cloudTexture.fillRect(10, 10, 40, 10);\n cloudTexture.fillRect(5, 20, 50, 10);\n cloudTexture.generateTexture('cloud', 60, 30);\n const grassTexture = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n grassTexture.fillStyle(0x4CAF50, 1);\n for (let i = 0; i < 20; i++) {\n const x = i * 3;\n const height = 5 + Math.floor(Math.random() * 5) * 2;\n grassTexture.fillRect(x, 0, 2, height);\n }\n grassTexture.generateTexture('grass', 60, 10);\n const lilyPad = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lilyPad.fillStyle(0x2E7D32, 1);\n lilyPad.fillCircle(8, 8, 8);\n lilyPad.fillStyle(0x1B5E20, 1);\n lilyPad.fillCircle(8, 8, 6);\n lilyPad.fillStyle(0x2E7D32, 1);\n lilyPad.fillCircle(8, 8, 4);\n lilyPad.generateTexture('lilypad', 16, 16);\n }\n createPixelTextures() {\n const fisherman = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fisherman.fillStyle(0x3D2817, 1);\n fisherman.fillRect(5, 15, 25, 30);\n fisherman.fillStyle(0x2E4053, 1);\n fisherman.fillRect(8, 0, 19, 5);\n fisherman.fillRect(5, 5, 25, 3);\n fisherman.fillStyle(0xFFD3B5, 1);\n fisherman.fillRect(10, 5, 15, 15);\n fisherman.fillStyle(0x000000, 1);\n fisherman.fillRect(14, 10, 2, 2);\n fisherman.fillRect(20, 10, 2, 2);\n fisherman.fillRect(15, 15, 6, 1);\n fisherman.fillRect(14, 14, 1, 1);\n fisherman.fillRect(21, 14, 1, 1);\n fisherman.fillStyle(0x6E2C00, 1);\n fisherman.fillRect(30, 20, 25, 3);\n fisherman.generateTexture('fisherman', 60, 50);\n const boat = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n boat.fillStyle(0x8B4513, 1);\n boat.fillRect(5, 10, 50, 15);\n boat.fillStyle(0xA0522D, 1);\n boat.fillTriangle(0, 10, 5, 25, 5, 10);\n boat.fillTriangle(55, 10, 55, 25, 60, 10);\n boat.fillStyle(0xD2B48C, 1);\n boat.fillRect(10, 10, 40, 5);\n boat.lineStyle(1, 0x3D2817, 1);\n boat.lineBetween(15, 25, 45, 25);\n boat.lineBetween(15, 22, 45, 22);\n boat.generateTexture('boat', 60, 30);\n const fishTypes = [{\n name: 'fish1',\n bodyColor: 0xFF6B6B,\n finColor: 0xD43535\n }, {\n name: 'fish2',\n bodyColor: 0x48C9B0,\n finColor: 0x2EA58E\n }, {\n name: 'fish3',\n bodyColor: 0xF4D03F,\n finColor: 0xD4B72E\n }, {\n name: 'fish4',\n bodyColor: 0x85C1E9,\n finColor: 0x5DA1D9\n }, {\n name: 'fish5',\n bodyColor: 0x9B59B6,\n finColor: 0x8E44AD\n }, {\n name: 'fish6',\n bodyColor: 0x2ECC71,\n finColor: 0x27AE60\n }, {\n name: 'fish7',\n bodyColor: 0xE67E22,\n finColor: 0xD35400\n }, {\n name: 'fish8',\n bodyColor: 0xFF9FF3,\n finColor: 0xF368E0\n }, {\n name: 'fish9',\n bodyColor: 0x0ABDE3,\n finColor: 0x0A79DF\n }, {\n name: 'fish10',\n bodyColor: 0x1A1A2E,\n finColor: 0xFF0000\n }];\n fishTypes.forEach(type => {\n const fish = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fish.fillStyle(type.finColor, 1);\n fish.fillTriangle(0, 4, 0, 12, 4, 8);\n fish.fillStyle(type.bodyColor, 1);\n fish.fillRect(4, 4, 12, 8);\n fish.fillStyle(type.finColor, 1);\n fish.fillTriangle(8, 4, 12, 0, 14, 4);\n fish.fillTriangle(10, 12, 14, 14, 14, 12);\n fish.fillStyle(0xFFFFFF, 1);\n fish.fillRect(14, 6, 2, 2);\n fish.fillStyle(0x000000, 1);\n fish.fillRect(15, 6, 1, 1);\n fish.generateTexture(type.name, 20, 16);\n });\n const line = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n line.lineStyle(1, 0xFFFFFF, 1);\n line.lineBetween(0, 0, 0, 100);\n line.generateTexture('fishingLine', 1, 100);\n const hook = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n hook.lineStyle(2, 0xDDDDDD, 1);\n hook.arc(5, 5, 5, 0, Math.PI, false);\n hook.lineTo(5, 0);\n hook.generateTexture('hook', 10, 10);\n const splash = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n splash.fillStyle(0x87CEEB, 0.8);\n splash.fillCircle(10, 10, 10);\n splash.generateTexture('splash', 20, 20);\n const bubble = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n bubble.fillStyle(0xFFFFFF, 0.7);\n bubble.fillCircle(4, 4, 4);\n bubble.fillStyle(0xFFFFFF, 0.9);\n bubble.fillCircle(3, 3, 1);\n bubble.generateTexture('bubble', 8, 8);\n }\n create() {\n this.scene.start(\"GameScene\");\n }\n}\nclass GameScene extends Phaser.Scene {\n create() {\n this.setupLayout();\n this.createGameUI();\n this.setupFishingSystem();\n this.createVideoPlaceholders();\n this.createParticles();\n this.createClouds();\n this.setupPlayerControls();\n this.scoreText = this.add.text(10, 10, `Score: ${this.score}`, {\n fontSize: '18px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 4\n });\n this.statusText = this.add.text(this.cameras.main.width / 2, 20, \"Click to cast your line!\", {\n fontSize: '20px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 4\n }).setOrigin(0.5, 0);\n this.caughtFishes = [];\n this.createStickerArea();\n this.connectToServer();\n this.createMultiplayerContainer();\n this.createChatSystem();\n this.scale.on('resize', this.resize, this);\n this.resize();\n }\n createChatSystem() {\n const chatInputHeight = this.cameras.main.height / 10;\n const chatY = this.cameras.main.height - chatInputHeight;\n this.chatBackground = this.add.graphics();\n this.chatBackground.fillStyle(0x000000, 0.7);\n this.chatBackground.fillRect(0, chatY, this.cameras.main.width, chatInputHeight);\n this.chatLabel = this.add.text(10, chatY + 10, \"Chat:\", {\n fontSize: '16px',\n color: '#ffffff'\n });\n this.chatInputField = this.add.graphics();\n this.chatInputField.fillStyle(0xffffff, 0.3);\n this.chatInputField.fillRoundedRect(70, chatY + 5, this.cameras.main.width - 180, chatInputHeight - 10, 5);\n this.sendButton = this.add.graphics();\n this.sendButton.fillStyle(0x4CAF50, 1);\n this.sendButton.fillRoundedRect(this.cameras.main.width - 100, chatY + 5, 90, chatInputHeight - 10, 5);\n this.sendButtonText = this.add.text(this.cameras.main.width - 55, chatY + chatInputHeight / 2, \"Send\", {\n fontSize: '16px',\n color: '#ffffff'\n }).setOrigin(0.5);\n this.chatInput = this.add.text(80, chatY + chatInputHeight / 2, \"\", {\n fontSize: '16px',\n color: '#ffffff'\n }).setOrigin(0, 0.5);\n this.charLimitText = this.add.text(this.cameras.main.width - 110, chatY + chatInputHeight - 8, \"0/30\", {\n fontSize: '12px',\n color: '#aaaaaa'\n }).setOrigin(1, 1);\n this.currentChatMessage = \"\";\n this.input.keyboard.on('keydown', event => {\n if (event.key === \"Enter\" && this.currentChatMessage.trim().length > 0) {\n this.sendChatMessage(this.currentChatMessage);\n this.currentChatMessage = \"\";\n this.chatInput.setText(\"\");\n this.charLimitText.setText(\"0/30\");\n } else if (event.key === \"Backspace\") {\n this.currentChatMessage = this.currentChatMessage.slice(0, -1);\n this.chatInput.setText(this.currentChatMessage);\n this.charLimitText.setText(`${this.currentChatMessage.length}/30`);\n } else if (event.key.length === 1 && this.currentChatMessage.length < 30) {\n this.currentChatMessage += event.key;\n this.chatInput.setText(this.currentChatMessage);\n this.charLimitText.setText(`${this.currentChatMessage.length}/30`);\n }\n });\n this.sendButton.setInteractive(new Phaser.Geom.Rectangle(this.cameras.main.width - 100, chatY + 5, 90, chatInputHeight - 10), Phaser.Geom.Rectangle.Contains);\n this.sendButton.on('pointerdown', () => {\n if (this.currentChatMessage.trim().length > 0) {\n this.sendChatMessage(this.currentChatMessage);\n this.currentChatMessage = \"\";\n this.chatInput.setText(\"\");\n this.charLimitText.setText(\"0/30\");\n }\n });\n this.chatContainer = this.add.container(0, 0);\n this.chatContainer.add([this.chatBackground, this.chatLabel, this.chatInputField, this.sendButton, this.sendButtonText, this.chatInput, this.charLimitText]);\n this.chatContainer.setDepth(100);\n }\n connectToServer() {\n this.socket = io('wss://ws.dev.fun/app-6158225865cfc11b0a69');\n this.socket.on('connect', () => {\n this.playerId = this.socket.id;\n console.log(`Connected with ID: ${this.playerId}`);\n const waterY = this.gameHeight - 65;\n this.fisherman.y = waterY;\n this.socket.emit('get_all_players');\n this.sendPlayerData('player_joined', {\n x: this.fisherman.x,\n y: this.fisherman.y,\n state: this.fishingState\n });\n });\n this.socket.on('chat_message', data => {\n if (data.id !== this.playerId) {\n this.displayChatBubble(data.id, data.message);\n }\n });\n this.socket.on('devfun:user_count', count => {\n this.add.text(this.cameras.main.width - 150, 10, `Players: ${count}`, {\n fontSize: '16px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 4\n }).setDepth(100);\n });\n this.socket.on('player_joined', data => {\n if (data.id !== this.playerId) {\n this.addOtherPlayer(data);\n }\n });\n this.socket.on('all_players', players => {\n if (players && players.length) {\n players.forEach(player => {\n if (player.id !== this.playerId && !this.otherPlayers.has(player.id)) {\n this.addOtherPlayer(player);\n }\n });\n }\n });\n this.socket.on('player_left', id => {\n this.removeOtherPlayer(id);\n });\n this.socket.on('player_cast', data => {\n if (data.id !== this.playerId) {\n this.showOtherPlayerCast(data);\n }\n });\n this.socket.on('player_catch', data => {\n if (data.id !== this.playerId) {\n this.showOtherPlayerCatch(data);\n }\n });\n this.socket.on('player_move', data => {\n if (data.id !== this.playerId) {\n this.updateOtherPlayerPosition(data);\n }\n });\n }\n createMultiplayerContainer() {\n this.otherPlayersContainer = this.add.container(0, 0);\n }\n addOtherPlayer(data) {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n const minX = gameAreaX + 20;\n const maxX = gameAreaX + gameAreaWidth - 20;\n const waterY = this.gameHeight - 65;\n const x = Math.min(Math.max(data.x || minX, minX), maxX);\n const y = data.y || waterY;\n const playerData = {\n id: data.id,\n state: data.state || 'idle',\n container: this.add.container(x, y),\n chatBubble: null,\n chatBubbleTimer: null\n };\n const fisherman = this.add.image(0, 0, 'fisherman');\n fisherman.setScale(0.7);\n fisherman.setOrigin(0.5, 1);\n const username = this.add.text(0, -40, `Player ${data.id.substring(0, 5)}`, {\n fontSize: '12px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 3\n }).setOrigin(0.5);\n const fishingLine = this.add.line(0, 0, 0, 0, 0, 0, 0xFFFFFF);\n fishingLine.setLineWidth(1);\n fishingLine.setVisible(false);\n const hook = this.add.image(0, 0, 'hook');\n hook.setVisible(false);\n playerData.container.add([fisherman, username, fishingLine, hook]);\n playerData.fisherman = fisherman;\n playerData.fishingLine = fishingLine;\n playerData.hook = hook;\n playerData.username = username;\n this.otherPlayersContainer.add(playerData.container);\n this.otherPlayers.set(data.id, playerData);\n this.tweens.add({\n targets: fisherman,\n y: fisherman.y - 5,\n angle: {\n from: -1,\n to: 1\n },\n duration: 2000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n }\n removeOtherPlayer(id) {\n const playerData = this.otherPlayers.get(id);\n if (playerData) {\n playerData.container.destroy();\n this.otherPlayers.delete(id);\n }\n }\n showOtherPlayerCast(data) {\n const playerData = this.otherPlayers.get(data.id);\n if (!playerData) return;\n playerData.state = 'waiting';\n const hookX = data.hookX;\n const hookY = data.hookY;\n const rodTipX = playerData.fisherman.x + 20;\n const rodTipY = playerData.fisherman.y - 15;\n playerData.fishingLine.setVisible(true);\n playerData.fishingLine.setTo(rodTipX, rodTipY, hookX, hookY);\n playerData.hook.setVisible(true);\n playerData.hook.setPosition(hookX, hookY);\n const splash = this.add.sprite(hookX, hookY, 'splash');\n splash.setScale(0.4);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.2,\n duration: 600,\n onComplete: () => splash.destroy()\n });\n this.createBubbles(hookX, hookY, 5);\n }\n showOtherPlayerCatch(data) {\n const playerData = this.otherPlayers.get(data.id);\n if (!playerData) return;\n playerData.state = 'reeling';\n const hookX = playerData.hook.x;\n const hookY = playerData.hook.y;\n const rodTipX = playerData.fisherman.x + 20;\n const rodTipY = playerData.fisherman.y - 15;\n const splash = this.add.sprite(hookX, hookY, 'splash');\n splash.setScale(0.7);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.5,\n duration: 800,\n onComplete: () => splash.destroy()\n });\n const caughtFish = this.add.image(hookX, hookY, data.fishType);\n caughtFish.setScale(0);\n this.tweens.add({\n targets: caughtFish,\n scale: Phaser.Math.FloatBetween(1, 1.5),\n duration: 400,\n ease: 'Back.easeOut'\n });\n this.createBubbles(hookX, hookY, 8);\n this.tweens.add({\n targets: [playerData.hook, caughtFish],\n x: rodTipX,\n y: rodTipY,\n duration: 1000,\n onUpdate: () => {\n playerData.fishingLine.setTo(rodTipX, rodTipY, playerData.hook.x, playerData.hook.y);\n },\n onComplete: () => {\n playerData.hook.setVisible(false);\n playerData.fishingLine.setVisible(false);\n caughtFish.destroy();\n playerData.state = 'idle';\n }\n });\n this.tweens.add({\n targets: caughtFish,\n angle: {\n from: -15,\n to: 15\n },\n duration: 200,\n yoyo: true,\n repeat: 5\n });\n }\n updateOtherPlayerPosition(data) {\n const playerData = this.otherPlayers.get(data.id);\n if (playerData) {\n if (playerData.positionTween) {\n this.tweens.remove(playerData.positionTween);\n }\n playerData.positionTween = this.tweens.add({\n targets: playerData.container,\n x: data.x,\n y: data.y,\n duration: 200,\n ease: 'Linear'\n });\n } else {\n this.socket.emit('get_player_data', {\n id: data.id\n });\n }\n }\n sendPlayerData(event, data = {}) {\n if (this.socket && this.socket.connected) {\n const playerData = {\n id: this.playerId,\n ...data\n };\n if (event === 'player_move') {\n this.lastSentPosition = {\n x: data.x,\n y: data.y\n };\n }\n this.socket.emit(event, playerData);\n }\n }\n sendChatMessage(message) {\n if (this.socket && this.socket.connected && message.trim().length > 0) {\n const chatData = {\n id: this.playerId,\n message: message.trim(),\n timestamp: Date.now()\n };\n this.socket.emit('chat_message', chatData);\n this.displayChatBubble(this.playerId, message.trim());\n }\n }\n displayChatBubble(playerId, message) {\n if (message.trim().length === 0) return;\n const targetContainer = playerId === this.playerId ? this.fisherman : this.otherPlayers.get(playerId)?.container;\n if (!targetContainer) return;\n const style = {\n fontSize: '14px',\n color: '#000000',\n backgroundColor: '#ffffff',\n padding: {\n x: 8,\n y: 4\n },\n align: 'center',\n wordWrap: {\n width: 120\n }\n };\n if (playerId === this.playerId) {\n if (this.playerChatBubble) {\n if (this.playerChatBubbleTimer) {\n this.playerChatBubbleTimer.remove();\n }\n this.playerChatBubble.destroy();\n }\n this.playerChatBubble = this.add.text(targetContainer.x, targetContainer.y - 60, message, style).setOrigin(0.5);\n this.playerChatBubbleTimer = this.time.delayedCall(5000, () => {\n if (this.playerChatBubble) {\n this.playerChatBubble.destroy();\n this.playerChatBubble = null;\n }\n });\n } else {\n const playerData = this.otherPlayers.get(playerId);\n if (playerData) {\n if (playerData.chatBubble) {\n if (playerData.chatBubbleTimer) {\n playerData.chatBubbleTimer.remove();\n }\n playerData.chatBubble.destroy();\n }\n playerData.chatBubble = this.add.text(0, -60, message, style).setOrigin(0.5);\n playerData.container.add(playerData.chatBubble);\n playerData.chatBubbleTimer = this.time.delayedCall(5000, () => {\n if (playerData.chatBubble) {\n playerData.chatBubble.destroy();\n playerData.chatBubble = null;\n }\n });\n }\n }\n }\n setupLayout() {\n const {\n width,\n height\n } = this.cameras.main;\n this.layout.fishing = {\n x: 0,\n y: 0,\n width: width / 2,\n height: height / 2\n };\n this.layout.youtube = {\n x: 0,\n y: height / 2,\n width: width / 2,\n height: height / 2\n };\n this.layout.tiktok = {\n x: width / 2,\n y: 0,\n width: width / 2,\n height: height\n };\n this.gameHeight = height / 2;\n this.gameWidth = width / 2;\n }\n createGameUI() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n this.sky = this.add.image(gameAreaX + gameAreaWidth / 2, fishing.height / 3, 'skyTexture');\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water = this.add.sprite(gameAreaX + gameAreaWidth / 2, fishing.height - 80, 'waterSheet');\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n const ground = this.add.graphics();\n ground.fillStyle(0x8B4513, 1);\n ground.fillRect(gameAreaX, fishing.height - 30, gameAreaWidth * 0.3, 30);\n ground.fillRect(gameAreaX + gameAreaWidth * 0.7, fishing.height - 30, gameAreaWidth * 0.3, 30);\n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + gameAreaWidth * 0.7 + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = 0; i < 5; i++) {\n const lilypad = this.add.image(Phaser.Math.Between(gameAreaX + 50, gameAreaX + gameAreaWidth - 50), fishing.height - Phaser.Math.Between(60, 100), 'lilypad');\n lilypad.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n this.tweens.add({\n targets: lilypad,\n y: lilypad.y + Phaser.Math.Between(-2, 2),\n duration: Phaser.Math.Between(2000, 3000),\n yoyo: true,\n repeat: -1\n });\n }\n this.fisherman = this.add.image(gameAreaX + gameAreaWidth * 0.4, fishing.height - 45, 'fisherman');\n this.fisherman.setOrigin(0.5, 1);\n this.fisherman.setScale(0.9);\n this.tweens.add({\n targets: this.fisherman,\n y: this.fisherman.y - 5,\n angle: {\n from: -2,\n to: 2\n },\n duration: 2000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n this.fishingLine = this.add.line(0, 0, 0, 0, 0, 0, 0xFFFFFF);\n this.fishingLine.setLineWidth(1);\n this.fishingLine.setVisible(false);\n this.hook = this.add.image(0, 0, 'hook');\n this.hook.setVisible(false);\n this.rodTipX = this.fisherman.x + 30;\n this.rodTipY = this.fisherman.y - 30;\n }\n setupFishingSystem() {\n this.fishes = this.add.group();\n for (let i = 0; i < 10; i++) {\n this.createBackgroundFish();\n }\n this.input.on('pointerdown', pointer => {\n if (pointer.y < this.gameHeight) {\n this.handleFishingAction(pointer);\n }\n });\n }\n createBackgroundFish() {\n const {\n width\n } = this.cameras.main;\n const fishData = {\n y: Phaser.Math.Between(this.gameHeight - 180, this.gameHeight - 60),\n type: Phaser.Math.RND.pick(['fish1', 'fish2', 'fish3', 'fish4', 'fish5', 'fish6', 'fish7', 'fish8', 'fish9', 'fish10']),\n direction: Phaser.Math.RND.pick([-1, 1]),\n scale: Phaser.Math.FloatBetween(1, 1.5)\n };\n const startX = fishData.direction === 1 ? -20 : width + 20;\n const fishMarker = this.add.zone(startX, fishData.y, 20, 16);\n fishMarker.fishData = fishData;\n this.fishes.add(fishMarker);\n const speed = Phaser.Math.FloatBetween(30, 70);\n this.tweens.add({\n targets: fishMarker,\n x: fishData.direction === 1 ? width + 20 : -20,\n duration: width * 1000 / speed,\n ease: 'Linear',\n onComplete: () => {\n fishMarker.destroy();\n this.createBackgroundFish();\n }\n });\n this.tweens.add({\n targets: fishMarker,\n y: fishMarker.y + Phaser.Math.FloatBetween(-10, 10),\n duration: Phaser.Math.Between(2000, 4000),\n yoyo: true,\n repeat: -1\n });\n }\n handleFishingAction(pointer) {\n if (pointer.x > this.gameWidth) return;\n switch (this.fishingState) {\n case 'idle':\n this.castLine(pointer.x);\n break;\n case 'waiting':\n break;\n case 'bite':\n this.catchFish();\n break;\n case 'reeling':\n break;\n }\n }\n castLine(targetX) {\n this.fishingState = 'casting';\n const hookX = Math.min(Math.max(targetX, 80), this.gameWidth - 30);\n const hookY = this.gameHeight - 60;\n this.fishingLine.setVisible(true);\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, hookX, hookY);\n this.hook.setVisible(true);\n this.hook.setPosition(hookX, hookY);\n const splash = this.add.sprite(hookX, hookY, 'splash');\n splash.setScale(0.4);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.2,\n duration: 600,\n onComplete: () => splash.destroy()\n });\n this.createBubbles(hookX, hookY);\n this.statusText.setText(\"Waiting for fish...\");\n this.fishingState = 'waiting';\n this.sendPlayerData('player_cast', {\n hookX: hookX,\n hookY: hookY\n });\n this.fishTimer = this.time.delayedCall(Phaser.Math.Between(5000, 30000), () => {\n if (this.fishingState === 'waiting') {\n this.fishBite();\n }\n });\n }\n fishBite() {\n this.fishingState = 'bite';\n this.tweens.add({\n targets: this.hook,\n y: this.hook.y - 15,\n yoyo: true,\n repeat: 4,\n duration: 120,\n ease: 'Sine.easeInOut'\n });\n const ripple = this.add.sprite(this.hook.x, this.hook.y - 5, 'splash');\n ripple.setAlpha(0.7);\n ripple.setScale(0.3);\n this.tweens.add({\n targets: ripple,\n alpha: 0,\n scale: 1.2,\n duration: 800,\n onComplete: () => ripple.destroy()\n });\n this.createBubbles(this.hook.x, this.hook.y, 20);\n this.fishingLine.setTo(this.rodTipX, this.rodTipY - 5, this.hook.x, this.hook.y);\n this.statusText.setText(\"Fish on! Click to reel in!\");\n const smallRipple = this.add.sprite(this.hook.x + Phaser.Math.Between(-10, 10), this.hook.y + Phaser.Math.Between(-5, 5), 'splash');\n smallRipple.setAlpha(0.5);\n smallRipple.setScale(0.2);\n this.tweens.add({\n targets: smallRipple,\n alpha: 0,\n scale: 0.8,\n duration: 600,\n onComplete: () => smallRipple.destroy()\n });\n this.fishTimer = this.time.delayedCall(2000, () => {\n if (this.fishingState === 'bite') {\n this.fishEscape();\n }\n });\n }\n catchFish() {\n this.fishingState = 'reeling';\n if (this.fishTimer) {\n this.fishTimer.remove();\n }\n const splash = this.add.sprite(this.hook.x, this.hook.y, 'splash');\n splash.setScale(0.7);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.5,\n duration: 800,\n onComplete: () => splash.destroy()\n });\n if (Phaser.Math.FloatBetween(0, 1) < 0.3) {\n this.createBubbles(this.hook.x, this.hook.y, 12);\n this.tweens.add({\n targets: this.hook,\n x: this.rodTipX,\n y: this.rodTipY,\n duration: 1000,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.statusText.setText(\"Almost had it! Fish got away at the last moment. Click to try again.\");\n this.fishingState = 'idle';\n }\n });\n return;\n }\n const fishType = Phaser.Math.RND.pick(['fish1', 'fish2', 'fish3', 'fish4', 'fish5', 'fish6', 'fish7', 'fish8', 'fish9', 'fish10']);\n const caughtFish = this.add.image(this.hook.x, this.hook.y, fishType);\n caughtFish.setScale(0);\n this.tweens.add({\n targets: caughtFish,\n scale: Phaser.Math.FloatBetween(1, 1.5),\n duration: 400,\n ease: 'Back.easeOut'\n });\n this.sendPlayerData('player_catch', {\n fishType: fishType\n });\n this.createBubbles(this.hook.x, this.hook.y, 8);\n this.tweens.add({\n targets: [this.hook, caughtFish],\n x: this.rodTipX,\n y: this.rodTipY,\n duration: 1000,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.addFishSticker(fishType);\n caughtFish.destroy();\n this.score += 10;\n this.scoreText.setText(`Score: ${this.score}`);\n this.statusText.setText(\"Nice catch! Click to cast again.\");\n this.fishingState = 'idle';\n }\n });\n this.tweens.add({\n targets: caughtFish,\n angle: {\n from: -15,\n to: 15\n },\n duration: 200,\n yoyo: true,\n repeat: 5\n });\n }\n fishEscape() {\n this.tweens.add({\n targets: this.hook,\n y: this.hook.y + 20,\n duration: 500,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.statusText.setText(\"Fish got away! Click to try again.\");\n this.fishingState = 'idle';\n }\n });\n }\n createBubbles(x, y, count = 5) {\n for (let i = 0; i < count; i++) {\n const bubble = this.add.image(x + Phaser.Math.Between(-10, 10), y + Phaser.Math.Between(-5, 5), 'bubble');\n this.tweens.add({\n targets: bubble,\n y: bubble.y - Phaser.Math.Between(20, 40),\n alpha: 0,\n duration: Phaser.Math.Between(1000, 2000),\n onComplete: () => bubble.destroy()\n });\n }\n }\n createParticles() {\n this.waterParticles = this.add.particles(0, 0, 'bubble', {\n scale: {\n start: 0.2,\n end: 0.1\n },\n alpha: {\n start: 0.8,\n end: 0\n },\n speed: 20,\n lifespan: 2000,\n frequency: 500,\n emitZone: {\n type: 'random',\n source: new Phaser.Geom.Rectangle(0, this.gameHeight - 100, this.gameWidth, 40)\n }\n });\n this.sparkleParticles = this.add.particles(0, 0, 'bubble', {\n frame: 0,\n scale: {\n start: 0.1,\n end: 0.2\n },\n alpha: {\n start: 0.2,\n end: 0.8\n },\n speed: 0,\n lifespan: 1000,\n frequency: 200,\n tint: 0xFFFFFF,\n emitZone: {\n type: 'random',\n source: new Phaser.Geom.Rectangle(0, this.gameHeight - 120, this.gameWidth, 40)\n }\n });\n }\n createClouds() {\n for (let i = 0; i < 3; i++) {\n const cloud = this.add.image(Phaser.Math.Between(0, this.gameWidth), Phaser.Math.Between(20, this.gameHeight / 4), 'cloud');\n cloud.alpha = 0.8;\n cloud.setScale(Phaser.Math.FloatBetween(0.6, 1.5));\n this.tweens.add({\n targets: cloud,\n x: this.gameWidth + 50,\n duration: Phaser.Math.Between(20000, 50000),\n ease: 'Linear',\n onComplete: () => {\n cloud.x = -50;\n cloud.y = Phaser.Math.Between(20, this.gameHeight / 4);\n this.tweens.add({\n targets: cloud,\n x: this.gameWidth + 50,\n duration: Phaser.Math.Between(20000, 50000),\n ease: 'Linear',\n loop: -1\n });\n }\n });\n }\n }\n constructor() {\n super({\n key: \"GameScene\"\n });\n this.fishingState = 'idle';\n this.fishTimer = null;\n this.score = 0;\n this.lastFrameUpdate = 0;\n this.currentWaterFrame = 0;\n this.playerId = null;\n this.videoElement = null;\n this.videoContainer = null;\n this.videoProgressBar = null;\n this.youtubeContainer = null;\n this.youtubePlayer = null;\n this.youtubeVideoId = 'hUVaqGvNy-E';\n this.currentVideoIndex = 0;\n this.tiktokVideos = ['https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_avi_2801_7475942916356099346_8dc49a69.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_craze723_7487193010921426218_c75c1472.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_richieray437_7489215895689039135_a2770f8e.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_roseannegarcia00_7487939335149587714_575f3a03.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_alchemicaltarot_7489516950796635398_01004958.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_kpdprk_7489622111988927790_b4776f50.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/2025_memes_are_here_%23meme_%232025_%23funny_%23shorts_%23viral_%23memes_720_ff97a017.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/Ranking%20The%20Worst%20Politics%20Moments%20720_0e2fa1a1.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_alchemicaltarot_7486891480750017798_31d25414.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/EYE_OF_RA_BETTER_NOT_BE_THE_FIRST_MEME_OF_2025_%23meme_%23shorts_720_1773c830.mp4', 'https://cdn.dev.fun/asset/6158225865cfc11b0a69/tiktok_drozend_7489169859805220118_24c82838.mp4'];\n this.otherPlayers = new Map();\n this.layout = {\n fishing: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n },\n youtube: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n },\n tiktok: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n }\n };\n this.caughtFishes = [];\n this.maxDisplayedStickers = 12;\n }\n createTikTokVideoPlayer() {\n if (!this.videoElement) {\n const tiktok = this.layout.tiktok;\n const containerDiv = document.createElement('div');\n containerDiv.style.position = 'absolute';\n containerDiv.style.width = `${tiktok.width - 40}px`;\n containerDiv.style.height = `${tiktok.height - 60}px`;\n containerDiv.style.left = `${tiktok.x + 20}px`;\n containerDiv.style.top = `${tiktok.y + 50}px`;\n containerDiv.style.borderRadius = '8px';\n containerDiv.style.overflow = 'hidden';\n containerDiv.style.backgroundColor = '#000';\n document.getElementById('app').appendChild(containerDiv);\n const videoElement = document.createElement('video');\n videoElement.style.width = '100%';\n videoElement.style.height = '100%';\n videoElement.style.objectFit = 'cover';\n videoElement.autoplay = true;\n videoElement.loop = true;\n videoElement.muted = true;\n videoElement.playsInline = true;\n videoElement.setAttribute('playsinline', '');\n const source = document.createElement('source');\n source.src = this.tiktokVideos[this.currentVideoIndex];\n source.type = 'video/mp4';\n videoElement.appendChild(source);\n containerDiv.appendChild(videoElement);\n const soundToggleBtn = document.createElement('div');\n soundToggleBtn.style.position = 'absolute';\n soundToggleBtn.style.right = '10px';\n soundToggleBtn.style.top = '10px';\n soundToggleBtn.style.width = '30px';\n soundToggleBtn.style.height = '30px';\n soundToggleBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n soundToggleBtn.style.borderRadius = '50%';\n soundToggleBtn.style.display = 'flex';\n soundToggleBtn.style.justifyContent = 'center';\n soundToggleBtn.style.alignItems = 'center';\n soundToggleBtn.style.cursor = 'pointer';\n soundToggleBtn.style.zIndex = '10';\n const updateSoundIcon = muted => {\n soundToggleBtn.innerHTML = muted ? '' : '';\n };\n updateSoundIcon(true);\n soundToggleBtn.addEventListener('click', () => {\n videoElement.muted = !videoElement.muted;\n updateSoundIcon(videoElement.muted);\n });\n containerDiv.appendChild(soundToggleBtn);\n videoElement.addEventListener('error', e => {\n console.error('Video error:', e);\n console.error('Source:', videoElement.querySelector('source')?.src);\n });\n const progressContainer = document.createElement('div');\n progressContainer.style.position = 'absolute';\n progressContainer.style.bottom = '0';\n progressContainer.style.width = '100%';\n progressContainer.style.height = '3px';\n progressContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';\n containerDiv.appendChild(progressContainer);\n const progressBar = document.createElement('div');\n progressBar.style.height = '100%';\n progressBar.style.width = '0%';\n progressBar.style.backgroundColor = 'white';\n progressContainer.appendChild(progressBar);\n const navContainer = document.createElement('div');\n navContainer.style.position = 'absolute';\n navContainer.style.right = '10px';\n navContainer.style.top = '50%';\n navContainer.style.transform = 'translateY(-50%)';\n navContainer.style.display = 'flex';\n navContainer.style.flexDirection = 'column';\n navContainer.style.gap = '15px';\n containerDiv.appendChild(navContainer);\n const upButton = document.createElement('div');\n upButton.style.width = '36px';\n upButton.style.height = '36px';\n upButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n upButton.style.borderRadius = '50%';\n upButton.style.display = 'flex';\n upButton.style.justifyContent = 'center';\n upButton.style.alignItems = 'center';\n upButton.style.cursor = 'pointer';\n upButton.innerHTML = '';\n navContainer.appendChild(upButton);\n const downButton = document.createElement('div');\n downButton.style.width = '36px';\n downButton.style.height = '36px';\n downButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n downButton.style.borderRadius = '50%';\n downButton.style.display = 'flex';\n downButton.style.justifyContent = 'center';\n downButton.style.alignItems = 'center';\n downButton.style.cursor = 'pointer';\n downButton.innerHTML = '';\n navContainer.appendChild(downButton);\n const indexIndicator = document.createElement('div');\n indexIndicator.style.position = 'absolute';\n indexIndicator.style.right = '10px';\n indexIndicator.style.bottom = '15px';\n indexIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n indexIndicator.style.color = 'white';\n indexIndicator.style.padding = '4px 8px';\n indexIndicator.style.borderRadius = '12px';\n indexIndicator.style.fontSize = '12px';\n indexIndicator.textContent = `1/${this.tiktokVideos.length}`;\n containerDiv.appendChild(indexIndicator);\n videoElement.addEventListener('timeupdate', () => {\n const percent = videoElement.currentTime / videoElement.duration * 100;\n progressBar.style.width = `${percent}%`;\n });\n videoElement.addEventListener('click', () => {\n if (videoElement.paused) {\n videoElement.play();\n } else {\n videoElement.pause();\n }\n });\n let touchStartY = 0;\n containerDiv.addEventListener('touchstart', e => {\n touchStartY = e.touches[0].clientY;\n });\n containerDiv.addEventListener('touchend', e => {\n const touchEndY = e.changedTouches[0].clientY;\n const diff = touchStartY - touchEndY;\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n this.changeVideo(1);\n } else {\n this.changeVideo(-1);\n }\n }\n });\n upButton.addEventListener('click', () => {\n this.changeVideo(-1);\n });\n downButton.addEventListener('click', () => {\n this.changeVideo(1);\n });\n document.addEventListener('keydown', e => {\n if (e.key === 'ArrowUp') {\n this.changeVideo(-1);\n } else if (e.key === 'ArrowDown') {\n this.changeVideo(1);\n }\n });\n this.videoElement = videoElement;\n this.videoContainer = containerDiv;\n this.videoProgressBar = progressBar;\n this.videoIndexIndicator = indexIndicator;\n }\n }\n changeVideo(direction) {\n const newIndex = (this.currentVideoIndex + direction + this.tiktokVideos.length) % this.tiktokVideos.length;\n if (newIndex !== this.currentVideoIndex) {\n this.currentVideoIndex = newIndex;\n const overlay = document.createElement('div');\n overlay.style.position = 'absolute';\n overlay.style.top = '0';\n overlay.style.left = '0';\n overlay.style.width = '100%';\n overlay.style.height = '100%';\n overlay.style.backgroundColor = 'black';\n overlay.style.opacity = '0';\n overlay.style.transition = 'opacity 0.3s ease';\n overlay.style.zIndex = '5';\n this.videoContainer.appendChild(overlay);\n setTimeout(() => {\n overlay.style.opacity = '1';\n }, 10);\n setTimeout(() => {\n while (this.videoElement.firstChild) {\n this.videoElement.removeChild(this.videoElement.firstChild);\n }\n const source = document.createElement('source');\n const videoUrl = this.tiktokVideos[this.currentVideoIndex];\n source.src = videoUrl;\n source.type = 'video/mp4';\n this.videoElement.appendChild(source);\n console.log(`Loading video ${this.currentVideoIndex + 1}: ${videoUrl}`);\n this.videoElement.load();\n this.videoElement.play();\n this.videoIndexIndicator.textContent = `${this.currentVideoIndex + 1}/${this.tiktokVideos.length}`;\n setTimeout(() => {\n overlay.style.opacity = '0';\n setTimeout(() => {\n overlay.remove();\n }, 300);\n }, 300);\n }, 300);\n }\n }\n createYoutubePlayer() {\n if (!this.youtubeContainer) {\n const youtube = this.layout.youtube;\n const chatInputHeight = this.cameras.main.height / 10;\n const containerDiv = document.createElement('div');\n containerDiv.style.position = 'absolute';\n containerDiv.style.width = `${youtube.width - 40}px`;\n containerDiv.style.height = `${youtube.height - chatInputHeight - 50}px`;\n containerDiv.style.left = `${youtube.x + 20}px`;\n containerDiv.style.top = `${youtube.y + 50}px`;\n containerDiv.style.borderRadius = '8px';\n containerDiv.style.overflow = 'hidden';\n document.getElementById('app').appendChild(containerDiv);\n const youtubePlayer = document.createElement('iframe');\n youtubePlayer.style.width = '100%';\n youtubePlayer.style.height = '100%';\n youtubePlayer.style.border = 'none';\n youtubePlayer.src = `https://www.youtube.com/embed/${this.youtubeVideoId}?autoplay=1&mute=1&playsinline=1&enablejsapi=1`;\n youtubePlayer.allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\";\n youtubePlayer.allowFullscreen = true;\n containerDiv.appendChild(youtubePlayer);\n this.youtubeContainer = containerDiv;\n this.youtubePlayer = youtubePlayer;\n }\n }\n createVideoPlaceholders() {\n const youtube = this.layout.youtube;\n const tiktok = this.layout.tiktok;\n const youtubeSection = this.add.graphics();\n youtubeSection.fillStyle(0xFF0000, 1);\n youtubeSection.fillRect(youtube.x, youtube.y, youtube.width, youtube.height);\n this.add.text(youtube.x + youtube.width / 2, youtube.y + 30, \"YouTube Content\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5);\n this.createYoutubePlayer();\n if (!this.youtubeSoundBtn) {\n const youtubeIconContainer = document.createElement('div');\n youtubeIconContainer.style.position = 'absolute';\n youtubeIconContainer.style.right = `${this.cameras.main.width - youtube.x - 40}px`;\n youtubeIconContainer.style.top = `${youtube.y + 10}px`;\n youtubeIconContainer.style.width = '30px';\n youtubeIconContainer.style.height = '30px';\n youtubeIconContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n youtubeIconContainer.style.borderRadius = '50%';\n youtubeIconContainer.style.display = 'flex';\n youtubeIconContainer.style.justifyContent = 'center';\n youtubeIconContainer.style.alignItems = 'center';\n youtubeIconContainer.style.cursor = 'pointer';\n youtubeIconContainer.style.zIndex = '10';\n this.youtubeIsMuted = true;\n const updateYoutubeIcon = muted => {\n youtubeIconContainer.innerHTML = muted ? '' : '';\n };\n updateYoutubeIcon(this.youtubeIsMuted);\n youtubeIconContainer.addEventListener('click', () => {\n this.youtubeIsMuted = !this.youtubeIsMuted;\n updateYoutubeIcon(this.youtubeIsMuted);\n if (this.youtubePlayer) {\n this.youtubePlayer.muted = this.youtubeIsMuted;\n }\n });\n document.getElementById('app').appendChild(youtubeIconContainer);\n this.youtubeSoundBtn = youtubeIconContainer;\n }\n this.tiktokSection = this.add.graphics();\n this.tiktokSection.fillStyle(0xFE2C55, 1);\n this.tiktokSection.fillRect(tiktok.x, tiktok.y, tiktok.width, tiktok.height);\n this.add.text(tiktok.x + tiktok.width / 2, tiktok.y + 20, \"TikTok Feed\", {\n fontSize: '22px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5);\n this.createTikTokVideoPlayer();\n }\n resize() {\n this.setupLayout();\n const fishing = this.layout.fishing;\n this.gameHeight = fishing.height;\n this.gameWidth = fishing.width;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n this.sky.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height / 3);\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height - 80);\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n const waterY = this.gameHeight - 65;\n this.fisherman.setPosition(Math.min(Math.max(this.fisherman.x, gameAreaX + 20), gameAreaX + gameAreaWidth - 20), waterY);\n this.rodTipX = this.fisherman.x + 25;\n this.rodTipY = this.fisherman.y - 25;\n this.waterBounds = {\n left: gameAreaX + 20,\n right: gameAreaX + gameAreaWidth - 20,\n y: waterY\n };\n if (this.socket && this.socket.connected) {\n this.sendPlayerData('player_move', {\n x: this.fisherman.x,\n y: this.fisherman.y\n });\n }\n if (this.videoContainer && this.videoElement) {\n const tiktok = this.layout.tiktok;\n this.videoContainer.style.width = `${tiktok.width - 40}px`;\n this.videoContainer.style.height = `${tiktok.height - 60}px`;\n this.videoContainer.style.left = `${tiktok.x + 20}px`;\n this.videoContainer.style.top = `${tiktok.y + 50}px`;\n }\n if (this.youtubeContainer) {\n const youtube = this.layout.youtube;\n const chatInputHeight = this.cameras.main.height / 10;\n this.youtubeContainer.style.width = `${youtube.width - 40}px`;\n this.youtubeContainer.style.height = `${youtube.height - chatInputHeight - 50}px`;\n this.youtubeContainer.style.left = `${youtube.x + 20}px`;\n this.youtubeContainer.style.top = `${youtube.y + 50}px`;\n }\n if (this.youtubeSoundBtn) {\n const youtube = this.layout.youtube;\n this.youtubeSoundBtn.style.right = `${this.cameras.main.width - youtube.x - 40}px`;\n this.youtubeSoundBtn.style.top = `${youtube.y + 10}px`;\n }\n if (this.chatContainer) {\n const chatInputHeight = this.cameras.main.height / 10;\n const chatY = this.cameras.main.height - chatInputHeight;\n this.chatBackground.clear();\n this.chatBackground.fillStyle(0x000000, 0.7);\n this.chatBackground.fillRect(0, chatY, this.cameras.main.width, chatInputHeight);\n this.chatLabel.setPosition(10, chatY + 10);\n this.chatInputField.clear();\n this.chatInputField.fillStyle(0xffffff, 0.3);\n this.chatInputField.fillRoundedRect(70, chatY + 5, this.cameras.main.width - 180, chatInputHeight - 10, 5);\n this.sendButton.clear();\n this.sendButton.fillStyle(0x4CAF50, 1);\n this.sendButton.fillRoundedRect(this.cameras.main.width - 100, chatY + 5, 90, chatInputHeight - 10, 5);\n this.sendButtonText.setPosition(this.cameras.main.width - 55, chatY + chatInputHeight / 2);\n this.chatInput.setPosition(80, chatY + chatInputHeight / 2);\n this.charLimitText.setPosition(this.cameras.main.width - 110, chatY + chatInputHeight - 8);\n this.sendButton.input.hitArea.setTo(this.cameras.main.width - 100, chatY + 5, 90, chatInputHeight - 10);\n }\n if (this.waterParticles) {\n this.waterParticles.destroy();\n }\n if (this.sparkleParticles) {\n this.sparkleParticles.destroy();\n }\n this.createParticles();\n this.createVideoPlaceholders();\n this.updateStickerArea();\n }\n setupPlayerControls() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n this.waterBounds = {\n left: gameAreaX + 20,\n right: gameAreaX + gameAreaWidth - 20,\n y: this.gameHeight - 65\n };\n this.keys = this.input.keyboard.addKeys({\n left: Phaser.Input.Keyboard.KeyCodes.LEFT,\n right: Phaser.Input.Keyboard.KeyCodes.RIGHT,\n a: Phaser.Input.Keyboard.KeyCodes.A,\n d: Phaser.Input.Keyboard.KeyCodes.D\n });\n this.fisherman.y = this.waterBounds.y;\n this.positionUpdateTimer = 0;\n }\n update(time, delta) {\n if (time > this.lastFrameUpdate + 200) {\n this.lastFrameUpdate = time;\n this.currentWaterFrame = (this.currentWaterFrame + 1) % 4;\n this.water.setFrame(this.currentWaterFrame);\n }\n this.handlePlayerMovement(delta);\n }\n handlePlayerMovement(delta) {\n if (this.fishingState === 'idle') {\n let moved = false;\n const moveSpeed = 0.2 * delta;\n if (this.keys.left.isDown || this.keys.a.isDown) {\n if (this.fisherman.x > this.waterBounds.left) {\n this.fisherman.x -= moveSpeed;\n moved = true;\n }\n }\n if (this.keys.right.isDown || this.keys.d.isDown) {\n if (this.fisherman.x < this.waterBounds.right) {\n this.fisherman.x += moveSpeed;\n moved = true;\n }\n }\n if (moved && this.playerChatBubble) {\n this.playerChatBubble.setPosition(this.fisherman.x, this.fisherman.y - 60);\n }\n if (moved) {\n this.rodTipX = this.fisherman.x + 25;\n this.rodTipY = this.fisherman.y - 25;\n this.positionUpdateTimer += delta;\n if (this.positionUpdateTimer > 100) {\n this.positionUpdateTimer = 0;\n if (this.socket && this.socket.connected) {\n this.sendPlayerData('player_move', {\n x: this.fisherman.x,\n y: this.fisherman.y\n });\n }\n }\n }\n }\n }\n getPlayerData(playerId) {\n if (this.socket && this.socket.connected) {\n this.socket.emit('get_player_data', {\n id: playerId\n });\n }\n }\n destroy() {\n if (this.socket) {\n this.socket.disconnect();\n this.socket = undefined;\n }\n if (this.playerChatBubbleTimer) {\n this.playerChatBubbleTimer.remove();\n }\n this.otherPlayers.forEach(playerData => {\n if (playerData.chatBubbleTimer) {\n playerData.chatBubbleTimer.remove();\n }\n });\n if (this.videoContainer) {\n if (this.videoElement) {\n this.videoElement.pause();\n this.videoElement.src = '';\n this.videoElement.load();\n }\n this.videoContainer.remove();\n this.videoContainer = null;\n this.videoElement = null;\n }\n if (this.youtubeContainer) {\n this.youtubeContainer.remove();\n this.youtubeContainer = null;\n this.youtubePlayer = null;\n }\n if (this.youtubeSoundBtn) {\n this.youtubeSoundBtn.remove();\n this.youtubeSoundBtn = null;\n }\n super.destroy();\n }\n createStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer = this.add.container(0, 0);\n this.stickerBackground = this.add.graphics();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel = this.add.text(stickerWidth / 2, 10, \"Fish Collection\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5, 0);\n this.stickerContainer.add([this.stickerBackground, this.stickerLabel]);\n }\n updateStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer.setPosition(0, 0);\n this.stickerBackground.clear();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel.setPosition(stickerWidth / 2, 10);\n this.updateStickerPositions();\n }\n updateStickerPositions() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const columnWidth = stickerWidth / 3;\n for (let i = 0; i < this.caughtFishes.length; i++) {\n const fish = this.caughtFishes[i];\n if (fish.parent !== this.stickerContainer) {\n this.stickerContainer.add(fish);\n }\n const column = Math.floor(i / itemsPerColumn);\n const row = i % itemsPerColumn;\n fish.setPosition(column * columnWidth + columnWidth / 2, 40 + row * 40);\n }\n }\n addFishSticker(fishType) {\n const stickerSize = 35;\n const sticker = this.add.container(0, 0);\n const background = this.add.graphics();\n background.fillStyle(0xFFFFFF, 0.8);\n background.fillCircle(stickerSize / 2, stickerSize / 2, stickerSize / 2);\n const fish = this.add.image(stickerSize / 2, stickerSize / 2, fishType);\n fish.setScale(0.9);\n sticker.add([background, fish]);\n this.caughtFishes.push(sticker);\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const maxColumns = Math.floor(stickerWidth / (stickerSize + 5));\n this.maxDisplayedStickers = itemsPerColumn * maxColumns;\n if (this.caughtFishes.length > this.maxDisplayedStickers) {\n const oldestSticker = this.caughtFishes.shift();\n oldestSticker.destroy();\n }\n sticker.setScale(0);\n this.tweens.add({\n targets: sticker,\n scale: 1,\n duration: 300,\n ease: 'Back.easeOut'\n });\n this.updateStickerPositions();\n this.updateStickerArea();\n }\n}\nconst config = {\n type: Phaser.AUTO,\n scale: {\n mode: Phaser.Scale.RESIZE,\n parent: \"app\",\n width: window.innerWidth,\n height: window.innerHeight\n },\n backgroundColor: \"#1A1A28\",\n physics: {\n default: \"arcade\",\n arcade: {\n gravity: {\n y: 0\n },\n debug: false\n }\n },\n scene: [BootScene, GameScene]\n};\nexport const game = new Phaser.Game(config);","packageJson","{\"dependencies\":{\"phaser\":\"3.60.0\",\"socket.io-client\":\"4.7.1\"}}","appFunctions",[],"token",{"_18":82,"_83":82,"_84":85,"_86":87,"_88":89,"_90":-5,"_91":-5,"_92":93,"_94":95,"_72":73},"buidl","symbol","price",0.002912,"marketcap",1814627.6,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",320,"appCount",2183,"upstreamApp",{"_14":98,"_34":99,"_36":100,"_101":102,"_18":103,"_20":104,"_22":-5,"_72":73,"_105":106,"_107":108,"_32":109,"_40":41,"_42":110,"_111":112,"_113":17,"_26":25,"_70":17,"_71":17,"_114":17,"_115":25,"_116":17,"_56":117,"_58":41,"_60":59,"_62":118,"_67":59,"_65":59,"_64":59,"_119":120,"_121":-5,"_38":122,"_123":124,"_146":17,"_24":25,"_66":59,"_27":147},"052e9f76568ce2782e79",["D",1743874587512],["D",1753253583107],"template","phaser","distractafish","The ultimate attention-splitting experience where you can peacefully fish in pixel-perfect waters while simultaneously consuming your favorite TikToks and YouTube videos in a chaotic harmony of content overload!","snapshot","https://cdn.dev.fun/snapshot/052e9f76568ce2782e79/44530_d6cbeac4.webp","ogImage","https://cdn.dev.fun/og/image/052e9f76568ce2782e79/fd1d6165.webp","https://cdn.dev.fun/app/052e9f76568ce2782e79/44530",3,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown",21,9,"userId","440829d7-c787-45cb-bd97-78a62d6d09d6","upstreamAppId",["B","44530"],"lastCommit",{"_14":122,"_34":125,"_126":127,"_128":129,"_74":130,"_76":131,"_132":133,"_134":135,"_136":129,"_105":106,"_32":109,"_137":17,"_138":17,"_139":25,"_101":102,"_140":-5,"_141":-5,"_142":-5,"_6":98,"_119":120,"_143":144,"_78":145},["D",1743877766166],"input","Let's work on the fishing game:\n!. You added the fish collection window in the HORIZONTAL upper fourth not VERTICAL like I specified, please fix and follow instructions from the last prompt","output","<<<<<<< OLD\n createStickerArea() {\n const fishing = this.layout.fishing;\n const stickerHeight = fishing.height / 4;\n this.stickerContainer = this.add.container(0, 0);\n this.stickerBackground = this.add.graphics();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, fishing.width, stickerHeight, 8);\n this.stickerLabel = this.add.text(fishing.width / 2, 10, \"Fish Collection\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5, 0);\n this.stickerContainer.add([this.stickerBackground, this.stickerLabel]);\n }\n=======\n createStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer = this.add.container(0, 0);\n this.stickerBackground = this.add.graphics();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel = this.add.text(stickerWidth / 2, 10, \"Fish Collection\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5, 0);\n this.stickerContainer.add([this.stickerBackground, this.stickerLabel]);\n }\n>>>>>>> NEW\n\n<<<<<<< OLD\n updateStickerArea() {\n const fishing = this.layout.fishing;\n const stickerHeight = fishing.height / 4;\n this.stickerContainer.setPosition(0, 0);\n this.stickerBackground.clear();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, fishing.width, stickerHeight, 8);\n this.stickerLabel.setPosition(fishing.width / 2, 10);\n this.updateStickerPositions();\n }\n=======\n updateStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer.setPosition(0, 0);\n this.stickerBackground.clear();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel.setPosition(stickerWidth / 2, 10);\n this.updateStickerPositions();\n }\n>>>>>>> NEW\n\n<<<<<<< OLD\n updateStickerPositions() {\n const fishing = this.layout.fishing;\n const itemsPerRow = Math.floor(fishing.width / 40);\n for (let i = 0; i < this.caughtFishes.length; i++) {\n const fish = this.caughtFishes[i];\n if (fish.parent !== this.stickerContainer) {\n this.stickerContainer.add(fish);\n }\n const row = Math.floor(i / itemsPerRow);\n const col = i % itemsPerRow;\n fish.setPosition(20 + col * 40, 40 + row * 35);\n }\n }\n=======\n updateStickerPositions() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const columnWidth = stickerWidth / 3;\n \n for (let i = 0; i < this.caughtFishes.length; i++) {\n const fish = this.caughtFishes[i];\n if (fish.parent !== this.stickerContainer) {\n this.stickerContainer.add(fish);\n }\n const column = Math.floor(i / itemsPerColumn);\n const row = i % itemsPerColumn;\n fish.setPosition(column * columnWidth + columnWidth / 2, 40 + row * 40);\n }\n }\n>>>>>>> NEW\n\n<<<<<<< OLD\n addFishSticker(fishType) {\n const stickerSize = 35;\n const sticker = this.add.container(0, 0);\n const background = this.add.graphics();\n background.fillStyle(0xFFFFFF, 0.8);\n background.fillCircle(stickerSize / 2, stickerSize / 2, stickerSize / 2);\n const fish = this.add.image(stickerSize / 2, stickerSize / 2, fishType);\n fish.setScale(0.9);\n sticker.add([background, fish]);\n this.caughtFishes.push(sticker);\n const fishing = this.layout.fishing;\n const maxFishPerRow = Math.floor(fishing.width / 40);\n const maxRows = Math.floor((fishing.height / 4 - 40) / 35);\n this.maxDisplayedStickers = maxFishPerRow * maxRows;\n if (this.caughtFishes.length > this.maxDisplayedStickers) {\n const oldestSticker = this.caughtFishes.shift();\n oldestSticker.destroy();\n }\n=======\n addFishSticker(fishType) {\n const stickerSize = 35;\n const sticker = this.add.container(0, 0);\n const background = this.add.graphics();\n background.fillStyle(0xFFFFFF, 0.8);\n background.fillCircle(stickerSize / 2, stickerSize / 2, stickerSize / 2);\n const fish = this.add.image(stickerSize / 2, stickerSize / 2, fishType);\n fish.setScale(0.9);\n sticker.add([background, fish]);\n this.caughtFishes.push(sticker);\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const maxColumns = Math.floor(stickerWidth / (stickerSize + 5));\n this.maxDisplayedStickers = itemsPerColumn * maxColumns;\n if (this.caughtFishes.length > this.maxDisplayedStickers) {\n const oldestSticker = this.caughtFishes.shift();\n oldestSticker.destroy();\n }\n>>>>>>> NEW\n\n<<<<<<< OLD\n createGameUI() {\n const fishing = this.layout.fishing;\n const stickerHeight = fishing.height / 4;\n this.sky = this.add.image(fishing.width / 2, stickerHeight + (fishing.height - stickerHeight) / 3, 'skyTexture');\n this.sky.setDisplaySize(fishing.width, (fishing.height - stickerHeight) * 0.6);\n this.water = this.add.sprite(fishing.width / 2, fishing.height - 80, 'waterSheet');\n this.water.setDisplaySize(fishing.width, (fishing.height - stickerHeight) * 0.4);\n=======\n createGameUI() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n \n this.sky = this.add.image(gameAreaX + gameAreaWidth / 2, fishing.height / 3, 'skyTexture');\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water = this.add.sprite(gameAreaX + gameAreaWidth / 2, fishing.height - 80, 'waterSheet');\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n>>>>>>> NEW\n\n<<<<<<< OLD\n const ground = this.add.graphics();\n ground.fillStyle(0x8B4513, 1);\n ground.fillRect(0, fishing.height - 30, fishing.width * 0.3, 30);\n ground.fillRect(fishing.width * 0.7, fishing.height - 30, fishing.width * 0.3, 30);\n for (let i = 0; i < this.gameWidth * 0.3; i += 10) {\n const grass = this.add.image(i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = this.gameWidth * 0.7; i < this.gameWidth; i += 10) {\n const grass = this.add.image(i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n=======\n const ground = this.add.graphics();\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n \n ground.fillStyle(0x8B4513, 1);\n ground.fillRect(gameAreaX, fishing.height - 30, gameAreaWidth * 0.3, 30);\n ground.fillRect(gameAreaX + gameAreaWidth * 0.7, fishing.height - 30, gameAreaWidth * 0.3, 30);\n \n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + gameAreaWidth * 0.7 + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n>>>>>>> NEW\n\n<<<<<<< OLD\n for (let i = 0; i < 5; i++) {\n const lilypad = this.add.image(Phaser.Math.Between(50, fishing.width - 50), fishing.height - Phaser.Math.Between(60, 100), 'lilypad');\n lilypad.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n this.tweens.add({\n targets: lilypad,\n y: lilypad.y + Phaser.Math.Between(-2, 2),\n duration: Phaser.Math.Between(2000, 3000),\n yoyo: true,\n repeat: -1\n });\n }\n this.boat = this.add.image(fishing.width * 0.4, fishing.height - 50, 'boat');\n=======\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n \n for (let i = 0; i < 5; i++) {\n const lilypad = this.add.image(\n Phaser.Math.Between(gameAreaX + 50, gameAreaX + gameAreaWidth - 50), \n fishing.height - Phaser.Math.Between(60, 100), \n 'lilypad'\n );\n lilypad.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n this.tweens.add({\n targets: lilypad,\n y: lilypad.y + Phaser.Math.Between(-2, 2),\n duration: Phaser.Math.Between(2000, 3000),\n yoyo: true,\n repeat: -1\n });\n }\n this.boat = this.add.image(gameAreaX + gameAreaWidth * 0.4, fishing.height - 50, 'boat');\n>>>>>>> NEW\n\n<<<<<<< OLD\n resize() {\n this.setupLayout();\n const fishing = this.layout.fishing;\n this.gameHeight = fishing.height;\n this.gameWidth = fishing.width;\n this.sky.setPosition(fishing.width / 2, fishing.height / 3);\n this.sky.setDisplaySize(fishing.width, fishing.height * 0.6);\n this.water.setPosition(fishing.width / 2, fishing.height - 80);\n this.water.setDisplaySize(fishing.width, fishing.height * 0.4);\n this.boat.setPosition(fishing.width * 0.4, fishing.height - 50);\n=======\n resize() {\n this.setupLayout();\n const fishing = this.layout.fishing;\n this.gameHeight = fishing.height;\n this.gameWidth = fishing.width;\n \n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n \n this.sky.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height / 3);\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height - 80);\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n this.boat.setPosition(gameAreaX + gameAreaWidth * 0.4, fishing.height - 50);\n>>>>>>> NEW","import * as Phaser from \"phaser\";\nclass BootScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"BootScene\"\n });\n }\n preload() {\n this.createPixelTextures();\n const skyGradient = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const skyColors = [{\n y: 0,\n color: 0x1A237E\n }, {\n y: 50,\n color: 0x303F9F\n }, {\n y: 100,\n color: 0x5C6BC0\n }, {\n y: 150,\n color: 0xFFA726\n }, {\n y: 200,\n color: 0xFF7043\n }, {\n y: 250,\n color: 0xFFB74D\n }];\n for (let i = 0; i < skyColors.length - 1; i++) {\n const current = skyColors[i];\n const next = skyColors[i + 1];\n const height = next.y - current.y;\n skyGradient.fillStyle(current.color, 1);\n skyGradient.fillRect(0, current.y, 800, height);\n }\n skyGradient.fillStyle(0x1A1A2E, 1);\n skyGradient.fillTriangle(0, 250, 200, 150, 400, 250);\n skyGradient.fillTriangle(350, 250, 550, 170, 750, 250);\n skyGradient.fillTriangle(700, 250, 800, 200, 850, 250);\n skyGradient.generateTexture('skyTexture', 800, 300);\n const waterSheet = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const waterBaseColor = 0x3498DB;\n const waterHighlightColor = 0x67E8F9;\n const waterShadowColor = 0x2874A6;\n for (let frame = 0; frame < 4; frame++) {\n waterSheet.fillStyle(waterBaseColor, 1);\n waterSheet.fillRect(frame * 800, 0, 800, 200);\n waterSheet.fillStyle(waterHighlightColor, 0.8);\n const offset = frame * 8;\n const pixelSize = 4;\n for (let i = 0; i < 40; i++) {\n for (let j = 0; j < 10; j++) {\n if ((i + j + frame) % 4 === 0) {\n const x = i * 20 + j % 3 * 5 + offset;\n const y = j * 20 + Math.sin(i * 0.2 + frame * 0.5) * 10;\n waterSheet.fillRect(frame * 800 + x, y, pixelSize, pixelSize);\n }\n }\n }\n waterSheet.fillStyle(waterShadowColor, 0.5);\n for (let i = 0; i < 800; i += pixelSize * 4) {\n for (let j = 0; j < 200; j += pixelSize * 4) {\n if (Math.sin(i * 0.1 + j * 0.1 + frame * 0.5) > 0.7) {\n waterSheet.fillRect(frame * 800 + i, j, pixelSize * 2, pixelSize * 2);\n }\n }\n }\n }\n waterSheet.generateTexture('waterSheet', 800 * 4, 200);\n const cloudTexture = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n cloudTexture.fillStyle(0xFFFFFF, 0.9);\n cloudTexture.fillRect(15, 5, 30, 5);\n cloudTexture.fillRect(10, 10, 40, 10);\n cloudTexture.fillRect(5, 20, 50, 10);\n cloudTexture.generateTexture('cloud', 60, 30);\n const grassTexture = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n grassTexture.fillStyle(0x4CAF50, 1);\n for (let i = 0; i < 20; i++) {\n const x = i * 3;\n const height = 5 + Math.floor(Math.random() * 5) * 2;\n grassTexture.fillRect(x, 0, 2, height);\n }\n grassTexture.generateTexture('grass', 60, 10);\n const lilyPad = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lilyPad.fillStyle(0x2E7D32, 1);\n lilyPad.fillCircle(8, 8, 8);\n lilyPad.fillStyle(0x1B5E20, 1);\n lilyPad.fillCircle(8, 8, 6);\n lilyPad.fillStyle(0x2E7D32, 1);\n lilyPad.fillCircle(8, 8, 4);\n lilyPad.generateTexture('lilypad', 16, 16);\n }\n createPixelTextures() {\n const fisherman = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fisherman.fillStyle(0x3D2817, 1);\n fisherman.fillRect(5, 15, 25, 30);\n fisherman.fillStyle(0x2E4053, 1);\n fisherman.fillRect(8, 0, 19, 5);\n fisherman.fillRect(5, 5, 25, 3);\n fisherman.fillStyle(0xFFD3B5, 1);\n fisherman.fillRect(10, 5, 15, 15);\n fisherman.fillStyle(0x000000, 1);\n fisherman.fillRect(14, 10, 2, 2);\n fisherman.fillRect(20, 10, 2, 2);\n fisherman.fillRect(15, 15, 6, 1);\n fisherman.fillRect(14, 14, 1, 1);\n fisherman.fillRect(21, 14, 1, 1);\n fisherman.fillStyle(0x6E2C00, 1);\n fisherman.fillRect(30, 20, 25, 3);\n fisherman.generateTexture('fisherman', 60, 50);\n const boat = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n boat.fillStyle(0x8B4513, 1);\n boat.fillRect(5, 10, 50, 15);\n boat.fillStyle(0xA0522D, 1);\n boat.fillTriangle(0, 10, 5, 25, 5, 10);\n boat.fillTriangle(55, 10, 55, 25, 60, 10);\n boat.fillStyle(0xD2B48C, 1);\n boat.fillRect(10, 10, 40, 5);\n boat.lineStyle(1, 0x3D2817, 1);\n boat.lineBetween(15, 25, 45, 25);\n boat.lineBetween(15, 22, 45, 22);\n boat.generateTexture('boat', 60, 30);\n const fishTypes = [{\n name: 'fish1',\n bodyColor: 0xFF6B6B,\n finColor: 0xD43535\n }, {\n name: 'fish2',\n bodyColor: 0x48C9B0,\n finColor: 0x2EA58E\n }, {\n name: 'fish3',\n bodyColor: 0xF4D03F,\n finColor: 0xD4B72E\n }, {\n name: 'fish4',\n bodyColor: 0x85C1E9,\n finColor: 0x5DA1D9\n }, {\n name: 'fish5',\n bodyColor: 0x9B59B6,\n finColor: 0x8E44AD\n }, {\n name: 'fish6',\n bodyColor: 0x2ECC71,\n finColor: 0x27AE60\n }, {\n name: 'fish7',\n bodyColor: 0xE67E22,\n finColor: 0xD35400\n }, {\n name: 'fish8',\n bodyColor: 0xFF9FF3,\n finColor: 0xF368E0\n }, {\n name: 'fish9',\n bodyColor: 0x0ABDE3,\n finColor: 0x0A79DF\n }, {\n name: 'fish10',\n bodyColor: 0x1A1A2E,\n finColor: 0xFF0000\n }];\n fishTypes.forEach(type => {\n const fish = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fish.fillStyle(type.finColor, 1);\n fish.fillTriangle(0, 4, 0, 12, 4, 8);\n fish.fillStyle(type.bodyColor, 1);\n fish.fillRect(4, 4, 12, 8);\n fish.fillStyle(type.finColor, 1);\n fish.fillTriangle(8, 4, 12, 0, 14, 4);\n fish.fillTriangle(10, 12, 14, 14, 14, 12);\n fish.fillStyle(0xFFFFFF, 1);\n fish.fillRect(14, 6, 2, 2);\n fish.fillStyle(0x000000, 1);\n fish.fillRect(15, 6, 1, 1);\n fish.generateTexture(type.name, 20, 16);\n });\n const line = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n line.lineStyle(1, 0xFFFFFF, 1);\n line.lineBetween(0, 0, 0, 100);\n line.generateTexture('fishingLine', 1, 100);\n const hook = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n hook.lineStyle(2, 0xDDDDDD, 1);\n hook.arc(5, 5, 5, 0, Math.PI, false);\n hook.lineTo(5, 0);\n hook.generateTexture('hook', 10, 10);\n const splash = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n splash.fillStyle(0x87CEEB, 0.8);\n splash.fillCircle(10, 10, 10);\n splash.generateTexture('splash', 20, 20);\n const bubble = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n bubble.fillStyle(0xFFFFFF, 0.7);\n bubble.fillCircle(4, 4, 4);\n bubble.fillStyle(0xFFFFFF, 0.9);\n bubble.fillCircle(3, 3, 1);\n bubble.generateTexture('bubble', 8, 8);\n }\n create() {\n this.scene.start(\"GameScene\");\n }\n}\nclass GameScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"GameScene\"\n });\n this.fishingState = 'idle';\n this.fishTimer = null;\n this.score = 0;\n this.lastFrameUpdate = 0;\n this.currentWaterFrame = 0;\n this.layout = {\n fishing: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n },\n youtube: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n },\n tiktok: {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n }\n };\n this.caughtFishes = [];\n this.maxDisplayedStickers = 12;\n }\n create() {\n this.setupLayout();\n this.createGameUI();\n this.setupFishingSystem();\n this.createVideoPlaceholders();\n this.createParticles();\n this.createClouds();\n this.scoreText = this.add.text(10, 10, `Score: ${this.score}`, {\n fontSize: '18px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 4\n });\n this.statusText = this.add.text(this.cameras.main.width / 2, 20, \"Click to cast your line!\", {\n fontSize: '20px',\n color: '#fff',\n stroke: '#000',\n strokeThickness: 4\n }).setOrigin(0.5, 0);\n this.caughtFishes = [];\n this.createStickerArea();\n this.scale.on('resize', this.resize, this);\n this.resize();\n }\n setupLayout() {\n const {\n width,\n height\n } = this.cameras.main;\n this.layout.fishing = {\n x: 0,\n y: 0,\n width: width / 2,\n height: height / 2\n };\n this.layout.youtube = {\n x: 0,\n y: height / 2,\n width: width / 2,\n height: height / 2\n };\n this.layout.tiktok = {\n x: width / 2,\n y: 0,\n width: width / 2,\n height: height\n };\n this.gameHeight = height / 2;\n this.gameWidth = width / 2;\n }\n createGameUI() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n this.sky = this.add.image(gameAreaX + gameAreaWidth / 2, fishing.height / 3, 'skyTexture');\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water = this.add.sprite(gameAreaX + gameAreaWidth / 2, fishing.height - 80, 'waterSheet');\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n const ground = this.add.graphics();\n ground.fillStyle(0x8B4513, 1);\n ground.fillRect(gameAreaX, fishing.height - 30, gameAreaWidth * 0.3, 30);\n ground.fillRect(gameAreaX + gameAreaWidth * 0.7, fishing.height - 30, gameAreaWidth * 0.3, 30);\n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = 0; i < gameAreaWidth * 0.3; i += 10) {\n const grass = this.add.image(gameAreaX + gameAreaWidth * 0.7 + i, this.gameHeight - 30, 'grass');\n grass.setOrigin(0, 1);\n grass.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n }\n for (let i = 0; i < 5; i++) {\n const lilypad = this.add.image(Phaser.Math.Between(gameAreaX + 50, gameAreaX + gameAreaWidth - 50), fishing.height - Phaser.Math.Between(60, 100), 'lilypad');\n lilypad.setScale(Phaser.Math.FloatBetween(0.8, 1.2));\n this.tweens.add({\n targets: lilypad,\n y: lilypad.y + Phaser.Math.Between(-2, 2),\n duration: Phaser.Math.Between(2000, 3000),\n yoyo: true,\n repeat: -1\n });\n }\n this.boat = this.add.image(gameAreaX + gameAreaWidth * 0.4, fishing.height - 50, 'boat');\n this.boat.setOrigin(0.5, 0.5);\n this.boat.setScale(1.2);\n this.tweens.add({\n targets: this.boat,\n y: this.boat.y - 5,\n angle: {\n from: -2,\n to: 2\n },\n duration: 2000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n this.fisherman = this.add.image(this.boat.x, this.boat.y - 15, 'fisherman');\n this.fisherman.setOrigin(0.5, 1);\n this.fisherman.setScale(0.8);\n this.tweens.add({\n targets: this.fisherman,\n y: this.fisherman.y - 5,\n duration: 2000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n this.fishingLine = this.add.line(0, 0, 0, 0, 0, 0, 0xFFFFFF);\n this.fishingLine.setLineWidth(1);\n this.fishingLine.setVisible(false);\n this.hook = this.add.image(0, 0, 'hook');\n this.hook.setVisible(false);\n this.rodTipX = this.fisherman.x + 30;\n this.rodTipY = this.fisherman.y - 30;\n }\n setupFishingSystem() {\n this.fishes = this.add.group();\n for (let i = 0; i < 10; i++) {\n this.createBackgroundFish();\n }\n this.input.on('pointerdown', pointer => {\n if (pointer.y < this.gameHeight) {\n this.handleFishingAction(pointer);\n }\n });\n }\n createBackgroundFish() {\n const {\n width\n } = this.cameras.main;\n const fishData = {\n y: Phaser.Math.Between(this.gameHeight - 180, this.gameHeight - 60),\n type: Phaser.Math.RND.pick(['fish1', 'fish2', 'fish3', 'fish4', 'fish5', 'fish6', 'fish7', 'fish8', 'fish9', 'fish10']),\n direction: Phaser.Math.RND.pick([-1, 1]),\n scale: Phaser.Math.FloatBetween(1, 1.5)\n };\n const startX = fishData.direction === 1 ? -20 : width + 20;\n const fishMarker = this.add.zone(startX, fishData.y, 20, 16);\n fishMarker.fishData = fishData;\n this.fishes.add(fishMarker);\n const speed = Phaser.Math.FloatBetween(30, 70);\n this.tweens.add({\n targets: fishMarker,\n x: fishData.direction === 1 ? width + 20 : -20,\n duration: width * 1000 / speed,\n ease: 'Linear',\n onComplete: () => {\n fishMarker.destroy();\n this.createBackgroundFish();\n }\n });\n if (Phaser.Math.Between(0, 10) > 8) {\n this.createBubbles(fishMarker.x, fishMarker.y, 2);\n }\n this.tweens.add({\n targets: fishMarker,\n y: fishMarker.y + Phaser.Math.FloatBetween(-10, 10),\n duration: Phaser.Math.Between(2000, 4000),\n yoyo: true,\n repeat: -1\n });\n }\n handleFishingAction(pointer) {\n if (pointer.x > this.gameWidth) return;\n switch (this.fishingState) {\n case 'idle':\n this.castLine(pointer.x);\n break;\n case 'waiting':\n break;\n case 'bite':\n this.catchFish();\n break;\n case 'reeling':\n break;\n }\n }\n castLine(targetX) {\n this.fishingState = 'casting';\n const hookX = Math.min(Math.max(targetX, 80), this.gameWidth - 30);\n const hookY = this.gameHeight - 60;\n this.fishingLine.setVisible(true);\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, hookX, hookY);\n this.hook.setVisible(true);\n this.hook.setPosition(hookX, hookY);\n const splash = this.add.sprite(hookX, hookY, 'splash');\n splash.setScale(0.4);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.2,\n duration: 600,\n onComplete: () => splash.destroy()\n });\n this.createBubbles(hookX, hookY);\n this.statusText.setText(\"Waiting for fish...\");\n this.fishingState = 'waiting';\n this.fishTimer = this.time.delayedCall(Phaser.Math.Between(5000, 30000), () => {\n if (this.fishingState === 'waiting') {\n this.fishBite();\n }\n });\n }\n fishBite() {\n this.fishingState = 'bite';\n this.tweens.add({\n targets: this.hook,\n y: this.hook.y - 15,\n yoyo: true,\n repeat: 3,\n duration: 150,\n ease: 'Sine.easeInOut'\n });\n const ripple = this.add.sprite(this.hook.x, this.hook.y - 5, 'splash');\n ripple.setAlpha(0.5);\n ripple.setScale(0.2);\n this.tweens.add({\n targets: ripple,\n alpha: 0,\n scale: 1,\n duration: 800,\n onComplete: () => ripple.destroy()\n });\n this.createBubbles(this.hook.x, this.hook.y, 15);\n this.fishingLine.setTo(this.rodTipX, this.rodTipY - 5, this.hook.x, this.hook.y);\n this.statusText.setText(\"Fish on! Click to reel in!\");\n this.fishTimer = this.time.delayedCall(2000, () => {\n if (this.fishingState === 'bite') {\n this.fishEscape();\n }\n });\n }\n catchFish() {\n this.fishingState = 'reeling';\n if (this.fishTimer) {\n this.fishTimer.remove();\n }\n const splash = this.add.sprite(this.hook.x, this.hook.y, 'splash');\n splash.setScale(0.7);\n this.tweens.add({\n targets: splash,\n alpha: 0,\n scale: 1.5,\n duration: 800,\n onComplete: () => splash.destroy()\n });\n if (Phaser.Math.FloatBetween(0, 1) < 0.3) {\n this.createBubbles(this.hook.x, this.hook.y, 12);\n this.tweens.add({\n targets: this.hook,\n x: this.rodTipX,\n y: this.rodTipY,\n duration: 1000,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.statusText.setText(\"Almost had it! Fish got away at the last moment. Click to try again.\");\n this.fishingState = 'idle';\n }\n });\n return;\n }\n const fishType = Phaser.Math.RND.pick(['fish1', 'fish2', 'fish3', 'fish4', 'fish5', 'fish6', 'fish7', 'fish8', 'fish9', 'fish10']);\n const caughtFish = this.add.image(this.hook.x, this.hook.y, fishType);\n caughtFish.setScale(0);\n this.tweens.add({\n targets: caughtFish,\n scale: Phaser.Math.FloatBetween(1, 1.5),\n duration: 400,\n ease: 'Back.easeOut'\n });\n this.createBubbles(this.hook.x, this.hook.y, 8);\n this.tweens.add({\n targets: [this.hook, caughtFish],\n x: this.rodTipX,\n y: this.rodTipY,\n duration: 1000,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.addFishSticker(fishType);\n caughtFish.destroy();\n this.score += 10;\n this.scoreText.setText(`Score: ${this.score}`);\n this.statusText.setText(\"Nice catch! Click to cast again.\");\n this.fishingState = 'idle';\n }\n });\n this.tweens.add({\n targets: caughtFish,\n angle: {\n from: -15,\n to: 15\n },\n duration: 200,\n yoyo: true,\n repeat: 5\n });\n }\n fishEscape() {\n this.tweens.add({\n targets: this.hook,\n y: this.hook.y + 20,\n duration: 500,\n onUpdate: () => {\n this.fishingLine.setTo(this.rodTipX, this.rodTipY, this.hook.x, this.hook.y);\n },\n onComplete: () => {\n this.hook.setVisible(false);\n this.fishingLine.setVisible(false);\n this.statusText.setText(\"Fish got away! Click to try again.\");\n this.fishingState = 'idle';\n }\n });\n }\n createBubbles(x, y, count = 5) {\n for (let i = 0; i < count; i++) {\n const bubble = this.add.image(x + Phaser.Math.Between(-10, 10), y + Phaser.Math.Between(-5, 5), 'bubble');\n this.tweens.add({\n targets: bubble,\n y: bubble.y - Phaser.Math.Between(20, 40),\n alpha: 0,\n duration: Phaser.Math.Between(1000, 2000),\n onComplete: () => bubble.destroy()\n });\n }\n }\n createParticles() {\n this.waterParticles = this.add.particles(0, 0, 'bubble', {\n scale: {\n start: 0.2,\n end: 0.1\n },\n alpha: {\n start: 0.8,\n end: 0\n },\n speed: 20,\n lifespan: 2000,\n frequency: 500,\n emitZone: {\n type: 'random',\n source: new Phaser.Geom.Rectangle(0, this.gameHeight - 100, this.gameWidth, 40)\n }\n });\n this.sparkleParticles = this.add.particles(0, 0, 'bubble', {\n frame: 0,\n scale: {\n start: 0.1,\n end: 0.2\n },\n alpha: {\n start: 0.2,\n end: 0.8\n },\n speed: 0,\n lifespan: 1000,\n frequency: 200,\n tint: 0xFFFFFF,\n emitZone: {\n type: 'random',\n source: new Phaser.Geom.Rectangle(0, this.gameHeight - 120, this.gameWidth, 40)\n }\n });\n }\n createClouds() {\n for (let i = 0; i < 3; i++) {\n const cloud = this.add.image(Phaser.Math.Between(0, this.gameWidth), Phaser.Math.Between(20, this.gameHeight / 4), 'cloud');\n cloud.alpha = 0.8;\n cloud.setScale(Phaser.Math.FloatBetween(0.6, 1.5));\n this.tweens.add({\n targets: cloud,\n x: this.gameWidth + 50,\n duration: Phaser.Math.Between(20000, 50000),\n ease: 'Linear',\n onComplete: () => {\n cloud.x = -50;\n cloud.y = Phaser.Math.Between(20, this.gameHeight / 4);\n this.tweens.add({\n targets: cloud,\n x: this.gameWidth + 50,\n duration: Phaser.Math.Between(20000, 50000),\n ease: 'Linear',\n loop: -1\n });\n }\n });\n }\n }\n createVideoPlaceholders() {\n const youtube = this.layout.youtube;\n const tiktok = this.layout.tiktok;\n const youtubeSection = this.add.graphics();\n youtubeSection.fillStyle(0xFF0000, 1);\n youtubeSection.fillRect(youtube.x, youtube.y, youtube.width, youtube.height);\n this.add.text(youtube.x + youtube.width / 2, youtube.y + 30, \"YouTube Content\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5);\n for (let i = 0; i < 2; i++) {\n const row = Math.floor(i / 2);\n const col = i % 2;\n const spacing = 20;\n const thumbWidth = (youtube.width - spacing * 3) / 2;\n const thumbHeight = thumbWidth * 0.6;\n const x = youtube.x + spacing + col * (thumbWidth + spacing);\n const y = youtube.y + 60 + row * (thumbHeight + spacing * 2);\n const youtubeThumb = this.add.graphics();\n youtubeThumb.fillStyle(0x000000, 0.7);\n youtubeThumb.fillRect(x, y, thumbWidth, thumbHeight);\n const titleBar = this.add.graphics();\n titleBar.fillStyle(0xDDDDDD, 0.2);\n titleBar.fillRect(x, y + thumbHeight + 5, thumbWidth * 0.8, 10);\n titleBar.fillRect(x, y + thumbHeight + 20, thumbWidth * 0.6, 10);\n const progress = this.add.graphics();\n progress.fillStyle(0xFFFFFF, 0.8);\n progress.fillRect(x, y + thumbHeight, thumbWidth * Math.random(), 3);\n }\n const tiktokSection = this.add.graphics();\n tiktokSection.fillStyle(0xFE2C55, 1);\n tiktokSection.fillRect(tiktok.x, tiktok.y, tiktok.width, tiktok.height);\n this.add.text(tiktok.x + tiktok.width / 2, tiktok.y + 30, \"TikTok Feed\", {\n fontSize: '22px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5);\n for (let i = 0; i < 2; i++) {\n const videoHeight = tiktok.height * 0.4;\n const videoWidth = videoHeight * 0.6;\n const x = tiktok.x + tiktok.width / 2;\n const y = tiktok.y + 80 + i * (videoHeight + 40);\n const tiktokThumb = this.add.graphics();\n tiktokThumb.fillStyle(0x000000, 0.7);\n tiktokThumb.fillRect(x - videoWidth / 2, y, videoWidth, videoHeight);\n const progress = this.add.graphics();\n progress.fillStyle(0xFFFFFF, 0.8);\n progress.fillRect(x - videoWidth / 2, y + videoHeight, videoWidth * Math.random(), 3);\n const icons = this.add.graphics();\n icons.fillStyle(0xFFFFFF, 1);\n const iconX = x + videoWidth / 2 + 30;\n const iconSize = 8;\n const iconSpacing = 30;\n for (let j = 0; j < 4; j++) {\n icons.fillCircle(iconX, y + 20 + j * iconSpacing, iconSize);\n this.add.text(iconX, y + 30 + j * iconSpacing, Math.floor(Math.random() * 999) + \"K\", {\n fontSize: '12px',\n color: '#ffffff'\n }).setOrigin(0.5);\n }\n this.add.text(x, y + videoHeight + 15, \"@user_\" + Math.floor(Math.random() * 1000), {\n fontSize: '14px',\n color: '#ffffff',\n fontStyle: 'bold'\n }).setOrigin(0.5, 0);\n }\n }\n resize() {\n this.setupLayout();\n const fishing = this.layout.fishing;\n this.gameHeight = fishing.height;\n this.gameWidth = fishing.width;\n const stickerWidth = fishing.width / 4;\n const gameAreaX = stickerWidth;\n const gameAreaWidth = fishing.width - stickerWidth;\n this.sky.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height / 3);\n this.sky.setDisplaySize(gameAreaWidth, fishing.height * 0.6);\n this.water.setPosition(gameAreaX + gameAreaWidth / 2, fishing.height - 80);\n this.water.setDisplaySize(gameAreaWidth, fishing.height * 0.4);\n this.boat.setPosition(gameAreaX + gameAreaWidth * 0.4, fishing.height - 50);\n this.fisherman.setPosition(this.boat.x, this.boat.y - 15);\n this.rodTipX = this.fisherman.x + 25;\n this.rodTipY = this.fisherman.y - 25;\n if (this.waterParticles) {\n this.waterParticles.destroy();\n }\n if (this.sparkleParticles) {\n this.sparkleParticles.destroy();\n }\n this.createParticles();\n this.createVideoPlaceholders();\n this.updateStickerArea();\n }\n update(time, delta) {\n if (time > this.lastFrameUpdate + 200) {\n this.lastFrameUpdate = time;\n this.currentWaterFrame = (this.currentWaterFrame + 1) % 4;\n this.water.setFrame(this.currentWaterFrame);\n }\n }\n createStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer = this.add.container(0, 0);\n this.stickerBackground = this.add.graphics();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel = this.add.text(stickerWidth / 2, 10, \"Fish Collection\", {\n fontSize: '18px',\n color: '#ffffff',\n stroke: '#000000',\n strokeThickness: 2\n }).setOrigin(0.5, 0);\n this.stickerContainer.add([this.stickerBackground, this.stickerLabel]);\n }\n updateStickerArea() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n this.stickerContainer.setPosition(0, 0);\n this.stickerBackground.clear();\n this.stickerBackground.fillStyle(0x000000, 0.5);\n this.stickerBackground.fillRoundedRect(0, 0, stickerWidth, fishing.height, 8);\n this.stickerLabel.setPosition(stickerWidth / 2, 10);\n this.updateStickerPositions();\n }\n updateStickerPositions() {\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const columnWidth = stickerWidth / 3;\n for (let i = 0; i < this.caughtFishes.length; i++) {\n const fish = this.caughtFishes[i];\n if (fish.parent !== this.stickerContainer) {\n this.stickerContainer.add(fish);\n }\n const column = Math.floor(i / itemsPerColumn);\n const row = i % itemsPerColumn;\n fish.setPosition(column * columnWidth + columnWidth / 2, 40 + row * 40);\n }\n }\n addFishSticker(fishType) {\n const stickerSize = 35;\n const sticker = this.add.container(0, 0);\n const background = this.add.graphics();\n background.fillStyle(0xFFFFFF, 0.8);\n background.fillCircle(stickerSize / 2, stickerSize / 2, stickerSize / 2);\n const fish = this.add.image(stickerSize / 2, stickerSize / 2, fishType);\n fish.setScale(0.9);\n sticker.add([background, fish]);\n this.caughtFishes.push(sticker);\n const fishing = this.layout.fishing;\n const stickerWidth = fishing.width / 4;\n const itemsPerColumn = Math.floor((fishing.height - 40) / 40);\n const maxColumns = Math.floor(stickerWidth / (stickerSize + 5));\n this.maxDisplayedStickers = itemsPerColumn * maxColumns;\n if (this.caughtFishes.length > this.maxDisplayedStickers) {\n const oldestSticker = this.caughtFishes.shift();\n oldestSticker.destroy();\n }\n sticker.setScale(0);\n this.tweens.add({\n targets: sticker,\n scale: 1,\n duration: 300,\n ease: 'Back.easeOut'\n });\n this.updateStickerPositions();\n this.updateStickerArea();\n }\n}\nconst config = {\n type: Phaser.AUTO,\n scale: {\n mode: Phaser.Scale.RESIZE,\n parent: \"app\",\n width: window.innerWidth,\n height: window.innerHeight\n },\n backgroundColor: \"#1A1A28\",\n physics: {\n default: \"arcade\",\n arcade: {\n gravity: {\n y: 0\n },\n debug: false\n }\n },\n scene: [BootScene, GameScene]\n};\nexport const game = new Phaser.Game(config);","{\"dependencies\":{\"phaser\":\"3.60.0\"}}","thinking","Let's analyze the latest requirement:\n\n\"Let's work on the fishing game:\n!. You added the fish collection window in the HORIZONTAL upper fourth not VERTICAL like I specified, please fix and follow instructions from the last prompt\"\n\nThe user is pointing out that the fish collection window was implemented as a horizontal band at the top of the fishing game area, but they wanted it to be a vertical section along the left side of the fishing game area.\n\nFrom reviewing the code, I can see that currently:\n- The fish collection area is a horizontal strip at the top of the fishing game window\n- It takes up 1/4 of the fishing game's height\n- It shows fish stickers in rows\n\nTo implement the user's request, I need to:\n1. Change the layout so the fish collection is on the vertical left side of the fishing game area\n2. Make the sticker area take up 1/4 of the fishing game's width (not height)\n3. Update the layout of fish stickers to stack vertically in this new space\n4. Adjust any other game elements as needed to accommodate this change\n\nLet's identify the specific code sections that need to be modified:\n\n1. In the `createStickerArea()` method, the dimensions of the sticker area need to be changed\n2. In the `updateStickerArea()` method, the position and dimensions need to be updated\n3. In the `updateStickerPositions()` method, the layout algorithm needs to be changed\n4. In the `createGameUI()` method, the game elements may need repositioning\n5. In the `addFishSticker()` method, the sticker size and maximum displayed stickers calculation need updating\n\nLet's make these changes.","changelog","Fixed the fish collection window! It's now a vertical panel on the left side of the fishing game, exactly 1/4 of the width. The fish stickers now stack neatly in columns instead of rows.","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema","devbaseInsight","messageId",["B","106176"],[],"isDraft",[29],"isLordOfDev","analytics",[151,155,157,159,161,163,165,167,169,171,173,175,177,179],{"_152":153,"_154":59},"day","2025-07-09","runCount",{"_152":156,"_154":59},"2025-07-10",{"_152":158,"_154":59},"2025-07-11",{"_152":160,"_154":59},"2025-07-12",{"_152":162,"_154":59},"2025-07-13",{"_152":164,"_154":59},"2025-07-14",{"_152":166,"_154":59},"2025-07-15",{"_152":168,"_154":59},"2025-07-16",{"_152":170,"_154":59},"2025-07-17",{"_152":172,"_154":59},"2025-07-18",{"_152":174,"_154":59},"2025-07-19",{"_152":176,"_154":59},"2025-07-20",{"_152":178,"_154":59},"2025-07-21",{"_152":180,"_154":59},"2025-07-22","https://cdn.dev.fun/og/image/6158225865cfc11b0a69/3577cdd0.webp","isDevbase","commitDetail","livestream","actionData","errors"]