// Please support Scott Westover while he works to complete this project <3 // The completed code for this part of the project can be found here on GitHub: // https://github.com/devshareacademy/monster-tamer.git // Playlist for the series: // https://youtube.com/playlist?list=PLmcXe0-sfoSgq-pyXrFx0GZjHbvoVUW8t // You can find a playable version of the game over on Itch.io here: // https://galemius.itch.io/monster-tamer // config.js const SHOW_SOCIAL_LINKS = true; const TILE_SIZE = 64; const TILED_COLLISION_LAYER_ALPHA = 0; const TEXT_SPEED = Object.freeze({ SLOW: 50, MEDIUM: 30, FAST: 15, }); // asset-keys.js const EXTERNAL_LINKS_ASSET_KEYS = Object.freeze({ GITHUB_BANNER: "GITHUB_BANNER", LEARN_MORE_BACKGROUND: "LEARN_MORE_BACKGROUND", YOUTUBE_BUTTON: "YOUTUBE_BUTTON", YOUTUBE_THUMB_NAIL: "YOUTUBE_THUMB_NAIL", }); const BATTLE_BACKGROUND_ASSET_KEYS = Object.freeze({ FOREST: "FOREST", }); const MONSTER_ASSET_KEYS = Object.freeze({ IGUANIGNITE: "IGUANIGNITE", CARNODUSK: "CARNODUSK", }); const BATTLE_ASSET_KEYS = Object.freeze({ HEALTH_BAR_BACKGROUND: "HEALTH_BAR_BACKGROUND", }); const HEALTH_BAR_ASSET_KEYS = Object.freeze({ LEFT_CAP: "LEFT_CAP", MIDDLE: "MIDDLE", RIGHT_CAP: "RIGHT_CAP", LEFT_CAP_SHADOW: "LEFT_CAP_SHADOW", MIDDLE_SHADOW: "MIDDLE_SHADOW", RIGHT_CAP_SHADOW: "RIGHT_CAP_SHADOW", }); const UI_ASSET_KEYS = Object.freeze({ CURSOR: "CURSOR", CURSOR_WHITE: "CURSOR_WHITE", MENU_BACKGROUND: "MENU_BACKGROUND", MENU_BACKGROUND_GREEN: "MENU_BACKGROUND_GREEN", MENU_BACKGROUND_PURPLE: "MENU_BACKGROUND_PURPLE", }); const DATA_ASSET_KEYS = Object.freeze({ ATTACKS: "ATTACKS", ANIMATIONS: "ANIMATIONS", }); const ATTACK_ASSET_KEYS = Object.freeze({ ICE_SHARD: "ICE_SHARD", ICE_SHARD_START: "ICE_SHARD_START", SLASH: "SLASH", }); const WORLD_ASSET_KEYS = Object.freeze({ WORLD_BACKGROUND: "WORLD_BACKGROUND", WORLD_MAIN_LEVEL: "WORLD_MAIN_LEVEL", WORLD_COLLISION: "WORLD_COLLISION", WORLD_FOREGROUND: "WORLD_FOREGROUND", WORLD_ENCOUNTER_ZONE: "WORLD_ENCOUNTER_ZONE", }); const CHARACTER_ASSET_KEYS = Object.freeze({ PLAYER: "PLAYER", NPC: "NPC", }); const TITLE_ASSET_KEYS = Object.freeze({ BACKGROUND: "BACKGROUND", TITLE: "TITLE", PANEL: "PANEL", }); // scene-keys.js const SCENE_KEYS = Object.freeze({ PRELOAD_SCENE: "PRELOAD_SCENE", WORLD_SCENE: "WORLD_SCENE", BATTLE_SCENE: "BATTLE_SCENE", TITLE_SCENE: "TITLE_SCENE", OPTIONS_SCENE: "OPTIONS_SCENE", TEST_SCENE: "TEST_SCENE", }); // animations.js const ANIMATIONS = [ { key: "PLAYER_DOWN", frames: [6, 7, 8], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "PLAYER", }, { key: "PLAYER_RIGHT", frames: [3, 4, 5], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "PLAYER", }, { key: "PLAYER_LEFT", frames: [9, 10, 11], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "PLAYER", }, { key: "PLAYER_UP", frames: [0, 1, 2], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "PLAYER", }, { key: "ICE_SHARD_START", frameRate: 8, repeat: 0, delay: 0, yoyo: false, assetKey: "ICE_SHARD_START", }, { key: "ICE_SHARD", frameRate: 8, repeat: 0, delay: 0, yoyo: false, assetKey: "ICE_SHARD", }, { key: "SLASH", frameRate: 4, repeat: 0, delay: 0, yoyo: false, assetKey: "SLASH", }, { key: "NPC_1_RIGHT", frames: [28, 22, 29], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "NPC", }, { key: "NPC_1_UP", frames: [26, 21, 27], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "NPC", }, { key: "NPC_1_DOWN", frames: [24, 20, 25], frameRate: 6, repeat: -1, delay: 0, yoyo: true, assetKey: "NPC", }, ]; // attacks.js const ATTACKS = [ { id: 1, name: "ice shard", animationName: "ICE_SHARD", }, { id: 2, name: "slash", animationName: "SLASH", }, ]; // level.json const LEVEL = { compressionlevel: -1, height: 34, infinite: false, layers: [ { data: [ 188, 186, 188, 187, 188, 188, 188, 185, 188, 188, 186, 186, 188, 186, 188, 188, 187, 188, 188, 188, 188, 187, 188, 186, 185, 186, 186, 188, 185, 188, 188, 188, 187, 185, 187, 187, 188, 185, 188, 188, 188, 188, 188, 186, 186, 186, 185, 188, 185, 185, 188, 188, 186, 186, 188, 188, 187, 186, 186, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 187, 185, 188, 185, 188, 185, 188, 188, 187, 185, 185, 187, 188, 188, 186, 186, 186, 187, 188, 188, 188, 185, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 186, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 185, 188, 188, 185, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 185, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 186, 185, 188, 188, 187, 188, 188, 188, 187, 185, 185, 188, 188, 188, 188, 188, 188, 188, 188, 188, 185, 185, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 187, 185, 187, 188, 188, 188, 185, 188, 188, 188, 188, 188, 186, 187, 188, 188, 186, 188, 188, 188, 188, 187, 186, 186, 187, 187, 186, 187, 188, 188, 187, 188, 185, 188, 188, 188, 185, 187, 188, 188, 188, 187, 186, 186, 185, 187, 188, 185, 188, 185, 186, 188, 188, 187, 0, 188, 186, 187, 188, 188, 188, 188, 185, 187, 188, 187, 186, 188, 188, 188, 188, 188, 186, 188, 188, 188, 187, 188, 188, 188, 15, 15, 15, 15, 15, 15, 15, 15, 188, 188, 188, 188, 15, 15, 15, 15, 15, 15, 188, 188, 15, 15, 15, 15, 15, 15, 15, 15, 188, 188, 188, 188, 15, 15, 15, 15, 15, 15, 188, 15, 15, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 187, 187, 188, 2147483663, 15, 15, 15, 188, 187, 188, 188, 188, 188, 188, 187, 188, 187, 188, 188, 188, 188, 188, 187, 15, 15, 15, 2147483663, 186, 186, 188, 188, 188, 188, 187, 188, 186, 186, 188, 188, 188, 188, 187, 188, 15, 15, 15, 15, 186, 188, 188, 188, 188, 188, 188, 187, 186, 188, 188, 188, 188, 188, 188, 185, 15, 15, 15, 15, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 2147483835, 188, 15, 15, 15, 15, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 187, 188, 2147483835, 188, 2147483835, 15, 15, 15, 15, 187, 188, 186, 186, 186, 186, 187, 188, 188, 185, 188, 188, 186, 188, 2147483835, 188, 15, 15, 15, 2147483663, 188, 187, 188, 188, 188, 188, 188, 187, 188, 188, 188, 185, 187, 188, 188, 2147483835, 2147483663, 15, 15, 15, 187, 188, 188, 15, 188, 15, 187, 188, 188, 188, 186, 188, 188, 188, 2147483835, 188, 15, 15, 15, 15, 188, 187, 15, 188, 15, 15, 188, 187, 188, 188, 188, 188, 188, 188, 188, 2147483835, 15, 15, 15, 15, 187, 188, 187, 188, 187, 188, 187, 188, 186, 186, 186, 186, 186, 186, 186, 186, 15, 15, 15, 15, 188, 187, 188, 187, 188, 187, 188, 187, 188, 188, 188, 188, 188, 188, 186, 186, 15, 15, 15, 15, 15, 15, 188, 188, 188, 188, 186, 186, 15, 15, 188, 15, 15, 15, 186, 186, 2147483663, 15, 15, 15, 2147483663, 15, 188, 0, 0, 188, 186, 186, 188, 15, 15, 188, 15, 15, 186, 186, 15, 15, 15, 15, 15, 15, 188, 0, 0, 188, 186, 186, 186, 186, 186, 186, 186, 186, 186, 186, 15, 15, 15, 15, 15, 15, 188, 0, 0, 188, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 188, 188, 188, 188, 188, 0, 0, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, 188, ], height: 34, id: 3, locked: true, name: "Ground", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 195, 196, 197, 198, 0, 0, 0, 0, 2147483846, 2147483845, 2147483844, 2147483843, 0, 0, 0, 0, 0, 0, 0, 0, 199, 200, 201, 202, 0, 0, 0, 0, 2147483850, 2147483849, 2147483848, 2147483847, 0, 0, 0, 0, 0, 0, 0, 0, 203, 204, 205, 206, 0, 0, 0, 0, 2147483854, 2147483853, 2147483852, 2147483851, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 12, locked: true, name: "Building", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 92, 93, 94, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 107, 108, 109, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122, 123, 124, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 146, 147, 147, 148, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 161, 162, 162, 163, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 161, 162, 162, 163, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 161, 162, 162, 163, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 161, 162, 162, 163, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 5, locked: true, name: "Water", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 0, 0, 1, 0, 0, 0, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 0, 0, 0, 0, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 0, 0, 0, 0, 0, 0, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 190, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 190, 190, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 190, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 190, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 190, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 4, locked: true, name: "Decoration", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 22, name: "Sign", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 12, 0, 0, 0, 0, 0, 0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 0, 0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 11, 27, 10, 11, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 12, 12, 12, 12, 12, 12, 12, 12, ], height: 34, id: 7, locked: true, name: "Tree-Bottom", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 0, 2, 3, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 8, locked: true, name: "Tree-Top", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 29, 29, 29, 29, 29, 29, 29, 29, 0, 0, 29, 29, 29, 29, 29, 29, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 29, 29, 29, 29, 29, 29, 29, 0, 0, 0, 0, 29, 29, 29, 29, 29, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 29, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 29, 29, 0, 29, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 29, 29, 0, 0, 0, 0, 29, 29, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 10, locked: true, name: "Fence", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 13, locked: true, name: "Boulder", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 189, 189, 189, 189, 0, 0, 0, 0, 189, 189, 189, 189, 0, 0, 0, 189, 189, 0, 0, 189, 189, 189, 189, 189, 0, 0, 0, 189, 189, 189, 189, 189, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 189, 189, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 189, 0, 0, 0, 189, 189, 0, 0, 0, 189, 189, 189, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 0, 0, 0, 189, 0, 0, 189, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 189, 189, 189, 189, 189, 189, 0, 0, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, 189, ], height: 34, id: 14, locked: true, name: "Collision", opacity: 0.5, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 0, 0, 0, 0, 0, 0, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 0, 0, 0, 0, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 0, 0, 0, 0, 0, 0, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 194, 194, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 15, locked: true, name: "Encounter", opacity: 0.7, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 195, 196, 197, 198, 0, 0, 0, 0, 2147483846, 2147483845, 2147483844, 2147483843, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 0, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], height: 34, id: 16, locked: true, name: "Foreground", opacity: 1, type: "tilelayer", visible: true, width: 20, x: 0, y: 0, }, { draworder: "topdown", id: 21, locked: true, name: "Sign", objects: [ { gid: 70, height: 64, id: 15, name: "", properties: [ { name: "message", type: "string", value: "MONSTER FAN CLUB\nAll Monster fans welcome!", }, ], rotation: 0, type: "", visible: true, width: 64, x: 704, y: 1344, }, { gid: 70, height: 64, id: 16, name: "", properties: [ { name: "message", type: "string", value: "Don't leave home without a MAP!", }, ], rotation: 0, type: "", visible: true, width: 64, x: 832, y: 1856, }, { gid: 70, height: 64, id: 17, name: "", properties: [ { name: "message", type: "string", value: "TRAINER TIPS\nIf you want to avoid battles, stay away from grassy areas!", }, ], rotation: 0, type: "", visible: true, width: 64, x: 192, y: 1344, }, { gid: 70, height: 64, id: 18, name: "", properties: [ { name: "message", type: "string", value: "For poison, use ANTIDOTE! Get it at the MARKET!", }, ], rotation: 0, type: "", visible: true, width: 64, x: 448, y: 1600, }, ], opacity: 1, type: "objectgroup", visible: true, x: 0, y: 0, }, { id: 19, layers: [ { draworder: "topdown", id: 18, name: "NPC1", objects: [ { gid: 207, height: 64, id: 5, name: "1", rotation: 0, type: "npc_path", visible: true, width: 64, x: 960, y: 1408, }, { gid: 207, height: 64, id: 6, name: "npc", properties: [ { name: "frame", type: "string", value: "20", }, { name: "messages", type: "string", value: "Make sure you read the signposts for helpful tips!", }, { name: "movement_pattern", propertytype: "npc_movement", type: "string", value: "CLOCKWISE", }, ], rotation: 0, type: "npc", visible: true, width: 64, x: 896, y: 1408, }, { gid: 207, height: 64, id: 8, name: "7", rotation: 0, type: "npc_path", visible: true, width: 64, x: 896, y: 1472, }, { gid: 207, height: 64, id: 9, name: "6", rotation: 0, type: "npc_path", visible: true, width: 64, x: 896, y: 1536, }, { gid: 207, height: 64, id: 10, name: "5", rotation: 0, type: "npc_path", visible: true, width: 64, x: 960, y: 1536, }, { gid: 207, height: 64, id: 11, name: "4", rotation: 0, type: "npc_path", visible: true, width: 64, x: 1024, y: 1536, }, { gid: 207, height: 64, id: 12, name: "3", rotation: 0, type: "npc_path", visible: true, width: 64, x: 1024, y: 1472, }, { gid: 207, height: 64, id: 13, name: "2", rotation: 0, type: "npc_path", visible: true, width: 64, x: 1024, y: 1408, }, ], opacity: 1, type: "objectgroup", visible: true, x: 0, y: 0, }, { draworder: "topdown", id: 20, name: "NPC2", objects: [ { gid: 207, height: 64, id: 14, name: "npc", properties: [ { name: "frame", type: "string", value: "0", }, { name: "messages", type: "string", value: "You can save your game from the menu.::To open the menu, press the ENTER key.", }, { name: "movement_pattern", propertytype: "npc_movement", type: "string", value: "IDLE", }, ], rotation: 0, type: "npc", visible: true, width: 64, x: 704, y: 1920, }, ], opacity: 1, type: "objectgroup", visible: true, x: 0, y: 0, }, ], name: "NPC", opacity: 1, type: "group", visible: true, x: 0, y: 0, }, ], nextlayerid: 23, nextobjectid: 19, orientation: "orthogonal", renderorder: "right-down", tiledversion: "1.10.0", tileheight: 64, tilesets: [ { columns: 8, firstgid: 1, image: `https://play.rosebud.ai/assets/BasicPlains-tileset-Ver.2-ALL_by_AxulArt.png.png?nn5Z`, imageheight: 512, imagewidth: 512, margin: 0, name: "BasicPlains-tileset-Ver.2_by_AxulArt_scaled_4x_pngcrushed", spacing: 0, tilecount: 64, tileheight: 64, tilewidth: 64, }, { columns: 15, firstgid: 65, image: `https://play.rosebud.ai/assets/Beach-and-caves-tileset_by_AxulArt.png.png?Dd3X`, imageheight: 512, imagewidth: 960, margin: 0, name: "Beach-and-caves-tileset_by_AxulArt_scaled_4x_pngcrushed", spacing: 0, tilecount: 120, tileheight: 64, tilewidth: 64, }, { columns: 2, firstgid: 185, image: "monster_tamer_tiled_project/grass.png", imageheight: 128, imagewidth: 128, margin: 0, name: "grass", spacing: 0, tilecount: 4, tileheight: 64, tilewidth: 64, }, { columns: 1, firstgid: 189, image: `https://play.rosebud.ai/assets/collision.png.png?JGq1`, imageheight: 64, imagewidth: 64, margin: 0, name: "collision", spacing: 0, tilecount: 1, tileheight: 64, tilewidth: 64, }, { columns: 2, firstgid: 190, image: "monster_tamer_tiled_project/bushes.png", imageheight: 128, imagewidth: 128, margin: 0, name: "bushes", spacing: 0, tilecount: 4, tileheight: 64, tilewidth: 64, }, { columns: 1, firstgid: 194, image: `https://play.rosebud.ai/assets/encounter.png.png?4sxG`, imageheight: 64, imagewidth: 64, margin: 0, name: "encounter", spacing: 0, tilecount: 1, tileheight: 64, tilewidth: 64, transformations: { hflip: false, preferuntransformed: true, rotate: false, vflip: false, }, }, { columns: 4, firstgid: 195, image: "monster_tamer_tiled_project/house2_scaled_4x_pngcrushed.png", imageheight: 192, imagewidth: 256, margin: 0, name: "house", spacing: 0, tilecount: 12, tileheight: 64, tilewidth: 64, }, { class: "npc", columns: 1, firstgid: 207, image: "monster_tamer_tiled_project/encounter.png", imageheight: 64, imagewidth: 64, margin: 0, name: "npc_paths", properties: [ { name: "is_spawn_point", type: "bool", value: false, }, { name: "npc_spawn_point_object", type: "object", value: 0, }, ], spacing: 0, tilecount: 1, tileheight: 64, tilewidth: 64, transparentcolor: "#ff00ff", }, ], tilewidth: 64, type: "map", version: "1.10", width: 20, }; // attack-keys.js /** * @typedef {keyof typeof ATTACK_KEYS} AttackKeys */ /** @enum {AttackKeys} */ const ATTACK_KEYS = Object.freeze({ ICE_SHARD: "ICE_SHARD", SLASH: "SLASH", }); // attack-manager.js /** * @typedef {keyof typeof ATTACK_TARGET} AttackTarget */ /** @enum {AttackTarget} */ const ATTACK_TARGET = Object.freeze({ PLAYER: "PLAYER", ENEMY: "ENEMY", }); class AttackManager { /** @type {Phaser.Scene} */ #scene; /** @type {boolean} */ #skipBattleAnimations; /** @type {IceShard} */ #iceShardAttack; /** @type {Slash} */ #slashAttack; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the attack game object will be added to * @param {boolean} [skipBattleAnimations=false] used to skip all animations tied to the monster attack during battle */ constructor(scene, skipBattleAnimations = false) { this.#scene = scene; this.#skipBattleAnimations = skipBattleAnimations; } /** * @param {AttackKeys} attack * @param {AttackTarget} target * @param {() => void} callback * @returns {void} */ playAttackAnimation(attack, target, callback) { if (this.#skipBattleAnimations) { callback(); return; } // if attack target is enemy let x = 745; let y = 140; if (target === ATTACK_TARGET.PLAYER) { x = 256; y = 344; } switch (attack) { case ATTACK_KEYS.ICE_SHARD: if (!this.#iceShardAttack) { this.#iceShardAttack = new IceShard(this.#scene, { x, y }); } this.#iceShardAttack.gameObject.setPosition(x, y); this.#iceShardAttack.playAnimation(callback); break; case ATTACK_KEYS.SLASH: if (!this.#slashAttack) { this.#slashAttack = new Slash(this.#scene, { x, y }); } this.#slashAttack.gameObject.setPosition(x, y); this.#slashAttack.playAnimation(callback); break; default: exhaustiveGuard(attack); } } } // attack.js class Attack { /** @protected @type {Phaser.Scene} */ _scene; /** @protected @type {Coordinate} */ _position; /** @protected @type {boolean} */ _isAnimationPlaying; /** @protected @type {Phaser.GameObjects.Sprite | Phaser.GameObjects.Container | undefined} */ _attackGameObject; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the game object will be added to * @param {Coordinate} position the position the game object will be added to */ constructor(scene, position) { if (this.constructor === Attack) { throw new Error( "Attack is an abstract class and cannot be instantiated." ); } this._scene = scene; this._position = position; this._isAnimationPlaying = false; this._attackGameObject = undefined; } /** * @type {Phaser.GameObjects.Sprite | Phaser.GameObjects.Container | undefined} * Will be undefined if the attack does not create a Phaser 3 Game Object instance. * */ get gameObject() { return this._attackGameObject; } /** * @param {() => void} [callback] * @returns {void} */ playAnimation(callback) { throw new Error("playAnimation is not implemented."); } } // ice-shard.js class IceShard extends Attack { /** @protected @type {Phaser.GameObjects.Sprite} */ _attackGameObject; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the game object will be added to * @param {Coordinate} position the position the game object will be added to */ constructor(scene, position) { super(scene, position); // create game object this._attackGameObject = this._scene.add .sprite( this._position.x, this._position.y, ATTACK_ASSET_KEYS.ICE_SHARD, 5 ) .setOrigin(0.5) .setScale(4) .setAlpha(0); } /** * @param {() => void} [callback] * @returns {void} */ playAnimation(callback) { if (this._isAnimationPlaying) { return; } this._isAnimationPlaying = true; this._attackGameObject.setAlpha(1); // play animation and once complete call the callback this._attackGameObject.play(ATTACK_ASSET_KEYS.ICE_SHARD_START); this._attackGameObject.once( Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + ATTACK_ASSET_KEYS.ICE_SHARD_START, () => { this._attackGameObject.play(ATTACK_ASSET_KEYS.ICE_SHARD); } ); this._attackGameObject.once( Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + ATTACK_ASSET_KEYS.ICE_SHARD, () => { this._isAnimationPlaying = false; this._attackGameObject.setAlpha(0).setFrame(0); if (callback) { callback(); } } ); } } // slash.js class Slash extends Attack { /** @protected @type {Phaser.GameObjects.Container} */ _attackGameObject; /** @protected @type {Phaser.GameObjects.Sprite} */ _attackGameObject1; /** @protected @type {Phaser.GameObjects.Sprite} */ _attackGameObject2; /** @protected @type {Phaser.GameObjects.Sprite} */ _attackGameObject3; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the game object will be added to * @param {Coordinate} position the position the game object will be added to */ constructor(scene, position) { super(scene, position); // create game objects this._attackGameObject1 = this._scene.add .sprite(0, 0, ATTACK_ASSET_KEYS.SLASH, 0) .setOrigin(0.5) .setScale(4); this._attackGameObject2 = this._scene.add .sprite(30, 0, ATTACK_ASSET_KEYS.SLASH, 0) .setOrigin(0.5) .setScale(4); this._attackGameObject3 = this._scene.add .sprite(-30, 0, ATTACK_ASSET_KEYS.SLASH, 0) .setOrigin(0.5) .setScale(4); this._attackGameObject = this._scene.add .container(this._position.x, this._position.y, [ this._attackGameObject1, this._attackGameObject2, this._attackGameObject3, ]) .setAlpha(0); } /** * @param {() => void} [callback] * @returns {void} */ playAnimation(callback) { if (this._isAnimationPlaying) { return; } this._isAnimationPlaying = true; this._attackGameObject.setAlpha(1); this._attackGameObject1.play(ATTACK_ASSET_KEYS.SLASH); this._attackGameObject2.play(ATTACK_ASSET_KEYS.SLASH); this._attackGameObject3.play(ATTACK_ASSET_KEYS.SLASH); this._attackGameObject1.once( Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + ATTACK_ASSET_KEYS.SLASH, () => { this._isAnimationPlaying = false; this._attackGameObject.setAlpha(0); this._attackGameObject1.setFrame(0); this._attackGameObject2.setFrame(0); this._attackGameObject3.setFrame(0); if (callback) { callback(); } } ); } } // battle-monster.js class BattleMonster { /** @protected @type {Phaser.Scene} */ _scene; /** @protected @type {Monster} */ _monsterDetails; /** @protected @type {HealthBar} */ _healthBar; /** @protected @type {Phaser.GameObjects.Image} */ _phaserGameObject; /** @protected @type {number} */ _currentHealth; /** @protected @type {number} */ _maxHealth; /** @protected @type {Attack[]} */ _monsterAttacks; /** @protected @type {Phaser.GameObjects.Container} */ _phaserHealthBarGameContainer; /** @protected @type {boolean} */ _skipBattleAnimations; /** * @param {BattleMonsterConfig} config * @param {Coordinate} position */ constructor(config, position) { if (this.constructor === BattleMonster) { throw new Error( "BattleMonster is an abstract class and cannot be instantiated." ); } this._scene = config.scene; this._monsterDetails = config.monsterDetails; this._currentHealth = this._monsterDetails.currentHp; this._maxHealth = this._monsterDetails.maxHp; this._monsterAttacks = []; this._skipBattleAnimations = config.skipBattleAnimations || false; this._phaserGameObject = this._scene.add .image( position.x, position.y, this._monsterDetails.assetKey, this._monsterDetails.assetFrame || 0 ) .setAlpha(0); this.#createHealthBarComponents(config.scaleHealthBarBackgroundImageByY); this._healthBar.setMeterPercentageAnimated( this._currentHealth / this._maxHealth, { skipBattleAnimations: true, } ); this._monsterDetails.attackIds.forEach((attackId) => { const monsterAttack = DataUtils.getMonsterAttack(this._scene, attackId); if (monsterAttack !== undefined) { this._monsterAttacks.push(monsterAttack); } }); } /** @type {boolean} */ get isFainted() { return this._currentHealth <= 0; } /** @type {string} */ get name() { return this._monsterDetails.name; } /** @type {Attack[]} */ get attacks() { return [...this._monsterAttacks]; } /** @type {number} */ get baseAttack() { return this._monsterDetails.baseAttack; } /** @type {number} */ get level() { return this._monsterDetails.currentLevel; } /** * @param {number} damage * @param {() => void} [callback] * @returns {void} */ takeDamage(damage, callback) { // update current monster health and animate health bar this._currentHealth -= damage; if (this._currentHealth < 0) { this._currentHealth = 0; } this._healthBar.setMeterPercentageAnimated( this._currentHealth / this._maxHealth, { callback, skipBattleAnimations: this._skipBattleAnimations, } ); } /** * @param {() => void} callback * @returns {void} */ playMonsterAppearAnimation(callback) { throw new Error("playMonsterAppearAnimation is not implemented."); } /** * @param {() => void} callback * @returns {void} */ playMonsterHealthBarAppearAnimation(callback) { throw new Error("playMonsterHealthBarAppearAnimation is not implemented."); } /** * @param {() => void} callback * @returns {void} */ playDeathAnimation(callback) { throw new Error("playDeathAnimation is not implemented."); } /** * @param {() => void} callback * @returns {void} */ playTakeDamageAnimation(callback) { if (this._skipBattleAnimations) { this._phaserGameObject.setAlpha(1); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 150, targets: this._phaserGameObject, alpha: { from: 1, start: 1, to: 0, }, repeat: 10, onComplete: () => { this._phaserGameObject.setAlpha(1); callback(); }, }); } #createHealthBarComponents(scaleHealthBarBackgroundImageByY = 1) { this._healthBar = new HealthBar(this._scene, 34, 34); const monsterNameGameText = this._scene.add.text(30, 20, this.name, { fontFamily: "Calibri", color: "#7E3D3F", fontSize: "32px", }); const healthBarBgImage = this._scene.add .image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND) .setOrigin(0) .setScale(1, scaleHealthBarBackgroundImageByY); const monsterHealthBarLevelText = this._scene.add.text( monsterNameGameText.width + 35, 23, `L${this.level}`, { fontFamily: "Calibri", color: "#ED474B", fontSize: "28px", } ); const monsterHpText = this._scene.add.text(30, 55, "HP", { fontFamily: "Calibri", color: "#FF6505", fontSize: "24px", fontStyle: "italic", }); this._phaserHealthBarGameContainer = this._scene.add .container(0, 0, [ healthBarBgImage, monsterNameGameText, this._healthBar.container, monsterHealthBarLevelText, monsterHpText, ]) .setAlpha(0); } } // enemy-battle-monster.js /** @type {Coordinate} */ const ENEMY_POSITION = Object.freeze({ x: 768, y: 144, }); class EnemyBattleMonster extends BattleMonster { /** * @param {BattleMonsterConfig} config */ constructor(config) { super({ ...config, scaleHealthBarBackgroundImageByY: 0.8 }, ENEMY_POSITION); } /** * @param {() => void} callback * @returns {void} */ playMonsterAppearAnimation(callback) { const startXPos = -30; const endXPos = ENEMY_POSITION.x; this._phaserGameObject.setPosition(startXPos, ENEMY_POSITION.y); this._phaserGameObject.setAlpha(1); if (this._skipBattleAnimations) { this._phaserGameObject.setX(endXPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 1600, x: { from: startXPos, start: startXPos, to: endXPos, }, targets: this._phaserGameObject, onComplete: () => { callback(); }, }); } /** * @param {() => void} callback * @returns {void} */ playMonsterHealthBarAppearAnimation(callback) { const startXPos = -600; const endXPos = 0; this._phaserHealthBarGameContainer.setPosition( startXPos, this._phaserHealthBarGameContainer.y ); this._phaserHealthBarGameContainer.setAlpha(1); if (this._skipBattleAnimations) { this._phaserHealthBarGameContainer.setX(endXPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 1500, x: { from: startXPos, start: startXPos, to: endXPos, }, targets: this._phaserHealthBarGameContainer, onComplete: () => { callback(); }, }); } /** * @param {() => void} callback * @returns {void} */ playDeathAnimation(callback) { const startYPos = this._phaserGameObject.y; const endYPos = startYPos - 400; if (this._skipBattleAnimations) { this._phaserGameObject.setY(endYPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 2000, y: { from: startYPos, start: startYPos, to: endYPos, }, targets: this._phaserGameObject, onComplete: () => { callback(); }, }); } } // player-battle-monster.js /** @type {Coordinate} */ const PLAYER_POSITION = Object.freeze({ x: 256, y: 316, }); class PlayerBattleMonster extends BattleMonster { /** @type {Phaser.GameObjects.Text} */ #healthBarTextGameObject; /** * @param {BattleMonsterConfig} config */ constructor(config) { super(config, PLAYER_POSITION); this._phaserGameObject.setFlipX(true); this._phaserHealthBarGameContainer.setPosition(556, 318); this.#addHealthBarComponents(); } #setHealthBarText() { this.#healthBarTextGameObject.setText( `${this._currentHealth}/${this._maxHealth}` ); } #addHealthBarComponents() { this.#healthBarTextGameObject = this._scene.add .text(443, 80, "", { fontFamily: "Calibri", color: "#7E3D3F", fontSize: "16px", }) .setOrigin(1, 0); this.#setHealthBarText(); this._phaserHealthBarGameContainer.add(this.#healthBarTextGameObject); } /** * @param {number} damage * @param {() => void} [callback] * @returns {void} */ takeDamage(damage, callback) { super.takeDamage(damage, callback); this.#setHealthBarText(); } /** * @param {() => void} callback * @returns {void} */ playMonsterAppearAnimation(callback) { const startXPos = -30; const endXPos = PLAYER_POSITION.x; this._phaserGameObject.setPosition(startXPos, PLAYER_POSITION.y); this._phaserGameObject.setAlpha(1); if (this._skipBattleAnimations) { this._phaserGameObject.setX(endXPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 800, x: { from: startXPos, start: startXPos, to: endXPos, }, targets: this._phaserGameObject, onComplete: () => { callback(); }, }); } /** * @param {() => void} callback * @returns {void} */ playMonsterHealthBarAppearAnimation(callback) { const startXPos = 800; const endXPos = this._phaserHealthBarGameContainer.x; this._phaserHealthBarGameContainer.setPosition( startXPos, this._phaserHealthBarGameContainer.y ); this._phaserHealthBarGameContainer.setAlpha(1); if (this._skipBattleAnimations) { this._phaserHealthBarGameContainer.setX(endXPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 800, x: { from: startXPos, start: startXPos, to: endXPos, }, targets: this._phaserHealthBarGameContainer, onComplete: () => { callback(); }, }); } /** * @param {() => void} callback * @returns {void} */ playDeathAnimation(callback) { const startYPos = this._phaserGameObject.y; const endYPos = startYPos + 400; if (this._skipBattleAnimations) { this._phaserGameObject.setY(endYPos); callback(); return; } this._scene.tweens.add({ delay: 0, duration: 2000, y: { from: startYPos, start: startYPos, to: endYPos, }, targets: this._phaserGameObject, onComplete: () => { callback(); }, }); } } // battle-menu-config.js /** @type {Phaser.Types.GameObjects.Text.TextStyle} */ const BATTLE_UI_TEXT_STYLE = Object.freeze({ fontFamily: "Calibri", color: "black", fontSize: "30px", }); // battle-menu-options.js /** * @typedef {keyof typeof BATTLE_MENU_OPTIONS} BattleMenuOptions */ /** @enum {BattleMenuOptions} */ const BATTLE_MENU_OPTIONS = Object.freeze({ FIGHT: "FIGHT", SWITCH: "SWITCH", ITEM: "ITEM", FLEE: "FLEE", }); /** * @typedef {keyof typeof ATTACK_MOVE_OPTIONS} AttackMoveOptions */ /** @enum {AttackMoveOptions} */ const ATTACK_MOVE_OPTIONS = Object.freeze({ MOVE_1: "MOVE_1", MOVE_2: "MOVE_2", MOVE_3: "MOVE_3", MOVE_4: "MOVE_4", }); /** * @typedef {keyof typeof ACTIVE_BATTLE_MENU} ActiveBattleMenu */ /** @enum {ActiveBattleMenu} */ const ACTIVE_BATTLE_MENU = Object.freeze({ BATTLE_MAIN: "BATTLE_MAIN", BATTLE_MOVE_SELECT: "BATTLE_MOVE_SELECT", BATTLE_ITEM: "BATTLE_ITEM", BATTLE_SWITCH: "BATTLE_SWITCH", BATTLE_FLEE: "BATTLE_FLEE", }); // battle-menu.js const BATTLE_MENU_CURSOR_POS = Object.freeze({ x: 42, y: 38, }); const ATTACK_MENU_CURSOR_POS = Object.freeze({ x: 42, y: 38, }); const PLAYER_INPUT_CURSOR_POS = Object.freeze({ y: 488, }); class BattleMenu { /** @type {Phaser.Scene} */ #scene; /** @type {Phaser.GameObjects.Container} */ #mainBattleMenuPhaserContainerGameObject; /** @type {Phaser.GameObjects.Container} */ #moveSelectionSubBattleMenuPhaserContainerGameObject; /** @type {Phaser.GameObjects.Text} */ #battleTextGameObjectLine1; /** @type {Phaser.GameObjects.Text} */ #battleTextGameObjectLine2; /** @type {Phaser.GameObjects.Image} */ #mainBattleMenuCursorPhaserImageGameObject; /** @type {Phaser.GameObjects.Image} */ #attackBattleMenuCursorPhaserImageGameObject; /** @type {BattleMenuOptions} */ #selectedBattleMenuOption; /** @type {AttackMoveOptions} */ #selectedAttackMenuOption; /** @type {ActiveBattleMenu} */ #activeBattleMenu; /** @type {string[]} */ #queuedInfoPanelMessages; /** @type {() => void | undefined} */ #queuedInfoPanelCallback; /** @type {boolean} */ #waitingForPlayerInput; /** @type {number | undefined} */ #selectedAttackIndex; /** @type {BattleMonster} */ #activePlayerMonster; /** @type {Phaser.GameObjects.Image} */ #userInputCursorPhaserImageGameObject; /** @type {Phaser.Tweens.Tween} */ #userInputCursorPhaserTween; /** @type {boolean} */ #skipAnimations; /** @type {boolean} */ #queuedMessageAnimationPlaying; /** * * @param {Phaser.Scene} scene the Phaser 3 Scene the battle menu will be added to * @param {BattleMonster} activePlayerMonster the players current active monster in the current battle * @param {boolean} [skipBattleAnimations=false] used to skip all animations tied to the battle */ constructor(scene, activePlayerMonster, skipBattleAnimations = false) { this.#scene = scene; this.#activePlayerMonster = activePlayerMonster; this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_MAIN; this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FIGHT; this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_1; this.#queuedInfoPanelCallback = undefined; this.#queuedInfoPanelMessages = []; this.#waitingForPlayerInput = false; this.#selectedAttackIndex = undefined; this.#skipAnimations = skipBattleAnimations; this.#queuedMessageAnimationPlaying = false; this.#createMainInfoPane(); this.#createMainBattleMenu(); this.#createMonsterAttackSubMenu(); this.#createPlayerInputCursor(); } /** @types {number | undefined} */ get selectedAttack() { if (this.#activeBattleMenu === ACTIVE_BATTLE_MENU.BATTLE_MOVE_SELECT) { return this.#selectedAttackIndex; } return undefined; } showMainBattleMenu() { this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_MAIN; this.#battleTextGameObjectLine1.setText("what should"); this.#mainBattleMenuPhaserContainerGameObject.setAlpha(1); this.#battleTextGameObjectLine1.setAlpha(1); this.#battleTextGameObjectLine2.setAlpha(1); this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FIGHT; this.#mainBattleMenuCursorPhaserImageGameObject.setPosition( BATTLE_MENU_CURSOR_POS.x, BATTLE_MENU_CURSOR_POS.y ); this.#selectedAttackIndex = undefined; } hideMainBattleMenu() { this.#mainBattleMenuPhaserContainerGameObject.setAlpha(0); this.#battleTextGameObjectLine1.setAlpha(0); this.#battleTextGameObjectLine2.setAlpha(0); } showMonsterAttackSubMenu() { this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_MOVE_SELECT; this.#moveSelectionSubBattleMenuPhaserContainerGameObject.setAlpha(1); } hideMonsterAttackSubMenu() { this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_MAIN; this.#moveSelectionSubBattleMenuPhaserContainerGameObject.setAlpha(0); } playInputCursorAnimation() { this.#userInputCursorPhaserImageGameObject.setPosition( this.#battleTextGameObjectLine1.displayWidth + this.#userInputCursorPhaserImageGameObject.displayWidth * 2.7, this.#userInputCursorPhaserImageGameObject.y ); this.#userInputCursorPhaserImageGameObject.setAlpha(1); this.#userInputCursorPhaserTween.restart(); } hideInputCursor() { this.#userInputCursorPhaserImageGameObject.setAlpha(0); this.#userInputCursorPhaserTween.pause(); } /** * * @param {Direction|'OK'|'CANCEL'} input */ handlePlayerInput(input) { if (this.#queuedMessageAnimationPlaying && input === "OK") { return; } if (this.#waitingForPlayerInput && (input === "CANCEL" || input === "OK")) { this.#updateInfoPaneWithMessage(); return; } if (input === "CANCEL") { this.#switchToMainBattleMenu(); return; } if (input === "OK") { if (this.#activeBattleMenu === ACTIVE_BATTLE_MENU.BATTLE_MAIN) { this.#handlePlayerChooseMainBattleOption(); return; } if (this.#activeBattleMenu === ACTIVE_BATTLE_MENU.BATTLE_MOVE_SELECT) { this.#handlePlayerChooseAttack(); return; } return; } this.#updateSelectedBattleMenuOptionFromInput(input); this.#updateSelectedMoveMenuOptionFromInput(input); this.#moveMainBattleMenuCursor(); this.#moveMoveSelectBattleMenuCursor(); } /** * @param {string} message * @param {() => void} [callback] * @returns {void} */ updateInfoPaneMessageNoInputRequired(message, callback) { this.#battleTextGameObjectLine1.setText("").setAlpha(1); if (this.#skipAnimations) { this.#battleTextGameObjectLine1.setText(message); this.#waitingForPlayerInput = false; if (callback) { callback(); } return; } animateText(this.#scene, this.#battleTextGameObjectLine1, message, { delay: dataManager.getAnimatedTextSpeed(), callback: () => { this.#waitingForPlayerInput = false; if (callback) { callback(); } }, }); } /** * @param {string[]} messages * @param {() => void} [callback] * @returns {void} */ updateInfoPaneMessagesAndWaitForInput(messages, callback) { this.#queuedInfoPanelMessages = messages; this.#queuedInfoPanelCallback = callback; this.#updateInfoPaneWithMessage(); } #updateInfoPaneWithMessage() { this.#waitingForPlayerInput = false; this.#battleTextGameObjectLine1.setText("").setAlpha(1); this.hideInputCursor(); // check if all messages have been displayed from the queue and call the callback if (this.#queuedInfoPanelMessages.length === 0) { if (this.#queuedInfoPanelCallback) { this.#queuedInfoPanelCallback(); this.#queuedInfoPanelCallback = undefined; } return; } // get first message from queue and animate message const messageToDisplay = this.#queuedInfoPanelMessages.shift(); if (this.#skipAnimations) { this.#battleTextGameObjectLine1.setText(messageToDisplay); this.#queuedMessageAnimationPlaying = false; this.#waitingForPlayerInput = true; this.playInputCursorAnimation(); return; } this.#queuedMessageAnimationPlaying = true; animateText( this.#scene, this.#battleTextGameObjectLine1, messageToDisplay, { delay: dataManager.getAnimatedTextSpeed(), callback: () => { this.playInputCursorAnimation(); this.#waitingForPlayerInput = true; this.#queuedMessageAnimationPlaying = false; }, } ); } #createMainBattleMenu() { this.#battleTextGameObjectLine1 = this.#scene.add.text( 20, 468, "what should", BATTLE_UI_TEXT_STYLE ); this.#battleTextGameObjectLine2 = this.#scene.add.text( 20, 512, `${this.#activePlayerMonster.name} do next?`, BATTLE_UI_TEXT_STYLE ); this.#mainBattleMenuCursorPhaserImageGameObject = this.#scene.add .image( BATTLE_MENU_CURSOR_POS.x, BATTLE_MENU_CURSOR_POS.y, UI_ASSET_KEYS.CURSOR, 0 ) .setOrigin(0.5) .setScale(2.5); this.#mainBattleMenuPhaserContainerGameObject = this.#scene.add.container( 520, 448, [ this.#createMainInfoSubPane(), this.#scene.add.text( 55, 22, BATTLE_MENU_OPTIONS.FIGHT, BATTLE_UI_TEXT_STYLE ), this.#scene.add.text( 240, 22, BATTLE_MENU_OPTIONS.SWITCH, BATTLE_UI_TEXT_STYLE ), this.#scene.add.text( 55, 70, BATTLE_MENU_OPTIONS.ITEM, BATTLE_UI_TEXT_STYLE ), this.#scene.add.text( 240, 70, BATTLE_MENU_OPTIONS.FLEE, BATTLE_UI_TEXT_STYLE ), this.#mainBattleMenuCursorPhaserImageGameObject, ] ); this.hideMainBattleMenu(); } #createMonsterAttackSubMenu() { this.#attackBattleMenuCursorPhaserImageGameObject = this.#scene.add .image( ATTACK_MENU_CURSOR_POS.x, ATTACK_MENU_CURSOR_POS.y, UI_ASSET_KEYS.CURSOR, 0 ) .setOrigin(0.5) .setScale(2.5); /** @type {string[]} */ const attackNames = []; for (let i = 0; i < 4; i += 1) { attackNames.push(this.#activePlayerMonster.attacks[i]?.name || "-"); } this.#moveSelectionSubBattleMenuPhaserContainerGameObject = this.#scene.add.container(0, 448, [ this.#scene.add.text(55, 22, attackNames[0], BATTLE_UI_TEXT_STYLE), this.#scene.add.text(240, 22, attackNames[1], BATTLE_UI_TEXT_STYLE), this.#scene.add.text(55, 70, attackNames[2], BATTLE_UI_TEXT_STYLE), this.#scene.add.text(240, 70, attackNames[3], BATTLE_UI_TEXT_STYLE), this.#attackBattleMenuCursorPhaserImageGameObject, ]); this.hideMonsterAttackSubMenu(); } #createMainInfoPane() { const padding = 4; const rectHeight = 124; this.#scene.add .rectangle( padding, this.#scene.scale.height - rectHeight - padding, this.#scene.scale.width - padding * 2, rectHeight, 0xede4f3, 1 ) .setOrigin(0) .setStrokeStyle(8, 0xe4434a, 1); } #createMainInfoSubPane() { const rectWidth = 500; const rectHeight = 124; return this.#scene.add .rectangle(0, 0, rectWidth, rectHeight, 0xede4f3, 1) .setOrigin(0) .setStrokeStyle(8, 0x905ac2, 1); } /** * @param {Direction} direction */ #updateSelectedBattleMenuOptionFromInput(direction) { if (this.#activeBattleMenu !== ACTIVE_BATTLE_MENU.BATTLE_MAIN) { return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.FIGHT) { switch (direction) { case DIRECTION.RIGHT: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.SWITCH; return; case DIRECTION.DOWN: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.ITEM; return; case DIRECTION.LEFT: case DIRECTION.UP: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.SWITCH) { switch (direction) { case DIRECTION.LEFT: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FIGHT; return; case DIRECTION.DOWN: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FLEE; return; case DIRECTION.RIGHT: case DIRECTION.UP: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.ITEM) { switch (direction) { case DIRECTION.RIGHT: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FLEE; return; case DIRECTION.UP: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.FIGHT; return; case DIRECTION.LEFT: case DIRECTION.DOWN: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.FLEE) { switch (direction) { case DIRECTION.LEFT: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.ITEM; return; case DIRECTION.UP: this.#selectedBattleMenuOption = BATTLE_MENU_OPTIONS.SWITCH; return; case DIRECTION.RIGHT: case DIRECTION.DOWN: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } exhaustiveGuard(this.#selectedBattleMenuOption); } #moveMainBattleMenuCursor() { if (this.#activeBattleMenu !== ACTIVE_BATTLE_MENU.BATTLE_MAIN) { return; } switch (this.#selectedBattleMenuOption) { case BATTLE_MENU_OPTIONS.FIGHT: this.#mainBattleMenuCursorPhaserImageGameObject.setPosition( BATTLE_MENU_CURSOR_POS.x, BATTLE_MENU_CURSOR_POS.y ); return; case BATTLE_MENU_OPTIONS.SWITCH: this.#mainBattleMenuCursorPhaserImageGameObject.setPosition( 228, BATTLE_MENU_CURSOR_POS.y ); return; case BATTLE_MENU_OPTIONS.ITEM: this.#mainBattleMenuCursorPhaserImageGameObject.setPosition( BATTLE_MENU_CURSOR_POS.x, 86 ); return; case BATTLE_MENU_OPTIONS.FLEE: this.#mainBattleMenuCursorPhaserImageGameObject.setPosition(228, 86); return; default: exhaustiveGuard(this.#selectedBattleMenuOption); } } /** * @param {Direction} direction */ #updateSelectedMoveMenuOptionFromInput(direction) { if (this.#activeBattleMenu !== ACTIVE_BATTLE_MENU.BATTLE_MOVE_SELECT) { return; } if (this.#selectedAttackMenuOption === ATTACK_MOVE_OPTIONS.MOVE_1) { switch (direction) { case DIRECTION.RIGHT: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_2; return; case DIRECTION.DOWN: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_3; return; case DIRECTION.LEFT: case DIRECTION.UP: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedAttackMenuOption === ATTACK_MOVE_OPTIONS.MOVE_2) { switch (direction) { case DIRECTION.LEFT: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_1; return; case DIRECTION.DOWN: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_4; return; case DIRECTION.RIGHT: case DIRECTION.UP: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedAttackMenuOption === ATTACK_MOVE_OPTIONS.MOVE_3) { switch (direction) { case DIRECTION.RIGHT: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_4; return; case DIRECTION.UP: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_1; return; case DIRECTION.LEFT: case DIRECTION.DOWN: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } if (this.#selectedAttackMenuOption === ATTACK_MOVE_OPTIONS.MOVE_4) { switch (direction) { case DIRECTION.LEFT: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_3; return; case DIRECTION.UP: this.#selectedAttackMenuOption = ATTACK_MOVE_OPTIONS.MOVE_2; return; case DIRECTION.RIGHT: case DIRECTION.DOWN: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } return; } exhaustiveGuard(this.#selectedAttackMenuOption); } #moveMoveSelectBattleMenuCursor() { if (this.#activeBattleMenu !== ACTIVE_BATTLE_MENU.BATTLE_MOVE_SELECT) { return; } switch (this.#selectedAttackMenuOption) { case ATTACK_MOVE_OPTIONS.MOVE_1: this.#attackBattleMenuCursorPhaserImageGameObject.setPosition( ATTACK_MENU_CURSOR_POS.x, ATTACK_MENU_CURSOR_POS.y ); return; case ATTACK_MOVE_OPTIONS.MOVE_2: this.#attackBattleMenuCursorPhaserImageGameObject.setPosition( 228, ATTACK_MENU_CURSOR_POS.y ); return; case ATTACK_MOVE_OPTIONS.MOVE_3: this.#attackBattleMenuCursorPhaserImageGameObject.setPosition( ATTACK_MENU_CURSOR_POS.x, 86 ); return; case ATTACK_MOVE_OPTIONS.MOVE_4: this.#attackBattleMenuCursorPhaserImageGameObject.setPosition(228, 86); return; default: exhaustiveGuard(this.#selectedAttackMenuOption); } } #switchToMainBattleMenu() { this.#waitingForPlayerInput = false; this.hideInputCursor(); this.hideMonsterAttackSubMenu(); this.showMainBattleMenu(); } #handlePlayerChooseMainBattleOption() { this.hideMainBattleMenu(); if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.FIGHT) { this.showMonsterAttackSubMenu(); return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.ITEM) { // TODO: add feature in a future update /* for the time being, we will display text about the player having no items and allow the player to navigate back to the main menu */ this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_FLEE; this.updateInfoPaneMessagesAndWaitForInput( ["Your bag is empty..."], () => { this.#switchToMainBattleMenu(); } ); return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.SWITCH) { // TODO: add feature in a future update /* for the time being, we will display text about the player having no more monsters and allow the player to navigate back to the main menu */ this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_SWITCH; this.updateInfoPaneMessagesAndWaitForInput( ["You have no other monsters in your party..."], () => { this.#switchToMainBattleMenu(); } ); return; } if (this.#selectedBattleMenuOption === BATTLE_MENU_OPTIONS.FLEE) { // TODO: add feature in a future update /* for the time being, we will display text about the player successfully running away and then restart the Phaser scene after doing a screen fade out */ this.#activeBattleMenu = ACTIVE_BATTLE_MENU.BATTLE_FLEE; this.updateInfoPaneMessagesAndWaitForInput( ["You fail to run away..."], () => { this.#switchToMainBattleMenu(); } ); return; } exhaustiveGuard(this.#selectedBattleMenuOption); } #handlePlayerChooseAttack() { let selectedMoveIndex = 0; switch (this.#selectedAttackMenuOption) { case ATTACK_MOVE_OPTIONS.MOVE_1: selectedMoveIndex = 0; break; case ATTACK_MOVE_OPTIONS.MOVE_2: selectedMoveIndex = 1; break; case ATTACK_MOVE_OPTIONS.MOVE_3: selectedMoveIndex = 2; break; case ATTACK_MOVE_OPTIONS.MOVE_4: selectedMoveIndex = 3; break; default: exhaustiveGuard(this.#selectedAttackMenuOption); } this.#selectedAttackIndex = selectedMoveIndex; } #createPlayerInputCursor() { this.#userInputCursorPhaserImageGameObject = this.#scene.add.image( 0, 0, UI_ASSET_KEYS.CURSOR ); this.#userInputCursorPhaserImageGameObject.setAngle(90).setScale(2.5, 1.25); this.#userInputCursorPhaserImageGameObject.setAlpha(0); this.#userInputCursorPhaserTween = this.#scene.add.tween({ delay: 0, duration: 500, repeat: -1, y: { from: PLAYER_INPUT_CURSOR_POS.y, start: PLAYER_INPUT_CURSOR_POS.y, to: PLAYER_INPUT_CURSOR_POS.y + 6, }, targets: this.#userInputCursorPhaserImageGameObject, }); this.#userInputCursorPhaserTween.pause(); } } // health-bar.js class HealthBar { /** @type {Phaser.Scene} */ #scene; /** @type {Phaser.GameObjects.Container} */ #healthBarContainer; /** @type {number} */ #fullWidth; /** @type {number} */ #scaleY; /** @type {Phaser.GameObjects.Image} */ #leftCap; /** @type {Phaser.GameObjects.Image} */ #middle; /** @type {Phaser.GameObjects.Image} */ #rightCap; /** @type {Phaser.GameObjects.Image} */ #leftShadowCap; /** @type {Phaser.GameObjects.Image} */ #middleShadow; /** @type {Phaser.GameObjects.Image} */ #rightShadowCap; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the health bar will be added to * @param {number} x the x position to place the health bar container * @param {number} y the y position to place the health bar container */ constructor(scene, x, y) { this.#scene = scene; this.#fullWidth = 360; this.#scaleY = 0.7; this.#healthBarContainer = this.#scene.add.container(x, y, []); this.#createHealthBarShadowImages(x, y); this.#createHealthBarImages(x, y); this.#setMeterPercentage(1); } /** @type {Phaser.GameObjects.Container} */ get container() { return this.#healthBarContainer; } /** * @param {number} x the x position to place the health bar game object * @param {number} y the y position to place the health bar game object * @returns {void} */ #createHealthBarShadowImages(x, y) { this.#leftShadowCap = this.#scene.add .image(x, y, HEALTH_BAR_ASSET_KEYS.LEFT_CAP_SHADOW) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#middleShadow = this.#scene.add .image( this.#leftShadowCap.x + this.#leftShadowCap.width, y, HEALTH_BAR_ASSET_KEYS.MIDDLE_SHADOW ) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#middleShadow.displayWidth = this.#fullWidth; this.#rightShadowCap = this.#scene.add .image( this.#middleShadow.x + this.#middleShadow.displayWidth, y, HEALTH_BAR_ASSET_KEYS.RIGHT_CAP_SHADOW ) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#healthBarContainer.add([ this.#leftShadowCap, this.#middleShadow, this.#rightShadowCap, ]); } /** * @param {number} x the x position to place the health bar game object * @param {number} y the y position to place the health bar game object * @returns {void} */ #createHealthBarImages(x, y) { this.#leftCap = this.#scene.add .image(x, y, HEALTH_BAR_ASSET_KEYS.LEFT_CAP) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#middle = this.#scene.add .image( this.#leftCap.x + this.#leftCap.width, y, HEALTH_BAR_ASSET_KEYS.MIDDLE ) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#rightCap = this.#scene.add .image( this.#middle.x + this.#middle.displayWidth, y, HEALTH_BAR_ASSET_KEYS.RIGHT_CAP ) .setOrigin(0, 0.5) .setScale(1, this.#scaleY); this.#healthBarContainer.add([this.#leftCap, this.#middle, this.#rightCap]); } /** * @param {number} [percent=1] a number between 0 and 1 that is used for setting how filled the health bar is * @returns {void} */ #setMeterPercentage(percent = 1) { const width = this.#fullWidth * percent; this.#middle.displayWidth = width; this.#updateHealthBarGameObjects(); } #updateHealthBarGameObjects() { this.#rightCap.x = this.#middle.x + this.#middle.displayWidth; const isVisible = this.#middle.displayWidth > 0; this.#leftCap.visible = isVisible; this.#middle.visible = isVisible; this.#rightCap.visible = isVisible; } /** * @param {number} [percent=1] a number between 0 and 1 that is used for setting how filled the health bar is * @param {object} [options] optional configuration options that can be provided for the animation * @param {number} [options.duration=1000] the duration of the health bar animation * @param {() => void} [options.callback] an optional callback that will be called when the animation is complete * @param {boolean} [options.skipBattleAnimations=false] determines if we skip the health bar animation * @returns {void} */ setMeterPercentageAnimated(percent, options) { const width = this.#fullWidth * percent; if (options?.skipBattleAnimations) { this.#setMeterPercentage(percent); if (options?.callback) { options.callback(); } return; } this.#scene.tweens.add({ targets: this.#middle, displayWidth: width, duration: options?.duration || options?.duration === 0 ? 0 : 1000, ease: Phaser.Math.Easing.Sine.Out, onUpdate: () => { this.#updateHealthBarGameObjects(); }, onComplete: options?.callback, }); } } // background.js class Background { /** @type {Phaser.Scene} */ #scene; /** @type {Phaser.GameObjects.Image} */ #backgroundGameObject; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the health bar will be added to */ constructor(scene) { this.#scene = scene; this.#backgroundGameObject = this.#scene.add .image(0, 0, BATTLE_BACKGROUND_ASSET_KEYS.FOREST, 0) .setOrigin(0) .setAlpha(0); } showForest() { this.#backgroundGameObject .setTexture(BATTLE_BACKGROUND_ASSET_KEYS.FOREST) .setAlpha(1); } } // direction.js /** * @typedef {keyof typeof DIRECTION} Direction */ /** @enum {Direction} */ const DIRECTION = Object.freeze({ LEFT: "LEFT", RIGHT: "RIGHT", UP: "UP", DOWN: "DOWN", NONE: "NONE", }); // options.js /** * @typedef {keyof typeof OPTION_MENU_OPTIONS} OptionMenuOptions */ /** @enum {OptionMenuOptions} */ const OPTION_MENU_OPTIONS = Object.freeze({ TEXT_SPEED: "TEXT_SPEED", BATTLE_SCENE: "BATTLE_SCENE", BATTLE_STYLE: "BATTLE_STYLE", SOUND: "SOUND", VOLUME: "VOLUME", MENU_COLOR: "MENU_COLOR", CONFIRM: "CONFIRM", }); /** * @typedef {keyof typeof TEXT_SPEED_OPTIONS} TextSpeedMenuOptions */ /** @enum {TextSpeedMenuOptions} */ const TEXT_SPEED_OPTIONS = Object.freeze({ SLOW: "SLOW", MID: "MID", FAST: "FAST", }); /** * @typedef {keyof typeof BATTLE_SCENE_OPTIONS} BattleSceneMenuOptions */ /** @enum {BattleSceneMenuOptions} */ const BATTLE_SCENE_OPTIONS = Object.freeze({ ON: "ON", OFF: "OFF", }); /** * @typedef {keyof typeof BATTLE_STYLE_OPTIONS} BattleStyleMenuOptions */ /** @enum {BattleStyleMenuOptions} */ const BATTLE_STYLE_OPTIONS = Object.freeze({ SET: "SET", SHIFT: "SHIFT", }); /** * @typedef {keyof typeof SOUND_OPTIONS} SoundMenuOptions */ /** @enum {SoundMenuOptions} */ const SOUND_OPTIONS = Object.freeze({ ON: "ON", OFF: "OFF", }); /** * @typedef {0 | 1 | 2 | 3 | 4} VolumeMenuOptions */ /** * @typedef {0 | 1 | 2 } MenuColorOptions */ // tweakpane.js // @ts-ignore // import * as TweakPane from "https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js"; const tweakPaneScript = document.createElement("script"); tweakPaneScript.type = "module"; tweakPaneScript.src = "https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js"; document.head.appendChild(tweakPaneScript); // battle-scene.js const BATTLE_STATES = Object.freeze({ INTRO: "INTRO", PRE_BATTLE_INFO: "PRE_BATTLE_INFO", BRING_OUT_MONSTER: "BRING_OUT_MONSTER", PLAYER_INPUT: "PLAYER_INPUT", ENEMY_INPUT: "ENEMY_INPUT", BATTLE: "BATTLE", POST_ATTACK_CHECK: "POST_ATTACK_CHECK", FINISHED: "FINISHED", FLEE_ATTEMPT: "FLEE_ATTEMPT", }); class BattleScene extends Phaser.Scene { /** @type {BattleMenu} */ #battleMenu; /** @type {Controls} */ #controls; /** @type {EnemyBattleMonster} */ #activeEnemyMonster; /** @type {PlayerBattleMonster} */ #activePlayerMonster; /** @type {number} */ #activePlayerAttackIndex; /** @type {StateMachine} */ #battleStateMachine; /** @type {AttackManager} */ #attackManager; /** @type {boolean} */ #skipAnimations; constructor() { super({ key: SCENE_KEYS.BATTLE_SCENE, }); } init() { this.#activePlayerAttackIndex = -1; /** @type {BattleSceneMenuOptions | undefined} */ const chosenBattleSceneOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_SCENE_ANIMATIONS ); if ( chosenBattleSceneOption === undefined || chosenBattleSceneOption === BATTLE_SCENE_OPTIONS.ON ) { this.#skipAnimations = false; return; } this.#skipAnimations = true; } create() { console.log(`[${BattleScene.name}:create] invoked`); // create main background const background = new Background(this); background.showForest(); // create the player and enemy monsters this.#activeEnemyMonster = new EnemyBattleMonster({ scene: this, monsterDetails: { id: 2, monsterId: 2, name: MONSTER_ASSET_KEYS.CARNODUSK, assetKey: MONSTER_ASSET_KEYS.CARNODUSK, assetFrame: 0, currentHp: 25, maxHp: 25, attackIds: [1], baseAttack: 5, currentLevel: 5, }, skipBattleAnimations: this.#skipAnimations, }); this.#activePlayerMonster = new PlayerBattleMonster({ scene: this, monsterDetails: dataManager.store.get( DATA_MANAGER_STORE_KEYS.MONSTERS_IN_PARTY )[0], skipBattleAnimations: this.#skipAnimations, }); // render out the main info and sub info panes this.#battleMenu = new BattleMenu( this, this.#activePlayerMonster, this.#skipAnimations ); this.#createBattleStateMachine(); this.#attackManager = new AttackManager(this, this.#skipAnimations); this.#controls = new Controls(this); this.#controls.lockInput = true; } update() { this.#battleStateMachine.update(); if (this.#controls.isInputLocked) { return; } const wasSpaceKeyPressed = this.#controls.wasSpaceKeyPressed(); // limit input based on the current battle state we are in // if we are not in the right battle state, return early and do not process input if ( wasSpaceKeyPressed && (this.#battleStateMachine.currentStateName === BATTLE_STATES.PRE_BATTLE_INFO || this.#battleStateMachine.currentStateName === BATTLE_STATES.POST_ATTACK_CHECK || this.#battleStateMachine.currentStateName === BATTLE_STATES.FLEE_ATTEMPT) ) { this.#battleMenu.handlePlayerInput("OK"); return; } if ( this.#battleStateMachine.currentStateName !== BATTLE_STATES.PLAYER_INPUT ) { return; } if (wasSpaceKeyPressed) { this.#battleMenu.handlePlayerInput("OK"); // check if the player selected an attack, and start battle sequence for the fight if (this.#battleMenu.selectedAttack === undefined) { return; } this.#activePlayerAttackIndex = this.#battleMenu.selectedAttack; if (!this.#activePlayerMonster.attacks[this.#activePlayerAttackIndex]) { return; } console.log( `Player selected the following move: ${ this.#activePlayerMonster.attacks[this.#activePlayerAttackIndex].name }` ); this.#battleMenu.hideMonsterAttackSubMenu(); this.#battleStateMachine.setState(BATTLE_STATES.ENEMY_INPUT); return; } if (this.#controls.wasBackKeyPressed()) { this.#battleMenu.handlePlayerInput("CANCEL"); return; } const selectedDirection = this.#controls.getDirectionKeyJustPressed(); if (selectedDirection !== DIRECTION.NONE) { this.#battleMenu.handlePlayerInput(selectedDirection); } } #playerAttack() { this.#battleMenu.updateInfoPaneMessageNoInputRequired( `${this.#activePlayerMonster.name} used ${ this.#activePlayerMonster.attacks[this.#activePlayerAttackIndex].name }`, () => { // play attack animation based on the selected attack // when attack is finished, play damage animation and then update health bar this.time.delayedCall(500, () => { this.#attackManager.playAttackAnimation( this.#activePlayerMonster.attacks[this.#activePlayerAttackIndex] .animationName, ATTACK_TARGET.ENEMY, () => { this.#activeEnemyMonster.playTakeDamageAnimation(() => { this.#activeEnemyMonster.takeDamage( this.#activePlayerMonster.baseAttack, () => { this.#enemyAttack(); } ); }); } ); }); } ); } #enemyAttack() { if (this.#activeEnemyMonster.isFainted) { this.#battleStateMachine.setState(BATTLE_STATES.POST_ATTACK_CHECK); return; } this.#battleMenu.updateInfoPaneMessageNoInputRequired( `foe ${this.#activeEnemyMonster.name} used ${ this.#activeEnemyMonster.attacks[0].name }`, () => { // play attack animation based on the selected attack // when attack is finished, play damage animation and then update health bar this.time.delayedCall(500, () => { this.#attackManager.playAttackAnimation( this.#activeEnemyMonster.attacks[0].animationName, ATTACK_TARGET.PLAYER, () => { this.#activePlayerMonster.playTakeDamageAnimation(() => { this.#activePlayerMonster.takeDamage( this.#activeEnemyMonster.baseAttack, () => { this.#battleStateMachine.setState( BATTLE_STATES.POST_ATTACK_CHECK ); } ); }); } ); }); } ); } #postBattleSequenceCheck() { if (this.#activeEnemyMonster.isFainted) { // play monster fainted animation and wait for animation to finish this.#activeEnemyMonster.playDeathAnimation(() => { this.#battleMenu.updateInfoPaneMessagesAndWaitForInput( [ `Wild ${this.#activeEnemyMonster.name} fainted.`, "You have gained some experience", ], () => { this.#battleStateMachine.setState(BATTLE_STATES.FINISHED); } ); }); return; } if (this.#activePlayerMonster.isFainted) { // play monster fainted animation and wait for animation to finish this.#activePlayerMonster.playDeathAnimation(() => { this.#battleMenu.updateInfoPaneMessagesAndWaitForInput( [ `${this.#activePlayerMonster.name} fainted.`, "You have no more monsters, escaping to safety...", ], () => { this.#battleStateMachine.setState(BATTLE_STATES.FINISHED); } ); }); return; } this.#battleStateMachine.setState(BATTLE_STATES.PLAYER_INPUT); } #transitionToNextScene() { this.cameras.main.fadeOut(600, 0, 0, 0); this.cameras.main.once( Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.scene.start(SCENE_KEYS.WORLD_SCENE); } ); } #createBattleStateMachine() { /** * General state flow for battle scene * * scene transition to the battle menu * battle states * intro -> setup everything that is needed * pre-battle -> animations as characters and stuff appears * monster info text renders onto the page & wait for player input * any key press, and now menu stuff shows up * player_turn -> choose what to do, wait for input from player * enemy_turn -> random choice, * battle_fight -> enemy and player options evaluated, play each attack animation * battle_fight_post_check -> see if one of the characters died, repeat */ this.#battleStateMachine = new StateMachine("battle", this); this.#battleStateMachine.addState({ name: BATTLE_STATES.INTRO, onEnter: () => { // wait for any scene setup and transitions to complete createSceneTransition(this, { skipSceneTransition: this.#skipAnimations, callback: () => { this.#battleStateMachine.setState(BATTLE_STATES.PRE_BATTLE_INFO); }, }); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.PRE_BATTLE_INFO, onEnter: () => { // wait for enemy monster to appear on the screen and notify player about the wild monster this.#activeEnemyMonster.playMonsterAppearAnimation(() => { this.#activeEnemyMonster.playMonsterHealthBarAppearAnimation( () => undefined ); this.#controls.lockInput = false; this.#battleMenu.updateInfoPaneMessagesAndWaitForInput( [`wild ${this.#activeEnemyMonster.name} appeared!`], () => { // wait for text animation to complete and move to next state this.#battleStateMachine.setState( BATTLE_STATES.BRING_OUT_MONSTER ); } ); }); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.BRING_OUT_MONSTER, onEnter: () => { // wait for player monster to appear on the screen and notify the player about monster this.#activePlayerMonster.playMonsterAppearAnimation(() => { this.#activePlayerMonster.playMonsterHealthBarAppearAnimation( () => undefined ); this.#battleMenu.updateInfoPaneMessageNoInputRequired( `go ${this.#activePlayerMonster.name}!`, () => { // wait for text animation to complete and move to next state this.time.delayedCall(1200, () => { this.#battleStateMachine.setState(BATTLE_STATES.PLAYER_INPUT); }); } ); }); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.PLAYER_INPUT, onEnter: () => { this.#battleMenu.showMainBattleMenu(); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.ENEMY_INPUT, onEnter: () => { // TODO: add feature in a future update // pick a random move for the enemy monster, and in the future implement some type of AI behavior this.#battleStateMachine.setState(BATTLE_STATES.BATTLE); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.BATTLE, onEnter: () => { // general battle flow // show attack used, brief pause // then play attack animation, brief pause // then play damage animation, brief pause // then play health bar animation, brief pause // then repeat the steps above for the other monster this.#playerAttack(); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.POST_ATTACK_CHECK, onEnter: () => { this.#postBattleSequenceCheck(); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.FINISHED, onEnter: () => { this.#transitionToNextScene(); }, }); this.#battleStateMachine.addState({ name: BATTLE_STATES.FLEE_ATTEMPT, onEnter: () => { this.#battleMenu.updateInfoPaneMessagesAndWaitForInput( ["You got away safely!"], () => { this.#battleStateMachine.setState(BATTLE_STATES.FINISHED); } ); }, }); // start state machine this.#battleStateMachine.setState(BATTLE_STATES.INTRO); } } // options-scene /** @type {Phaser.Types.GameObjects.Text.TextStyle} */ const OPTIONS_TEXT_STYLE = { fontFamily: "Calibri", color: "#FFFFFF", fontSize: "30px", }; const OPTION_MENU_OPTION_INFO_MSG = Object.freeze({ TEXT_SPEED: "Choose one of three text display speeds.", BATTLE_SCENE: "Choose to display battle animations and effects or not.", BATTLE_STYLE: "Choose to allow your monster to be recalled between rounds.", SOUND: "Choose to enable or disable the sound.", VOLUME: "Choose the volume of the music and sound effects of the game.", MENU_COLOR: "Choose one of the three menu color options.", CONFIRM: "Save your changes and go back to the main menu.", }); const TEXT_FONT_COLORS = Object.freeze({ NOT_SELECTED: "#FFFFFF", SELECTED: "#FF2222", }); class OptionsScene extends Phaser.Scene { /** @type {Phaser.GameObjects.Container} */ #mainContainer; /** @type {NineSlice} */ #nineSliceMainContainer; /** @type {Phaser.GameObjects.Group} */ #textSpeedOptionTextGameObjects; /** @type {Phaser.GameObjects.Group} */ #battleSceneOptionTextGameObjects; /** @type {Phaser.GameObjects.Group} */ #battleStyleOptionTextGameObjects; /** @type {Phaser.GameObjects.Group} */ #soundOptionTextGameObjects; /** @type {Phaser.GameObjects.Rectangle} */ #volumeOptionsMenuCursor; /** @type {Phaser.GameObjects.Text} */ #volumeOptionsValueText; /** @type {Phaser.GameObjects.Text} */ #selectedMenuColorTextGameObject; /** @type {Phaser.GameObjects.Container} */ #infoContainer; /** @type {Phaser.GameObjects.Text} */ #selectedOptionInfoMsgTextGameObject; /** @type {Phaser.GameObjects.Rectangle} */ #optionsMenuCursor; /** @type {Controls} */ #controls; /** @type {OptionMenuOptions} */ #selectedOptionMenu; /** @type {TextSpeedMenuOptions} */ #selectedTextSpeedOption; /** @type {BattleSceneMenuOptions} */ #selectedBattleSceneOption; /** @type {BattleStyleMenuOptions} */ #selectedBattleStyleOption; /** @type {SoundMenuOptions} */ #selectedSoundMenuOption; /** @type {VolumeMenuOptions} */ #selectedVolumeOption; /** @type {MenuColorOptions} */ #selectedMenuColorOption; constructor() { super({ key: SCENE_KEYS.OPTIONS_SCENE, }); } /** * @returns {void} */ init() { console.log(`[${OptionsScene.name}:init] invoked`); this.#nineSliceMainContainer = new NineSlice({ cornerCutSize: 32, textureManager: this.sys.textures, assetKeys: [ UI_ASSET_KEYS.MENU_BACKGROUND, UI_ASSET_KEYS.MENU_BACKGROUND_GREEN, UI_ASSET_KEYS.MENU_BACKGROUND_PURPLE, ], }); this.#selectedOptionMenu = OPTION_MENU_OPTIONS.TEXT_SPEED; this.#selectedTextSpeedOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_TEXT_SPEED ); this.#selectedBattleSceneOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_SCENE_ANIMATIONS ); this.#selectedBattleStyleOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_STYLE ); this.#selectedSoundMenuOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_SOUND ); this.#selectedVolumeOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_VOLUME ); this.#selectedMenuColorOption = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_MENU_COLOR ); } /** * @returns {void} */ create() { console.log(`[${OptionsScene.name}:create] invoked`); const { width, height } = this.scale; const optionMenuWidth = width - 200; // main options container this.#mainContainer = this.#nineSliceMainContainer.createNineSliceContainer( this, optionMenuWidth, 432, UI_ASSET_KEYS.MENU_BACKGROUND ); this.#mainContainer.setX(100).setY(20); // create main option sections this.add.text(width / 2, 40, "Options", OPTIONS_TEXT_STYLE).setOrigin(0.5); const menuOptionsPosition = { x: 25, yStart: 55, yIncrement: 55, }; const menuOptions = [ "Text Speed", "Battle Scene", "Battle Style", "Sound", "Volume", "Menu Color", "Close", ]; menuOptions.forEach((option, index) => { const x = menuOptionsPosition.x; const y = menuOptionsPosition.yStart + menuOptionsPosition.yIncrement * index; const textGameObject = this.add.text(x, y, option, OPTIONS_TEXT_STYLE); this.#mainContainer.add(textGameObject); }); // create text speed options this.#textSpeedOptionTextGameObjects = this.add.group([ this.add.text(420, 75, "Slow", OPTIONS_TEXT_STYLE), this.add.text(590, 75, "Mid", OPTIONS_TEXT_STYLE), this.add.text(760, 75, "Fast", OPTIONS_TEXT_STYLE), ]); // create battle scene options this.#battleSceneOptionTextGameObjects = this.add.group([ this.add.text(420, 130, "On", OPTIONS_TEXT_STYLE), this.add.text(590, 130, "Off", OPTIONS_TEXT_STYLE), ]); // create battle style options this.#battleStyleOptionTextGameObjects = this.add.group([ this.add.text(420, 185, "Set", OPTIONS_TEXT_STYLE), this.add.text(590, 185, "Shift", OPTIONS_TEXT_STYLE), ]); // create sound options this.#soundOptionTextGameObjects = this.add.group([ this.add.text(420, 240, "On", OPTIONS_TEXT_STYLE), this.add.text(590, 240, "Off", OPTIONS_TEXT_STYLE), ]); // volume options this.add.rectangle(420, 312, 300, 4, 0xffffff, 1).setOrigin(0, 0.5); this.#volumeOptionsMenuCursor = this.add .rectangle(710, 312, 10, 25, 0xff2222, 1) .setOrigin(0, 0.5); this.#volumeOptionsValueText = this.add.text( 760, 295, "100%", OPTIONS_TEXT_STYLE ); // frame options this.#selectedMenuColorTextGameObject = this.add.text( 590, 350, "", OPTIONS_TEXT_STYLE ); this.add .image(530, 352, UI_ASSET_KEYS.CURSOR_WHITE) .setOrigin(1, 0) .setScale(2.5) .setFlipX(true); this.add .image(660, 352, UI_ASSET_KEYS.CURSOR_WHITE) .setOrigin(0, 0) .setScale(2.5); // option details container this.#infoContainer = this.#nineSliceMainContainer.createNineSliceContainer( this, optionMenuWidth, 100, UI_ASSET_KEYS.MENU_BACKGROUND ); this.#infoContainer.setX(100).setY(height - 110); this.#selectedOptionInfoMsgTextGameObject = this.add.text( 125, 480, OPTION_MENU_OPTION_INFO_MSG.TEXT_SPEED, { ...OPTIONS_TEXT_STYLE, ...{ wordWrap: { width: width - 250 }, }, } ); this.#optionsMenuCursor = this.add .rectangle(110, 70, optionMenuWidth - 20, 40, 0xffffff, 0) .setOrigin(0) .setStrokeStyle(4, 0xe4434a, 1); this.#updateTextSpeedGameObjects(); this.#updateBattleSceneOptionGameObjects(); this.#updateBattleStyleOptionGameObjects(); this.#updateSoundOptionGameObjects(); this.#updateVolumeSlider(); this.#updateMenuColorDisplayText(); this.#controls = new Controls(this); this.cameras.main.once( Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.scene.start(SCENE_KEYS.TITLE_SCENE); } ); } /** * @returns {void} */ update() { if (this.#controls.isInputLocked) { return; } if (this.#controls.wasBackKeyPressed()) { this.#controls.lockInput = true; this.cameras.main.fadeOut(500, 0, 0, 0); return; } if ( this.#controls.wasSpaceKeyPressed() && this.#selectedOptionMenu === OPTION_MENU_OPTIONS.CONFIRM ) { this.#controls.lockInput = true; this.#updateOptionDataInDataManager(); this.cameras.main.fadeOut(500, 0, 0, 0); return; } const selectedDirection = this.#controls.getDirectionKeyJustPressed(); if (selectedDirection !== DIRECTION.NONE) { this.#moveOptionMenuCursor(selectedDirection); } } /** * @returns {void} */ #updateOptionDataInDataManager() { dataManager.store.set({ [DATA_MANAGER_STORE_KEYS.OPTIONS_TEXT_SPEED]: this.#selectedTextSpeedOption, [DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_SCENE_ANIMATIONS]: this.#selectedBattleSceneOption, [DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_STYLE]: this.#selectedBattleStyleOption, [DATA_MANAGER_STORE_KEYS.OPTIONS_SOUND]: this.#selectedSoundMenuOption, [DATA_MANAGER_STORE_KEYS.OPTIONS_VOLUME]: this.#selectedVolumeOption, [DATA_MANAGER_STORE_KEYS.OPTIONS_MENU_COLOR]: this.#selectedMenuColorOption, }); dataManager.saveData(); } /** * @param {Direction} direction * @returns {void} */ #moveOptionMenuCursor(direction) { if (direction === DIRECTION.NONE) { return; } this.#updateSelectedOptionMenuFromInput(direction); switch (this.#selectedOptionMenu) { case OPTION_MENU_OPTIONS.TEXT_SPEED: this.#optionsMenuCursor.setY(70); break; case OPTION_MENU_OPTIONS.BATTLE_SCENE: this.#optionsMenuCursor.setY(125); break; case OPTION_MENU_OPTIONS.BATTLE_STYLE: this.#optionsMenuCursor.setY(180); break; case OPTION_MENU_OPTIONS.SOUND: this.#optionsMenuCursor.setY(235); break; case OPTION_MENU_OPTIONS.VOLUME: this.#optionsMenuCursor.setY(290); break; case OPTION_MENU_OPTIONS.MENU_COLOR: this.#optionsMenuCursor.setY(345); break; case OPTION_MENU_OPTIONS.CONFIRM: this.#optionsMenuCursor.setY(400); break; default: exhaustiveGuard(this.#selectedOptionMenu); } this.#selectedOptionInfoMsgTextGameObject.setText( OPTION_MENU_OPTION_INFO_MSG[this.#selectedOptionMenu] ); } /** * @param {Direction} direction * @returns {void} */ #updateSelectedOptionMenuFromInput(direction) { if (direction === DIRECTION.NONE) { return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.TEXT_SPEED) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.BATTLE_SCENE; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.CONFIRM; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateTextSpeedOption(direction); this.#updateTextSpeedGameObjects(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.BATTLE_SCENE) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.BATTLE_STYLE; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.TEXT_SPEED; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateBattleSceneOption(direction); this.#updateBattleSceneOptionGameObjects(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.BATTLE_STYLE) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.SOUND; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.BATTLE_SCENE; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateBattleStyleOption(direction); this.#updateBattleStyleOptionGameObjects(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.SOUND) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.VOLUME; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.BATTLE_STYLE; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateSoundOption(direction); this.#updateSoundOptionGameObjects(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.VOLUME) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.MENU_COLOR; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.SOUND; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateVolumeOption(direction); this.#updateVolumeSlider(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.MENU_COLOR) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.CONFIRM; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.VOLUME; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: this.#updateMenuColorOption(direction); this.#updateMenuColorDisplayText(); return; default: exhaustiveGuard(direction); } return; } if (this.#selectedOptionMenu === OPTION_MENU_OPTIONS.CONFIRM) { switch (direction) { case DIRECTION.DOWN: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.TEXT_SPEED; return; case DIRECTION.UP: this.#selectedOptionMenu = OPTION_MENU_OPTIONS.MENU_COLOR; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: return; default: exhaustiveGuard(direction); } return; } exhaustiveGuard(this.#selectedOptionMenu); } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateTextSpeedOption(direction) { if (direction === DIRECTION.LEFT) { if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.SLOW) { return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.MID) { this.#selectedTextSpeedOption = TEXT_SPEED_OPTIONS.SLOW; return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.FAST) { this.#selectedTextSpeedOption = TEXT_SPEED_OPTIONS.MID; return; } exhaustiveGuard(this.#selectedTextSpeedOption); return; } if (direction === DIRECTION.RIGHT) { if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.FAST) { return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.MID) { this.#selectedTextSpeedOption = TEXT_SPEED_OPTIONS.FAST; return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.SLOW) { this.#selectedTextSpeedOption = TEXT_SPEED_OPTIONS.MID; return; } exhaustiveGuard(this.#selectedTextSpeedOption); return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateTextSpeedGameObjects() { const textGameObjects = /** @type {Phaser.GameObjects.Text[]} */ ( this.#textSpeedOptionTextGameObjects.getChildren() ); textGameObjects.forEach((obj) => { obj.setColor(TEXT_FONT_COLORS.NOT_SELECTED); }); if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.SLOW) { textGameObjects[0].setColor(TEXT_FONT_COLORS.SELECTED); return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.MID) { textGameObjects[1].setColor(TEXT_FONT_COLORS.SELECTED); return; } if (this.#selectedTextSpeedOption === TEXT_SPEED_OPTIONS.FAST) { textGameObjects[2].setColor(TEXT_FONT_COLORS.SELECTED); return; } exhaustiveGuard(this.#selectedTextSpeedOption); } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateBattleSceneOption(direction) { if ( direction === DIRECTION.LEFT && this.#selectedBattleSceneOption === BATTLE_SCENE_OPTIONS.ON ) { return; } if (direction === DIRECTION.LEFT) { this.#selectedBattleSceneOption = BATTLE_SCENE_OPTIONS.ON; return; } if ( direction === DIRECTION.RIGHT && this.#selectedBattleSceneOption === BATTLE_SCENE_OPTIONS.OFF ) { return; } if (direction === DIRECTION.RIGHT) { this.#selectedBattleSceneOption = BATTLE_SCENE_OPTIONS.OFF; return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateBattleSceneOptionGameObjects() { const textGameObjects = /** @type {Phaser.GameObjects.Text[]} */ ( this.#battleSceneOptionTextGameObjects.getChildren() ); textGameObjects.forEach((obj) => { obj.setColor(TEXT_FONT_COLORS.NOT_SELECTED); }); if (this.#selectedBattleSceneOption === BATTLE_SCENE_OPTIONS.OFF) { textGameObjects[1].setColor(TEXT_FONT_COLORS.SELECTED); return; } if (this.#selectedBattleSceneOption === BATTLE_SCENE_OPTIONS.ON) { textGameObjects[0].setColor(TEXT_FONT_COLORS.SELECTED); return; } exhaustiveGuard(this.#selectedBattleSceneOption); } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateBattleStyleOption(direction) { if ( direction === DIRECTION.LEFT && this.#selectedBattleStyleOption === BATTLE_STYLE_OPTIONS.SET ) { return; } if (direction === DIRECTION.LEFT) { this.#selectedBattleStyleOption = BATTLE_STYLE_OPTIONS.SET; return; } if ( direction === DIRECTION.RIGHT && this.#selectedBattleStyleOption === BATTLE_STYLE_OPTIONS.SHIFT ) { return; } if (direction === DIRECTION.RIGHT) { this.#selectedBattleStyleOption = BATTLE_STYLE_OPTIONS.SHIFT; return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateBattleStyleOptionGameObjects() { const textGameObjects = /** @type {Phaser.GameObjects.Text[]} */ ( this.#battleStyleOptionTextGameObjects.getChildren() ); textGameObjects.forEach((obj) => { obj.setColor(TEXT_FONT_COLORS.NOT_SELECTED); }); if (this.#selectedBattleStyleOption === BATTLE_STYLE_OPTIONS.SHIFT) { textGameObjects[1].setColor(TEXT_FONT_COLORS.SELECTED); return; } if (this.#selectedBattleStyleOption === BATTLE_STYLE_OPTIONS.SET) { textGameObjects[0].setColor(TEXT_FONT_COLORS.SELECTED); return; } exhaustiveGuard(this.#selectedBattleStyleOption); } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateSoundOption(direction) { if ( direction === DIRECTION.LEFT && this.#selectedSoundMenuOption === SOUND_OPTIONS.ON ) { return; } if (direction === DIRECTION.LEFT) { this.#selectedSoundMenuOption = SOUND_OPTIONS.ON; return; } if ( direction === DIRECTION.RIGHT && this.#selectedSoundMenuOption === SOUND_OPTIONS.OFF ) { return; } if (direction === DIRECTION.RIGHT) { this.#selectedSoundMenuOption = SOUND_OPTIONS.OFF; return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateSoundOptionGameObjects() { const textGameObjects = /** @type {Phaser.GameObjects.Text[]} */ ( this.#soundOptionTextGameObjects.getChildren() ); textGameObjects.forEach((obj) => { obj.setColor(TEXT_FONT_COLORS.NOT_SELECTED); }); if (this.#selectedSoundMenuOption === SOUND_OPTIONS.OFF) { textGameObjects[1].setColor(TEXT_FONT_COLORS.SELECTED); return; } if (this.#selectedSoundMenuOption === SOUND_OPTIONS.ON) { textGameObjects[0].setColor(TEXT_FONT_COLORS.SELECTED); return; } exhaustiveGuard(this.#selectedSoundMenuOption); } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateVolumeOption(direction) { if (direction === DIRECTION.LEFT && this.#selectedVolumeOption === 0) { return; } if (direction === DIRECTION.LEFT) { this.#selectedVolumeOption = /** @type {VolumeMenuOptions} */ ( this.#selectedVolumeOption - 1 ); return; } if (direction === DIRECTION.RIGHT && this.#selectedVolumeOption === 4) { return; } if (direction === DIRECTION.RIGHT) { this.#selectedVolumeOption = /** @type {VolumeMenuOptions} */ ( this.#selectedVolumeOption + 1 ); return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateVolumeSlider() { switch (this.#selectedVolumeOption) { case 0: this.#volumeOptionsMenuCursor.setX(420); this.#volumeOptionsValueText.setText("0%"); break; case 1: this.#volumeOptionsMenuCursor.setX(490); this.#volumeOptionsValueText.setText("25%"); break; case 2: this.#volumeOptionsMenuCursor.setX(560); this.#volumeOptionsValueText.setText("50%"); break; case 3: this.#volumeOptionsMenuCursor.setX(630); this.#volumeOptionsValueText.setText("75%"); break; case 4: this.#volumeOptionsMenuCursor.setX(710); this.#volumeOptionsValueText.setText("100%"); break; default: exhaustiveGuard(this.#selectedVolumeOption); } } /** * @param {'LEFT' | 'RIGHT'} direction * @returns {void} */ #updateMenuColorOption(direction) { if (direction === DIRECTION.LEFT && this.#selectedMenuColorOption === 0) { this.#selectedMenuColorOption = 2; return; } if (direction === DIRECTION.RIGHT && this.#selectedMenuColorOption === 2) { this.#selectedMenuColorOption = 0; return; } if (direction === DIRECTION.LEFT) { this.#selectedMenuColorOption -= 1; return; } if (direction === DIRECTION.RIGHT) { this.#selectedMenuColorOption += 1; return; } exhaustiveGuard(direction); } /** * @returns {void} */ #updateMenuColorDisplayText() { switch (this.#selectedMenuColorOption) { case 0: this.#selectedMenuColorTextGameObject.setText("1"); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#mainContainer, UI_ASSET_KEYS.MENU_BACKGROUND ); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#infoContainer, UI_ASSET_KEYS.MENU_BACKGROUND ); break; case 1: this.#selectedMenuColorTextGameObject.setText("2"); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#mainContainer, UI_ASSET_KEYS.MENU_BACKGROUND_GREEN ); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#infoContainer, UI_ASSET_KEYS.MENU_BACKGROUND_GREEN ); break; case 2: this.#selectedMenuColorTextGameObject.setText("3"); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#mainContainer, UI_ASSET_KEYS.MENU_BACKGROUND_PURPLE ); this.#nineSliceMainContainer.updateNineSliceContainerTexture( this.sys.textures, this.#infoContainer, UI_ASSET_KEYS.MENU_BACKGROUND_PURPLE ); break; default: exhaustiveGuard(this.#selectedMenuColorOption); } } } // data-utils.js class DataUtils { /** * Utility function for retrieving an Attack object from the attacks.json data file. * @param {Phaser.Scene} scene the Phaser 3 Scene to get cached JSON file from * @param {number} attackId the id of the attack to retrieve from the attacks.json file * @returns {Attack | undefined} */ static getMonsterAttack(scene, attackId) { /** @type {Attack[]} */ const data = scene.cache.json.get(DATA_ASSET_KEYS.ATTACKS); return data.find((attack) => attack.id === attackId); } /** * Utility function for retrieving the Animation objects from the animations.json data file. * @param {Phaser.Scene} scene the Phaser 3 Scene to get cached JSON file from * @returns {Animation[]} */ static getAnimations(scene) { /** @type {Animation[]} */ const data = scene.cache.json.get(DATA_ASSET_KEYS.ANIMATIONS); return data; } } // preload-scene.js class PreloadScene extends Phaser.Scene { constructor() { console.log(`[${PreloadScene.name}:constructor] invoked`); super({ key: SCENE_KEYS.PRELOAD_SCENE, }); } preload() { console.log(`[${PreloadScene.name}:preload] invoked`); // external social links assets if (SHOW_SOCIAL_LINKS) { this.load.image( EXTERNAL_LINKS_ASSET_KEYS.GITHUB_BANNER, `https://play.rosebud.ai/assets/forkme_right_red_aa0000.webp.webp?5jSr` ); this.load.image( EXTERNAL_LINKS_ASSET_KEYS.YOUTUBE_BUTTON, `https://play.rosebud.ai/assets/WatchonYouTube-white-3xPNG.png.png?TwD3` ); this.load.image( EXTERNAL_LINKS_ASSET_KEYS.LEARN_MORE_BACKGROUND, `https://play.rosebud.ai/assets/blank.png.png?9c9y` ); this.load.image( EXTERNAL_LINKS_ASSET_KEYS.YOUTUBE_THUMB_NAIL, `https://play.rosebud.ai/assets/thumbnail.jpeg.jpeg?omMS` ); } // battle backgrounds this.load.image( BATTLE_BACKGROUND_ASSET_KEYS.FOREST, `https://play.rosebud.ai/assets/forest-background.png.png?AYqH` ); // battle assets this.load.image( BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND, `https://play.rosebud.ai/assets/custom-ui.png.png?Duc9` ); // health bar assets this.load.image( HEALTH_BAR_ASSET_KEYS.RIGHT_CAP, `https://play.rosebud.ai/assets/barHorizontal_green_right.png.png?K78r` ); this.load.image( HEALTH_BAR_ASSET_KEYS.MIDDLE, `https://play.rosebud.ai/assets/barHorizontal_green_mid.png.png?wNdo` ); this.load.image( HEALTH_BAR_ASSET_KEYS.LEFT_CAP, `https://play.rosebud.ai/assets/barHorizontal_green_left.png.png?y7rF` ); this.load.image( HEALTH_BAR_ASSET_KEYS.RIGHT_CAP_SHADOW, `https://play.rosebud.ai/assets/barHorizontal_shadow_right.png.png?7dlf` ); this.load.image( HEALTH_BAR_ASSET_KEYS.MIDDLE_SHADOW, `https://play.rosebud.ai/assets/barHorizontal_shadow_mid.png.png?5Dn7` ); this.load.image( HEALTH_BAR_ASSET_KEYS.LEFT_CAP_SHADOW, `https://play.rosebud.ai/assets/barHorizontal_shadow_left.png.png?bhXo` ); // monster assets this.load.image( MONSTER_ASSET_KEYS.CARNODUSK, `https://play.rosebud.ai/assets/carnodusk.png.png?oSOb` ); this.load.image( MONSTER_ASSET_KEYS.IGUANIGNITE, `https://play.rosebud.ai/assets/iguanignite.png.png?AOzU` ); // ui assets this.load.image( UI_ASSET_KEYS.CURSOR, `https://play.rosebud.ai/assets/cursor.png.png?tUuR` ); this.load.image( UI_ASSET_KEYS.CURSOR_WHITE, `https://play.rosebud.ai/assets/cursor_white.png.png?F8Li` ); this.load.image( UI_ASSET_KEYS.MENU_BACKGROUND, `https://play.rosebud.ai/assets/glassPanel.png.png?QDdm` ); this.load.image( UI_ASSET_KEYS.MENU_BACKGROUND_PURPLE, `https://play.rosebud.ai/assets/glassPanel_purple.png.png?hzwE` ); this.load.image( UI_ASSET_KEYS.MENU_BACKGROUND_GREEN, `https://play.rosebud.ai/assets/glassPanel_green.png.png?N58H` ); console.log(`[${PreloadScene.name}:load json] invoked`); // load json data this.cache.json.add(DATA_ASSET_KEYS.ANIMATIONS, ANIMATIONS); this.cache.json.add(DATA_ASSET_KEYS.ATTACKS, ATTACKS); console.log(`[${PreloadScene.name}:load spritesheets] invoked`); // load attack assets this.load.spritesheet( ATTACK_ASSET_KEYS.ICE_SHARD, `https://play.rosebud.ai/assets/active.png.png?IOgq`, { frameWidth: 32, frameHeight: 32, } ); this.load.spritesheet( ATTACK_ASSET_KEYS.ICE_SHARD_START, `https://play.rosebud.ai/assets/start.png.png?yqIb`, { frameWidth: 32, frameHeight: 32, } ); this.load.spritesheet( ATTACK_ASSET_KEYS.SLASH, `https://play.rosebud.ai/assets/slash.png.png?HJ4W`, { frameWidth: 48, frameHeight: 48, } ); console.log(`[${PreloadScene.name}:load images] invoked`); // load world assets this.load.image( WORLD_ASSET_KEYS.WORLD_BACKGROUND, `https://play.rosebud.ai/assets/level_background.png.png?YG6c` ); this.load.tilemapTiledJSON(WORLD_ASSET_KEYS.WORLD_MAIN_LEVEL, LEVEL); this.load.image( WORLD_ASSET_KEYS.WORLD_COLLISION, `https://play.rosebud.ai/assets/collision.png.png?JGq1` ); this.load.image( WORLD_ASSET_KEYS.WORLD_FOREGROUND, `https://play.rosebud.ai/assets/level_foreground.png.png?PmD5` ); this.load.image( WORLD_ASSET_KEYS.WORLD_ENCOUNTER_ZONE, `https://play.rosebud.ai/assets/encounter.png.png?4sxG` ); // load character images this.load.spritesheet( CHARACTER_ASSET_KEYS.PLAYER, `https://play.rosebud.ai/assets/custom.png.png?lDJT`, { frameWidth: 64, frameHeight: 88, } ); this.load.spritesheet( CHARACTER_ASSET_KEYS.NPC, `https://play.rosebud.ai/assets/characters.png.png?7lDW`, { frameWidth: 16, frameHeight: 16, } ); // ui components for title this.load.image( TITLE_ASSET_KEYS.BACKGROUND, `https://play.rosebud.ai/assets/background.png.png?g43O` ); this.load.image( TITLE_ASSET_KEYS.PANEL, `https://play.rosebud.ai/assets/title_background.png.png?U8QF` ); this.load.image( TITLE_ASSET_KEYS.TITLE, `https://play.rosebud.ai/assets/title_text.png.png?aHnx` ); console.log(`[${PreloadScene.name}:finished] invoked`); } create() { console.log(`[${PreloadScene.name}:create] invoked`); this.#createAnimations(); // attempt to populate data manager with saved data dataManager.loadData(); this.scene.start(SCENE_KEYS.TITLE_SCENE); } #createAnimations() { const animations = DataUtils.getAnimations(this); animations.forEach((animation) => { const frames = animation.frames ? this.anims.generateFrameNumbers(animation.assetKey, { frames: animation.frames, }) : this.anims.generateFrameNumbers(animation.assetKey); this.anims.create({ key: animation.key, frames: frames, frameRate: animation.frameRate, repeat: animation.repeat, delay: animation.delay, yoyo: animation.yoyo, }); }); } } // test-scene.js class TestScene extends Phaser.Scene { /** @type {AttackKeys} */ #selectedAttack; /** @type {IceShard} */ #iceShardAttack; /** @type {Slash} */ #slashAttack; /** @type {Phaser.GameObjects.Image} */ #playerMonster; /** @type {Phaser.GameObjects.Image} */ #enemyMonster; constructor() { super({ key: SCENE_KEYS.TEST_SCENE }); } /** * @returns {void} */ init() { this.#selectedAttack = ATTACK_KEYS.SLASH; } /** * @returns {void} */ create() { const background = new Background(this); background.showForest(); this.#playerMonster = this.add .image(256, 316, MONSTER_ASSET_KEYS.IGUANIGNITE, 0) .setFlipX(true); this.#enemyMonster = this.add .image(768, 144, MONSTER_ASSET_KEYS.CARNODUSK, 0) .setFlipX(false); makeDraggable(this.#enemyMonster); this.#iceShardAttack = new IceShard(this, { x: 256, y: 344 }); this.#slashAttack = new Slash(this, { x: 745, y: 140 }); this.#addDataGui(); } /** * @returns {void} */ #addDataGui() { const pane = new window.TweakPane.Pane(); const f1 = pane.addFolder({ title: "Monsters", expanded: true, }); const playerMonsterFolder = f1.addFolder({ title: "Player", expanded: true, }); playerMonsterFolder.addBinding(this.#playerMonster, "x", { min: 0, max: 1024, step: 1, }); playerMonsterFolder.addBinding(this.#playerMonster, "y", { min: 0, max: 576, step: 1, }); const enemyMonsterFolder = f1.addFolder({ title: "Enemy", expanded: true, }); enemyMonsterFolder.addBinding(this.#enemyMonster, "x", { readonly: true }); enemyMonsterFolder.addBinding(this.#enemyMonster, "y", { readonly: true }); const f2Params = { attack: this.#selectedAttack, x: 745, y: 120, }; const f2 = pane.addFolder({ title: "Attacks", expanded: true, }); f2.addBinding(f2Params, "attack", { options: { [ATTACK_KEYS.SLASH]: ATTACK_KEYS.SLASH, [ATTACK_KEYS.ICE_SHARD]: ATTACK_KEYS.ICE_SHARD, }, }).on("change", (ev) => { if (ev.value === ATTACK_KEYS.ICE_SHARD) { this.#selectedAttack = ATTACK_KEYS.ICE_SHARD; f2Params.x = this.#iceShardAttack.gameObject.x; f2Params.y = this.#iceShardAttack.gameObject.y; f2.refresh(); return; } if (ev.value === ATTACK_KEYS.SLASH) { this.#selectedAttack = ATTACK_KEYS.SLASH; f2Params.x = this.#slashAttack.gameObject.x; f2Params.y = this.#slashAttack.gameObject.y; f2.refresh(); return; } }); const playAttackButton = f2.addButton({ title: "Play", }); playAttackButton.on("click", () => { if (this.#selectedAttack === ATTACK_KEYS.ICE_SHARD) { this.#iceShardAttack.playAnimation(); return; } if (this.#selectedAttack === ATTACK_KEYS.SLASH) { this.#slashAttack.playAnimation(); return; } }); f2.addBinding(f2Params, "x", { min: 0, max: 1024, step: 1, }).on("change", (ev) => { this.#updateAttackGameObjectPosition("x", ev.value); }); f2.addBinding(f2Params, "y", { min: 0, max: 576, step: 1, }).on("change", (ev) => { this.#updateAttackGameObjectPosition("y", ev.value); }); } /** * @param {'x' | 'y'} param * @param {number} value * @returns {void} */ #updateAttackGameObjectPosition(param, value) { if (param === "x") { if (this.#selectedAttack === ATTACK_KEYS.SLASH) { this.#slashAttack.gameObject.setX(value); return; } if (this.#selectedAttack === ATTACK_KEYS.ICE_SHARD) { this.#iceShardAttack.gameObject.setX(value); return; } } if (this.#selectedAttack === ATTACK_KEYS.SLASH) { this.#slashAttack.gameObject.setY(value); return; } if (this.#selectedAttack === ATTACK_KEYS.ICE_SHARD) { this.#iceShardAttack.gameObject.setY(value); return; } } } // title-scene.js /** @type {Phaser.Types.GameObjects.Text.TextStyle} */ const TITLE_MENU_TEXT_STYLE = Object.freeze({ fontFamily: "Calibri", color: "#4D4A49", fontSize: "30px", }); const PLAYER_INPUT_CURSOR_POSITION = Object.freeze({ x: 150, y: 41, }); /** * @typedef {keyof typeof MAIN_MENU_OPTIONS} MainMenuOptions */ /** @enum {MainMenuOptions} */ const MAIN_MENU_OPTIONS = Object.freeze({ NEW_GAME: "NEW_GAME", CONTINUE: "CONTINUE", OPTIONS: "OPTIONS", }); class TitleScene extends Phaser.Scene { /** @type {Phaser.GameObjects.Image} */ #mainMenuCursorPhaserImageGameObject; /** @type {Controls} */ #controls; /** @type {MainMenuOptions} */ #selectedMenuOption; /** @type {boolean} */ #isContinueButtonEnabled; /** @type {NineSlice} */ #nineSliceMenu; constructor() { super({ key: SCENE_KEYS.TITLE_SCENE, }); } init() { console.log(`[${TitleScene.name}:init] invoked`); this.#nineSliceMenu = new NineSlice({ cornerCutSize: 32, textureManager: this.sys.textures, assetKeys: [UI_ASSET_KEYS.MENU_BACKGROUND], }); } create() { console.log(`[${TitleScene.name}:create] invoked`); this.#selectedMenuOption = MAIN_MENU_OPTIONS.NEW_GAME; this.#isContinueButtonEnabled = dataManager.store.get(DATA_MANAGER_STORE_KEYS.GAME_STARTED) || false; // create title scene background this.add .image(0, 0, TITLE_ASSET_KEYS.BACKGROUND) .setOrigin(0) .setScale(0.58); this.add .image(this.scale.width / 2, 150, TITLE_ASSET_KEYS.PANEL) .setScale(0.25, 0.25) .setAlpha(0.5); this.add .image(this.scale.width / 2, 150, TITLE_ASSET_KEYS.TITLE) .setScale(0.55) .setAlpha(0.5); // create menu const menuBgWidth = 500; const menuBgContainer = this.#nineSliceMenu.createNineSliceContainer( this, menuBgWidth, 200, UI_ASSET_KEYS.MENU_BACKGROUND ); const newGameText = this.add .text(menuBgWidth / 2, 40, "New Game", TITLE_MENU_TEXT_STYLE) .setOrigin(0.5); const continueText = this.add .text(menuBgWidth / 2, 90, "Continue", TITLE_MENU_TEXT_STYLE) .setOrigin(0.5); if (!this.#isContinueButtonEnabled) { continueText.setAlpha(0.5); } const optionText = this.add .text(menuBgWidth / 2, 140, "Options", TITLE_MENU_TEXT_STYLE) .setOrigin(0.5); const menuContainer = this.add.container(0, 0, [ menuBgContainer, newGameText, continueText, optionText, ]); menuContainer.setPosition(this.scale.width / 2 - menuBgWidth / 2, 300); // create cursors this.#mainMenuCursorPhaserImageGameObject = this.add .image( PLAYER_INPUT_CURSOR_POSITION.x, PLAYER_INPUT_CURSOR_POSITION.y, UI_ASSET_KEYS.CURSOR ) .setOrigin(0.5) .setScale(2.5); menuBgContainer.add(this.#mainMenuCursorPhaserImageGameObject); this.tweens.add({ delay: 0, duration: 500, repeat: -1, x: { from: PLAYER_INPUT_CURSOR_POSITION.x, start: PLAYER_INPUT_CURSOR_POSITION.x, to: PLAYER_INPUT_CURSOR_POSITION.x + 3, }, targets: this.#mainMenuCursorPhaserImageGameObject, }); // add in social links if (SHOW_SOCIAL_LINKS) { this.#addInSocialLinks(); } // add in fade effects this.cameras.main.once( Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.OPTIONS) { this.scene.start(SCENE_KEYS.OPTIONS_SCENE); return; } if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.NEW_GAME) { dataManager.startNewGame(); } this.scene.start(SCENE_KEYS.WORLD_SCENE); } ); this.#controls = new Controls(this); } update() { if (this.#controls.isInputLocked) { return; } const wasSpaceKeyPressed = this.#controls.wasSpaceKeyPressed(); if (wasSpaceKeyPressed) { this.cameras.main.fadeOut(500, 0, 0, 0); this.#controls.lockInput = true; return; } const selectedDirection = this.#controls.getDirectionKeyJustPressed(); if (selectedDirection !== DIRECTION.NONE) { this.#moveMenuSelectCursor(selectedDirection); } } /** * @param {Direction} direction * @returns {void} */ #moveMenuSelectCursor(direction) { this.#updateSelectedMenuOptionFromInput(direction); switch (this.#selectedMenuOption) { case MAIN_MENU_OPTIONS.NEW_GAME: this.#mainMenuCursorPhaserImageGameObject.setY( PLAYER_INPUT_CURSOR_POSITION.y ); break; case MAIN_MENU_OPTIONS.CONTINUE: this.#mainMenuCursorPhaserImageGameObject.setY(91); break; case MAIN_MENU_OPTIONS.OPTIONS: this.#mainMenuCursorPhaserImageGameObject.setY(141); break; default: exhaustiveGuard(this.#selectedMenuOption); } } /** * @param {Direction} direction * @returns {void} */ #updateSelectedMenuOptionFromInput(direction) { switch (direction) { case DIRECTION.UP: if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.NEW_GAME) { return; } if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.CONTINUE) { this.#selectedMenuOption = MAIN_MENU_OPTIONS.NEW_GAME; return; } if ( this.#selectedMenuOption === MAIN_MENU_OPTIONS.OPTIONS && !this.#isContinueButtonEnabled ) { this.#selectedMenuOption = MAIN_MENU_OPTIONS.NEW_GAME; return; } this.#selectedMenuOption = MAIN_MENU_OPTIONS.CONTINUE; return; case DIRECTION.DOWN: if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.OPTIONS) { return; } if (this.#selectedMenuOption === MAIN_MENU_OPTIONS.CONTINUE) { this.#selectedMenuOption = MAIN_MENU_OPTIONS.OPTIONS; return; } if ( this.#selectedMenuOption === MAIN_MENU_OPTIONS.NEW_GAME && !this.#isContinueButtonEnabled ) { this.#selectedMenuOption = MAIN_MENU_OPTIONS.OPTIONS; return; } this.#selectedMenuOption = MAIN_MENU_OPTIONS.CONTINUE; return; case DIRECTION.LEFT: case DIRECTION.RIGHT: case DIRECTION.NONE: return; default: exhaustiveGuard(direction); } } #addInSocialLinks() { const githubImage = this.add .image(this.scale.width, 0, EXTERNAL_LINKS_ASSET_KEYS.GITHUB_BANNER, 0) .setOrigin(1, 0) .setInteractive({ useHandCursor: true, }); githubImage.on(Phaser.Input.Events.POINTER_DOWN, () => { window .open("https://github.com/devshareacademy/monster-tamer", "_blank") .focus(); }); const containerPosition = { maximized: this.scale.height - 235, minimized: this.scale.height - 26, }; const container = this.add.container(20, containerPosition.minimized, []); container.on(Phaser.Input.Events.POINTER_OVER, () => { container.y -= 1; }); let containerTween = this.add .tween({ delay: 0, duration: 400, y: { from: container.y, start: container.y, to: containerPosition.maximized, }, targets: container, }) .pause(); const bg = this.add .image(0, 0, EXTERNAL_LINKS_ASSET_KEYS.LEARN_MORE_BACKGROUND, 0) .setOrigin(0) .setScale(1.2, 1) .setInteractive({ useHandCursor: true, }); bg.on(Phaser.Input.Events.POINTER_DOWN, () => { window .open( "https://www.youtube.com/playlist?list=PLmcXe0-sfoSgq-pyXrFx0GZjHbvoVUW8t", "_blank" ) .focus(); }); bg.on(Phaser.Input.Events.POINTER_OVER, () => { if (containerTween.isDestroyed()) { containerTween = this.add.tween({ delay: 0, duration: 400, y: { from: container.y, start: container.y, to: containerPosition.maximized, }, targets: container, }); return; } if (containerTween.isPaused()) { containerTween.resume(); } containerTween.updateTo("y", containerPosition.maximized, true); }); bg.on(Phaser.Input.Events.POINTER_OUT, () => { if (containerTween.isDestroyed()) { containerTween = this.add.tween({ delay: 0, duration: 400, y: { from: container.y, start: container.y, to: containerPosition.minimized, }, targets: container, }); return; } if (containerTween.isPaused()) { containerTween.resume(); } containerTween.updateTo("y", containerPosition.minimized, true); }); container.add(bg); const sideBarText = this.add .text(20, 5, "Learn To Build This Game!", { fontSize: "18px", }) .setOrigin(0, 0); container.add(sideBarText); container.add( this.add .image(153, 90, EXTERNAL_LINKS_ASSET_KEYS.YOUTUBE_THUMB_NAIL, 0) .setScale(0.65) .setAlpha(0.9) ); const youTubeLogo = this.add .image(150, 80, EXTERNAL_LINKS_ASSET_KEYS.YOUTUBE_BUTTON, 0) .setScale(0.4); container.add(youTubeLogo); const moreInfoText = this.add .text( 20, 155, "In this free series, learn how to build this Pokemon like RPG from scratch!", { fontSize: "20px", wordWrap: { width: 300 }, } ) .setOrigin(0, 0); container.add(moreInfoText); } } // world-scene.js /** * @typedef TiledObjectProperty * @type {object} * @property {string} name * @property {string} type * @property {any} value */ const TILED_SIGN_PROPERTY = Object.freeze({ MESSAGE: "message", }); const CUSTOM_TILED_TYPES = Object.freeze({ NPC: "npc", NPC_PATH: "npc_path", }); const TILED_NPC_PROPERTY = Object.freeze({ IS_SPAWN_POINT: "is_spawn_point", MOVEMENT_PATTERN: "movement_pattern", MESSAGES: "messages", FRAME: "frame", }); /* Our scene will be 16 x 9 (1024 x 576 pixels) each grid size will be 64 x 64 pixels */ class WorldScene extends Phaser.Scene { /** @type {Player} */ #player; /** @type {Controls} */ #controls; /** @type {Phaser.Tilemaps.TilemapLayer} */ #encounterLayer; /** @type {boolean} */ #wildMonsterEncountered; /** @type {Phaser.Tilemaps.ObjectLayer} */ #signLayer; /** @type {DialogUi} */ #dialogUi; /** @type {NPC[]} */ #npcs; /** @type {NPC | undefined} */ #npcPlayerIsInteractingWith; /** @type {Menu} */ #menu; constructor() { super({ key: SCENE_KEYS.WORLD_SCENE, }); } /** * @returns {void} */ init() { console.log(`[${WorldScene.name}:init] invoked`); this.#wildMonsterEncountered = false; this.#npcPlayerIsInteractingWith = undefined; } /** * @returns {void} */ create() { console.log(`[${WorldScene.name}:create] invoked`); const x = 6 * TILE_SIZE; const y = 22 * TILE_SIZE; // this value comes from the width of the level background image we are using // we set the max camera width to the size of our image in order to control what // is visible to the player, since the phaser game world is infinite. this.cameras.main.setBounds(0, 0, 1280, 2176); this.cameras.main.setZoom(0.8); this.cameras.main.centerOn(x, y); // create map and collision layer const map = this.make.tilemap({ key: WORLD_ASSET_KEYS.WORLD_MAIN_LEVEL }); // The first parameter is the name of the tileset in Tiled and the second parameter is the key // of the tileset image used when loading the file in preload. const collisionTiles = map.addTilesetImage( "collision", WORLD_ASSET_KEYS.WORLD_COLLISION ); if (!collisionTiles) { console.log( `[${WorldScene.name}:create] encountered error while creating collision tiles from tiled` ); return; } const collisionLayer = map.createLayer("Collision", collisionTiles, 0, 0); if (!collisionLayer) { console.log( `[${WorldScene.name}:create] encountered error while creating collision layer using data from tiled` ); return; } collisionLayer.setAlpha(TILED_COLLISION_LAYER_ALPHA).setDepth(2); // create interactive layer this.#signLayer = map.getObjectLayer("Sign"); if (!this.#signLayer) { console.log( `[${WorldScene.name}:create] encountered error while creating sign layer using data from tiled` ); return; } // create collision layer for encounters const encounterTiles = map.addTilesetImage( "encounter", WORLD_ASSET_KEYS.WORLD_ENCOUNTER_ZONE ); if (!encounterTiles) { console.log( `[${WorldScene.name}:create] encountered error while creating encounter tiles from tiled` ); return; } this.#encounterLayer = map.createLayer("Encounter", encounterTiles, 0, 0); if (!this.#encounterLayer) { console.log( `[${WorldScene.name}:create] encountered error while creating encounter layer using data from tiled` ); return; } this.#encounterLayer.setAlpha(TILED_COLLISION_LAYER_ALPHA).setDepth(2); this.add.image(0, 0, WORLD_ASSET_KEYS.WORLD_BACKGROUND, 0).setOrigin(0); // create npcs this.#createNPCs(map); // create player and have camera focus on the player this.#player = new Player({ scene: this, position: dataManager.store.get(DATA_MANAGER_STORE_KEYS.PLAYER_POSITION), direction: dataManager.store.get( DATA_MANAGER_STORE_KEYS.PLAYER_DIRECTION ), collisionLayer: collisionLayer, spriteGridMovementFinishedCallback: () => { this.#handlePlayerMovementUpdate(); }, spriteChangedDirectionCallback: () => { this.#handlePlayerDirectionUpdate(); }, otherCharactersToCheckForCollisionsWith: this.#npcs, }); this.cameras.main.startFollow(this.#player.sprite); // update our collisions with npcs this.#npcs.forEach((npc) => { npc.addCharacterToCheckForCollisionsWith(this.#player); }); // create foreground for depth this.add.image(0, 0, WORLD_ASSET_KEYS.WORLD_FOREGROUND, 0).setOrigin(0); this.#controls = new Controls(this); // create dialog ui this.#dialogUi = new DialogUi(this, 1280); // create menu this.#menu = new Menu(this); this.cameras.main.fadeIn(1000, 0, 0, 0); dataManager.store.set(DATA_MANAGER_STORE_KEYS.GAME_STARTED, true); } /** * @param {DOMHighResTimeStamp} time * @returns {void} */ update(time) { if (this.#wildMonsterEncountered) { this.#player.update(time); return; } const wasSpaceKeyPressed = this.#controls.wasSpaceKeyPressed(); const selectedDirectionHeldDown = this.#controls.getDirectionKeyPressedDown(); const selectedDirectionPressedOnce = this.#controls.getDirectionKeyJustPressed(); if ( selectedDirectionHeldDown !== DIRECTION.NONE && !this.#isPlayerInputLocked() ) { this.#player.moveCharacter(selectedDirectionHeldDown); } if (wasSpaceKeyPressed && !this.#player.isMoving && !this.#menu.isVisible) { this.#handlePlayerInteraction(); } if (this.#controls.wasEnterKeyPressed() && !this.#player.isMoving) { if (this.#dialogUi.isVisible) { return; } if (this.#menu.isVisible) { this.#menu.hide(); return; } this.#menu.show(); } if (this.#menu.isVisible) { if (selectedDirectionPressedOnce !== DIRECTION.NONE) { this.#menu.handlePlayerInput(selectedDirectionPressedOnce); } if (wasSpaceKeyPressed) { this.#menu.handlePlayerInput("OK"); if (this.#menu.selectedMenuOption === "SAVE") { this.#menu.hide(); dataManager.saveData(); this.#dialogUi.showDialogModal(["Game progress has been saved"]); } else if (this.#menu.selectedMenuOption === "EXIT") { this.#menu.hide(); } // TODO: handle other selected menu options } if (this.#controls.wasBackKeyPressed()) { this.#menu.hide(); } } this.#player.update(time); this.#npcs.forEach((npc) => { npc.update(time); }); } #handlePlayerInteraction() { if (this.#dialogUi.isAnimationPlaying) { return; } if (this.#dialogUi.isVisible && !this.#dialogUi.moreMessagesToShow) { this.#dialogUi.hideDialogModal(); if (this.#npcPlayerIsInteractingWith) { this.#npcPlayerIsInteractingWith.isTalkingToPlayer = false; this.#npcPlayerIsInteractingWith = undefined; } return; } if (this.#dialogUi.isVisible && this.#dialogUi.moreMessagesToShow) { this.#dialogUi.showNextMessage(); return; } // get players current direction and check 1 tile over in that direction to see if there is an object that can be interacted with const { x, y } = this.#player.sprite; const targetPosition = getTargetPositionFromGameObjectPositionAndDirection( { x, y }, this.#player.direction ); // check for sign, and display appropriate message if player is not facing up const nearbySign = this.#signLayer.objects.find((object) => { if (!object.x || !object.y) { return false; } // In Tiled, the x value is how far the object starts from the left, and the y is the bottom of tiled object that is being added return ( object.x === targetPosition.x && object.y - TILE_SIZE === targetPosition.y ); }); if (nearbySign) { /** @type {TiledObjectProperty[]} */ const props = nearbySign.properties; /** @type {string} */ const msg = props.find( (prop) => prop.name === TILED_SIGN_PROPERTY.MESSAGE )?.value; const usePlaceholderText = this.#player.direction !== DIRECTION.UP; let textToShow = CANNOT_READ_SIGN_TEXT; if (!usePlaceholderText) { textToShow = msg || SAMPLE_TEXT; } this.#dialogUi.showDialogModal([textToShow]); return; } const nearbyNpc = this.#npcs.find((npc) => { return ( npc.sprite.x === targetPosition.x && npc.sprite.y === targetPosition.y ); }); if (nearbyNpc) { nearbyNpc.facePlayer(this.#player.direction); nearbyNpc.isTalkingToPlayer = true; this.#npcPlayerIsInteractingWith = nearbyNpc; this.#dialogUi.showDialogModal(nearbyNpc.messages); return; } } /** * @returns {void} */ #handlePlayerMovementUpdate() { // update player position on global data store dataManager.store.set(DATA_MANAGER_STORE_KEYS.PLAYER_POSITION, { x: this.#player.sprite.x, y: this.#player.sprite.y, }); if (!this.#encounterLayer) { return; } const isInEncounterZone = this.#encounterLayer.getTileAtWorldXY( this.#player.sprite.x, this.#player.sprite.y, true ).index !== -1; if (!isInEncounterZone) { return; } console.log( `[${WorldScene.name}:handlePlayerMovementUpdate] player is in an encounter zone` ); this.#wildMonsterEncountered = Math.random() < 0.2; if (this.#wildMonsterEncountered) { console.log( `[${WorldScene.name}:handlePlayerMovementUpdate] player encountered a wild monster` ); // TODO: add in a custom animation that is similar to the old games this.cameras.main.fadeOut(2000); this.cameras.main.once( Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.scene.start(SCENE_KEYS.BATTLE_SCENE); } ); } } #isPlayerInputLocked() { return ( this.#controls.isInputLocked || this.#dialogUi.isVisible || this.#menu.isVisible ); } /** * @param {Phaser.Tilemaps.Tilemap} map * @returns {void} */ #createNPCs(map) { this.#npcs = []; const npcLayers = map .getObjectLayerNames() .filter((layerName) => layerName.includes("NPC")); npcLayers.forEach((layerName) => { const layer = map.getObjectLayer(layerName); const npcObject = layer.objects.find((obj) => { return obj.type === CUSTOM_TILED_TYPES.NPC; }); if ( !npcObject || npcObject.x === undefined || npcObject.y === undefined ) { return; } // get the path objects for this npc const pathObjects = layer.objects.filter((obj) => { return obj.type === CUSTOM_TILED_TYPES.NPC_PATH; }); /** @type {NPCPath} */ const npcPath = { 0: { x: npcObject.x, y: npcObject.y - TILE_SIZE }, }; pathObjects.forEach((obj) => { if (obj.x === undefined || obj.y === undefined) { return; } npcPath[parseInt(obj.name, 10)] = { x: obj.x, y: obj.y - TILE_SIZE }; }); /** @type {string} */ const npcFrame = /** @type {TiledObjectProperty[]} */ (npcObject.properties).find( (property) => property.name === TILED_NPC_PROPERTY.FRAME )?.value || "0"; /** @type {string} */ const npcMessagesString = /** @type {TiledObjectProperty[]} */ (npcObject.properties).find( (property) => property.name === TILED_NPC_PROPERTY.MESSAGES )?.value || ""; const npcMessages = npcMessagesString.split("::"); /** @type {NpcMovementPattern} */ const npcMovement = /** @type {TiledObjectProperty[]} */ (npcObject.properties).find( (property) => property.name === TILED_NPC_PROPERTY.MOVEMENT_PATTERN )?.value || "IDLE"; // In Tiled, the x value is how far the object starts from the left, and the y is the bottom of tiled object that is being added const npc = new NPC({ scene: this, position: { x: npcObject.x, y: npcObject.y - TILE_SIZE }, direction: DIRECTION.DOWN, frame: parseInt(npcFrame, 10), messages: npcMessages, npcPath, movementPattern: npcMovement, }); this.#npcs.push(npc); }); } #handlePlayerDirectionUpdate() { // update player direction on global data store dataManager.store.set( DATA_MANAGER_STORE_KEYS.PLAYER_DIRECTION, this.#player.direction ); } } // controls.js class Controls { /** @type {Phaser.Scene} */ #scene; /** @type {Phaser.Types.Input.Keyboard.CursorKeys | undefined} */ #cursorKeys; /** @type {boolean} */ #lockPlayerInput; /** @type {Phaser.Input.Keyboard.Key | undefined} */ #enterKey; /** * @param {Phaser.Scene} scene the Phaser 3 Scene the cursor keys will be created in */ constructor(scene) { this.#scene = scene; this.#cursorKeys = this.#scene.input.keyboard?.createCursorKeys(); this.#enterKey = this.#scene.input.keyboard?.addKey( Phaser.Input.Keyboard.KeyCodes.ENTER ); this.#lockPlayerInput = false; } /** @type {boolean} */ get isInputLocked() { return this.#lockPlayerInput; } /** @param {boolean} val the value that will be assigned */ set lockInput(val) { this.#lockPlayerInput = val; } /** @returns {boolean} */ wasEnterKeyPressed() { if (this.#enterKey === undefined) { return false; } return Phaser.Input.Keyboard.JustDown(this.#enterKey); } /** @returns {boolean} */ wasSpaceKeyPressed() { if (this.#cursorKeys === undefined) { return false; } return Phaser.Input.Keyboard.JustDown(this.#cursorKeys.space); } /** @returns {boolean} */ wasBackKeyPressed() { if (this.#cursorKeys === undefined) { return false; } return Phaser.Input.Keyboard.JustDown(this.#cursorKeys.shift); } /** @returns {Direction} */ getDirectionKeyJustPressed() { if (this.#cursorKeys === undefined) { return DIRECTION.NONE; } /** @type {Direction} */ let selectedDirection = DIRECTION.NONE; if (Phaser.Input.Keyboard.JustDown(this.#cursorKeys.left)) { selectedDirection = DIRECTION.LEFT; } else if (Phaser.Input.Keyboard.JustDown(this.#cursorKeys.right)) { selectedDirection = DIRECTION.RIGHT; } else if (Phaser.Input.Keyboard.JustDown(this.#cursorKeys.up)) { selectedDirection = DIRECTION.UP; } else if (Phaser.Input.Keyboard.JustDown(this.#cursorKeys.down)) { selectedDirection = DIRECTION.DOWN; } return selectedDirection; } /** @returns {Direction} */ getDirectionKeyPressedDown() { if (this.#cursorKeys === undefined) { return DIRECTION.NONE; } /** @type {Direction} */ let selectedDirection = DIRECTION.NONE; if (this.#cursorKeys.left.isDown) { selectedDirection = DIRECTION.LEFT; } else if (this.#cursorKeys.right.isDown) { selectedDirection = DIRECTION.RIGHT; } else if (this.#cursorKeys.up.isDown) { selectedDirection = DIRECTION.UP; } else if (this.#cursorKeys.down.isDown) { selectedDirection = DIRECTION.DOWN; } return selectedDirection; } } // data-manager.js const LOCAL_STORAGE_KEY = "MONSTER_TAMER_DATA"; /** * @typedef MonsterData * @type {object} * @property {Monster[]} inParty */ /** * @typedef GlobalState * @type {object} * @property {object} player * @property {object} player.position * @property {number} player.position.x * @property {number} player.position.y * @property {Direction} player.direction * @property {object} options * @property {TextSpeedMenuOptions} options.textSpeed * @property {BattleSceneMenuOptions} options.battleSceneAnimations * @property {BattleStyleMenuOptions} options.battleStyle * @property {SoundMenuOptions} options.sound * @property {VolumeMenuOptions} options.volume * @property {MenuColorOptions} options.menuColor * @property {boolean} gameStarted * @property {MonsterData} monsters */ /** @type {GlobalState} */ const initialState = { player: { position: { x: 6 * TILE_SIZE, y: 21 * TILE_SIZE, }, direction: DIRECTION.DOWN, }, options: { textSpeed: TEXT_SPEED_OPTIONS.MID, battleSceneAnimations: BATTLE_SCENE_OPTIONS.ON, battleStyle: BATTLE_STYLE_OPTIONS.SHIFT, sound: SOUND_OPTIONS.ON, volume: 4, menuColor: 0, }, gameStarted: false, monsters: { inParty: [ { id: 1, monsterId: 1, name: MONSTER_ASSET_KEYS.IGUANIGNITE, assetKey: MONSTER_ASSET_KEYS.IGUANIGNITE, assetFrame: 0, currentHp: 25, maxHp: 25, attackIds: [2], baseAttack: 15, currentLevel: 5, }, ], }, }; const DATA_MANAGER_STORE_KEYS = Object.freeze({ PLAYER_POSITION: "PLAYER_POSITION", PLAYER_DIRECTION: "PLAYER_DIRECTION", OPTIONS_TEXT_SPEED: "OPTIONS_TEXT_SPEED", OPTIONS_BATTLE_SCENE_ANIMATIONS: "OPTIONS_BATTLE_SCENE_ANIMATIONS", OPTIONS_BATTLE_STYLE: "OPTIONS_BATTLE_STYLE", OPTIONS_SOUND: "OPTIONS_SOUND", OPTIONS_VOLUME: "OPTIONS_VOLUME", OPTIONS_MENU_COLOR: "OPTIONS_MENU_COLOR", GAME_STARTED: "GAME_STARTED", MONSTERS_IN_PARTY: "MONSTERS_IN_PARTY", }); class DataManager extends Phaser.Events.EventEmitter { /** @type {Phaser.Data.DataManager} */ #store; constructor() { super(); this.#store = new Phaser.Data.DataManager(this); // initialize state with initial values this.#updateDataManger(initialState); } /** @type {Phaser.Data.DataManager} */ get store() { return this.#store; } /** * @returns {void} */ loadData() { // attempt to load data from browser storage and populate the data manager if (typeof Storage === "undefined") { console.warn( `[${DataManager.name}:loadData] localStorage is not supported, will not be able to save and load data.` ); return; } const savedData = localStorage.getItem(LOCAL_STORAGE_KEY); if (savedData === null) { return; } try { // TODO: we should add error handling and data validation at this step to make sure we get the data we expect. /** @type {GlobalState} */ const parsedData = JSON.parse(savedData); // update the state with the saved data this.#updateDataManger(parsedData); } catch (error) { console.warn( `[${DataManager.name}:loadData] encountered an error while attempting to load and parse saved data.` ); } } /** * @returns {void} */ saveData() { // attempt to storage data in browser storage from data manager if (typeof Storage === "undefined") { console.warn( `[${DataManager.name}:saveData] localStorage is not supported, will not be able to save and load data.` ); return; } const dataToSave = this.#dataManagerDataToGlobalStateObject(); localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(dataToSave)); } startNewGame() { // get existing data before resetting all of the data, so we can persist options data const existingData = { ...this.#dataManagerDataToGlobalStateObject() }; existingData.player.position = { ...initialState.player.position }; existingData.player.direction = initialState.player.direction; existingData.gameStarted = initialState.gameStarted; existingData.monsters = { inParty: [...initialState.monsters.inParty], }; this.#store.reset(); this.#updateDataManger(existingData); this.saveData(); } /** * @returns {number} */ getAnimatedTextSpeed() { /** @type {TextSpeedMenuOptions | undefined} */ const chosenTextSpeed = this.#store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_TEXT_SPEED ); if (chosenTextSpeed === undefined) { return TEXT_SPEED.MEDIUM; } switch (chosenTextSpeed) { case TEXT_SPEED_OPTIONS.FAST: return TEXT_SPEED.FAST; case TEXT_SPEED_OPTIONS.MID: return TEXT_SPEED.MEDIUM; case TEXT_SPEED_OPTIONS.SLOW: return TEXT_SPEED.SLOW; default: exhaustiveGuard(chosenTextSpeed); } } /** * @param {GlobalState} data * @returns {void} */ #updateDataManger(data) { this.#store.set({ [DATA_MANAGER_STORE_KEYS.PLAYER_POSITION]: data.player.position, [DATA_MANAGER_STORE_KEYS.PLAYER_DIRECTION]: data.player.direction, [DATA_MANAGER_STORE_KEYS.OPTIONS_TEXT_SPEED]: data.options.textSpeed, [DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_SCENE_ANIMATIONS]: data.options.battleSceneAnimations, [DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_STYLE]: data.options.battleStyle, [DATA_MANAGER_STORE_KEYS.OPTIONS_SOUND]: data.options.sound, [DATA_MANAGER_STORE_KEYS.OPTIONS_VOLUME]: data.options.volume, [DATA_MANAGER_STORE_KEYS.OPTIONS_MENU_COLOR]: data.options.menuColor, [DATA_MANAGER_STORE_KEYS.GAME_STARTED]: data.gameStarted, [DATA_MANAGER_STORE_KEYS.MONSTERS_IN_PARTY]: data.monsters.inParty, }); } /** * @returns {GlobalState} */ #dataManagerDataToGlobalStateObject() { return { player: { position: { x: this.#store.get(DATA_MANAGER_STORE_KEYS.PLAYER_POSITION).x, y: this.#store.get(DATA_MANAGER_STORE_KEYS.PLAYER_POSITION).y, }, direction: this.#store.get(DATA_MANAGER_STORE_KEYS.PLAYER_DIRECTION), }, options: { textSpeed: this.#store.get(DATA_MANAGER_STORE_KEYS.OPTIONS_TEXT_SPEED), battleSceneAnimations: this.#store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_SCENE_ANIMATIONS ), battleStyle: this.#store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_BATTLE_STYLE ), sound: this.#store.get(DATA_MANAGER_STORE_KEYS.OPTIONS_SOUND), volume: this.#store.get(DATA_MANAGER_STORE_KEYS.OPTIONS_VOLUME), menuColor: this.#store.get(DATA_MANAGER_STORE_KEYS.OPTIONS_MENU_COLOR), }, gameStarted: this.#store.get(DATA_MANAGER_STORE_KEYS.GAME_STARTED), monsters: { inParty: [ ...this.#store.get(DATA_MANAGER_STORE_KEYS.MONSTERS_IN_PARTY), ], }, }; } } const dataManager = new DataManager(); // draggable.js /** * Uses the Phaser 3 built in drag events to allow a game object to be moved around a Phaser 3 Scene instance. * The method will listen for the GameObject Destroy event and cleanup the various event listeners that * were registered. * @param {Phaser.GameObjects.Image} gameObject * @param {boolean} [enableLogs=false] enables logging for the various drag event callbacks. If the gameObject.name field * is populated, this will be included in the log line. */ function makeDraggable(gameObject, enableLogs = false) { gameObject.setInteractive(); /** * @param {string} message * @returns {void} */ function log(message) { if (enableLogs) { console.debug(message); } } /** * @param {Phaser.Input.Pointer} pointer * @returns {void} */ function onDrag(pointer) { log(`[makeDraggable:onDrag] invoked for game object: ${gameObject.name}`); gameObject.x = pointer.x; gameObject.y = pointer.y; } /** * @returns {void} */ function stopDrag() { log(`[makeDraggable:stopDrag] invoked for game object: ${gameObject.name}`); gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag); gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag); gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag); gameObject.x = Math.round(gameObject.x); gameObject.y = Math.round(gameObject.y); } /** * @returns {void} */ function startDrag() { log( `[makeDraggable:startDrag] invoked for game object: ${gameObject.name}` ); gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag); gameObject.on(Phaser.Input.Events.POINTER_MOVE, onDrag); gameObject.on(Phaser.Input.Events.POINTER_UP, stopDrag); } /** * @returns {void} */ function destroy() { log(`[makeDraggable:destroy] invoked for game object: ${gameObject.name}`); gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag); gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag); gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag); } gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag); gameObject.once(Phaser.GameObjects.Events.DESTROY, destroy); } // grid-utils.js /** * @param {Coordinate} currentPosition * @param {Direction} direction * @returns {Coordinate} */ function getTargetPositionFromGameObjectPositionAndDirection( currentPosition, direction ) { /** @type {Coordinate} */ const targetPosition = { ...currentPosition }; switch (direction) { case DIRECTION.DOWN: targetPosition.y += TILE_SIZE; break; case DIRECTION.UP: targetPosition.y -= TILE_SIZE; break; case DIRECTION.LEFT: targetPosition.x -= TILE_SIZE; break; case DIRECTION.RIGHT: targetPosition.x += TILE_SIZE; break; case DIRECTION.NONE: break; default: // We should never reach this default case exhaustiveGuard(direction); } return targetPosition; } // guard.js /** * Utility function to ensure we handle the full possible range of types when checking a variable for a possible * type in a union. * * A good example of this is when we check for all of the possible values in a `switch` statement, and we want * to ensure we check for all possible values in an enum type object. * @param {never} _value */ function exhaustiveGuard(_value) { throw new Error( `Error! Reached forbidden guard function with unexpected value: ${JSON.stringify( _value )}` ); } // nine-slice.js const ASSET_CUT_FRAMES = Object.freeze({ TL: "TL", TM: "TM", TR: "TR", ML: "ML", MM: "MM", MR: "MR", BL: "BL", BM: "BM", BR: "BR", }); const ASSET_CUT_FRAME_DATA_MANAGER_NAME = "assetCutFrame"; /** * @typedef NineSliceConfig * @type {object} * @property {number} cornerCutSize the width and height of the corner pieces that will be created from the image * @property {Phaser.Textures.TextureManager} textureManager the Phaser 3 Texture Manger instance that will be used for getting textures from * @property {string[]} assetKeys the name of the asset to pull from the Phaser 3 Texture Manager */ class NineSlice { /** @type {number} */ #cornerCutSize; /** * @param {NineSliceConfig} config */ constructor(config) { this.#cornerCutSize = config.cornerCutSize; config.assetKeys.forEach((assetKey) => { this.#createNineSliceTextures(config.textureManager, assetKey); }); } /** * Retrieves a texture from the Phaser 3 Texture Manager and adds nine new frames to the texture that represent the parts * of the image that will make up the nine slice cuts of the original image. * @param {Phaser.Textures.TextureManager} textureManager the Phaser 3 Texture Manger instance that will be used for getting textures from * @param {string} assetKey the name of the asset to pull from the Phaser 3 Texture Manager * @returns {void} */ #createNineSliceTextures(textureManager, assetKey) { const methodName = "createNineSliceTextures"; const texture = textureManager.get(assetKey); if (texture.key === "__MISSING") { console.warn( `[${NineSlice.name}:${methodName}] the provided texture asset key was not found` ); return; } // get the original frame so we can use the image dimensions if (!texture.frames["__BASE"]) { console.warn( `[${NineSlice.name}:${methodName}] the provided texture asset key does not have a base texture` ); return; } // check to see if the texture already has more frames than the original base frame if (texture.getFrameNames(false).length !== 0) { console.debug( `[${NineSlice.name}:${methodName}] the provided texture asset key already has additional frames` ); return; } /** @type {Phaser.Textures.Frame} */ const baseFrame = texture.frames["__BASE"]; // start in the top left corner for our first cut texture.add( ASSET_CUT_FRAMES.TL, 0, 0, 0, this.#cornerCutSize, this.#cornerCutSize ); // for the middle, we need to calculate the width remaining after we take our two cuts texture.add( ASSET_CUT_FRAMES.TM, 0, this.#cornerCutSize, 0, baseFrame.width - this.#cornerCutSize * 2, this.#cornerCutSize ); // for the top right side corner we just need to take the total width and remove the cut length texture.add( ASSET_CUT_FRAMES.TR, 0, baseFrame.width - this.#cornerCutSize, 0, this.#cornerCutSize, this.#cornerCutSize ); // for the middle left, we take the overall image height and subtract the size of the two corner cuts to get new height texture.add( ASSET_CUT_FRAMES.ML, 0, 0, this.#cornerCutSize, this.#cornerCutSize, baseFrame.height - this.#cornerCutSize * 2 ); // for the middle, we need to take the overall image height and width, subtract the two corner cuts to get the new dimensions texture.add( ASSET_CUT_FRAMES.MM, 0, this.#cornerCutSize, this.#cornerCutSize, baseFrame.width - this.#cornerCutSize * 2, baseFrame.height - this.#cornerCutSize * 2 ); // for the middle right, we need to do similar logic that was done for the middle left piece texture.add( ASSET_CUT_FRAMES.MR, 0, baseFrame.width - this.#cornerCutSize, this.#cornerCutSize, this.#cornerCutSize, baseFrame.height - this.#cornerCutSize * 2 ); // for the bottom left, we take the overall image height and subtract the corner cut texture.add( ASSET_CUT_FRAMES.BL, 0, 0, baseFrame.height - this.#cornerCutSize, this.#cornerCutSize, this.#cornerCutSize ); // for the middle and right, we do the same logic we did in th tm and tr frames, just at a lower y value texture.add( ASSET_CUT_FRAMES.BM, 0, this.#cornerCutSize, baseFrame.height - this.#cornerCutSize, baseFrame.width - this.#cornerCutSize * 2, this.#cornerCutSize ); texture.add( ASSET_CUT_FRAMES.BR, 0, baseFrame.width - this.#cornerCutSize, baseFrame.height - this.#cornerCutSize, this.#cornerCutSize, this.#cornerCutSize ); } /** * Uses the provided Phaser 3 Scene to create nine image game objects which use the nine slice image textures that were * created on this NineSlice instance. The objects are then positioned and aligned so that they form just one image that * is scaled properly. The new objects are returned in a Phaser 3 Container game object. * @param {Phaser.Scene} scene the Phaser 3 Scene that the image and container game objects will be added to * @param {number} targetWidth the width of the new nine slice image that the original image should be scaled to * @param {number} targetHeight the height of the new nine slice image that the original image should be scaled to * @param {string} assetKey the name of the asset to pull from the Phaser 3 Texture Manager * @returns {Phaser.GameObjects.Container} */ createNineSliceContainer(scene, targetWidth, targetHeight, assetKey) { const tl = scene.add .image(0, 0, assetKey, ASSET_CUT_FRAMES.TL) .setOrigin(0); tl.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.TL); const tm = scene.add .image(tl.displayWidth, 0, assetKey, ASSET_CUT_FRAMES.TM) .setOrigin(0); tm.displayWidth = targetWidth - this.#cornerCutSize * 2; tm.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.TM); const tr = scene.add .image( tl.displayWidth + tm.displayWidth, 0, assetKey, ASSET_CUT_FRAMES.TR ) .setOrigin(0); tr.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.TR); const ml = scene.add .image(0, tl.displayHeight, assetKey, ASSET_CUT_FRAMES.ML) .setOrigin(0); ml.displayHeight = targetHeight - this.#cornerCutSize * 2; ml.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.ML); const mm = scene.add .image(ml.displayWidth, ml.y, assetKey, ASSET_CUT_FRAMES.MM) .setOrigin(0); mm.displayHeight = targetHeight - this.#cornerCutSize * 2; mm.displayWidth = targetWidth - this.#cornerCutSize * 2; mm.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.MM); const mr = scene.add .image( ml.displayWidth + mm.displayWidth, ml.y, assetKey, ASSET_CUT_FRAMES.MR ) .setOrigin(0); mr.displayHeight = mm.displayHeight; mr.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.MR); const bl = scene.add .image( 0, tl.displayHeight + ml.displayHeight, assetKey, ASSET_CUT_FRAMES.BL ) .setOrigin(0); bl.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.BL); const bm = scene.add .image(bl.displayWidth, bl.y, assetKey, ASSET_CUT_FRAMES.BM) .setOrigin(0); bm.displayWidth = tm.displayWidth; bm.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.BM); const br = scene.add .image( bl.displayWidth + bm.displayWidth, bl.y, assetKey, ASSET_CUT_FRAMES.BR ) .setOrigin(0); br.setData(ASSET_CUT_FRAME_DATA_MANAGER_NAME, ASSET_CUT_FRAMES.BR); // finally, create a container to group our new game objects together in return scene.add.container(0, 0, [tl, tm, tr, ml, mm, mr, bl, bm, br]); } /** * Updates the nine image game objects in the provided Phaser 3 container to use another nine slice texture that was previously created and stored * in the Phaser 3 Texture Manager. * @param {Phaser.Textures.TextureManager} textureManager the Phaser 3 Texture Manger instance that will be used for getting textures from * @param {Phaser.GameObjects.Container} container the Phaser 3 container that was created as a result of calling the createNineSliceContainer method, or * a Phaser 3 container game object that has nine game objects that each have a saved data attribute called `assetCutFrame` which has the value * of one of the unique ASSET_CUT_FRAMES values. * @param {string} assetKey the name of the asset to pull from the Phaser 3 Texture Manager * @returns {void} */ updateNineSliceContainerTexture(textureManager, container, assetKey) { const methodName = "updateNineSliceContainerTexture"; // validate we have the provided texture for the given asset key const texture = textureManager.get(assetKey); if (texture.key === "__MISSING") { console.warn( `[${NineSlice.name}:${methodName}] the provided texture asset key was not found` ); return; } // check to see if the texture has more than the base frames defined if (texture.getFrameNames(false).length === 0) { console.warn( `[${NineSlice.name}:${methodName}] the provided texture asset key does not have the required nine slice frames` ); return; } container.each((gameObject) => { /** @type {Phaser.GameObjects.Image} */ const phaserImageGameObject = gameObject; if (gameObject.type !== "Image") { return; } const frameName = phaserImageGameObject.getData( ASSET_CUT_FRAME_DATA_MANAGER_NAME ); if (frameName === undefined) { return; } phaserImageGameObject.setTexture(assetKey, frameName); }); } } // scene-transition.js /** * @param {Phaser.Scene} scene * @param {object} [options] * @param {() => void} [options.callback] * @param {boolean} [options.skipSceneTransition=false] */ function createSceneTransition(scene, options) { const skipSceneTransition = options?.skipSceneTransition || false; if (skipSceneTransition) { if (options?.callback) { options.callback(); } return; } const { width, height } = scene.scale; const rectShape = new Phaser.Geom.Rectangle(0, height / 2, width, 0); const g = scene.add.graphics().fillRectShape(rectShape).setDepth(-1); const mask = g.createGeometryMask(); scene.cameras.main.setMask(mask); scene.tweens.add({ onUpdate: () => { g.clear().fillRectShape(rectShape); }, delay: 400, duration: 800, height: { ease: Phaser.Math.Easing.Expo.InOut, from: 0, start: 0, to: height, }, y: { ease: Phaser.Math.Easing.Expo.InOut, from: height / 2, start: height / 2, to: 0, }, targets: rectShape, onComplete: () => { mask.destroy(); scene.cameras.main.clearMask(); if (options?.callback) { options.callback(); } }, }); } // state-machine.js /** * @typedef State * @type {object} * @property {string} name * @property {() => void} [onEnter] */ class StateMachine { /** @type {Map} */ #states; /** @type {State | undefined} */ #currentState; /** @type {string} */ #id; /** @type {object | undefined} */ #context; /** @type {boolean} */ #isChangingState; /** @type {string[]} */ #changingStateQueue; /** * @param {string} id the unique identifier for this state machine instance. * @param {object} [context] the context to use when invoking each method on the state. */ constructor(id, context) { this.#id = id; this.#context = context; this.#isChangingState = false; this.#changingStateQueue = []; this.#currentState = undefined; this.#states = new Map(); } /** @type {string | undefined} */ get currentStateName() { return this.#currentState?.name; } /** * Used for processing any queued states and is meant to be called during every step of our game loop. * @returns {void} */ update() { if (this.#changingStateQueue.length > 0) { this.setState(this.#changingStateQueue.shift()); } } /** * Updates the current state of the state machine to the provided state name. If the state machine * is already transitioning states, or if there is a queue of states, the new state will be added * to that queue and processed after the queue is processed. * @param {string} name * @returns {void} */ setState(name) { const methodName = "setState"; if (!this.#states.has(name)) { console.warn( `[${StateMachine.name}-${ this.#id }:${methodName}] tried to change to unknown state: ${name}` ); return; } if (this.#isCurrentState(name)) { return; } if (this.#isChangingState) { this.#changingStateQueue.push(name); return; } this.#isChangingState = true; console.log( `[${StateMachine.name}-${this.#id}:${methodName}] change from ${ this.#currentState?.name ?? "none" } to ${name}` ); this.#currentState = this.#states.get(name); if (this.#currentState.onEnter) { console.log( `[${StateMachine.name}-${this.#id}:${methodName}] ${ this.#currentState.name } on enter invoked` ); this.#currentState.onEnter(); } this.#isChangingState = false; } /** * Adds a new state to the current state machine instance. If a state already exists with the given name * that previous state will be replaced with the new state that was provided. * @param {State} state * @returns {void} */ addState(state) { this.#states.set(state.name, { name: state.name, onEnter: this.#context ? state.onEnter?.bind(this.#context) : state.onEnter, }); } /** * Checks to see if the provided state name is the state that is currently being handled by the state machine instance. * @param {string} name * @returns {boolean} */ #isCurrentState(name) { if (!this.#currentState) { return false; } return this.#currentState.name === name; } } // text-utils.js /** * @typedef AnimateTextConfig * @type {object} * @property {() => void} [callback] * @property {number} [delay=25] */ /** * * @param {Phaser.Scene} scene the Phaser 3 Scene the time event will be added to * @param {Phaser.GameObjects.Text} target the Phaser 3 Text Game Object that will be animated * @param {string} text the text to display on the target game object * @param {AnimateTextConfig} [config] * @returns {void} */ function animateText(scene, target, text, config) { const length = text.length; let i = 0; scene.time.addEvent({ callback: () => { target.text += text[i]; ++i; if (i === length - 1 && config?.callback) { config.callback(); } }, repeat: length - 1, delay: config?.delay || 25, }); } const CANNOT_READ_SIGN_TEXT = "You cannot read the sign from this direction."; const SAMPLE_TEXT = "Make sure you talk to npcs for helpful tips!"; // character.js /** * @typedef CharacterIdleFrameConfig * @type {object} * @property {number} LEFT * @property {number} RIGHT * @property {number} UP * @property {number} DOWN * @property {number} NONE */ /** * @typedef CharacterConfig * @type {object} * @property {Phaser.Scene} scene the Phaser 3 Scene the battle menu will be added to * @property {string} assetKey the name of the asset key that should be used for this character * @property {Coordinate} [origin={ x:0, y:0 }] * @property {Coordinate} position the starting position of the character * @property {Direction} direction the direction the character is currently facing * @property {() => void} [spriteGridMovementFinishedCallback] an optional callback that will be called after each step of the grid movement is complete * @property {CharacterIdleFrameConfig} idleFrameConfig * @property {Phaser.Tilemaps.TilemapLayer} [collisionLayer] * @property {Character[]} [otherCharactersToCheckForCollisionsWith=[]] * @property {() => void} [spriteChangedDirectionCallback] */ class Character { /** @type {Phaser.Scene} */ _scene; /** @type {Phaser.GameObjects.Sprite} */ _phaserGameObject; /** @protected @type {Direction} */ _direction; /** @protected @type {boolean} */ _isMoving; /** @protected @type {Coordinate} */ _targetPosition; /** @protected @type {Coordinate} */ _previousTargetPosition; /** @protected @type {() => void | undefined} */ _spriteGridMovementFinishedCallback; /** @protected @type {CharacterIdleFrameConfig} */ _idleFrameConfig; /** @protected @type {Coordinate} */ _origin; /** @protected @type {Phaser.Tilemaps.TilemapLayer | undefined} */ _collisionLayer; /** @protected @type {Character[]} */ _otherCharactersToCheckForCollisionsWith; /** @protected @type {() => void | undefined} */ _spriteChangedDirectionCallback; /** * @param {CharacterConfig} config */ constructor(config) { if (this.constructor === Character) { throw new Error( "Character is an abstract class and cannot be instantiated." ); } this._scene = config.scene; this._direction = config.direction; this._isMoving = false; this._targetPosition = { ...config.position }; this._previousTargetPosition = { ...config.position }; this._idleFrameConfig = config.idleFrameConfig; this._origin = config.origin ? { ...config.origin } : { x: 0, y: 0 }; this._collisionLayer = config.collisionLayer; this._otherCharactersToCheckForCollisionsWith = config.otherCharactersToCheckForCollisionsWith || []; this._phaserGameObject = this._scene.add .sprite( config.position.x, config.position.y, config.assetKey, this._getIdleFrame() ) .setOrigin(this._origin.x, this._origin.y); this._spriteGridMovementFinishedCallback = config.spriteGridMovementFinishedCallback; this._spriteChangedDirectionCallback = config.spriteChangedDirectionCallback; } /** @type {Phaser.GameObjects.Sprite} */ get sprite() { return this._phaserGameObject; } /** @type {boolean} */ get isMoving() { return this._isMoving; } /** @type {Direction} */ get direction() { return this._direction; } /** * @param {Direction} direction * @returns {void} */ moveCharacter(direction) { if (this._isMoving) { return; } this._moveSprite(direction); } /** * @param {Character} character * @returns {void} */ addCharacterToCheckForCollisionsWith(character) { this._otherCharactersToCheckForCollisionsWith.push(character); } /** * @param {DOMHighResTimeStamp} time * @returns {void} */ update(time) { if (this._isMoving) { return; } // stop current animation and show idle frame const idleFrame = this._phaserGameObject.anims.currentAnim?.frames[1].frame.name; this._phaserGameObject.anims.stop(); if (!idleFrame) { return; } switch (this._direction) { case DIRECTION.DOWN: case DIRECTION.LEFT: case DIRECTION.RIGHT: case DIRECTION.UP: this._phaserGameObject.setFrame(idleFrame); break; case DIRECTION.NONE: break; default: // We should never reach this default case exhaustiveGuard(this._direction); } } /** * @protected * @returns {number} */ _getIdleFrame() { return this._idleFrameConfig[this._direction]; } /** * @protected * @param {Direction} direction * @returns {void} */ _moveSprite(direction) { const changedDirection = this._direction !== direction; this._direction = direction; if (changedDirection) { if (this._spriteChangedDirectionCallback !== undefined) { this._spriteChangedDirectionCallback(); } } if (this._isBlockingTile()) { return; } this._isMoving = true; this.#handleSpriteMovement(); } /** * @protected * @returns {boolean} */ _isBlockingTile() { if (this._direction === DIRECTION.NONE) { return false; } const targetPosition = { ...this._targetPosition }; const updatedPosition = getTargetPositionFromGameObjectPositionAndDirection( targetPosition, this._direction ); return ( this.#doesPositionCollideWithCollisionLayer(updatedPosition) || this.#doesPositionCollideWithOtherCharacter(updatedPosition) ); } /** * @returns {void} */ #handleSpriteMovement() { if (this._direction === DIRECTION.NONE) { return; } const updatedPosition = getTargetPositionFromGameObjectPositionAndDirection( this._targetPosition, this._direction ); this._previousTargetPosition = { ...this._targetPosition }; this._targetPosition.x = updatedPosition.x; this._targetPosition.y = updatedPosition.y; this._scene.add.tween({ delay: 0, duration: 600, y: { from: this._phaserGameObject.y, start: this._phaserGameObject.y, to: this._targetPosition.y, }, x: { from: this._phaserGameObject.x, start: this._phaserGameObject.x, to: this._targetPosition.x, }, targets: this._phaserGameObject, onComplete: () => { this._isMoving = false; this._previousTargetPosition = { ...this._targetPosition }; if (this._spriteGridMovementFinishedCallback) { this._spriteGridMovementFinishedCallback(); } }, }); } /** * @param {Coordinate} position * @returns {boolean} */ #doesPositionCollideWithCollisionLayer(position) { if (!this._collisionLayer) { return false; } const { x, y } = position; const tile = this._collisionLayer.getTileAtWorldXY(x, y, true); return tile.index !== -1; } /** * @param {Coordinate} position * @returns {boolean} */ #doesPositionCollideWithOtherCharacter(position) { const { x, y } = position; if (this._otherCharactersToCheckForCollisionsWith.length === 0) { return false; } // checks if the new position that this character wants to move to is the same position that another // character is currently at, or was previously at and is moving towards currently const collidesWithACharacter = this._otherCharactersToCheckForCollisionsWith.some((character) => { return ( (character._targetPosition.x === x && character._targetPosition.y === y) || (character._previousTargetPosition.x === x && character._previousTargetPosition.y === y) ); }); return collidesWithACharacter; } } // npc.js /** * @typedef {keyof typeof NPC_MOVEMENT_PATTERN} NpcMovementPattern */ /** @enum {NpcMovementPattern} */ const NPC_MOVEMENT_PATTERN = Object.freeze({ IDLE: "IDLE", CLOCKWISE: "CLOCKWISE", }); /** * @typedef NPCPath * @type {Object.} */ /** * @typedef NPCConfigProps * @type {object} * @property {number} frame * @property {string[]} messages * @property {NPCPath} npcPath * @property {NpcMovementPattern} movementPattern */ /** * @typedef {Omit & NPCConfigProps} NPCConfig */ class NPC extends Character { /** @type {string[]} */ #messages; /** @type {boolean} */ #talkingToPlayer; /** @type {NPCPath} */ #npcPath; /** @type {number} */ #currentPathIndex; /** @type {NpcMovementPattern} */ #movementPattern; /** @type {number} */ #lastMovementTime; /** * @param {NPCConfig} config */ constructor(config) { super({ ...config, assetKey: CHARACTER_ASSET_KEYS.NPC, origin: { x: 0, y: 0 }, idleFrameConfig: { DOWN: config.frame, UP: config.frame + 1, NONE: config.frame, LEFT: config.frame + 2, RIGHT: config.frame + 2, }, }); this.#messages = config.messages; this.#talkingToPlayer = false; this.#npcPath = config.npcPath; this.#currentPathIndex = 0; this.#movementPattern = config.movementPattern; this.#lastMovementTime = Phaser.Math.Between(3500, 5000); this._phaserGameObject.setScale(4); } /** @type {string[]} */ get messages() { return [...this.#messages]; } /** @type {boolean} */ get isTalkingToPlayer() { return this.#talkingToPlayer; } /** * @param {boolean} val */ set isTalkingToPlayer(val) { this.#talkingToPlayer = val; } /** * @param {Direction} playerDirection * @returns {void} */ facePlayer(playerDirection) { switch (playerDirection) { case DIRECTION.DOWN: this._phaserGameObject .setFrame(this._idleFrameConfig.UP) .setFlipX(false); break; case DIRECTION.LEFT: this._phaserGameObject .setFrame(this._idleFrameConfig.RIGHT) .setFlipX(false); break; case DIRECTION.RIGHT: this._phaserGameObject .setFrame(this._idleFrameConfig.LEFT) .setFlipX(true); break; case DIRECTION.UP: this._phaserGameObject .setFrame(this._idleFrameConfig.DOWN) .setFlipX(false); break; case DIRECTION.NONE: break; default: exhaustiveGuard(playerDirection); } } /** * @param {DOMHighResTimeStamp} time * @returns {void} */ update(time) { if (this._isMoving) { return; } if (this.#talkingToPlayer) { return; } super.update(time); if (this.#movementPattern === NPC_MOVEMENT_PATTERN.IDLE) { return; } if (this.#lastMovementTime < time) { /** @type {Direction} */ let characterDirection = DIRECTION.NONE; let nextPosition = this.#npcPath[this.#currentPathIndex + 1]; const prevPosition = this.#npcPath[this.#currentPathIndex]; if ( prevPosition.x !== this._phaserGameObject.x || prevPosition.y !== this._phaserGameObject.y ) { nextPosition = this.#npcPath[this.#currentPathIndex]; } else { if (nextPosition === undefined) { nextPosition = this.#npcPath[0]; this.#currentPathIndex = 0; } else { this.#currentPathIndex = this.#currentPathIndex + 1; } } if (nextPosition.x > this._phaserGameObject.x) { characterDirection = DIRECTION.RIGHT; } else if (nextPosition.x < this._phaserGameObject.x) { characterDirection = DIRECTION.LEFT; } else if (nextPosition.y < this._phaserGameObject.y) { characterDirection = DIRECTION.UP; } else if (nextPosition.y > this._phaserGameObject.y) { characterDirection = DIRECTION.DOWN; } this.moveCharacter(characterDirection); this.#lastMovementTime = time + Phaser.Math.Between(2000, 5000); } } /** * @param {Direction} direction * @returns {void} */ moveCharacter(direction) { super.moveCharacter(direction); switch (this._direction) { case DIRECTION.DOWN: case DIRECTION.RIGHT: case DIRECTION.UP: if ( !this._phaserGameObject.anims.isPlaying || this._phaserGameObject.anims.currentAnim?.key !== `NPC_1_${this._direction}` ) { this._phaserGameObject.play(`NPC_1_${this._direction}`); this._phaserGameObject.setFlipX(false); } break; case DIRECTION.LEFT: if ( !this._phaserGameObject.anims.isPlaying || this._phaserGameObject.anims.currentAnim?.key !== `NPC_1_${DIRECTION.RIGHT}` ) { this._phaserGameObject.play(`NPC_1_${DIRECTION.RIGHT}`); this._phaserGameObject.setFlipX(true); } break; case DIRECTION.NONE: break; default: // We should never reach this default case exhaustiveGuard(this._direction); } } } // player.js /** * @typedef {Omit} PlayerConfig */ class Player extends Character { /** * @param {PlayerConfig} config */ constructor(config) { super({ ...config, assetKey: CHARACTER_ASSET_KEYS.PLAYER, origin: { x: 0, y: 0.2 }, idleFrameConfig: { DOWN: 7, UP: 1, NONE: 7, LEFT: 10, RIGHT: 4, }, }); } /** * @param {Direction} direction * @returns {void} */ moveCharacter(direction) { super.moveCharacter(direction); switch (this._direction) { case DIRECTION.DOWN: case DIRECTION.LEFT: case DIRECTION.RIGHT: case DIRECTION.UP: if ( !this._phaserGameObject.anims.isPlaying || this._phaserGameObject.anims.currentAnim?.key !== `PLAYER_${this._direction}` ) { this._phaserGameObject.play(`PLAYER_${this._direction}`); } break; case DIRECTION.NONE: break; default: // We should never reach this default case exhaustiveGuard(this._direction); } } } // menu-config const MENU_COLOR = Object.freeze({ 1: { main: 0x32454c, border: 0x6d9aa8, }, 2: { main: 0x324c3a, border: 0x6da87d, }, 3: { main: 0x38324c, border: 0x796da8, }, }); // menu.js /** * @typedef {keyof typeof MENU_OPTIONS} MenuOptions */ /** @enum {MenuOptions} */ const MENU_OPTIONS = Object.freeze({ MONSTERDEX: "MONSTERDEX", MONSTERS: "MONSTERS", BAG: "BAG", SAVE: "SAVE", OPTIONS: "OPTIONS", EXIT: "EXIT", }); /** @type {Phaser.Types.GameObjects.Text.TextStyle} */ const MENU_TEXT_STYLE = { fontFamily: "Calibri", color: "#FFFFFF", fontSize: "32px", }; class Menu { /** @type {Phaser.Scene} */ #scene; /** @type {number} */ #padding; /** @type {number} */ #width; /** @type {number} */ #height; /** @type {Phaser.GameObjects.Graphics} */ #graphics; /** @type {Phaser.GameObjects.Container} */ #container; /** @type {boolean} */ #isVisible; /** @type {MenuOptions[]} */ #availableMenuOptions; /** @type {Phaser.GameObjects.Text[]} */ #menuOptionsTextGameObjects; /** @type {number} */ #selectedMenuOptionIndex; /** @type {MenuOptions} */ #selectedMenuOption; /** @type {Phaser.GameObjects.Image} */ #userInputCursor; /** * @param {Phaser.Scene} scene */ constructor(scene) { this.#scene = scene; this.#padding = 4; this.#width = 300; this.#availableMenuOptions = [MENU_OPTIONS.SAVE, MENU_OPTIONS.EXIT]; this.#menuOptionsTextGameObjects = []; this.#selectedMenuOptionIndex = 0; // calculate height based on currently available options this.#height = 10 + this.#padding * 2 + this.#availableMenuOptions.length * 50; this.#graphics = this.#createGraphics(); this.#container = this.#scene.add.container(0, 0, [this.#graphics]); // update menu container with menu options for (let i = 0; i < this.#availableMenuOptions.length; i += 1) { const y = 10 + 50 * i + this.#padding; const textObj = this.#scene.add.text( 40 + this.#padding, y, this.#availableMenuOptions[i], MENU_TEXT_STYLE ); this.#menuOptionsTextGameObjects.push(textObj); this.#container.add(textObj); } // add player input cursor this.#userInputCursor = this.#scene.add.image( 20 + this.#padding, 28 + this.#padding, UI_ASSET_KEYS.CURSOR_WHITE ); this.#userInputCursor.setScale(2.5); this.#container.add(this.#userInputCursor); this.hide(); } /** @type {boolean} */ get isVisible() { return this.#isVisible; } /** @type {MenuOptions} */ get selectedMenuOption() { return this.#selectedMenuOption; } /** * @returns {void} */ show() { const { right, top } = this.#scene.cameras.main.worldView; const startX = right - this.#padding * 2 - this.#width; const startY = top + this.#padding * 2; this.#container.setPosition(startX, startY); this.#container.setAlpha(1); this.#isVisible = true; } /** * @returns {void} */ hide() { this.#container.setAlpha(0); this.#selectedMenuOptionIndex = 0; this.#moveMenuCursor(DIRECTION.NONE); this.#isVisible = false; } /** * @param {Direction|'OK'|'CANCEL'} input * @returns {void} */ handlePlayerInput(input) { if (input === "CANCEL") { this.hide(); return; } if (input === "OK") { this.#handleSelectedMenuOption(); return; } // update selected menu option based on player input this.#moveMenuCursor(input); } /** * @returns {Phaser.GameObjects.Graphics} */ #createGraphics() { const g = this.#scene.add.graphics(); const menuColor = this.#getMenuColorsFromDataManager(); g.fillStyle(menuColor.main, 1); g.fillRect(1, 0, this.#width - 1, this.#height - 1); g.lineStyle(8, menuColor.border, 1); g.strokeRect(0, 0, this.#width, this.#height); g.setAlpha(0.9); return g; } /** * @param {Direction} direction * @returns {void} */ #moveMenuCursor(direction) { switch (direction) { case DIRECTION.UP: this.#selectedMenuOptionIndex -= 1; if (this.#selectedMenuOptionIndex < 0) { this.#selectedMenuOptionIndex = this.#availableMenuOptions.length - 1; } break; case DIRECTION.DOWN: this.#selectedMenuOptionIndex += 1; if ( this.#selectedMenuOptionIndex > this.#availableMenuOptions.length - 1 ) { this.#selectedMenuOptionIndex = 0; } break; case DIRECTION.LEFT: case DIRECTION.RIGHT: return; case DIRECTION.NONE: break; default: exhaustiveGuard(direction); } const x = 20 + this.#padding; const y = 28 + this.#padding + this.#selectedMenuOptionIndex * 50; this.#userInputCursor.setPosition(x, y); } /** * @returns {void} */ #handleSelectedMenuOption() { this.#selectedMenuOption = this.#availableMenuOptions[this.#selectedMenuOptionIndex]; } /** * @returns {{ main: number; border: number; }} */ #getMenuColorsFromDataManager() { /** @type {MenuColorOptions} */ const chosenMenuColor = dataManager.store.get( DATA_MANAGER_STORE_KEYS.OPTIONS_MENU_COLOR ); if (chosenMenuColor === undefined) { return MENU_COLOR[1]; } switch (chosenMenuColor) { case 0: return MENU_COLOR[1]; case 1: return MENU_COLOR[2]; case 2: return MENU_COLOR[3]; default: exhaustiveGuard(chosenMenuColor); } } } // dialog-ui.js /** @type {Phaser.Types.GameObjects.Text.TextStyle} */ const UI_TEXT_STYLE = Object.freeze({ fontFamily: "Calibri", color: "black", fontSize: "32px", wordWrap: { width: 0 }, }); class DialogUi { /** @type {Phaser.Scene} */ #scene; /** @type {number} */ #padding; /** @type {number} */ #width; /** @type {number} */ #height; /** @type {Phaser.GameObjects.Container} */ #container; /** @type {boolean} */ #isVisible; /** @type {Phaser.GameObjects.Image} */ #userInputCursor; /** @type {Phaser.Tweens.Tween} */ #userInputCursorTween; /** @type {Phaser.GameObjects.Text} */ #uiText; /** @type {boolean} */ #textAnimationPlaying; /** @type {string[]} */ #messagesToShow; /** * @param {Phaser.Scene} scene * @param {number} width */ constructor(scene, width) { this.#scene = scene; this.#padding = 90; this.#width = width - this.#padding * 2; this.#height = 124; this.#textAnimationPlaying = false; this.#messagesToShow = []; const panel = this.#scene.add .rectangle(0, 0, this.#width, this.#height, 0xede4f3, 0.9) .setOrigin(0) .setStrokeStyle(8, 0x905ac2, 1); this.#container = this.#scene.add.container(0, 0, [panel]); this.#uiText = this.#scene.add.text(18, 12, CANNOT_READ_SIGN_TEXT, { ...UI_TEXT_STYLE, ...{ wordWrap: { width: this.#width - 18 } }, }); this.#container.add(this.#uiText); this.#createPlayerInputCursor(); this.hideDialogModal(); } /** @type {boolean} */ get isVisible() { return this.#isVisible; } /** @type {boolean} */ get isAnimationPlaying() { return this.#textAnimationPlaying; } /** @type {boolean} */ get moreMessagesToShow() { return this.#messagesToShow.length > 0; } /** * @param {string[]} messages * @returns {void} */ showDialogModal(messages) { this.#messagesToShow = [...messages]; const { x, bottom } = this.#scene.cameras.main.worldView; const startX = x + this.#padding; const startY = bottom - this.#height - this.#padding / 4; this.#container.setPosition(startX, startY); this.#userInputCursorTween.restart(); this.#container.setAlpha(1); this.#isVisible = true; this.showNextMessage(); } /** * @returns {void} */ showNextMessage() { if (this.#messagesToShow.length === 0) { return; } this.#uiText.setText("").setAlpha(1); animateText(this.#scene, this.#uiText, this.#messagesToShow.shift(), { delay: dataManager.getAnimatedTextSpeed(), callback: () => { this.#textAnimationPlaying = false; }, }); this.#textAnimationPlaying = true; } /** * @returns {void} */ hideDialogModal() { this.#container.setAlpha(0); this.#userInputCursorTween.pause(); this.#isVisible = false; } /** * @returns {void} */ #createPlayerInputCursor() { const y = this.#height - 24; this.#userInputCursor = this.#scene.add.image( this.#width - 16, y, UI_ASSET_KEYS.CURSOR ); this.#userInputCursor.setAngle(90).setScale(4.5, 2); this.#userInputCursorTween = this.#scene.add.tween({ delay: 0, duration: 500, repeat: -1, y: { from: y, start: y, to: y + 6, }, targets: this.#userInputCursor, }); this.#userInputCursorTween.pause(); this.#container.add(this.#userInputCursor); } } // main.js window.phaserGame = new Phaser.Game({ parent: "renderDiv", type: Phaser.CANVAS, pixelArt: false, scale: { width: 1024, height: 576, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, backgroundColor: "#000000", title: "Monster Tamer by Scott Westover", description: "Please support Scott Westover while he works to complete this project <3" + "The completed code for this part of the project can be found here on GitHub:" + "https://github.com/devshareacademy/monster-tamer.git" + "Playlist for the series:" + "https://youtube.com/playlist?list=PLmcXe0-sfoSgq-pyXrFx0GZjHbvoVUW8t" + "You can find a playable version of the game over on Itch.io here:" + "https://galemius.itch.io/monster-tamer'" }); window.phaserGame.scene.add(SCENE_KEYS.PRELOAD_SCENE, PreloadScene); window.phaserGame.scene.add(SCENE_KEYS.WORLD_SCENE, WorldScene); window.phaserGame.scene.add(SCENE_KEYS.BATTLE_SCENE, BattleScene); window.phaserGame.scene.add(SCENE_KEYS.TITLE_SCENE, TitleScene); window.phaserGame.scene.add(SCENE_KEYS.OPTIONS_SCENE, OptionsScene); window.phaserGame.scene.add(SCENE_KEYS.TEST_SCENE, TestScene); window.phaserGame.scene.start(SCENE_KEYS.PRELOAD_SCENE);