dumb dev double render

src/app-bundles/game-boundary-layer-bundle.js

@@ -0,0 +1,66 @@
+import { Vector as VectorLayer } from "ol/layer";
+import { Vector as VectorSource } from "ol/source";
+import { Stroke, Fill, Style } from "ol/style";
+import { GeoJSON } from "ol/format";
+
+export default {
+  name: "boundary",
+
+  state: {
+    layer: null,
+  },
+
+  getBoundaryLayer: (state) => state.boundary.layer,
+
+  createBoundaryLayer:
+    () =>
+    ({ store, set }) => {
+      console.log("should create the boundary layer");
+      const map = store.getMap();
+      const existingLayer = store.getBoundaryLayer();
+      if (existingLayer) return;
+
+      const layer = new VectorLayer({
+        source: new VectorSource(),
+        style: new Style({
+          stroke: new Stroke({
+            color: "rgba(148, 12, 201)",
+            lineDash: [4],
+            width: 3,
+          }),
+          fill: new Fill({
+            color: "rgba(148, 12, 201, 0.05)",
+          }),
+        }),
+      });
+
+      map.addLayer(layer);
+      set({ layer });
+    },
+
+  setBoundary:
+    () =>
+    ({ store }) => {
+      console.log("should add the boundary");
+      const map = store.getMap();
+      const layer = store.getBoundaryLayer();
+      const src = layer.getSource();
+      const games = store.getGamesByJoinCode();
+      const joinedGame = store.getJoinedGame();
+      const game = games[joinedGame];
+      const boundary = new GeoJSON().readFeatures(JSON.parse(game.geometry));
+      src.addFeatures(boundary);
+      console.log(src.getExtent());
+      map
+        .getView()
+        .fit(src.getExtent(), {
+          duration: 1000,
+          callback: () => console.log("done"),
+        });
+    },
+
+  init: ({ store }) => {
+    store.on("map-created", store.createBoundaryLayer);
+    store.on("game-joined", store.setBoundary);
+  },
+};

src/app-bundles/games-bundle.js

