feat: better nearby pokemon display and randomization

Mygod · Mygod · commit 425f8401c3f4 · 2025-11-06T20:25:30.000-08:00
diff --git a/package.json b/package.json
@@ -152,6 +152,7 @@
     "leaflet-arrowheads": "^1.4.0",
     "leaflet.locatecontrol": "0.81.0",
     "lodash": "^4.17.21",
+    "long": "^4.0.0",
     "moment-timezone": "^0.5.43",
     "mysql2": "3.11.0",
     "node-cache": "^5.1.2",
diff --git a/src/features/pokemon/PokemonTile.jsx b/src/features/pokemon/PokemonTile.jsx
@@ -1,11 +1,12 @@
 /* eslint-disable react/destructuring-assignment */
 // @ts-check
 import * as React from 'react'
-import { Marker, Popup, Circle } from 'react-leaflet'
+import { Marker, Popup, Circle, Polygon } from 'react-leaflet'
 import { t } from 'i18next'
+import { S2CellId, S2LatLng } from 'nodes2ts'
 
 import { useMarkerTimer } from '@hooks/useMarkerTimer'
-import { getOffset } from '@utils/offset'
+import { NEARBY_CELL_LEVEL, getOffset } from '@utils/offset'
 import { getBadge } from '@utils/getBadge'
 import { basicEqualFn, useMemory } from '@store/useMemory'
 import { useStorage } from '@store/useStorage'
@@ -16,10 +17,14 @@ import { sendNotification } from '@services/desktopNotification'
 import { useMapStore } from '@store/useMapStore'
 import { TooltipWrapper } from '@components/ToolTipWrapper'
 import { getTimeUntil } from '@utils/getTimeUntil'
+import { normalizeCategory } from '@utils/normalizeCategory'
+import { getS2Polygon } from '@utils/getS2Polygon'
 
 import { PokemonPopup } from './PokemonPopup'
 import { basicPokemonMarker, fancyPokemonMarker } from './pokemonMarker'
 
+const INTERACTION_RANGE_COLOR = '#BA42F6'
+
 /**
  *
  * @param {import('@rm/types').Pokemon} pkmn
@@ -110,18 +115,31 @@ const BasePokemonTile = (pkmn) => {
       ]
     }, basicEqualFn)
 
+  const manualParams = useMemory((s) => s.manualParams)
+
+  const isNearbyStop = pkmn.seen_type === 'nearby_stop'
+  const isLure = pkmn.seen_type?.includes('lure')
+  const isNearbyCell = pkmn.seen_type === 'nearby_cell'
+
+  const isPopupOpen = React.useMemo(() => {
+    if (!manualParams) return false
+    if (normalizeCategory(manualParams.category) !== 'pokemon') {
+      return false
+    }
+    return `${manualParams.id}` === `${pkmn.id}`
+  }, [manualParams, pkmn.id])
+
   /** @type {[number, number]} */
