feat: Background frontend Part for PR #1151

package.json

@@ -174,7 +174,7 @@
     "source-map": "^0.7.4",
     "suncalc": "^1.9.0",
     "supercluster": "^8.0.1",
-    "uicons.js": "2.1.0",
+    "uicons.js": "2.2.0",
     "zustand": "4.4.6"
   },
   "devDependencies": {

packages/locales/lib/human/de.json

@@ -85,6 +85,7 @@
   "all_gyms": "Alle Arenen",
   "lures": " Lockmodule",
   "quests": "Quests",
+  "quest_pokemon": "Quest Pokémon",
   "invasions": "Invasionen",
   "portals": "Portale",
   "submission_cells": "Einreich-Zellen",
@@ -178,7 +179,6 @@
   "min_iv_circle": "min. IV Marker",
   "interaction_ranges": "Interaktionsradius",
   "cannot_connect": "\nVerbindung zum Server derzeit nicht möglich.\nNochmaliges Versuchen führt nur zu mehr Problemen.\nBitte versuche es erneut in ein paar Minuten.\n\n- Map Admin Team",
-  "mad_quest_text": "Native Quests",
   "xs": "XS",
   "primary": "Primär",
   "secondary": "Sekundär",
@@ -477,8 +477,10 @@
   "all": "Alle",
   "with_ar": "Mit AR",
   "without_ar": "Ohne AR",
+  "with_background": "mit Hintergrund",
   "both": "Beide",
   "shiny_probability": "Shinyrate: <0/>",
+  "shiny_sample": "{{percentage}}%: {{shiny}} Shinys/{{checks}} Encounter seit {{date}}",
   "badge_0": "keiner",
   "badge_1": "Basis",
   "badge_2": "Bronze",
@@ -522,9 +524,13 @@
   "disabled": "Deaktiviert",
   "lc_title": "folge deinem Standort",
   "lc_metersUnit": "Meter",
-  "lc_feetUnit": "Fuss",
+  "lc_feetUnit": "Fuß",
   "lc_popup": "Dein Standort befindet sich innerhalb von {distance} {unit} Abstand zu diesem Punkt.",
   "lc_outsideMapBoundsMsg": "Dein Standort scheint sich außerhalb der Grenzen der Karte zu befinden.",
+  "location_error_default": "Standort konnte nicht abgerufen werden",
+  "location_error_permission_denied": "Standortzugriff verweigert. Bitte aktiviere die Standortberechtigungen im Browser.",
+  "location_error_position_unavailable": "Standort ist derzeit nicht verfügbar. Bitte versuche es später erneut.",
+  "location_error_timeout": "Zeitüberschreitung bei der Standortanfrage. Bitte versuche es erneut.",
   "loading_settings": "Lade Einstellungen",
   "refresh_to_continue": "Bitte aktualisiere, bevor du fortfährst",
   "session_expired_title": "Sitzung abgelaufen",
@@ -560,6 +566,7 @@
   "poi": "Wayspots",
   "lure_range": "Lockmodulradius",
   "custom_range": "individueller Radius",
+  "showcase_range": "Showcase Radius",
   "tap_to_toggle": "Tippen zum Umschalten",
   "power_up": "Aufladung",
   "never_alt": "Nie",
@@ -568,6 +575,9 @@
   "seen_lure_encounter": "getroffen am Lockmodul",
   "seen_lure_wild": "Spawn am Lockmodul",
   "seen_wild": "Spawn in der Wildnis",
+  "seen_tappable_encounter": "Tappable Encounter",
+  "seen_tappable_lure_encounter": "Tappable Lockmodul Encounter",
+  "tappable_origin_from": "von",
   "size_0": "alle",
   "size_1": "XXS",
   "size_2": "XS",
@@ -630,7 +640,13 @@
   "version": "Version",
   "route_tags": "Routen Tags",
   "routes": "Routen",
+  "compact_route_view": "kompakte Routenansicht",
   "route_type": "Routen Typ",
+  "route_short_code": "Routen Code zum teilen: ",
+  "route_anchor_count_one": "{{count}} Route",
+  "route_anchor_count_other": "{{count}} Routen",
+  "shortcode_copied_to_clipboard": "Code in die Zwischenablage kopiert!",
+  "copy_failed": "Kopieren fehlgeschlagen",
   "routes_subtitle": "Zeige Routen und relevante Infos dazu, auf der Map.",
   "description": "Beschreibung",
   "additional_info": "zusätzliche Infos",
@@ -669,7 +685,6 @@
   "done": "Erledigt",
   "fast": "Sofort",
   "charged": "Lade",
-  "cooldown": "Cooldown",
   "offline_mode": "offline Modus",
   "include_sponsored": "einschließlich gesponserte",
   "showcase_color": "Showcasefarbe",
@@ -791,16 +806,78 @@
   "battle_bonus": "Kampfbonus",
   "copy_coordinates": "Koordinaten kopieren",
   "enable_station_popup_coords": "Kraftquellen Koordinaten anzeigen",
-  "station_icons": "Kraftquellen Icons",
+  "tappables": "Tappable-Items",
+  "tappable_type_breakfast": "Zygarde Zelle",
+  "tappable_type_hat": "Partyhut",
+  "tappable_type_maple": "Apfel",
+  "tappable_type_pokeball": "Pokéball",
+  "appeared_as": "erschienen als ",
+  "search_tappables": "Tappables durchsuchen",
   "dynamic_opacity": "dynamische Durchsichtigkeit",
   "tooltips": "Tooltips",
   "markers": "Marker",
   "filters": "Filter",
   "active": "aktiv",
   "inactive": "inaktiv",
   "bread_time_window": "Du kannst von 6Uhr bis 21Uhr an Dyna-Kämpfen teilnehmen.",
+  "view_defenders": "Verteidiger anzeigen",
   "rsvp_0": "ohne RSVP",
   "rsvp_1": "RSVP",
   "rsvp_2": "nur_RSVP",
-  "rsvp_changes": "RSVP Änderungen"
+  "rsvp_changes": "RSVP Änderungen",
+  "show_rsvps_badge": "Rsvp Symbol anzeigen",
+  "going": "zugesagt",
+  "maybe": "vielleicht",
+  "expert_basic_syntax": "Syntax Grundlagen 🔎",
+  "expert_clause_description": "Der grundlegende Baustein eines Filters ist eine Filterregel. Eine Filterregel besteht aus einem Präfix (was du filterst), gefolgt von einem Wert oder einem Bereich.",
+  "expert_format_description": "Das Basisformat ist: [Präfix][Wert] oder [Präfix][MinWert]-[MaxWert]",
+  "expert_value_description": "Wenn du einen einzelnen Wert angibst, wird dieser exakt abgeglichen. Wenn du einen Bereich angibst, wird alles zwischen dem Mindest- und dem Höchstwert (einschließlich) abgeglichen.",
+  "expert_filter_prefixes": "Filter Präfixe",
+  "expert_prefixes_description": "Die verfügbaren Präfixe und was sie filtern:",
+  "prefix": "Präfix",
+  "attribute": "Attribute",
+  "description_and_example": "Beschreibung & Beispiel",
+  "none": "(nichts)",
+  "iv_percentage": "IV %",
+  "expert_iv_example": "gesamt IV-Prozentsatz -> ",
+  "attack_iv": "Attacke IV",
+  "expert_attack_example": "der Attacke-IV-Wert (0-15) -> ",
+  "defense_iv": "Verteidigung IV",
+  "expert_defense_example": "der Verteidigungs-IV-Wert (0-15) -> ",
+  "stamina_iv": "Ausdauer IV",
+  "expert_stamina_example": "der Ausdauer-IV-Wert/HP (0-15) -> ",
+  "expert_level_example": "das Pokémon Level (1-50) -> ",
+  "combat_power": "Wettkampfpunkte",
+  "expert_cp_example": "der WP Wert des Pokémon -> ",
+  "expert_gender_example": "1=männlich, 2=weiblich, 3=geschlechtslos -> ",
+  "expert_size_example": "1=XXS, 2=XS, 3=Normal, 4=XL, 5=XXL -> ",
+  "great_league": "Superliga",
+  "expert_great_league_example": "PvP Rang für die Superliga (max. 1500WP) -> ",
+  "ultra_league": "Hyperliga",
+  "expert_ultra_league_example": "PvP Rang für die Hyperliga (max. 2500WP) -> ",
+  "little_cup": "Mini-Cup",
+  "expert_little_cup_example": "PvP Rang für die Mini-Cup -> ",
+  "expert_combining_filters": "Filter kombinieren ➕",
+  "expert_combining_description": "Es können mehrere Regeln kombiniert werden, um mithilfe logischer Operatoren hochspezifische Filter zu erstellen. Der Parser verarbeitet UND (&) Bedingungen zuerst, gruppiert sie dann mit ODER (, oder |) zusammen.",
+  "expert_and_operator": "UND (&)",
+  "expert_and_description": "Verwende das Und-Zeichen &, um Bedingungen zu verknüpfen, die alle erfüllt sein müssen. Dies ist nützlich, um die Anzeige einzugrenzen.",
+  "example": "Beispiel",
+  "expert_hundo_example": "Zeige \"Hundos\" (100% IV) Pokémon an.",
+  "expert_hundo_description": "Alle drei Werte (Attacke/Verteidigung/Ausdauer) müssen 15 sein.",
+  "expert_another_example": "anderes Beispiel",
+  "expert_high_level_example": "Zeige Pokémon auf hohem Level mit gutem Angriff und mindestens 90% IV an.",
+  "expert_or_operator": "ODER (, oder |)",
+  "expert_or_description": "Verwende ein Komma oder einen senkrechten Strich |, um Bedingungen zu verknüpfen, bei denen eine der Gruppen wahr sein kann. Dies ist ideal, um die Anzeige zu erweitern.",
+  "expert_pvp_example": "Zeige Pokémon an, die entweder für die Superliga oder die Hyperliga geeignet sind.",
+  "expert_perfect_or_level_example": "Zeige beliebige perfekte Pokémon ODER beliebige Level 35 Pokémon an.",
+  "expert_complex_filters": "Komplexe Filter erstellen 🧪",
+  "expert_complex_description": "Es können & und , kombiniert werden, um eine anspruchsvolle Logik zu erstellen. Der Parser gruppiert zunächst &-Bedingungen und trennt diese Gruppen dann mit dem Operator , oder |.",
+  "expert_complex_format": "Stell es dir so vor: (Bedingung A & Bedingung B) , (Bedingung C & Bedingung D)",
+  "expert_complex_example_description": "Zeige Pokémon, die sich entweder hervorragend für PvP eignen oder ein hohes Level mit perfektem Angriff haben.",
+  "expert_group_1": "Gruppe 1",
+  "expert_group_1_description": "Gut für PvP (Top 50 in SL oder HL).",
+  "expert_group_2": "Gruppe 2",
+  "expert_group_2_description": "Hohes Level mit perfektem Angriff.",
+  "expert_combine_description": "Kombiniere sie mit einem , oder |:",
+  "expert_result_description": "Dieser Filter zeigt Pokémon an, wenn sie die Kriterien für Gruppe 1 erfüllen ODER wenn sie alle Kriterien für Gruppe 2 erfüllen."
 }

