Wayfarer Colors

.github/workflows/docker.yml

@@ -6,10 +6,31 @@ env:
   IMAGE_NAME: ${{ github.repository }}
 
 jobs:
+  Sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: "yarn"
+      - name: Generate latest env vars
+        run: |
+          yarn gen-env-config
+      - name: Commit and push changes
+        uses: devops-infra/action-commit-push@v0.9.0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          commit_message: Synced docker env vars with latest config
   Docker:
+    needs: Sync
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
 
     - name: Set .gitsha
       if: github.event_name == 'push'

public/base-locales/en.json

@@ -535,5 +535,12 @@
   "day": "Day",
   "days": "Days",
   "react_error": "Something Went Wrong",
-  "clickable_icon": "Icon is Clickable"
+  "clickable_icon": "Icon is Clickable",
+  "two_stops_till_next": "2 stops until next",
+  "one_stop_till_next": "1 stop until next",
+  "no_more_gyms": "No more gyms",
+  "light_map_border": "Light Map Border",
+  "dark_map_border": "Dark Map Border",
+  "cell_blocked": "Cell Blocked",
+  "poi_color": "POI Color"
 }

server/src/configs/custom-environment-variables.json

@@ -581,13 +581,22 @@
         "__format": "boolean"
       },
       "oldPortals": "CLIENT_SIDE_OPTIONS_WAYFARER_OLD_PORTALS",
