diff --git a/www/css/colorfilters.css b/www/css/colorfilters.css new file mode 100644 index 0000000..67457bb --- /dev/null +++ b/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%); +} \ No newline at end of file diff --git a/www/css/map.css b/www/css/map.css index 323df7a..96b372b 100644 --- a/www/css/map.css +++ b/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%); -} - -.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%); +#mapbox .place-marker.place-color-blue { + background-image: url(../img/place/blue.png); } -.color-filter-lime { - filter: brightness(0) saturate(100%) invert(80%) sepia(12%) saturate(1890%) hue-rotate(22deg) brightness(95%) contrast(114%); +#mapbox .place-marker.place-color-red { + background-image: url(../img/place/blue.png); } -.color-filter-deeporange { - filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(6786%) hue-rotate(342deg) brightness(98%) contrast(106%); +#mapbox .place-marker.place-color-green { + background-image: url(../img/place/green.png); } -.color-filter-gray { - filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(162%) hue-rotate(202deg) brightness(87%) contrast(86%); +#mapbox .place-marker.place-color-lightblue { + background-image: url(../img/place/lightblue.png); } -.color-filter-white { - filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); +#mapbox .place-marker.place-color-yellow { + background-image: url(../img/place/yellow.png); } -.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); } \ No newline at end of file diff --git a/www/img/place/blue.png b/www/img/place/blue.png new file mode 100644 index 0000000..2133b43 Binary files /dev/null and b/www/img/place/blue.png differ diff --git a/www/img/place/deeppurple.png b/www/img/place/deeppurple.png new file mode 100644 index 0000000..e819f85 Binary files /dev/null and b/www/img/place/deeppurple.png differ diff --git a/www/img/place/green.png b/www/img/place/green.png new file mode 100644 index 0000000..c543f77 Binary files /dev/null and b/www/img/place/green.png differ diff --git a/www/img/place/lightblue.png b/www/img/place/lightblue.png new file mode 100644 index 0000000..c8f0ba0 Binary files /dev/null and b/www/img/place/lightblue.png differ diff --git a/www/img/place/red.png b/www/img/place/red.png new file mode 100644 index 0000000..f60f11e Binary files /dev/null and b/www/img/place/red.png differ diff --git a/www/img/place/yellow.png b/www/img/place/yellow.png new file mode 100644 index 0000000..2bfd2b6 Binary files /dev/null and b/www/img/place/yellow.png differ diff --git a/www/js/map.js b/www/js/map.js index 076853e..2178c5e 100644 --- a/www/js/map.js +++ b/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 () { diff --git a/www/js/usericons.js b/www/js/usericons.js new file mode 100644 index 0000000..9a67bd8 --- /dev/null +++ b/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" +}; \ No newline at end of file