packages/locales/lib/human/en.json

@@ -377,6 +377,7 @@
   "ar_quest_true": "AR Task",
   "ar_quest_false": "No AR",
   "with_ar": "With AR",
+  "with_background": "with Background",
   "both": "Both",
   "without_ar": "Without AR",
   "shiny_probability": "Shiny rate: <0/>",

packages/types/lib/scanner.d.ts

@@ -260,6 +260,7 @@ export interface Pokemon {
   pvp_rankings_ultra_league?: import('ohbem').PvPRankEntry[]
   distance?: number
   shiny?: boolean
+  background?: number
 }
 
 export type FullPokemon = FullModel<Pokemon, PokemonModel.Pokemon>

server/src/graphql/typeDefs/map.graphql

@@ -71,6 +71,7 @@ type Search {
   gender: Int
   costume: Int
   shiny: Int
+  background: Int
   iv: Float
   expire_timestamp: Int
   battle_pokemon_id: Int

server/src/graphql/typeDefs/scanner.graphql

@@ -167,6 +167,7 @@ type Pokemon {
   costume: Int
   gender: Int
   display_pokemon_id: Int
+  background: Int
   weight: Float
   height: Float
   size: Float

server/src/models/Pokemon.js

@@ -962,6 +962,7 @@ class Pokemon extends Model {
         'gender',
         'iv',
         'shiny',
+        'background',
         'expire_timestamp',
       ])
     }

