- 
+
Level: ${pokemonLevel}
Exclude
Notify
@@ -572,7 +532,7 @@ function pokemonLabel(item) {
+
Level: ${pokemonLevel}
Exclude
Notify
@@ -572,7 +532,7 @@ function pokemonLabel(item) {
-
+
Level: n/a
Exclude
Notify
@@ -664,11 +624,8 @@ function gymLabel(gym, includeMembers = true) {
if (gym.team_id !== 0) {
subtitle = `
-
+
Level: n/a
Exclude
Notify
@@ -664,11 +624,8 @@ function gymLabel(gym, includeMembers = true) {
if (gym.team_id !== 0) {
subtitle = `
-
- 
-
- Strength: ${gymPoints} (${slotsString})
-
+ 
+
}.png)
`
+ image = ``
}
@@ -759,13 +716,13 @@ function gymLabel(gym, includeMembers = true) {
-
- Strength: ${gymPoints} (${slotsString})
-
+
+ Strength: ${gymPoints} (${slotsString})
`
}
@@ -679,7 +636,7 @@ function gymLabel(gym, includeMembers = true) {
if (isRaidStarted) {
// Set default image.
image = `
-
+
${levelStr}
@@ -688,12 +645,12 @@ function gymLabel(gym, includeMembers = true) {
`
// Use Pokémon-specific image if we have one.
- if (raid.pokemon_id !== null && pokemonWithImages.indexOf(raid.pokemon_id) !== -1) {
+ if (raid.pokemon_id !== null) {
image = `
- 
+
+
@@ -714,7 +671,7 @@ function gymLabel(gym, includeMembers = true) {
`
}
} else {
- image = `}_${raid.level}.png)
`
+ image = ``
}
if (isUpcomingRaid) {
@@ -727,7 +684,7 @@ function gymLabel(gym, includeMembers = true) {
`
}
} else {
- image = ``
+ image = ``
}
if (isUpcomingRaid) {
@@ -727,7 +684,7 @@ function gymLabel(gym, includeMembers = true) {
`
+ image = ``
}
@@ -759,13 +716,13 @@ function gymLabel(gym, includeMembers = true) {
-
+
${member.pokemon_name}
-
- 
${member.cp_decayed}
+
@@ -802,7 +759,7 @@ function pokestopLabel(expireTime, latitude, longitude) {
00m00s left (${moment(expireTime).format('HH:mm')})
${member.cp_decayed}
+
+ ${member.cp_decayed}
- 
+
+
${latitude.toFixed(6)}, ${longitude.toFixed(7)}
@@ -816,7 +773,7 @@ function pokestopLabel(expireTime, latitude, longitude) {
Pokéstop
- 
+
+
${latitude.toFixed(6)}, ${longitude.toFixed(7)}
@@ -1108,39 +1065,30 @@ function setupGymMarker(item) {
}
function updateGymMarker(item, marker) {
- let raidLevel = getRaidLevel(item.raid)
- if (item.raid && isOngoingRaid(item.raid) && Store.get('showRaids') && raidLevel >= Store.get('showRaidMinLevel') && raidLevel <= Store.get('showRaidMaxLevel')) {
- let markerImage = 'static/images/raid/' + gymTypes[item.team_id] + '_' + item.raid.level + '_unknown.png'
- if (pokemonWithImages.indexOf(item.raid.pokemon_id) !== -1) {
- markerImage = 'static/images/raid/' + gymTypes[item.team_id] + '_' + item['raid']['pokemon_id'] + '.png'
- }
- marker.setIcon({
- url: markerImage,
- scaledSize: new google.maps.Size(48, 48)
- })
+ var raidLevel = item.raid.level || 0
+ var raidPokemon = item.raid.pokemon_id
+
+ const shouldShowRaid = Store.get('showRaids') &&
+ raidLevel >= Store.get('showRaidMinLevel') &&
+ raidLevel <= Store.get('showRaidMaxLevel')
+ const isOngoingEgg = item.raid && item.raid.end > Date.now()
+
+ if (shouldShowRaid && isOngoingRaid(item.raid)) {
marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1)
- } else if (item.raid && item.raid.end > Date.now() && Store.get('showRaids') && !Store.get('showActiveRaidsOnly') && raidLevel >= Store.get('showRaidMinLevel') && raidLevel <= Store.get('showRaidMaxLevel')) {
- marker.setIcon({
- url: 'static/images/gym/' + gymTypes[item.team_id] + '_' + getGymLevel(item) + '_' + item['raid']['level'] + '.png',
- scaledSize: new google.maps.Size(48, 48)
- })
+ } else if (shouldShowRaid && isOngoingEgg && !Store.get('showActiveRaidsOnly')) {
+ raidPokemon = undefined
} else {
- marker.setIcon({
- url: 'static/images/gym/' + gymTypes[item.team_id] + '_' + getGymLevel(item) + '.png',
- scaledSize: new google.maps.Size(48, 48)
- })
+ raidLevel = undefined
+ raidPokemon = undefined
marker.setZIndex(1)
}
+
+ marker.setIcon(gymMarker(gymTypes[item.team_id], getGymLevel(item), raidLevel, raidPokemon, 48))
marker.infoWindow.setContent(gymLabel(item))
return marker
}
function setupPokestopMarker(item) {
- var imagename = item['lure_expiration'] ? 'PokestopLured' : 'Pokestop'
- var image = {
- url: 'static/images/pokestop/' + imagename + '.png',
- scaledSize: new google.maps.Size(32, 32)
- }
var marker = new google.maps.Marker({
position: {
lat: item['latitude'],
@@ -1148,7 +1096,7 @@ function setupPokestopMarker(item) {
},
map: map,
zIndex: item['lure_expiration'] ? 3 : 2,
- icon: image
+ icon: pokestopMarker(item['lure_expiration'], 32)
})
if (!marker.rangeCircle && isRangeActive(map)) {
@@ -1219,26 +1167,17 @@ function getColorBySpawnTime(value) {
}
function changeSpawnIcon(color, zoom) {
- var urlColor = ''
if (color === 275) {
- urlColor = './static/icons/hsl-275-light.png'
- } else {
- urlColor = './static/icons/hsl-' + color + '.png'
- }
- var zoomScale = 1.6 // adjust this value to change the size of the spawnpoint icons
- var minimumSize = 1
- var newSize = Math.round(zoomScale * (zoom - 10)) // this scales the icon based on zoom
- if (newSize < minimumSize) {
- newSize = minimumSize
+ color += '-light'
}
- var newIcon = {
- url: urlColor,
- scaledSize: new google.maps.Size(newSize, newSize),
- anchor: new google.maps.Point(newSize / 2, newSize / 2)
- }
+ const zoomScale = 1.6
+ const size = Math.max(Math.round(zoomScale * (zoom - 10)), 1)
- return newIcon
+ const icon = spawnpointMarker(color, size)
+ icon.anchor = new google.maps.Point(size / 2, size / 2)
+
+ return icon
}
function spawnPointIndex(color) {
@@ -1970,7 +1909,7 @@ function createMyLocationButton() {
locationIcon.style.margin = '5px'
locationIcon.style.width = '18px'
locationIcon.style.height = '18px'
- locationIcon.style.backgroundImage = 'url(static/mylocation-sprite-1x.png)'
+ locationIcon.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)'
locationIcon.style.backgroundSize = '180px 18px'
locationIcon.style.backgroundPosition = '0px 0px'
locationIcon.style.backgroundRepeat = 'no-repeat'
@@ -2156,7 +2095,7 @@ function showGymDetails(id) { // eslint-disable-line no-unused-vars
pokemonHtml = `
Gym Leader:
-
+
${result.guard_pokemon_name}
- 
+
${pokemon.cp_decayed}
+
-
+
${result.guard_pokemon_name}
@@ -2192,11 +2131,13 @@ function getSidebarGymMember(pokemon) { return `
+
${pokemon.pokemon_name}
- ${pokemon.cp_decayed}
+ ${pokemon.cp_decayed}
+
${pokemon.trainer_name} (${pokemon.trainer_level})
@@ -2254,7 +2195,7 @@ function getSidebarGymMember(pokemon) {
${pokemon.move_2_name}
${pokemon.move_2_type['type']}
-
+
@@ -2502,46 +2443,50 @@ $(function () {
$selectSearchIconMarker = $('#iconmarker-style')
$selectLocationIconMarker = $('#locationmarker-style')
- $.getJSON('static/dist/data/searchmarkerstyle.min.json').done(function (data) {
- searchMarkerStyles = data
- var searchMarkerStyleList = []
-
- $.each(data, function (key, value) {
- searchMarkerStyleList.push({
- id: key,
- text: value.name
- })
+ function setupPositionMarkers() {
+ const positionMarkers = getPositionMarkers()
+ const positionMarkerNames = $.map(positionMarkers, function (details, name) {
+ return {
+ id: name,
+ text: toTitleCase(name.replace(/[-_]+/g, ' '))
+ }
})
$selectSearchIconMarker.select2({
placeholder: 'Select Icon Marker',
- data: searchMarkerStyleList,
+ data: positionMarkerNames,
minimumResultsForSearch: Infinity
})
$selectSearchIconMarker.on('change', function (e) {
- var selectSearchIconMarker = $selectSearchIconMarker.val()
- Store.set('searchMarkerStyle', selectSearchIconMarker)
- updateSearchMarker(selectSearchIconMarker)
+ Store.set('searchMarkerStyle', this.value)
+ updatePositionMarker(searchMarker, this.value)
})
$selectSearchIconMarker.val(Store.get('searchMarkerStyle')).trigger('change')
- updateSearchMarker(Store.get('lockMarker'))
-
$selectLocationIconMarker.select2({
placeholder: 'Select Location Marker',
- data: searchMarkerStyleList,
+ data: positionMarkerNames,
minimumResultsForSearch: Infinity
})
$selectLocationIconMarker.on('change', function (e) {
Store.set('locationMarkerStyle', this.value)
- updateLocationMarker(this.value)
+ updatePositionMarker(locationMarker, this.value)
})
$selectLocationIconMarker.val(Store.get('locationMarkerStyle')).trigger('change')
- })
+ }
+
+ if (spriteMap) {
+ setupPositionMarkers()
+ } else {
+ $.getJSON('static/dist/data/sprite_map.min.json').done(function (data) {
+ spriteMap = data
+ setupPositionMarkers()
+ })
+ }
})
$(function () {
@@ -2550,9 +2495,7 @@ $(function () {
if (!state.id) {
return state.text
}
- var $state = $(
- ' ' + state.text + ''
- )
+ var $state = $(` ${state.text}`)
return $state
}
diff --git a/static/js/statistics.js b/static/js/statistics.js
index c5d0377ae4..47e27eec8c 100644
--- a/static/js/statistics.js
+++ b/static/js/statistics.js
@@ -58,7 +58,7 @@ function processSeen(seen) {
$('#stats_table > tbody')
.append(`
-
+
${pokemonItem.pokemon_id}
diff --git a/static/move-bar-sprite.png b/static/move-bar-sprite.png
deleted file mode 100644
index 0099a8749b..0000000000
Binary files a/static/move-bar-sprite.png and /dev/null differ
diff --git a/static/mylocation-sprite-1x.png b/static/mylocation-sprite-1x.png
deleted file mode 100644
index d0b4ddd32f..0000000000
Binary files a/static/mylocation-sprite-1x.png and /dev/null differ
diff --git a/static/sass/components/_sprites.scss b/static/sass/components/_sprites.scss
deleted file mode 100644
index 86436f3a2d..0000000000
--- a/static/sass/components/_sprites.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/// Sprites for Pokemon icons on map.
-.pokemon-large-sprite {
- @include pokemon-sprites("icons-large-sprite.png", 80px);
-}
-
-/// Sprites for Pokemon icons in gyms and statistics.
-.pokemon-sprite {
- @include pokemon-sprites("icons-sprite.png", 30px);
-}
diff --git a/static/sass/layout/_gym-details.scss b/static/sass/layout/_gym-details.scss
index b158ce1706..d277ef7c03 100644
--- a/static/sass/layout/_gym-details.scss
+++ b/static/sass/layout/_gym-details.scss
@@ -270,6 +270,12 @@
}
}
+ .move-bar {
+ display: block;
+ width: 100px;
+ height: 15px;
+ }
+
.damage {
@media screen and (max-width: 480px) {
margin-right: 2px !important;
@@ -389,14 +395,24 @@
}
&.strength {
- @media screen and (max-width: 480px) {
- height: 12px !important;
- width:: 12px !important;
+ .rm-sprite {
+ display: inline-block;
+ @media screen and (max-width: 320px) {
+ height: 12px !important;
+ width: 12px !important;
+ }
+ height: 16px;
+ width: 16px;
+ margin: 2px;
+ margin-right: 1px;
+ vertical-align: middle;
+ }
+
+ span {
+ display: inline-block;
+ font-weight: 900;
+ vertical-align: middle;
}
- font-weight: 900;
- height: 16px;
- width: 16px;
- vertical-align: middle;
}
}
@@ -404,15 +420,22 @@
font-size: 12px;
&.motivation {
- font-weight: 900;
-
- &.heart {
- @media screen and (max-width: 480px) {
+ .rm-sprite {
+ display: inline-block;
+ @media screen and (max-width: 320px) {
height: 8px !important;
width: 8px !important;
}
height: 12px;
width: 12px;
+ margin: 2px;
+ margin-right: 1px;
+ vertical-align: middle;
+ }
+
+ span {
+ display: inline-block;
+ font-weight: 900;
vertical-align: middle;
}
}
diff --git a/static/sass/layout/_gym.scss b/static/sass/layout/_gym.scss
index 132b100934..4276a0b557 100644
--- a/static/sass/layout/_gym.scss
+++ b/static/sass/layout/_gym.scss
@@ -57,10 +57,24 @@
}
&.strength {
- font-weight: 900;
- height: 12px;
- width: 12px;
- vertical-align: middle;
+ .rm-sprite {
+ display: inline-block;
+ @media screen and (max-width: 320px) {
+ height: 8px !important;
+ width: 8px !important;
+ }
+ height: 12px;
+ width: 12px;
+ margin: 2px;
+ margin-right: 1px;
+ vertical-align: middle;
+ }
+
+ span {
+ display: inline-block;
+ font-weight: 900;
+ vertical-align: middle;
+ }
}
}
@@ -73,17 +87,30 @@
vertical-align: middle;
&.motivation {
-
- &.heart {
+ .rm-sprite {
+ display: inline-block;
@media screen and (max-width: 320px) {
height: 6px !important;
width: 6px !important;
}
- height: 8px;
- width: 8px;
- margin-right: -1px;
+ height: 10px;
+ width: 10px;
+ margin: 2px;
+ margin-right: 1px;
+ vertical-align: middle;
+ }
+
+ span {
+ display: inline-block;
+ font-weight: 900;
+ vertical-align: middle;
}
}
+
+ &.sprite {
+ height: 30px;
+ width: 30px;
+ }
}
}
diff --git a/static/sass/layout/_header.scss b/static/sass/layout/_header.scss
index 809c0fca4b..b345581052 100644
--- a/static/sass/layout/_header.scss
+++ b/static/sass/layout/_header.scss
@@ -133,7 +133,8 @@
}
}
- .rocket.icon {
+ .rm-sprite.other-rocket {
+ display: inline-block;
@media screen and (max-width: 480px) {
height: 24px !important;
width:: 24px !important;
diff --git a/static/sass/libs/_mixins.scss b/static/sass/libs/_mixins.scss
index 140b7f7cc2..f224dabe45 100644
--- a/static/sass/libs/_mixins.scss
+++ b/static/sass/libs/_mixins.scss
@@ -38,30 +38,3 @@
-webkit-user-select: none;
user-select: none;
}
-
-/// Defines Pokemon sprites
-/// @param {string} $filename The filename of the spritesheet, including file extension, excluding path
-/// @param {number} $icon_size The size of one icon, e.g. 80px
-@mixin pokemon-sprites($filename, $icon_size) {
- /// These are constant for now
- $icons_per_row: 28;
- $total_icons: 493;
-
- display: inline-block;
- background: {
- image: url(../../../#{$filename});
- size: ($icon_size * $icons_per_row) (ceil($total_icons / $icons_per_row) * $icon_size);
- repeat: no-repeat;
- };
- top: 6px;
- position: relative;
- -moz-transform-origin: 0 0;
- height: $icon_size;
- width: $icon_size;
-
- @for $i from 1 through $total_icons {
- &.n#{$i} {
- background-position: -#{$icon_size * (($i - 1) % $icons_per_row)} -#{$icon_size * floor(($i - 1) / $icons_per_row)}
- }
- }
-}
diff --git a/static/sass/main.scss b/static/sass/main.scss
index 33ddbd16aa..d28838ef3a 100644
--- a/static/sass/main.scss
+++ b/static/sass/main.scss
@@ -43,7 +43,6 @@
@import 'components/table';
@import 'components/button';
@import 'components/grid-demo';
-@import 'components/sprites';
// @import 'components/overlay';
// Layout.
@@ -59,4 +58,4 @@
@import 'layout/pokestop';
@import 'layout/pokemon';
-@import 'move-bar-sprite.scss';
+@import 'sprites.scss';
diff --git a/static/sass/move-bar-sprite.scss b/static/sass/move-bar-sprite.scss
deleted file mode 100644
index 18ae50ce1e..0000000000
--- a/static/sass/move-bar-sprite.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.move-bar-sprite {
- background-image: url(../../../move-bar-sprite.png);
- background-repeat: no-repeat;
- display: block;
-}
-
-.move-bar-sprite-1 {
- width: 100px;
- height: 11px;
- background-position: -2px -2px;
-}
-
-.move-bar-sprite-2 {
- width: 100px;
- height: 11px;
- background-position: -2px -17px;
-}
-
-.move-bar-sprite-3 {
- width: 100px;
- height: 11px;
- background-position: -2px -32px;
-}
-
-.move-bar-sprite-4 {
- width: 100px;
- height: 11px;
- background-position: -2px -47px;
-}
-
-.move-bar-sprite-5 {
- width: 100px;
- height: 11px;
- background-position: -2px -62px;
-}
diff --git a/static/sass/statistics.scss b/static/sass/statistics.scss
index ff465b81e6..929fcf5b21 100644
--- a/static/sass/statistics.scss
+++ b/static/sass/statistics.scss
@@ -1,8 +1,8 @@
-.status_container{
+.status_container {
display: none;
}
-.overlay{
+.overlay {
z-index: 100000;
display: none;
background-color: rgba(0,0,0,0.5);
@@ -13,11 +13,11 @@
min-height: 100%;
}
-#location_map{
+#location_map {
height: 100%;
}
-#times_list{
+#times_list {
float: left;
background: white;
position: fixed;
@@ -28,19 +28,19 @@
overflow: auto;
}
-#times_list div{
+#times_list div {
padding-bottom: 2px;
}
-#times_list .row0{
+#times_list .row0 {
background: #f1f1f1;
}
-#times_list .row1{
+#times_list .row1 {
background: #f8f8f8;
}
-.overlay .close{
+.overlay .close {
position: relative;
float: right;
margin-top: 20px;
@@ -49,7 +49,7 @@
cursor: pointer;
}
-.overlay .content{
+.overlay .content {
background: white;
margin: 50px;
border-radius: 10px;
@@ -62,16 +62,28 @@
right: 0px;
}
-#loading{
+#loading {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
}
-#loading img{
+#loading img {
top: 50%;
left: 50%;
margin-right: -50%;
position: absolute;
-}
\ No newline at end of file
+}
+
+#stats_table.pokemon.sprite {
+ display: block;
+ width: 30px;
+ height: 30px;
+}
+
+.rm-sprite.other-close {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+}
diff --git a/static01.zip b/static01.zip
deleted file mode 100644
index de6a958cef..0000000000
Binary files a/static01.zip and /dev/null differ
diff --git a/templates/map.html b/templates/map.html
index 04e883496c..5ff3cc4619 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -44,7 +44,7 @@
Options
- RocketMap
+
diff --git a/templates/sprites.scss.hbs b/templates/sprites.scss.hbs
new file mode 100644
index 0000000000..f22d4122d4
--- /dev/null
+++ b/templates/sprites.scss.hbs
@@ -0,0 +1,11 @@
+.rm-sprite {
+ background-image: url(/{{spritesheet.url}});
+}
+
+{{#each sprites as |sprite name|}}
+.rm-sprite.{{name}} {
+ background-size: (({{../spritesheet.width}} / {{sprite.width}}) * 100%) (({{../spritesheet.height}} / {{sprite.height}}) * 100%);
+ background-position: (({{sprite.x}} / ({{../spritesheet.width}} - {{sprite.width}})) * 100%) (({{sprite.y}} / ({{../spritesheet.height}} - {{sprite.height}})) * 100%);
+}
+
+{{/each}}
diff --git a/templates/statistics.html b/templates/statistics.html
index be817bda3d..5f1a20fcc6 100644
--- a/templates/statistics.html
+++ b/templates/statistics.html
@@ -38,7 +38,7 @@
Options
- RocketMap
+