-      "newPortals": "CLIENT_SIDE_OPTIONS_WAYFARER_NEW_PORTALS"
+      "newPortals": "CLIENT_SIDE_OPTIONS_WAYFARER_NEW_PORTALS",
+      "twoStopsTillNext": "CLIENT_SIDE_OPTIONS_WAYFARER_TWO_STOPS_TILL_NEXT",
+      "oneStopTillNext": "CLIENT_SIDE_OPTIONS_WAYFARER_ONE_STOP_TILL_NEXT",
+      "noMoreGyms": "CLIENT_SIDE_OPTIONS_WAYFARER_NO_MORE_GYMS",
+      "lightMapBorder": "CLIENT_SIDE_OPTIONS_WAYFARER_LIGHT_MAP_BORDER",
+      "darkMapBorder": "CLIENT_SIDE_OPTIONS_WAYFARER_DARK_MAP_BORDER",
+      "cellBlocked": "CLIENT_SIDE_OPTIONS_WAYFARER_CELL_BLOCKED",
+      "poiColor": "CLIENT_SIDE_OPTIONS_WAYFARER_POI_COLOR"
     },
     "weather": {
       "clickableIcon": {
         "__name": "CLIENT_SIDE_OPTIONS_WEATHER_CLICKABLE_ICON",
         "__format": "boolean"
-      }
+      },
+      "darkMapBorder": "CLIENT_SIDE_OPTIONS_WEATHER_DARK_MAP_BORDER",
+      "lightMapBorder": "CLIENT_SIDE_OPTIONS_WEATHER_LIGHT_MAP_BORDER"
     }
   },
   "defaultFilters": {

server/src/configs/default.json

@@ -260,10 +260,19 @@
     "wayfarer": {
       "clustering": true,
       "oldPortals": "#0000ff",
-      "newPortals": "#16b819"
+      "newPortals": "#16b819",
+      "twoStopsTillNext": "#ffa500",
+      "oneStopTillNext": "#ff0000",
+      "noMoreGyms": "#000000",
+      "lightMapBorder": "#000000",
+      "darkMapBorder": "#ff0000",
+      "cellBlocked": "#000000",
+      "poiColor": "#03ffff"
     },
     "weather": {
-      "clickableIcon": false
+      "clickableIcon": false,
+      "darkMapBorder": "#ff0000",
+      "lightMapBorder": "#246377"
     }
   },
   "defaultFilters": {

server/src/services/checkForUpdates.js

@@ -6,7 +6,7 @@ const fs = require('fs')
 let isDocker = false
 
 try {
-  exec('git branch --show-current', async (err, stdout) => {
+  exec('git branch --show-current', (err, stdout) => {
     try {
       const gitRef = fs.readFileSync(path.resolve(`${__dirname}/../../../.gitref`), 'utf8')
 
@@ -20,12 +20,12 @@ try {
         ? gitRef.split('/')[2].trim()
         : stdout.trim()
 
-      exec('git rev-parse HEAD', async (err2, stdout2) => {
+      exec('git rev-parse HEAD', (err2, stdout2) => {
         try {
           const gitSha = fs.readFileSync(path.resolve(`${__dirname}/../../../.gitsha`), 'utf8')
 
           if (!gitSha && (err2 || typeof stdout2 !== 'string' || !stdout2.trim())) {
-            throw new Error('Unable to get current sha', err)
+            throw new Error('Unable to get current sha', err2)
           }
           const sha = typeof gitSha === 'string' && gitSha.trim()
             ? gitSha.trim()

server/src/services/ui/clientOptions.js

@@ -43,9 +43,18 @@ module.exports = function clientOptions(perms) {
       clustering: { type: 'bool', perm: ['portals'] },
       oldPortals: { type: 'color', perm: ['portals'] },
       newPortals: { type: 'color', perm: ['portals'] },
+      oneStopTillNext: { type: 'color', perm: ['submissionCells'] },
+      twoStopsTillNext: { type: 'color', perm: ['submissionCells'] },
+      noMoreGyms: { type: 'color', perm: ['submissionCells'] },
+      lightMapBorder: { type: 'color', perm: ['submissionCells'] },
+      darkMapBorder: { type: 'color', perm: ['submissionCells'] },
+      cellBlocked: { type: 'color', perm: ['submissionCells'] },
+      poiColor: { type: 'color', perm: ['submissionCells'] },
     },
     weather: {
       clickableIcon: { type: 'bool', perm: ['weather'] },
+      lightMapBorder: { type: 'color', perm: ['weather'] },
+      darkMapBorder: { type: 'color', perm: ['weather'] },
     },
   }
 

src/components/Map.jsx

@@ -179,7 +179,7 @@ export default function Map({ serverSettings:
             Utility.analytics('Data', `${category} being fetched`, category, true)
             return (
               <QueryData
-                key={`${category}-${Object.values(userSettings[category] || {}).join('')}-${Object.values(icons).join('')}`}
+                key={`${category}-${Object.values(userSettings[userSettingsCategory(category)] || {}).join('')}-${Object.values(icons).join('')}`}
                 sizeKey={filters[category].filter ? Object.values(filters[category].filter).map(x => x ? x.size : 'md').join(',') : 'md'}
                 bounds={Utility.getQueryArgs(map)}
                 setExcludeList={setExcludeList}

src/components/layout/dialogs/UserOptions.jsx

@@ -101,7 +101,7 @@ export default function UserOptions({ category, toggleDialog, isMobile }) {
         action={toggleDialog(false, category, 'options')}
       />
       <DialogContent style={{ padding: 0 }}>
-        {category === 'pokemon' && (
+        {tabPages.length > 1 && (
           <AppBar position="static">
             <Tabs
               value={tab}

src/components/markers/placementCell.js

@@ -1,7 +1,7 @@
-export default function placementStyle(cellBlocked, tileStyle) {
+export default function placementStyle(cellBlocked, tileStyle, userSettings) {
   return {
-    fillColor: cellBlocked ? 'black' : 'green',
-    color: tileStyle === 'dark' ? 'red' : 'black',
+    fillColor: userSettings.cellBlocked,
+    color: tileStyle === 'dark' ? userSettings.darkMapBorder : userSettings.lightMapBorder,
     opacity: 0.75,
     fillOpacity: cellBlocked ? 0.25 : 0,
     weight: 0.35,

src/components/markers/typeCell.js

@@ -1,23 +1,21 @@
-export default function typeStyle(cell, tileStyle) {
-  const color = tileStyle === 'dark' ? 'red' : 'black'
+export default function typeStyle(cell, tileStyle, userSettings) {
+  const color = tileStyle === 'dark' ? userSettings.darkMapBorder : userSettings.lightMapBorder
   if ((cell.count === 1 && cell.count_gyms < 1)
     || (cell.count === 5 && cell.count_gyms < 2)
     || (cell.count === 19 && cell.count_gyms < 3)) {
     return {
-      fillColor: 'red', color, opacity: 0.75, fillOpacity: 0.5, weight: 0.75,
+      fillColor: userSettings.oneStopTillNext, color, opacity: 0.75, fillOpacity: 0.5, weight: 0.75,
     }
   }
   if ((cell.count === 4 && cell.count_gyms < 2) || (cell.count === 18 && cell.count_gyms < 3)) {
     return {
-      fillColor: 'orange', color, opacity: 0.75, fillOpacity: 0.5, weight: 0.75,
+      fillColor: userSettings.twoStopsTillNext, color, opacity: 0.75, fillOpacity: 0.5, weight: 0.75,
     }
   }
   if (cell.count >= 20) {
     return {
-      fillColor: 'black', color, opacity: 0.75, fillOpacity: 0.25, weight: 0.8,
+      fillColor: userSettings.noMoreGyms, color, opacity: 0.75, fillOpacity: 0.25, weight: 0.8,
     }
   }
-  return {
-    fillColor: 'blue', color, opacity: 0.75, fillOpacity: 0.0, weight: 0.8,
-  }
+  return { color, opacity: 0.75, fillOpacity: 0.0, weight: 0.8 }
 }

src/components/tiles/Weather.jsx

@@ -4,7 +4,7 @@ import { Popup, Polyline, Marker } from 'react-leaflet'
 import weatherMarker from '../markers/weather'
 import PopupContent from '../popups/Weather'
 
-const WeatherTile = ({ item, ts, Icons, isNight, tileStyle }) => {
+const WeatherTile = ({ item, ts, Icons, isNight, tileStyle, userSettings }) => {
   const [popup, setPopup] = useState(false)
   const markerRef = useRef(null)
 
@@ -18,10 +18,10 @@ const WeatherTile = ({ item, ts, Icons, isNight, tileStyle }) => {
     <Polyline
       key={item.id}
       positions={item.polygon}
-      pathOptions={{ color: tileStyle === 'light' ? '#246377' : 'red', opacity: 0.25 }}
+      pathOptions={{ color: tileStyle === 'dark' ? userSettings.darkMapBorder : userSettings.lightMapBorder, opacity: 0.25 }}
     >
       <Marker
-        icon={weatherMarker(item, Icons, isNight)}
+        icon={weatherMarker(item, Icons, isNight, userSettings)}
         position={[item.latitude, item.longitude]}
         zIndexOffset={10000}
         ref={markerRef}
@@ -41,6 +41,7 @@ const WeatherTile = ({ item, ts, Icons, isNight, tileStyle }) => {
 const areEqual = (prev, next) => (
   prev.item.gameplay_condition === next.item.gameplay_condition
   && prev.item.updated === next.item.updated
+  && prev.tileStyle === next.tileStyle
 )
 
 export default memo(WeatherTile, areEqual)

src/components/tiles/submissionCells/Placement.jsx

@@ -3,17 +3,18 @@ import { Polygon } from 'react-leaflet'
 
 import placementStyle from '../../markers/placementCell'
 
-const PlacementTile = ({ cell, tileStyle }) => (
+const PlacementTile = ({ cell, tileStyle, userSettings }) => (
   <Polygon
     positions={cell.polygon}
-    pathOptions={placementStyle(cell.blocked, tileStyle)}
+    pathOptions={placementStyle(cell.blocked, tileStyle, userSettings)}
     interactive={false}
   />
 )
 
 const areEqual = (prev, next) => (
   prev.cell.id === next.cell.id
   && prev.zoom === next.zoom
+  && prev.tileStyle === next.tileStyle
 )
 
 export default memo(PlacementTile, areEqual)

src/components/tiles/submissionCells/Ring.jsx

@@ -1,18 +1,17 @@
 import React, { memo } from 'react'
 import { Circle } from 'react-leaflet'
 
-const RingTile = ({ ring }) => (
+const RingTile = ({ ring, userSettings }) => (
   <Circle
     center={[ring.lat, ring.lon]}
     radius={20}
     interactive={false}
+    pathOptions={{ fillColor: userSettings.poiColor, color: userSettings.poiColor }}
   />
 )
 
 const areEqual = (prev, next) => (
   prev.ring.id === next.ring.id
-  && prev.ring.lat === next.ring.lat
-  && prev.ring.lon === next.ring.lon
   && prev.zoom === next.zoom
 )
 

src/components/tiles/submissionCells/SubmissionCell.jsx

@@ -4,7 +4,7 @@ import PlacementTile from './Placement'
 import RingTile from './Ring'
 
 export default function SubmissionCellTile({
-  item, tileStyle, config, zoom,
+  item, tileStyle, config, zoom, userSettings,
 }) {
   const zoomLimit = zoom >= config.submissionZoom
   return zoom >= (config.submissionZoom - 1) && (
@@ -15,6 +15,7 @@ export default function SubmissionCellTile({
             key={ring.id}
             ring={ring}
             zoom={zoomLimit}
+            userSettings={userSettings}
           />
         ))}
       {(item?.placementCells?.cells && zoomLimit)
@@ -24,6 +25,7 @@ export default function SubmissionCellTile({
             cell={cell}
             tileStyle={tileStyle}
             zoom={zoomLimit}
+            userSettings={userSettings}
           />
         ))}
       {item?.typeCells && item.typeCells.map(cell => (
@@ -32,6 +34,7 @@ export default function SubmissionCellTile({
           cell={cell}
           tileStyle={tileStyle}
           zoom={zoom >= (config.submissionZoom - 1)}
+          userSettings={userSettings}
         />
       ))}
     </>

src/components/tiles/submissionCells/Type.jsx

@@ -4,10 +4,10 @@ import { Polygon, Popup, Tooltip } from 'react-leaflet'
 import PopupContent from '../../popups/SubmissionCell'
 import typeStyle from '../../markers/typeCell'
 
-const TypeTile = ({ cell, tileStyle }) => (
+const TypeTile = ({ cell, tileStyle, userSettings }) => (
   <Polygon
     positions={cell.polygon}
-    pathOptions={typeStyle(cell, tileStyle)}
+    pathOptions={typeStyle(cell, tileStyle, userSettings)}
   >
     <Popup
       position={[cell.lat, cell.lon]}
@@ -28,6 +28,7 @@ const areEqual = (prev, next) => (
   prev.cell.id === next.cell.id
   && prev.cell.count === next.cell.count
   && prev.zoom === next.zoom
+  && prev.tileStyle === next.tileStyle
 )
 
 export default memo(TypeTile, areEqual)