Clickable Weather

public/base-locales/en.json

@@ -178,6 +178,7 @@
   "nests_options": "Nest Options",
   "wayfarer_options": "Wayfarer Options",
   "admin_options": "Admin Options",
+  "weather_options": "Weather Options",
   "clustering": "Clustering",
   "glow": "Glow",
   "legacy_filter": "Legacy Filter",
@@ -533,5 +534,6 @@
   "points": "Points",
   "day": "Day",
   "days": "Days",
-  "react_error": "Something Went Wrong"
+  "react_error": "Something Went Wrong",
+  "clickable_icon": "Icon is Clickable"
 }

server/src/configs/default.json

@@ -259,6 +259,9 @@
       "clustering": true,
       "oldPortals": "#0000ff",
       "newPortals": "#16b819"
+    },
+    "weather": {
+      "clickableIcon": false
     }
   },
   "defaultFilters": {

server/src/services/ui/clientOptions.js

@@ -44,6 +44,9 @@ module.exports = function clientOptions(perms) {
       oldPortals: { type: 'color', perm: ['portals'] },
       newPortals: { type: 'color', perm: ['portals'] },
     },
+    weather: {
+      clickableIcon: { type: 'bool', perm: ['weather'] },
+    },
   }
 
   levels.forEach(level => {

src/components/Errors.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Grid, Typography, Button } from '@material-ui/core'
 import { useTranslation } from 'react-i18next'
-import LinkWrapper from './layout/custom/LinkWrapper'
 
 export default function Errors() {
   const { t } = useTranslation()
@@ -26,18 +25,9 @@ export default function Errors() {
         </Typography>
       </Grid>
       <Grid item style={{ paddingTop: 20 }}>
-        <LinkWrapper
-          block={{
-            link: '/',
-            linkColor: 'inherit',
-            underline: 'none',
-          }}
-          element={(
-            <Button variant="outlined" color="secondary">
-              {t('go_back')}
-            </Button>
-          )}
-        />
+        <Button variant="outlined" color="secondary" onClick={() => window.location = window.location.origin}>
+          {t('go_back')}
+        </Button>
       </Grid>
     </Grid>
   )

src/components/QueryData.jsx

@@ -156,6 +156,7 @@ export default function QueryData({
           weather={renderedData[category]}
           isMobile={isMobile}
           zoom={config.activeWeatherZoom}
+          clickable={userSettings.clickableIcon}
           map={map}
         />
       )}

src/components/layout/dialogs/UserOptions.jsx

@@ -97,7 +97,7 @@ export default function UserOptions({ category, toggleDialog, isMobile }) {
   return (
     <>
       <Header
-        titles={[t(`${category}_options`)]}
+        titles={[`${category}_options`]}
         action={toggleDialog(false, category, 'options')}
       />
       <DialogContent style={{ padding: 0 }}>

src/components/layout/general/ActiveWeather.jsx

@@ -1,41 +1,62 @@
-import React from 'react'
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { Fragment, useState } from 'react'
+import { Dialog, DialogContent } from '@material-ui/core'
 import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
 import { point, polygon } from '@turf/helpers'
 
 import { useStore } from '@hooks/useStore'
+import WeatherPopup from '@components/popups/Weather'
+import Header from './Header'
+import Footer from './Footer'
 
-export default function ActiveWeather({ Icons, isNight, map, zoom, weather, isMobile }) {
+export default function ActiveWeather({ Icons, isNight, map, zoom, weather, isMobile, clickable }) {
   const location = useStore(state => state.location)
+  const [open, setOpen] = useState(false)
+
   const { disableColorShift = false } = Icons.getModifiers('weather')
   const active = weather.find(
     cell => cell && booleanPointInPolygon(point(location), polygon([cell.polygon])),
   )
 
   return active?.gameplay_condition && map.getZoom() > zoom ? (
-    <div
-      className="weather-icon"
-      id="active-weather"
-      style={{
-        zIndex: 1000,
-        position: 'absolute',
-        top: 20,
-        right: 20,
-        height: isMobile ? 36 : 50,
-        width: isMobile ? 36 : 50,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <img
-        className={disableColorShift ? '' : 'fancy'}
-        src={Icons.getWeather(active.gameplay_condition, isNight)}
-        alt={active.gameplay_condition}
+    <Fragment key={active?.gameplay_condition}>
+      <div
+        className="weather-icon"
+        id="active-weather"
+        onClick={() => setOpen(Boolean(clickable))}
         style={{
-          width: isMobile ? 24 : 36,
-          height: isMobile ? 24 : 36,
+          zIndex: 1000,
+          position: 'absolute',
+          top: 20,
+          right: 20,
+          height: isMobile ? 36 : 50,
+          width: isMobile ? 36 : 50,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
-      />
-    </div>
+      >
+        <img
+          className={disableColorShift ? '' : 'fancy'}
+          src={Icons.getWeather(active.gameplay_condition, isNight)}
+          alt={active.gameplay_condition}
+          style={{
+            width: isMobile ? 24 : 36,
+            height: isMobile ? 24 : 36,
+          }}
+        />
+      </div>
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs">
+        <Header titles={['weather']} action={() => setOpen(false)} />
+        <DialogContent style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <WeatherPopup
+            weather={active}
+            Icons={Icons}
+            ts={Date.now() / 1000}
+          />
+        </DialogContent>
+        <Footer options={[{ icon: 'Close', name: 'close', action: () => setOpen(false), color: 'primary' }]} />
+      </Dialog>
+    </Fragment>
   ) : null
 }