@@ -12,6 +12,15 @@ export default {
 
   getGames: (state) => state.games.games,
 
+  getGamesByJoinCode: (state) => {
+    const games = state.games.games;
+    const gamesByJoinCode = {};
+    games.forEach((game) => {
+      gamesByJoinCode[game.join_code] = game;
+    });
+    return gamesByJoinCode;
+  },
+
   getJoinedGame: (state) => state.games.joinedGame,
 
   getSocket: (state) => state.games.socket,

src/app-bundles/gps-layer-bundle.js

@@ -45,6 +45,8 @@ export default {
     ({ store, set }) => {
       const username = store.getUsername();
       const map = store.getMap();
+      const existingLayer = store.getGpsLayer();
+      if (existingLayer) return;
 
       const layer = new VectorLayer({
         source: new VectorSource(),
@@ -75,13 +77,23 @@ export default {
 
       if ("geolocation" in navigator) {
         console.log("geolocation available, starting watch");
+        let posId = 0;
         navigator.geolocation.watchPosition(
           (position) => {
+            console.log("position", posId);
             const { latitude, longitude } = position.coords;
             const coords = [longitude, latitude];
             myLocation.setGeometry(new Point(coords));
-            map.getView().fit(layer.getSource().getExtent(), { maxZoom: 18 });
+            if (posId === 0) {
+              map.getView().fit(layer.getSource().getExtent(), {
+                maxZoom: 18,
+                duration: 500,
+              });
+            } else {
+              map.getView().animate({ center: coords, duration: 300 });
+            }
             store.broadcastLocationChange();
+            posId++;
           },
           console.error,
           { enableHighAccuracy: true }

src/app-bundles/index.js

@@ -1,4 +1,5 @@
 import authBundle from "./auth-bundle";
+import gameBoundaryLayerBundle from "./game-boundary-layer-bundle";
 import gamesBundle from "./games-bundle";
 import gpsLayerBundle from "./gps-layer-bundle";
 import mapBundle from "./map-bundle";
@@ -10,4 +11,5 @@ export default [
   mapBundle,
   gpsLayerBundle,
   playersLayerBundle,
+  gameBoundaryLayerBundle,
 ];

src/app-bundles/map-bundle.js

@@ -1,6 +1,6 @@
 import { Map, View } from "ol";
 import { Tile as TileLayer } from "ol/layer";
-import { OSM } from "ol/source";
+import { XYZ } from "ol/source";
 import * as proj from "ol/proj";
 proj.useGeographic();
 
@@ -15,14 +15,18 @@ export default {
 
   createMap:
     (options) =>
-    ({ set, fire }) => {
+    ({ store, set, fire }) => {
       const { target, layers = [] } = options;
+      const existingMap = store.getMap();
+      if (existingMap) return;
 
       const map = new Map({
         target: target,
         layers: [
           new TileLayer({
-            source: new OSM(),
+            source: new XYZ({
+              url: "https://cartodb-basemaps-{a-c}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
+            }),
           }),
           ...layers,
         ],

src/app-bundles/players-layer-bundle.js

@@ -11,6 +11,17 @@ proj.useGeographic();
 // eslint-disable-next-line no-undef
 const apiRoot = __API_ROOT__;
 
+// utility function to create a player feature
+function createPlayerFeature(player) {
+  const { username, score, position } = player;
+  const feature = new Feature({
+    geometry: new Point(position),
+  });
+  feature.set("username", username);
+  feature.set("score", score);
+  return feature;
+}
+
 export default {
   name: "players",
 
@@ -27,6 +38,8 @@ export default {
     () =>
     ({ store, set }) => {
       const map = store.getMap();
+      const existingLayer = store.getPlayersLayer();
+      if (existingLayer) return;
 
       const layer = new VectorLayer({
         source: new VectorSource(),
@@ -41,7 +54,7 @@ export default {
             text: new Text({
               text: `@${username}`,
               font: "bold italic 16px sans-serif",
-              offsetY: -45,
+              offsetY: -65,
               overflow: true,
               fill: new Fill({
                 color: "#fff",
@@ -61,7 +74,7 @@ export default {
 
   loadPlayers:
     () =>
-    ({ store, set }) => {
+    ({ store, set, fire }) => {
       const token = store.getToken();
       const joinCode = store.getJoinedGame();
       if (!token || !joinCode) return null;
@@ -81,35 +94,30 @@ export default {
           set({
             players: data
               .map((p) => {
+                if (!p.position) return null;
                 return {
                   ...p,
                   position: p.position.split(",").map(parseFloat),
                 };
               })
+              .filter((p) => !!p)
               .reduce((acc, p) => {
                 const { username } = p;
-                const feature = store.createPlayerFeature(p);
-                acc[username] = feature;
+                acc[username] = createPlayerFeature(p);
                 return acc;
               }, {}),
           });
+          fire("players-loaded");
         });
     },
 
-  // needs to be outside the store, or just not abstracted
-  createPlayerFeature:
-    (player) =>
+  addPlayersToMap:
+    () =>
     ({ store }) => {
+      const players = store.getPlayers();
       const layer = store.getPlayersLayer();
-      const src = layer.getSource();
-      const { username, score, position } = player;
-      const feature = new Feature({
-        geometry: new Point(position),
-      });
-      feature.set("username", username);
-      feature.set("score", score);
-      src.addFeature(feature);
-      return feature;
+      const features = Object.values(players);
+      layer.getSource().addFeatures(features);
     },
 
   updatePlayerLocation:
@@ -132,6 +140,7 @@ export default {
   init: ({ store }) => {
     store.on("map-created", store.createPlayersLayer);
     store.on("game-joined", store.loadPlayers);
+    store.on("players-loaded", store.addPlayersToMap);
     store.on("user-location-update", store.updatePlayerLocation);
   },
 };

src/app-components/game-map.jsx

@@ -18,7 +18,6 @@ export default function GameMap({ game }) {
 
   useEffect(() => {
     if (!mapRef.current) return;
-    console.log("creating map");
     createMap({ target: mapRef.current });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapRef]);