Add better colored place markers

www/css/colorfilters.css

@@ -0,0 +1,71 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+/*
+Colorize images
+
+CSS filters made with https://codepen.io/sosuke/pen/Pjoqqp
+*/
+
+.color-filter-red {
+    filter: brightness(0) saturate(100%) invert(43%) sepia(63%) saturate(6607%) hue-rotate(344deg) brightness(111%) contrast(101%);
+}
+
+.color-filter-green {
+    filter: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(5468%) hue-rotate(70deg) brightness(96%) contrast(76%);
+}
+
+.color-filter-blue {
+    filter: brightness(0) saturate(100%) invert(51%) sepia(33%) saturate(1529%) hue-rotate(172deg) brightness(94%) contrast(104%);
+}
+
+.color-filter-pink {
+    filter: brightness(0) saturate(100%) invert(54%) sepia(96%) saturate(5960%) hue-rotate(330deg) brightness(99%) contrast(106%);
+}
+
+.color-filter-yellow {
+    filter: brightness(0) saturate(100%) invert(76%) sepia(89%) saturate(2826%) hue-rotate(8deg) brightness(112%) contrast(103%);
+}
+
+.color-filter-orange {
+    filter: brightness(0) saturate(100%) invert(53%) sepia(77%) saturate(1004%) hue-rotate(359deg) brightness(103%) contrast(108%);
+}
+
+.color-filter-purple {
+    filter: brightness(0) saturate(100%) invert(18%) sepia(61%) saturate(4153%) hue-rotate(281deg) brightness(95%) contrast(89%);
+}
+
+.color-filter-deeppurple {
+    filter: brightness(0) saturate(100%) invert(26%) sepia(27%) saturate(4860%) hue-rotate(246deg) brightness(89%) contrast(93%);
+}
+
+.color-filter-lightblue {
+    filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(4807%) hue-rotate(168deg) brightness(99%) contrast(98%);
+}
+
+.color-filter-teal {
+    filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(1351%) hue-rotate(149deg) brightness(94%) contrast(101%);
+}
+
+.color-filter-lime {
+    filter: brightness(0) saturate(100%) invert(80%) sepia(12%) saturate(1890%) hue-rotate(22deg) brightness(95%) contrast(114%);
+}
+
+.color-filter-deeporange {
+    filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(6786%) hue-rotate(342deg) brightness(98%) contrast(106%);
+}
+
+.color-filter-gray {
+    filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(162%) hue-rotate(202deg) brightness(87%) contrast(86%);
+}
+
+.color-filter-white {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
+}
+
+.color-filter-black {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7432%) hue-rotate(210deg) brightness(88%) contrast(115%);
+}

www/css/map.css

@@ -22,72 +22,26 @@ TODO: Change image based on place health/strength {0,1,2}.png
     background-size: contain;
 }
 
-
-/*
-Colorize images for map display
-
-CSS filters made with https://codepen.io/sosuke/pen/Pjoqqp
-*/
-
-/*
-TODO: Adjust green and lightblue for better map visibility
-*/
-.color-filter-red {
-    filter: brightness(0) saturate(100%) invert(43%) sepia(63%) saturate(6607%) hue-rotate(344deg) brightness(111%) contrast(101%);
+#mapbox .place-marker.place-color-blue {
+    background-image: url(../img/place/blue.png);
 }
 
-.color-filter-green {
-    filter: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(5468%) hue-rotate(70deg) brightness(96%) contrast(76%);
+#mapbox .place-marker.place-color-red {
+    background-image: url(../img/place/blue.png);
 }
 
-.color-filter-blue {
-    filter: brightness(0) saturate(100%) invert(51%) sepia(33%) saturate(1529%) hue-rotate(172deg) brightness(94%) contrast(104%);
+#mapbox .place-marker.place-color-green {
+    background-image: url(../img/place/green.png);
 }
 
-.color-filter-pink {
-    filter: brightness(0) saturate(100%) invert(54%) sepia(96%) saturate(5960%) hue-rotate(330deg) brightness(99%) contrast(106%);
+#mapbox .place-marker.place-color-lightblue {
+    background-image: url(../img/place/lightblue.png);
 }
 
-.color-filter-yellow {
-    filter: brightness(0) saturate(100%) invert(76%) sepia(89%) saturate(2826%) hue-rotate(8deg) brightness(112%) contrast(103%);
+#mapbox .place-marker.place-color-yellow {
+    background-image: url(../img/place/yellow.png);
 }
 
-.color-filter-orange {
-    filter: brightness(0) saturate(100%) invert(53%) sepia(77%) saturate(1004%) hue-rotate(359deg) brightness(103%) contrast(108%);
-}
-
-.color-filter-purple {
-    filter: brightness(0) saturate(100%) invert(18%) sepia(61%) saturate(4153%) hue-rotate(281deg) brightness(95%) contrast(89%);
-}
-
-.color-filter-deeppurple {
-    filter: brightness(0) saturate(100%) invert(26%) sepia(27%) saturate(4860%) hue-rotate(246deg) brightness(89%) contrast(93%);
-}
-
-.color-filter-lightblue {
-    filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(4807%) hue-rotate(168deg) brightness(99%) contrast(98%);
-}
-
-.color-filter-teal {
-    filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(1351%) hue-rotate(149deg) brightness(94%) contrast(101%);
-}
-
-.color-filter-lime {
-    filter: brightness(0) saturate(100%) invert(80%) sepia(12%) saturate(1890%) hue-rotate(22deg) brightness(95%) contrast(114%);
-}
-
-.color-filter-deeporange {
-    filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(6786%) hue-rotate(342deg) brightness(98%) contrast(106%);
-}
-
-.color-filter-gray {
-    filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(162%) hue-rotate(202deg) brightness(87%) contrast(86%);
-}
-
-.color-filter-white {
-    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
-}
-
-.color-filter-black {
-    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7432%) hue-rotate(210deg) brightness(88%) contrast(115%);
+#mapbox .place-marker.place-color-deeppurple {
+    background-image: url(../img/place/deeppurple.png);
 }

www/js/map.js

@@ -121,7 +121,7 @@ function updatePlaceLayer(latitude, longitude) {
             var el = document.createElement("div");
             el.className = "place-marker";
             if (place.properties.teamid != null && place.properties.teamid > 0) {
-                el.className += " color-filter-" + SETTINGS["teams"][place.properties.teamid]["color"];
+                el.className += " place-color-" + SETTINGS["teams"][place.properties.teamid]["color"];
             }
 
             el.addEventListener('click', function () {

www/js/usericons.js

@@ -0,0 +1,21 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+// Custom identicon style
+// https://jdenticon.com/icon-designer.html?config=214726c41105452e42552f41
+window.jdenticon_config = {
+    hues: [261],
+    lightness: {
+        color: [0.67, 0.86],
+        grayscale: [0.48, 0.65]
+    },
+    saturation: {
+        color: 0.69,
+        grayscale: 0.47
+    },
+    backColor: "#00000000"
+};