Add weather

client/package.json

@@ -43,14 +43,14 @@
     "leaflet": "^1.7.1",
     "leaflet.markercluster": "^1.4.1",
     "mini-css-extract-plugin": "^1.3.9",
+    "nodes2ts": "^2.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.13.0",
     "react-leaflet": "^3.1.0",
     "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-router-dom": "^5.2.0",
     "sass-loader": "^11.0.1",
-    "source-map-loader": "^2.0.1",
     "style-loader": "^2.0.0",
     "webpack": "^5.24.3",
     "webpack-cli": "^4.5.0",

client/src/components/MapTiles.jsx

@@ -7,11 +7,18 @@ import Pokemon from './pokemon/Pokemon.jsx'
 import Nav from './layout/Nav.jsx'
 import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 import Portal from './portals/Portal.jsx'
+import Weather from './weather/Weather.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: { lat: 0, lng: 0 },
-    _northEast: { lat: 0, lng: 0 }
+    _southWest: { 
+      lat: settings.map.startLat-0.025, 
+      lng: settings.map.startLon-0.025 
+    },
+    _northEast: { 
+      lat: settings.map.startLat+0.025, 
+      lng: settings.map.startLon+0.025
+    }
   })
   const [selected, setSelected] = useState({
     gyms: settings.map.filters.gyms,
@@ -53,6 +60,7 @@ const MapTiles = ({ map, settings }) => {
       {selected.pokemon && <Pokemon bounds={bounds} />}
       {selected.portals && <Portal bounds={bounds} />}
       {selected.spawnpoints && <Spawnpoint bounds={bounds} />}
+      {selected.weather && <Weather bounds={bounds} />}
       <Nav
         selected={selected}
         setSelected={setSelected}

client/src/components/pokestops/Pokestop.jsx

@@ -17,7 +17,6 @@ const Pokestop = ({ bounds }) => {
       maxLon: bounds._northEast.lng
     }
   })
-  console.log(data)
 
   return (
     <MarkerClusterGroup

client/src/components/portals/Popup.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-const SpawnpointPopup = ({ portal }) => {
+const PortalPopup = ({ portal }) => {
   return (
     <>
     {portal.name}
     </>
   )
 }
 
-export default SpawnpointPopup
+export default PortalPopup

client/src/components/portals/Portal.jsx

@@ -17,7 +17,6 @@ const Portal = ({ bounds }) => {
       maxLon: bounds._northEast.lng
     }
   })
-  console.log(data)
   return (
     <MarkerClusterGroup
       disableClusteringAtZoom={16}

client/src/components/weather/Popup.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const WeatherPopup = ({ weather }) => {
+  return (
+    <>
+    {weather.id}
+    </>
+  )
+}
+
+export default WeatherPopup

client/src/components/weather/Weather.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Popup, Polygon, Polyline, Marker } from 'react-leaflet'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+import getPolygon from '../../services/getPolygon.js'
+import getPolyline from '../../services/getPolyline.js' 
+
+const Weather = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllWeather(), {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  })
+
+  return (
+    <>
+      {data && data.weather.map(cell => {
+        return (
+          <Polyline
+            key={cell.id}
+            positions={getPolyline(cell.id)}
+            pathOptions={{ color: 'green', opacity: 0.5 }}>
+            <Marker icon={marker(cell)} position={[cell.latitude, cell.longitude]}>
+              <Popup position={[cell.latitude, cell.longitude]}>
+                <PopupContent weather={cell} />
+              </Popup>
+            </Marker>
+          </Polyline>
+        )
+      })}
+    </>
+  )
+}
+
+export default Weather

client/src/components/weather/marker.js

@@ -0,0 +1,20 @@
+import { Icon } from 'leaflet'
+
+export default function (weather) {
+  const lastUpdate = new Date(weather.updated * 1000)
+  const now = new Date
+
+  const correctWeather = (
+    lastUpdate.getFullYear() === now.getFullYear() &&
+    lastUpdate.getMonth() === now.getMonth() &&
+    lastUpdate.getDate() === now.getDate() &&
+    lastUpdate.getHours() === now.getHours()
+  )
+
+  return new Icon({
+    iconUrl: `/img/weather/${weather.gameplay_condition}.png`,
+    iconSize: [30, 30],
+    iconAnchor: [20, 33.96],
+    popupAnchor: [0, -41.96]
+  })
+}

client/src/data/weatherTypes.json

@@ -0,0 +1,34 @@
+{
+    "0": {
+        "types": [],
+        "name": "None"
+    },
+    "1": {
+        "types": ["Fire","Grass","Ground"],
+        "name": "Clear"
+    },
+    "2": {
+        "types": ["Water","Electric","Bug"],
+        "name": "Rain"
+    },
+    "3": {
+        "types": ["Normal","Rock"],
+        "name": "Partly Cloudy"
+    },
+    "4": {
+        "types": ["Fairy","Fighting","Poison"],
+        "name": "Cloudy"
+    },
+    "5": {
+        "types": ["Dragon","Flying","Psychic"],
+        "name": "Windy"
+    },
+    "6": {
+        "types": ["Ice","Steel"],
+        "name": "Snow"
+    },
+    "7" : {
+        "types": ["Dark","Ghost"],
+        "name": "Fog"
+    }
+}

client/src/services/Query.js

@@ -4,6 +4,7 @@ import { getAllPokestops } from './data/pokestop.js'
 import { getAllPokemon } from './data/pokemon.js'
 import { getAllSpawnpoints } from './data/spawnpoint.js'
 import { getAllPortals } from './data/portal.js' 
