Dawn & Dusk Tile Support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactmap",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "React based frontend map.",
   "main": "ReactMap.js",
   "author": "TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>",
@@ -113,7 +113,7 @@
     "react-virtualized-auto-sizer": "^1.0.5",
     "react-window": "^1.8.6",
     "require-from-string": "^2.0.2",
-    "suncalc": "^1.8.0",
+    "suncalc": "^1.9.0",
     "zustand": "^4.0.0-rc.1"
   }
 }

src/components/Clustering.jsx

@@ -21,7 +21,7 @@ export default function Clustering({
   config,
   userIcons,
   setParams,
-  isNight,
+  timeOfDay,
   onlyAreas,
 }) {
   const Component = index[category]
@@ -59,7 +59,7 @@ export default function Clustering({
           params={params}
           setParams={setParams}
           showCircles={showCircles}
-          isNight={isNight}
+          timeOfDay={timeOfDay}
           onlyAreas={onlyAreas}
         />
       )

src/components/Map.jsx

@@ -27,14 +27,15 @@ const userSettingsCategory = (category) => {
   }
 }
 
-const getTileServer = (tileServers, settings, isNight) => {
+const getTileServer = (tileServers, settings, timeOfDay) => {
   const fallbackTs = Object.values(tileServers).find(
     (server) => server.name !== 'auto',
   )
   if (tileServers?.[settings.tileServers]?.name === 'auto') {
-    const autoTile = isNight
-      ? Object.values(tileServers).find((server) => server.style === 'dark')
-      : Object.values(tileServers).find((server) => server.style === 'light')
+    const autoTile =
+      timeOfDay === 'night'
+        ? Object.values(tileServers).find((server) => server.style === 'dark')
+        : Object.values(tileServers).find((server) => server.style === 'light')
     return autoTile || fallbackTs
   }
   return tileServers[settings.tileServers] || fallbackTs
@@ -68,8 +69,8 @@ export default function Map({
   const settings = useStore((state) => state.settings)
   const icons = useStore((state) => state.icons)
   const setLocation = useStore((s) => s.setLocation)
-  const isNight = useStatic((state) => state.isNight)
-  const setIsNight = useStatic((state) => state.setIsNight)
+  const timeOfDay = useStatic((state) => state.timeOfDay)
+  const setTimeOfDay = useStatic((state) => state.setTimeOfDay)
   const setZoom = useStore((state) => state.setZoom)
   const userSettings = useStore((state) => state.userSettings)
 
@@ -93,14 +94,14 @@ export default function Map({
       const newCenter = latLon || map.getCenter()
       setLocation([newCenter.lat, newCenter.lng])
       setZoom(Math.floor(map.getZoom()))
-      setIsNight(Utility.nightCheck(newCenter.lat, newCenter.lng))
+      setTimeOfDay(Utility.timeCheck(newCenter.lat, newCenter.lng))
     },
     [map],
   )
 
   const tileServer = useMemo(
-    () => getTileServer(tileServers, settings, isNight),
-    [isNight, settings.tileServers],
+    () => getTileServer(tileServers, settings, timeOfDay),
+    [timeOfDay, settings.tileServers],
   )
 
   const onFocus = () => setWindowState(true)
@@ -142,6 +143,7 @@ export default function Map({
         key={tileServer?.name}
         attribution={tileServer?.attribution || ''}
         url={
+          tileServer?.[timeOfDay] ||
           tileServer?.url ||
           'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png'
         }
@@ -262,7 +264,7 @@ export default function Map({
                   staticUserSettings={staticUserSettings[category]}
                   params={manualParams}
                   setParams={setManualParams}
-                  isNight={isNight}
+                  timeOfDay={timeOfDay}
                   isMobile={isMobile}
                   setError={setError}
                   active={active}

src/components/QueryData.jsx

@@ -29,7 +29,7 @@ export default function QueryData({
   Icons,
   userIcons,
   setParams,
-  isNight,
+  timeOfDay,
   setExcludeList,
   setError,
   active,
@@ -151,13 +151,13 @@ export default function QueryData({
         staticUserSettings={staticUserSettings}
         params={params}
         setParams={setParams}
-        isNight={isNight}
+        timeOfDay={timeOfDay}
         onlyAreas={onlyAreas}
       />
       {category === 'weather' && (
         <ActiveWeather
           Icons={Icons}
-          isNight={isNight}
+          timeOfDay={timeOfDay}
           weather={renderedData[category]}
           isMobile={isMobile}
           zoom={config.activeWeatherZoom}

src/components/layout/general/ActiveWeather.jsx

@@ -11,7 +11,7 @@ import Footer from './Footer'
 
 export default function ActiveWeather({
   Icons,
-  isNight,
+  timeOfDay,
   map,
   zoom,
   weather,
@@ -47,7 +47,7 @@ export default function ActiveWeather({
       >
         <img
           className={disableColorShift ? '' : 'fancy'}
-          src={Icons.getWeather(active.gameplay_condition, isNight)}
+          src={Icons.getWeather(active.gameplay_condition, timeOfDay)}
           alt={active.gameplay_condition}
           style={{
             width: isMobile ? 24 : 36,

src/components/markers/pokemon.jsx

@@ -19,7 +19,7 @@ export const fancyMarker = (
   ivCircle,
   Icons,
   weatherCheck,
-  isNight,
+  timeOfDay,
 ) => {
   const { pokemon: pokemonMod, weather: weatherMod } = Icons.modifiers
   let badge
@@ -99,7 +99,7 @@ export const fancyMarker = (
           }}
         >
           <img
-            src={Icons.getWeather(pkmn.weather, isNight)}
+            src={Icons.getWeather(pkmn.weather, timeOfDay)}
             alt={pkmn.weather}
             className={weatherMod.disableColorShift ? '' : 'fancy'}
             style={{

src/components/markers/weather.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { renderToString } from 'react-dom/server'
 import L from 'leaflet'
 
-export default function weatherMarker(weather, Icons, isNight) {
+export default function weatherMarker(weather, Icons, timeOfDay) {
   const {
     offsetX,
     offsetY,
@@ -21,7 +21,7 @@ export default function weatherMarker(weather, Icons, isNight) {
       <img
         className={disableColorShift ? '' : 'fancy'}
         alt={weather.gameplay_condition}
-        src={Icons.getWeather(weather.gameplay_condition, isNight)}
+        src={Icons.getWeather(weather.gameplay_condition, timeOfDay)}
         style={{
           width: 24,
           height: 24,

src/components/popups/Pokemon.jsx

@@ -36,7 +36,7 @@ export default function PokemonPopup({
   userSettings,
   isTutorial,
   Icons,
-  isNight,
+  timeOfDay,
 }) {
   const { t } = useTranslation()
   const classes = useStyles()
@@ -107,7 +107,7 @@ export default function PokemonPopup({
           metaData={metaData}
           perms={pokePerms}
           Icons={Icons}
-          isNight={isNight}
+          timeOfDay={timeOfDay}
         />
         <Footer
           pokemon={pokemon}
@@ -335,7 +335,7 @@ const Stats = ({ pokemon, t }) => {
   )
 }
 
-const Info = ({ pokemon, metaData, perms, Icons, isNight }) => {
+const Info = ({ pokemon, metaData, perms, Icons, timeOfDay }) => {
   const { gender, weather, form } = pokemon
   const formTypes = metaData?.forms?.[form]?.types || metaData?.types || []
 
@@ -355,7 +355,7 @@ const Info = ({ pokemon, metaData, perms, Icons, isNight }) => {
           style={{
             height: 24,
             width: 24,
-            backgroundImage: `url(${Icons.getWeather(weather, isNight)})`,
+            backgroundImage: `url(${Icons.getWeather(weather, timeOfDay)})`,
           }}
         />
       )}

src/components/tiles/Pokemon.jsx

@@ -74,7 +74,7 @@ const PokemonTile = ({
   excludeList,
   ts,
   map,
-  isNight,
+  timeOfDay,
   userSettings,
   staticUserSettings,
   params,
@@ -139,7 +139,7 @@ const PokemonTile = ({
                 ivCircle,
                 Icons,
                 weatherCheck,
-                isNight,
+                timeOfDay,
               )
             : basicMarker(url, size)
         }
@@ -150,7 +150,7 @@ const PokemonTile = ({
             iconUrl={url}
             userSettings={userSettings}
             Icons={Icons}
-            isNight={isNight}
+            timeOfDay={timeOfDay}
           />
         </Popup>
         {(showTimer || userSettings.pokemonTimers) && (

src/components/tiles/Weather.jsx

@@ -4,7 +4,14 @@ import { Popup, Polyline, Marker } from 'react-leaflet'
 import weatherMarker from '../markers/weather'
 import PopupContent from '../popups/Weather'
 
-const WeatherTile = ({ item, ts, Icons, isNight, tileStyle, userSettings }) => {
+const WeatherTile = ({
+  item,
+  ts,
+  Icons,
+  timeOfDay,
+  tileStyle,
+  userSettings,
+}) => {
   const [popup, setPopup] = useState(false)
   const markerRef = useRef(null)
 
@@ -27,7 +34,7 @@ const WeatherTile = ({ item, ts, Icons, isNight, tileStyle, userSettings }) => {
       }}
     >
       <Marker
-        icon={weatherMarker(item, Icons, isNight, userSettings)}
+        icon={weatherMarker(item, Icons, timeOfDay, userSettings)}
         position={[item.latitude, item.longitude]}
         zIndexOffset={10000}
         ref={markerRef}

src/hooks/useConfig.js

@@ -37,7 +37,7 @@ export default function useConfig(serverSettings, params) {
   const setUi = useStatic((state) => state.setUi)
   const setStaticFilters = useStatic((state) => state.setFilters)
   const setWebhookData = useStatic((state) => state.setWebhookData)
-  const setIsNight = useStatic((state) => state.setIsNight)
+  const setTimeOfDay = useStatic((state) => state.setTimeOfDay)
   const setExtraUserFields = useStatic((state) => state.setExtraUserFields)
 
   const localState = JSON.parse(localStorage.getItem('local-state'))
@@ -165,7 +165,7 @@ export default function useConfig(serverSettings, params) {
 
   setZoom(zoom)
   setLocation(location)
-  setIsNight(Utility.nightCheck(...location))
+  setTimeOfDay(Utility.timeCheck(...location))
 
   return { location, zoom }
 }

src/hooks/useStore.js

@@ -130,8 +130,8 @@ export const useStatic = create((set) => ({
   setWebhookAlert: (webhookAlert) => set({ webhookAlert }),
   webhookData: undefined,
   setWebhookData: (webhookData) => set({ webhookData }),
-  isNight: false,
-  setIsNight: (isNight) => set({ isNight }),
+  timeOfDay: 'day',
+  setTimeOfDay: (timeOfDay) => set({ timeOfDay }),
   userProfile: false,
   setUserProfile: (userProfile) => set({ userProfile }),
   feedback: false,

src/services/Icons.js

@@ -303,9 +303,9 @@ export default class UIcons {
     return `${baseUrl}/0.png`
   }
 
-  getWeather(weatherId, isNight = false) {
+  getWeather(weatherId, timeOfDay = false) {
     const baseUrl = `${this[this.selected.weather].path}/weather`
-    const timeSuffixes = isNight ? ['_n', ''] : ['_d', '']
+    const timeSuffixes = timeOfDay === 'night' ? ['_n', ''] : ['_d', '']
     for (let t = 0; t < timeSuffixes.length; t += 1) {
       const result = `${weatherId}${timeSuffixes[t]}.png`
       if (this[this.selected.weather].weather.has(result)) {

src/services/Utility.js

@@ -74,10 +74,19 @@ export default class Utility {
     return slotObj
   }
 
-  static nightCheck(lat, lon) {
+  static timeCheck(lat, lon) {
     const date = new Date()
     const times = SunCalc.getTimes(date, lat, lon)
-    return date <= times.sunrise || date >= times.sunset
+    switch (true) {
+      case date > times.dawn && date < times.sunriseEnd:
+        return 'dawn'
+      case date > times.dusk && date < times.night:
+        return 'dusk'
+      case date > times.night:
+        return 'night'
+      default:
+        return 'day'
+    }
   }
 
   static getMidnight() {