Merge pull request #76 from WatWowMap/iv-circles

IV Badges

Author: TurtIeSocks

public/base-locales/en.json

@@ -232,6 +232,8 @@
   "items": "Items",
   "energy": "Energy",
   "arEligible": "AR Eligible",
+  "ivCircles": "IV Indicators",
+  "minIvCircle": "Minimum Circle IV",
   "interactionRanges": "Interaction Ranges",
   "cannotConnect": "\nUnable to connect to the server at this time.\nTrying again immediately will only cause more issues.\nPlease try again in a few minutes.\n\n- Map Admin Team",
   "madQuestText": "Native Quests"

server/src/configs/default.json

@@ -116,6 +116,8 @@
       "clustering": true,
       "prioritizePvpInfo": false,
       "legacyFilter": false,
+      "ivCircles": false,
+      "minIvCircle": 90,
       "interactionRanges": false,
       "glow": [
         {"name": "Hundo", "perm": "iv", "num": 100, "value": "#ff1744", "op": "=" },

server/src/services/ui/clientOptions.js

@@ -22,6 +22,8 @@ module.exports = function clientOptions(perms) {
       clustering: { type: 'bool', perm: ['pokemon'] },
       prioritizePvpInfo: { type: 'bool', perm: ['pvp'] },
       legacyFilter: { type: 'bool', perm: ['iv', 'stats', 'pvp'] },
+      ivCircles: { type: 'bool', perm: ['iv'] },
+      minIvCircle: { type: 'number', perm: ['iv'], label: '%' },
       interactionRanges: { type: 'bool', perm: ['pokemon'] },
       glow: { type: 'bool', sub: {}, perm: ['pokemon'] },
     },

src/assets/scss/main.scss

@@ -215,6 +215,23 @@ img {
   content: "×";
 }
 
+.iv-badge {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  text-align: center;
+  align-items: center; 
+  justify-content: center;
+  background-color: rgb(110, 110, 110);
+  border: 2px solid white;
+  border-radius: 12px; 
+  color: white;
+  font: bold 15px/13px Helvetica, Verdana, Tahoma;
+  height: 16px; 
+  min-width: 14px;
+  padding: 4px 3px 0 3px;
+}
+
 .quest-popup-img {
   text-align: center;
   max-width: 40px;

src/components/layout/dialogs/UserOptions.jsx

@@ -93,6 +93,7 @@ export default function UserOptions({ category, toggleDialog }) {
             size="small"
             type={fullOption.type}
             disabled={fullOption.disabled}
+            endAdornment={fullOption.label || ''}
             inputProps={{
               min: 0,
               max: 100,
@@ -107,6 +108,7 @@ export default function UserOptions({ category, toggleDialog }) {
             checked={localState[subOption || option]}
             name={subOption || option}
             onChange={handleChange}
+            disabled={fullOption.disabled}
           />
         </Grid>
       )

src/components/markers/pokemon.js

@@ -13,7 +13,7 @@ export const basicMarker = (iconUrl, pkmn, filters, iconSizes) => {
   })
 }
 
-export const fancyMarker = (iconUrl, pkmn, filters, iconSizes, glow) => {
+export const fancyMarker = (iconUrl, pkmn, filters, iconSizes, glow, ivCircles) => {
   let badge
   switch (pkmn.bestPvp) {
     default: break
@@ -25,14 +25,25 @@ export const fancyMarker = (iconUrl, pkmn, filters, iconSizes, glow) => {
   const filterId = `${pkmn.pokemon_id}-${pkmn.form}`
   const size = filters.filter[filterId] ? iconSizes[filters.filter[filterId].size] : iconSizes.md
 
-  const pvpHtml = badge ? `
-    <img src="/images/misc/${badge}.png" 
-      style="width:${size / 2}px;
-      height:auto;
-      position:absolute;
-      right:0;
-      bottom:0;"
-    />` : ''
+  const getExtraHtml = () => {
+    if (badge) {
+      return `
+        <img src="/images/misc/${badge}.png" 
+          style="width:${size / 2}px;
+          height:auto;
+          position:absolute;
+          right:0;
+          bottom:0;"
+        />`
+    }
+    if (ivCircles) {
+      return `
+        <div class="iv-badge">
+          ${Math.round(pkmn.iv)}
+        </div>`
+    }
+    return ''
+  }
 
   return L.divIcon({
     iconSize: [size, size],
@@ -48,6 +59,6 @@ export const fancyMarker = (iconUrl, pkmn, filters, iconSizes, glow) => {
           height:${size}px;"
         />
       </div>
-      ${pvpHtml}`,
+      ${getExtraHtml()}`,
   })
 }

src/components/tiles/Pokemon.jsx

@@ -53,7 +53,7 @@ const PokemonTile = ({
     return glowValue
   }, [])
   const glowStatus = userSettings.glow ? getGlowStatus() : undefined
-
+  const ivCircle = userSettings.ivCircles && item.iv >= userSettings.minIvCircle
   useEffect(() => {
     const { id } = params
     if (id === item.id) {
@@ -73,8 +73,8 @@ const PokemonTile = ({
             }
           }}
           position={[item.lat, item.lon]}
-          icon={(item.bestPvp < 4 || glowStatus)
-            ? fancyMarker(iconUrl, item, filters, iconSizes, glowStatus)
+          icon={(item.bestPvp < 4 || glowStatus || ivCircle)
+            ? fancyMarker(iconUrl, item, filters, iconSizes, glowStatus, userSettings.ivCircles)
             : basicMarker(iconUrl, item, filters, iconSizes)}
         >
           <Popup position={[item.lat, item.lon]} onClose={() => delete params.id}>
@@ -112,6 +112,8 @@ const areEqual = (prev, next) => (
   && !next.excludeList.includes(`${prev.item.pokemon_id}-${prev.item.form}`)
   && prev.path === next.path
   && prev.userSettings.legacyFilter === next.userSettings.legacyFilter
+  && prev.userSettings.ivCircles === next.userSettings.ivCircles
+  && prev.userSettings.minIvCircle === next.userSettings.minIvCircle
   && prev.showCircles === next.showCircles
 )