src/features/pokemon/PokemonPopup.jsx

@@ -233,6 +233,43 @@ export function PokemonPopup({ pokemon, iconUrl, isTutorial = false }) {
           userSettings={userSettings}
           isTutorial={isTutorial}
         />
+        {!!pokemon.background && pokemon.seen_type === 'encounter' ? (
+          <Grid
+            xs={12}
+            container
+            alignItems="center"
+            justifyContent="center"
+            spacing={1}
+          >
+            <Grid xs={8} textAlign="center">
+              <Typography
+                variant="caption"
+                component="div"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexWrap: 'wrap',
+                }}
+              >
+                {t('with_background')}
+              </Typography>
+            </Grid>
+            <Grid xs={4} display="flex" justifyContent="center">
+              <img
+                src={Icons.getBackgrounds(quest.quest_location_card)}
+                style={{ maxWidth: 42, maxHeight: 42 }}
+                onError={(e) => {
+                  // @ts-ignore
+                  e.target.onerror = null
+                  // @ts-ignore
+                  e.target.src =
+                    'https://raw.githubusercontent.com/WatWowMap/wwm-uicons-webp/main/background/0.webp'
+                }}
+              />
+            </Grid>
+          </Grid>
+        ) : null}
         {pokemon.seen_type !== 'encounter' && (
           <Grid xs={12} textAlign="center">
             <Typography

src/features/pokestop/PokestopPopup.jsx

@@ -147,6 +147,43 @@ export function PokestopPopup({
                         </>
                       )}
                     </Grid>
+                    {!!quest.quest_background && !!quest.quest_pokemon_id ? (
+                      <Grid
+                        xs={12}
+                        container
+                        alignItems="center"
+                        justifyContent="center"
+                        spacing={1}
+                      >
+                        <Grid xs={8} textAlign="center">
+                          <Typography
+                            variant="caption"
+                            component="div"
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              flexWrap: 'wrap',
+                            }}
+                          >
+                            {t('with_background')}
+                          </Typography>
+                        </Grid>
+                        <Grid xs={4} display="flex" justifyContent="center">
+                          <img
+                            src={Icons.getBackgrounds(quest.quest_background)}
+                            style={{ maxWidth: 42, maxHeight: 42 }}
+                            onError={(e) => {
+                              // @ts-ignore
+                              e.target.onerror = null
+                              // @ts-ignore
+                              e.target.src =
+                                'https://raw.githubusercontent.com/WatWowMap/wwm-uicons-webp/main/background/0.webp'
+                            }}
+                          />
+                        </Grid>
+                      </Grid>
+                    ) : null}
                   </React.Fragment>
                 ))}
               {hasLure && (

src/services/Assets.js

@@ -371,6 +371,20 @@ export class UAssets {
     )
   }
 
+  /**
+   *
+   * @param {string | number} [background]
+   * @returns
+   */
+  getBackgrounds(background = 0) {
+    try {
+      return this[this.selected.background]?.class?.background(background)
+    } catch (e) {
+      console.error(`[${this.assetType.toUpperCase()}]`, e)
+      return `${this.fallback}/background/0.${this.fallbackExt}`
+    }
+  }
+
   /** @param {number | string} [typeId] */
   getTypes(typeId = 0) {
     try {

src/services/queries/pokemon.js

@@ -10,6 +10,7 @@ const core = gql`
     pokemon_id
     form
     gender
+    background
     costume
     first_seen_timestamp
     expire_timestamp

src/services/queries/search.js

@@ -137,6 +137,7 @@ export const POKEMON = gql`
       gender
       costume
       shiny
+      background
       iv
       expire_timestamp
     }

yarn.lock

@@ -9820,10 +9820,10 @@ uglify-js@^3.1.4:
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.19.3.tgz#82315e9bbc6f2b25888858acd1fff8441035b77f"
   integrity sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==
 
-uicons.js@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/uicons.js/-/uicons.js-2.1.0.tgz#9aaa6254aeba25dad5d4672d2fb840ec4c4c97b0"
-  integrity sha512-Pmg2QBvQuy3VaTzZDKDCM0/K+fgKf0EK/ZGOnxzkN33HiRCtMOxcSmN80/tO1WFDzCXG0FvbF/zj2rgPDy5zTA==
+uicons.js@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/uicons.js/-/uicons.js-2.2.0.tgz#5fc2fdcdfd272d669e63400dee55ed347680aedc"
+  integrity sha512-USQcp4UL4MHfMwKXsR6FreyBBWsmG9WeAfil4Yu8xRD6qw8YjQxF/XHIkf8DNk3M0f3VDPNGssiPlOwLsJMJDQ==
 
 uid-safe@~2.1.5:
   version "2.1.5"