-  const finalLocation = React.useMemo(
-    () =>
-      pkmn.seen_type?.startsWith('nearby') || pkmn.seen_type?.includes('lure')
-        ? getOffset(
-            [pkmn.lat, pkmn.lon],
-            pkmn.seen_type === 'nearby_cell' ? 0.0002 : 0.00015,
-            pkmn.id,
-          )
-        : [pkmn.lat, pkmn.lon],
-    [pkmn.seen_type, pkmn.lat, pkmn.lon],
-  )
+  const finalLocation = React.useMemo(() => {
+    const seenType = pkmn.seen_type
+    return seenType?.startsWith('nearby')
+      ? getOffset({
+          coords: /** @type {[number, number]} */ ([pkmn.lat, pkmn.lon]),
+          id: pkmn.id,
+          seenType,
+        })
+      : [pkmn.lat, pkmn.lon]
+  }, [pkmn.id, pkmn.seen_type, pkmn.lat, pkmn.lon])
 
   /** @type {(string | import('react').ReactElement)[]} */
   const extras = React.useMemo(() => {
@@ -140,6 +158,18 @@ const BasePokemonTile = (pkmn) => {
   useForcePopup(pkmn.id, markerRef)
   useMarkerTimer(pkmn.expire_timestamp, markerRef)
   const handlePopupOpen = useManualPopupTracker('pokemon', pkmn.id)
+
+  const nearbyCellPolygon = React.useMemo(() => {
+    if (isNearbyCell) {
+      return getS2Polygon(
+        S2CellId.fromPoint(
+          S2LatLng.fromDegrees(pkmn.lat, pkmn.lon).toPoint(),
+        ).parentL(NEARBY_CELL_LEVEL),
+      )
+    }
+    return null
+  }, [isNearbyCell, pkmn.lat, pkmn.lon])
+
   sendNotification(
     pkmn.id,
     `${t(`poke_${pkmn.pokemon_id}`)}${
@@ -164,70 +194,110 @@ const BasePokemonTile = (pkmn) => {
   }
 
   return (
-    <Marker
-      ref={setMarkerRef}
-      zIndexOffset={
-        (typeof pkmn.iv === 'number' ? pkmn.iv || 99 : 0) * 100 +
-        40.96 -
-        pkmn.bestPvp
-      }
-      position={finalLocation}
-      icon={
-        (pkmn.bestPvp !== null && pkmn.bestPvp < 4 && extras.length === 0) ||
-        showGlow ||
-        showWeather ||
-        opacity < 1 ||
-        pkmn.seen_type === 'nearby_cell'
-          ? fancyPokemonMarker({
-              pkmn,
-              iconUrl,
-              iconSize,
-              showGlow,
-              showWeather,
-              badge: extras.length ? null : badge,
-              opacity,
-              timeOfDay,
-            })
-          : basicPokemonMarker({ iconUrl, iconSize })
-      }
-      eventHandlers={{ popupopen: handlePopupOpen }}
-    >
-      <Popup position={finalLocation}>
-        <PokemonPopup pokemon={pkmn} iconUrl={iconUrl} />
-      </Popup>
-      {(showTimer || timerOverride || extras.length > 0) && (
-        <TooltipWrapper
-          timers={showTimer || timerOverride ? [pkmn.expire_timestamp] : []}
-          offset={[0, 14]}
-        >
-          {extras.length > 0 && (
-            <div className="iv-badge flex-center">
-              {extras.map((val, i) => (
-                <span
-                  key={typeof val === 'string' ? val : val.key}
-                  className="flex-center"
-                >
-                  {i ? <>&nbsp;|&nbsp;</> : null}
-                  {val}
-                </span>
-              ))}
-            </div>
-          )}
-        </TooltipWrapper>
-      )}
-      {showInteractionRange && configZoom && (
-        <Circle center={finalLocation} radius={40} color="#BA42F6" weight={1} />
-      )}
-      {showSpacialRendRange && configZoom && (
+    <>
+      {isPopupOpen && !!nearbyCellPolygon ? (
+        <Polygon
+          positions={nearbyCellPolygon}
+          pathOptions={{
+            color: INTERACTION_RANGE_COLOR,
+            weight: 1,
+            opacity: 1,
+            fillColor: INTERACTION_RANGE_COLOR,
+            fillOpacity: 0.2,
+          }}
+          interactive={false}
+        />
+      ) : null}
+      {isPopupOpen && isNearbyStop ? (
         <Circle
-          center={finalLocation}
-          radius={80}
-          color="#4E893E"
-          dashArray="5, 5"
-          weight={1}
+          center={[pkmn.lat, pkmn.lon]}
+          radius={40}
+          pathOptions={{
+            color: INTERACTION_RANGE_COLOR,
+            weight: 1,
+            opacity: 1,
+            fillColor: INTERACTION_RANGE_COLOR,
+            fillOpacity: 0.2,
+          }}
+          interactive={false}
         />
-      )}
-    </Marker>
+      ) : null}
+      <Marker
+        ref={setMarkerRef}
+        zIndexOffset={
+          (typeof pkmn.iv === 'number' ? pkmn.iv || 99 : 0) * 100 +
+          40.96 -
+          pkmn.bestPvp
+        }
+        position={finalLocation}
+        icon={
+          (pkmn.bestPvp !== null && pkmn.bestPvp < 4 && extras.length === 0) ||
+          showGlow ||
+          showWeather ||
+          opacity < 1 ||
+          pkmn.seen_type === 'nearby_cell'
+            ? fancyPokemonMarker({
+                pkmn,
+                iconUrl,
+                iconSize,
+                showGlow,
+                showWeather,
+                badge: extras.length ? null : badge,
+                opacity,
+                timeOfDay,
+              })
+            : basicPokemonMarker({ iconUrl, iconSize })
+        }
+        eventHandlers={{ popupopen: handlePopupOpen }}
+      >
+        <Popup position={finalLocation}>
+          <PokemonPopup pokemon={pkmn} iconUrl={iconUrl} />
+        </Popup>
+        {(showTimer || timerOverride || extras.length > 0) && (
+          <TooltipWrapper
+            timers={showTimer || timerOverride ? [pkmn.expire_timestamp] : []}
+            offset={[0, 14]}
+          >
+            {extras.length > 0 && (
+              <div className="iv-badge flex-center">
+                {extras.map((val, i) => (
+                  <span
+                    key={typeof val === 'string' ? val : val.key}
+                    className="flex-center"
+                  >
+                    {i ? <>&nbsp;|&nbsp;</> : null}
+                    {val}
+                  </span>
+                ))}
+              </div>
+            )}
+          </TooltipWrapper>
+        )}
+        {!isNearbyStop &&
+          !isNearbyCell &&
+          (showInteractionRange || (isLure && isPopupOpen)) &&
+          configZoom && (
+            <Circle
+              center={[pkmn.lat, pkmn.lon]}
+              radius={40}
+              color={INTERACTION_RANGE_COLOR}
+              weight={1}
+            />
+          )}
+        {!isNearbyStop &&
+          !isNearbyCell &&
+          showSpacialRendRange &&
+          configZoom && (
+            <Circle
+              center={[pkmn.lat, pkmn.lon]}
+              radius={80}
+              color="#4E893E"
+              dashArray="5, 5"
+              weight={1}
+            />
+          )}
+      </Marker>
+    </>
   )
 }
 
diff --git a/src/features/s2cell/GenerateCells.jsx b/src/features/s2cell/GenerateCells.jsx
@@ -1,17 +1,12 @@
 // @ts-check
 import * as React from 'react'
-import {
-  S2LatLng,
-  S2RegionCoverer,
-  S2LatLngRect,
-  S2Cell,
-  S2Point,
-} from 'nodes2ts'
+import { S2LatLng, S2RegionCoverer, S2LatLngRect } from 'nodes2ts'
 
 import { useMemory } from '@store/useMemory'
 import { useStorage } from '@store/useStorage'
 import { Notification } from '@components/Notification'
 import { getQueryArgs } from '@utils/getQueryArgs'
+import { getS2Polygon } from '@utils/getS2Polygon'
 
 import { BaseCell } from './BaseCell'
 
@@ -39,20 +34,16 @@ export function GenerateCells() {
       )
       regionCoverer.setMinLevel(level)
       regionCoverer.setMaxLevel(level)
-      return regionCoverer.getCoveringCells(region).map((cell) => {
-        const s2cell = new S2Cell(cell)
-        /** @type {import('@rm/types').S2Polygon} */
-        const poly = []
-        for (let i = 0; i <= 3; i += 1) {
-          const coordinate = s2cell.getVertex(i)
-          const point = new S2Point(coordinate.x, coordinate.y, coordinate.z)
-          const latLng = S2LatLng.fromPoint(point)
-          poly.push([latLng.latDegrees, latLng.lngDegrees])
-        }
-        return {
-          id: cell.id.toString(),
-          coords: poly,
-        }
+      return regionCoverer.getCoveringCells(region).flatMap((cell) => {
+        const coords = getS2Polygon(cell)
+        return coords
+          ? [
+              {
+                id: cell.id.toString(),
+                coords,
+              },
+            ]
+          : []
       })
     })
   }, [filter, location, zoom, color])
diff --git a/src/utils/getS2Polygon.js b/src/utils/getS2Polygon.js
@@ -0,0 +1,26 @@
+// @ts-check
+import { S2Cell, S2CellId, S2LatLng, S2Point } from 'nodes2ts'
+
+/**
+ * Convert an S2 cell into an array of lat/lon pairs describing its polygon.
+ *
+ * @param {S2CellId | string} cellId
+ * @returns {import('@rm/types').S2Polygon | null}
+ */
+export const getS2Polygon = (cellId) => {
+  try {
+    const id = typeof cellId === 'string' ? new S2CellId(cellId) : cellId
+    const cell = new S2Cell(id)
+    /** @type {import('@rm/types').S2Polygon} */
+    const polygon = []
+    for (let i = 0; i < 4; i += 1) {
+      const vertex = cell.getVertex(i)
+      const point = new S2Point(vertex.x, vertex.y, vertex.z)
+      const latLng = S2LatLng.fromPoint(point)
+      polygon.push([latLng.latDegrees, latLng.lngDegrees])
+    }
+    return polygon
+  } catch {
+    return null
+  }
+}
diff --git a/src/utils/offset.js b/src/utils/offset.js