+import { getAllWeather } from './data/weather.js'
 
 class Query {
 
@@ -31,6 +32,10 @@ class Query {
     return getAllSpawnpoints
   }
 
+  static getAllWeather() {
+    return getAllWeather
+  }
+
 }
 
 export default Query

client/src/services/data/weather.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client'
+
+const getAllWeather = gql`
+query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+  weather(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+    id
+    latitude
+    longitude
+    gameplay_condition
+    updated
+  }
+}
+`
+
+export { getAllWeather }

client/src/services/getPolygon.js

@@ -0,0 +1,17 @@
+import { S2LatLng, S2Cell, S2CellId, S2Point } from 'nodes2ts';
+
+export default function (s2cellId) {
+  const s2cell = new S2Cell(new S2CellId(BigInt(s2cellId).toString()))
+  const polygon = []
+  for (let i = 0; i <= 3; i++) {
+    const coordinate = s2cell.getVertex(i)
+    const point = new S2Point(coordinate.x, coordinate.y, coordinate.z)
+    const latLng = S2LatLng.fromPoint(point)
+    polygon.push([
+      latLng.latDegrees,
+      latLng.lngDegrees
+    ])
+  }
+
+  return polygon
+}

client/src/services/getPolyline.js

@@ -0,0 +1,18 @@
+import { S2LatLng, S2Cell, S2CellId, S2Point } from 'nodes2ts';
+
+export default function (s2cellId) {
+  const s2cell = new S2Cell(new S2CellId(BigInt(s2cellId).toString()))
+  const polygon = []
+  for (let i = 0; i <= 3; i++) {
+    const coordinate = s2cell.getVertex(i)
+    const point = new S2Point(coordinate.x, coordinate.y, coordinate.z)
+    const latLng = S2LatLng.fromPoint(point)
+    polygon.push([
+      latLng.latDegrees,
+      latLng.lngDegrees
+    ])
+  }
+  polygon.push(polygon[0])
+
+  return polygon
+}

client/webpack.config.js

@@ -1,7 +1,7 @@
 import path, { dirname } from 'path'
 import { fileURLToPath } from 'url'
 import HtmlWebpackPlugin from "html-webpack-plugin"
-
+import config from '../server/src/services/config.js'
 import webpack from 'webpack'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -19,6 +19,7 @@ export default {
     publicPath: '/dist/'
   },
   mode: 'development',
+  devtool: "source-map",
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
@@ -47,32 +48,27 @@ export default {
           "sass-loader",
         ]
       },
-      {
-        test: /\.jsx?$/,
-        enforce: 'pre',
-        use: ['source-map-loader'],
-      },
       {
         test: /\.(png|jpe?g|gif)$/i,
         loader: 'file-loader',
       }
     ]
   },
   resolve: {
-    mainFields: ['browser','main','module'],
+    mainFields: ['browser', 'main', 'module'],
     alias: {
       ...reactDomAlias,
       "@Components": path.resolve(__dirname, "src/components/"),
       "@Providers": path.resolve(__dirname, "src/providers/"),
     },
-    extensions: ["*", ".js", ".jsx", ".scss"],
+    extensions: ["*", ".js", ".jsx", ".ts", ".tsx", ".scss"],
   },
   devServer: {
     contentBase: path.join(__dirname, "public/"),
     historyApiFallback: true,
-    port: 3000,
+    port: config.port,
     hotOnly: true,
-    publicPath: "http://localhost:3000/",
+    publicPath: `http://${config.interface}:${config.port}/`,
     proxy: [
       {
         context: ["/auth", "/api"],

server/src/models/Weather.js

@@ -0,0 +1,9 @@
+import { Model } from 'objection'
+
+class Weather extends Model {
+  static get tableName() {
+    return 'weather'
+  }
+}
+
+export default Weather

server/src/models/index.js

@@ -2,14 +2,16 @@ import Device from './Device.js'
 import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
-import Spawnpoint from './Spawnpoint.js'
 import Portal from './Portal.js' 
+import Spawnpoint from './Spawnpoint.js'
+import Weather from './Weather.js' 
 
 export {
   Device,
   Gym,
   Pokestop,
   Pokemon,
   Portal,
-  Spawnpoint
+  Spawnpoint,
+  Weather
 }

server/src/schema/schema.js

@@ -1,12 +1,14 @@
 import { GraphQLObjectType, GraphQLID, GraphQLFloat, GraphQLList, GraphQLSchema } from 'graphql'
+import { ref } from 'objection'
 
 import DeviceType from './device.js'
 import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
 import PortalType from './portals.js'
 import SpawnpointType from './spawnpoint.js'
-import { Device, Gym, Pokemon, Pokestop, Portal, Spawnpoint } from '../models/index.js'
+import WeatherType from './weather.js'
+import { Device, Gym, Pokemon, Pokestop, Portal, Spawnpoint, Weather } from '../models/index.js'
 
 const minMaxArgs = {
   minLat: { type: GraphQLFloat },
@@ -86,6 +88,18 @@ const RootQuery = new GraphQLObjectType({
           .whereBetween('lat', [args.minLat, args.maxLat])
           .andWhereBetween('lon', [args.minLon, args.maxLon])
       }
+    },
+    weather: {
+      type: new GraphQLList(WeatherType),
+      args: minMaxArgs,
+      async resolve(parent, args) {
+        return await Weather.query()
+          .select(['*', ref('id')
+            .castTo('CHAR')
+            .as('id')])
+          .whereBetween('latitude', [args.minLat, args.maxLat])
+          .andWhereBetween('longitude', [args.minLon, args.maxLon])
+      }
     }
   }
 })