feature(information): Encounters Info Modal (pokeclicker#5343)

explain in the PR

Co-authored-by: Danial <[email protected]>

src/components/dungeonInfoModal.html

@@ -0,0 +1,45 @@
+<div class="modal fade noselect" id="dungeonInfoModal" tabindex="-1" role="dialog" aria-labelledby="dungeonInfoLabel">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg role="document">
+        <div class="modal-content">
+            <div class="modal-header" style='justify-content: space-around;'>
+                <h4 class="modal-title" data-bind="text: DungeonInfo.getFullName()">name</h4>
+                <button type="button" class="btn btn-danger position-absolute" data-dismiss="modal" style="right:0; top:0; font-size: 18px; font-weight: 700;">×</button>
+            </div>
+            <div class="modal-body pt-0 overflow-hidden" style="background-color: inherit;">
+                <!-- ko foreach: { data: Object.entries(DungeonInfo.getLootList()), as: 'lootEntries' } -->
+                <div class="bg-primary text-left rounded px-3 py-2 mb-1 d-flex align-items-center" data-toggle="collapse" data-bind="attr: { 'data-target': `#tier-${lootEntries[0]}` }">
+                    <img width="42px" data-bind="attr: { src: `assets/images/dungeons/chest-${lootEntries[0]}.png` }" />
+                    <h5 class="my-0 mx-1 text-light d-inline-block" data-bind="text: GameConstants.camelCaseToString(lootEntries[0])">Tier name</h5>
+                </div>
+                <div class="collapse show" data-bind="attr: { 'id': `tier-${lootEntries[0]}` }">
+                    <div class="card-body pt-2 p-1">
+                        <div class="row justify-content-center">
+                            <!-- ko foreach: { data: lootEntries[1], as: 'item' } -->
+                            <div class="col-6 col-lg-4 mb-2">
+                                <!-- ko using: PokemonHelper.getPokemonByName(item.loot).name != 'MissingNo.' && !App.game.party.getPokemonByName(item.loot), as: 'isPokemonAndNotCaught' -->
+                                    <!-- ko using: isPokemonAndNotCaught ? '???' : DungeonInfo.getLootName(item.loot), as: 'lootName' -->
+                                        <div class="btn btn-secondary px-1 py-0 d-flex align-items-center text-left" style="cursor: default;">
+                                            <img width="42px" data-bind="attr: { src: DungeonInfo.getLootImage(item.loot) }, 
+                                                style: { 'filter': isPokemonAndNotCaught ? 'brightness(0)' : '' }">
+                                            <div class="flex-grow-1 small ml-2" style="min-width: 0;">
+                                                <div class="text-truncate" data-bind="text: lootName"></div>
+                                            </div>
+                                            <img width="24px" class="lock" src="assets/images/breeding/lock.svg" data-bind="
+                                            tooltip: {
+                                                title: item.requirement?.hint() || '',
+                                                placement: 'bottom',
+                                                trigger: 'hover'
+                                            }, visible: item.requirement" />
+                                        </div>
+                                    <!-- /ko -->
+                                <!-- /ko -->
+                            </div>
+                            <!-- /ko -->
+                        </div>
+                    </div>
+                </div>
+                <!-- /ko -->
+            </div>
+        </div>
+    </div>
+</div>

src/components/routeInfoModal.html

@@ -0,0 +1,42 @@
+<div class="modal fade noselect" id="routeInfoModal" tabindex="-1" role="dialog" aria-labelledby="routeInfoModalLabel">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header" style='justify-content: space-around;'>
+                <h4 class="modal-title" data-bind="text: RouteInfo.getFullName()">name</h4>
+                <button type="button" class="btn btn-danger position-absolute" data-dismiss="modal" style="right:0; top:0; font-size: 18px; font-weight: 700;">×</button>
+            </div>
+            <div class="modal-body pt-0 overflow-hidden" style="background-color: inherit;">
+                <ul class="row justify-content-center w-100 p-0 m-0" data-bind="foreach: RouteInfo.pokemonList()">
+                    <li class="col-sm-4 col-md-3 col-lg-2 pokedexEntry" data-bind="style:{background: PokedexHelper.getBackgroundColors($data.name)}">
+                        <span class="id pokedex-top-text" data-bind="text: (($data.id > 0 && App.game.party.alreadyCaughtPokemon($data.id)) ? Math.floor($data.id) + '' : '???').padStart(3, 0)">number</span>
+                        <div data-bind="visible: App.game.party.alreadyCaughtPokemonByName(name)" style="position: absolute;right: 2px;top: -15px;">
+                            <img width="18px" src="" data-bind="attr: { src: `assets/images/pokeball/Pokeball${App.game.party.alreadyCaughtPokemon($data.id, true) ? '-shiny' : ''}.svg`}"/>
+                        </div>
+                        <!-- ko if: App.game.party.alreadyCaughtPokemonByName(name) -->
+                        <div data-bind="if: App.game.party.getPokemon($data.id)?.pokerus" style="position: absolute;left: 2px;top: -11px;">
+                            <img width="32px" src="" data-bind="attr: { src: `assets/images/breeding/pokerus/${GameConstants.Pokerus[App.game.party.getPokemon($data.id)?.pokerus]}.png`},
+                            tooltip: {
+                                title: App.game.party.getPokemon($data.id)?.pokerus >= GameConstants.Pokerus.Contagious ? `EVs: ${App.game.party.getPokemon($data.id)?.evs().toLocaleString('en-US')}` : '',
+                                placement: 'bottom',
+                                trigger: 'hover'
+                            }"/>
+                        </div>
+                        <!-- /ko -->
+                        <!-- ko if: $data.roamer -->
+                        <div data-bind="if: $data.roamer" style="position: absolute;left: 2px;bottom: 5px;">
+                            <img width="24px" src="" data-bind="attr: { src: 'assets/images/encountersInfo/roaming.png' },
+                            tooltip: { 
+                                title: 'Roaming Pokémon',
+                                placement: 'bottom',
+                                trigger: 'hover'
+                            }"/>
+                        </div>
+                        <!-- /ko -->
+                        <img src="" class="pokedex-pokemon-sprite" data-bind="css: { 'pokemon-not-seen': !App.game.party.alreadyCaughtPokemon($data.id) }, attr:{ src: PokemonHelper.getImage($data.id)}">
+                        <span class="pokedex-bottom-text text-truncate px-1" data-bind="text: (($data.id > 0 && App.game.party.alreadyCaughtPokemon($data.id)) ? PokemonHelper.displayName($data.name) : '???')">name</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

src/components/townView.html

@@ -50,6 +50,9 @@
                         <div style="line-height: normal;" data-bind="text: $data.toLocaleString('en-US')">0</div>
                         <div style="line-height: normal;">clears</div>
                     </div>
+                    <div class="px-1 clickable d-inline-block ml-1" style="align-self: center;" data-bind="tooltip: { title: 'Check the Loot available here', trigger: 'hover' }, click: function() { $('#dungeonInfoModal').modal('show') }" data-original-title="" title="">
+                        <img src="assets/images/encountersInfo/encountersInfo.png">
+                    </div>
                 </div>
             </div>
         </div>

src/index.html

@@ -106,6 +106,10 @@
 <!-- Dungeon guides modal-->
 @import "dungeonGuidesModal.html"
 
+<!-- Encounters Info modal-->
+@import "routeInfoModal.html"
+@import "dungeonInfoModal.html"
+
 <!--Templates -->
 @import "templates/currencyTemplate.html"
 @import "templates/caughtStatusTemplate.html"
@@ -181,6 +185,11 @@ <h1 id="gameTitle">PokéClicker</h1>
                         <div class="col no-gutters clickable" data-bind="click: function() {Battle.clickAttack()}" style="height: 280px; display: block;">
                             <h2 class="pageItemTitle" style="display: block;">
                                 <knockout>
+                                    <knockout class="right">
+                                        <div class="px-1 clickable" data-bind="tooltip: { title: 'Check the Pokémon available here', trigger: 'hover' }, click: function() { $('#routeInfoModal').modal('show') }" data-original-title="" title="">
+                                            <img src="assets/images/encountersInfo/encountersInfo.png">
+                                        </div>
+                                    </knockout>
                                     <knockout data-bind="template: { name: 'pokemonNameTemplate', data: { 'pokemon': Battle.enemyPokemon() } }">Pokémon name</knockout>
                                     <knockout data-bind="template: { name: 'caughtStatusTemplate', data: {'status': PartyController.getCaughtStatus(Battle.enemyPokemon().id)}}"></knockout>
                                     <knockout style="position: relative; top: -1px;"

src/scripts/encountersInfo/DungeonInfo.ts

@@ -0,0 +1,51 @@
+class DungeonInfo {
+    public static lootList = ko.pureComputed(() => {
+        return DungeonInfo.getLootList();
+    });
+
+    private static getLootList() {
+        return player.town.dungeon?.lootTable || [];
+    }
+
+    public static getFullName() {
+        return `${DungeonInfo.getDungeonName()} - ${DungeonInfo.getRegionName()} (${DungeonInfo.getSubregionName()})`;
+    }
+
+    private static getDungeonName() {
+        return player.town.name;
+    }
+
+    private static getRegionName() {
+        return GameConstants.camelCaseToString(GameConstants.Region[player.region]);
+    }
+
+    private static getSubregionName() {
+        return player.subregionObject()?.name;
+    }
+
+    public static getLootImage(input) {
+        switch (true) {
+            case typeof BerryType[input] == 'number':
+                return FarmController.getBerryImage(BerryType[GameConstants.humanifyString(input)]);
+            case UndergroundItems.getByName(input) instanceof UndergroundItem:
+                return UndergroundItems.getByName(input).image;
+            case PokemonHelper.getPokemonByName(input).name != 'MissingNo.':
+                return `assets/images/pokemon/${PokemonHelper.getPokemonByName(input).id}.png`;
+            default:
+                return ItemList[input].image;
+        }
+    }
+
+    public static getLootName(input) {
+        switch (true) {
+            case input in ItemList:
+                return ItemList[input]?.displayName;
+            case typeof BerryType[input] == 'number':
+                return `${input} Berry`;
+            case PokemonHelper.getPokemonByName(input).name != 'MissingNo.':
+                return PokemonHelper.displayName(input)();
+            default:
+                return GameConstants.camelCaseToString(GameConstants.humanifyString(input.toLowerCase()));
+        }
+    }
+}

src/scripts/encountersInfo/RouteInfo.ts

@@ -0,0 +1,40 @@
+class RouteInfo {
+    public static pokemonList = ko.pureComputed(() => {
+        return RouteInfo.getPokemonList();
+    });
+
+    public static getPokemonList() {
+        const route = player.route;
+        const region = player.region;
+        const subregion = player.subregion;
+
+        const pokemonArray = [];
+        const roamerGroup = RoamingPokemonList.findGroup(region, subregion);
+        const roamingList = RoamingPokemonList.getSubRegionalGroupRoamers(region, roamerGroup);
+        [...new Set(RouteHelper.getAvailablePokemonList(route, region))].forEach(pokemonName => {
+            pokemonArray.push({id: PokemonHelper.getPokemonByName(pokemonName).id, name: pokemonName, roamer: false});
+        });
+        if (roamingList.length) {
+            [...new Set(RoamingPokemonList.getSubRegionalGroupRoamers(region, roamerGroup))].forEach(pokemon => {
+                pokemonArray.push({id: PokemonHelper.getPokemonByName(pokemon.pokemonName).id, name: pokemon.pokemonName, roamer: true});
+            });
+        }
+        return pokemonArray;
+    }
+
+    public static getFullName() {
+        return `${RouteInfo.getRouteName()} - ${RouteInfo.getRegionName()} (${RouteInfo.getSubregionName()})`;
+    }
+
+    private static getRouteName() {
+        return Routes.getName(player.route, player.region);
+    }
+
+    private static getRegionName() {
+        return GameConstants.camelCaseToString(GameConstants.Region[player.region]);
+    }
+
+    private static getSubregionName() {
+        return player.subregionObject()?.name;
+    }
+}