esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-204 show guesses from others
All checks were successful
default-pipeline default-pipeline #72
Details

Browse Source
This commit is contained in:
Bence Pőcze 2021-04-03 22:10:21 +02:00
parent 9e5d20796c
commit 3f9d104adc
Signed by: bence
GPG Key ID: AA52B11A3269D1C1
2 changed files with 98 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/static/img/markers/marker-blue-empty.svg Normal file
View File

@ -0,0 +1,10 @@
<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
<path
fill="#3183ce"
fill-rule="evenodd"
stroke="#19456d"
stroke-width="0.3"
stroke-linecap="round"
d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

121
public/static/js/game.js
View File

@ -67,7 +67,7 @@
break;
case 'guess':
//TODO
Game.MultiConnector.guess(json.data);
break;
}
};
@ -90,9 +90,17 @@
if (data.history) {
for (var i = 0; i < data.history.length; ++i) {
var round = data.history[i];
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarker: null, line: null });
Game.addRealGuessPair(round.position, round.result.guessPosition, true);
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true);
if (round.result.guessPosition) {
Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
}
Game.scoreSum += round.result.score;
for (var j = 0; j < round.allResults.length; ++j) {
var result = round.allResults[j];
Game.addGuessPositionToResultMap(result.guessPosition, result, true);
}
}
document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
@ -143,7 +151,7 @@
// if player didn't guess - TODO: show everything on a map
if (data.result && Game.rounds.length > 0 && !Game.rounds[Game.rounds.length - 1].position) {
Game.rounds[Game.rounds.length - 1].position = data.result.position;
Game.addRealGuessPair(data.result.position, null);
Game.addPositionToResultMap();
}
Game.panoId = data.place.panoId;
@ -152,6 +160,15 @@
document.getElementById('multi').style.visibility = 'hidden';
Game.resetRound();
Game.startNewRound();
},
guess: function (data) {
var resultBounds = Game.map.getBounds();
Game.addGuessPositionToResultMap(data.guessPosition, data);
resultBounds.extend(data.guessPosition);
Game.map.fitBounds(resultBounds);
}
},
@ -230,8 +247,9 @@
if (this.response.history) {
for (var i = 0; i < this.response.history.length; ++i) {
var round = this.response.history[i];
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarker: null, line: null });
Game.addRealGuessPair(round.position, round.result.guessPosition, true);
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true);
Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
Game.scoreSum += round.result.score;
}
@ -255,9 +273,13 @@
if (round.realMarker) {
round.realMarker.setMap(null);
}
if (round.guessMarker) {
round.guessMarker.setMap(null);
round.line.setMap(null);
for (var j = 0; j < round.guessMarkers.length; ++j) {
var guessMarker = round.guessMarkers[j];
guessMarker.marker.setMap(null);
guessMarker.line.setMap(null);
if (guessMarker.info) {
guessMarker.info.close();
}
}
}
@ -287,12 +309,17 @@
var lastRound = Game.rounds[Game.rounds.length - 1];
lastRound.realMarker.setVisible(false);
if (lastRound.guessMarker) {
lastRound.guessMarker.setVisible(false);
lastRound.line.setVisible(false);
for (var i = 0; i < lastRound.guessMarkers.length; ++i) {
var guessMarker = lastRound.guessMarkers[i];
guessMarker.marker.setVisible(false);
guessMarker.line.setVisible(false);
if (guessMarker.info) {
guessMarker.info.close();
}
}
}
document.getElementById('panoCover').style.visibility = 'hidden';
document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null;
@ -312,7 +339,7 @@
},
startNewRound: function () {
Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });
Game.rounds.push({ position: null, guessPosition: null, realMarker: null, guessMarkers: [] });
document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
@ -388,13 +415,22 @@
Game.scoreSum += this.response.result.score;
document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
Game.rounds[Game.rounds.length - 1].position = this.response.position;
Game.addRealGuessPair(this.response.position, guessPosition);
var resultBounds = new google.maps.LatLngBounds();
Game.rounds[Game.rounds.length - 1].position = this.response.position;
Game.addPositionToResultMap();
resultBounds.extend(this.response.position);
Game.addGuessPositionToResultMap(guessPosition);
resultBounds.extend(guessPosition);
if (roomId) {
for (var i = 0; i < this.response.allResults.length; ++i) {
var result = this.response.allResults[i];
Game.addGuessPositionToResultMap(result.guessPosition, result);
resultBounds.extend(result.guessPosition);
}
}
Game.map.setOptions({
draggableCursor: 'grab'
});
@ -427,8 +463,9 @@
}, data);
},
addRealGuessPair: function (position, guessPosition, hidden) {
addPositionToResultMap: function (hidden) {
var round = Game.rounds[Game.rounds.length - 1];
var position = round.position;
round.realMarker = new google.maps.Marker({
map: Game.map,
@ -449,20 +486,25 @@
round.realMarker.addListener('click', function () {
window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank');
});
},
if (!guessPosition) {
return;
}
addGuessPositionToResultMap: function (guessPosition, result, hidden) {
var round = Game.rounds[Game.rounds.length - 1];
var position = round.position;
round.guessMarker = new google.maps.Marker({
var guessMarker = { marker: null, line: null, info: null };
var markerSvg = result ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg';
var markerLabel = result ? result.userName.charAt(0).toUpperCase() : '?';
guessMarker.marker = new google.maps.Marker({
map: Game.map,
visible: !hidden,
position: guessPosition,
zIndex: Game.rounds.length,
clickable: false,
clickable: !!result,
draggable: false,
icon: {
url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
url: STATIC_ROOT + '/img/markers/' + markerSvg + '?rev=' + REVISION,
size: new google.maps.Size(24, 32),
scaledSize: new google.maps.Size(24, 32),
anchor: new google.maps.Point(12, 32),
@ -473,11 +515,11 @@
fontFamily: 'Roboto',
fontSize: '16px',
fontWeight: '500',
text: '?'
text: markerLabel
}
});
round.line = new google.maps.Polyline({
guessMarker.line = new google.maps.Polyline({
map: Game.map,
visible: !hidden,
path: [
@ -500,6 +542,19 @@
draggable: false,
editable: false
});
if (result) {
guessMarker.info = new google.maps.InfoWindow({
content: '<p class="small bold">' + result.userName + '</p>' +
'<p class="small">' + Util.printDistanceForHuman(result.distance) + ' | ' + result.score + ' points</p>',
});
guessMarker.marker.addListener('click', function () {
guessMarker.info.open(Game.map, this);
});
}
round.guessMarkers.push(guessMarker);
},
calculateScoreBarProperties: function (score, maxScore) {
@ -551,14 +606,14 @@
});
round.realMarker.setVisible(true);
if (round.guessMarker) {
round.guessMarker.setVisible(true);
round.line.setVisible(true);
}
resultBounds.extend(round.position);
if (round.guessMarker) {
resultBounds.extend(round.guessPosition);
for (var j = 0; j < round.guessMarkers.length; ++j) {
var guessMarker = round.guessMarkers[j];
guessMarker.marker.setVisible(true);
guessMarker.line.setVisible(true);
resultBounds.extend(guessMarker.marker.getPosition());
}
}
@ -635,7 +690,7 @@
clickable: false,
draggable: true,
icon: {
url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
url: STATIC_ROOT + '/img/markers/marker-blue-empty.svg?rev=' + REVISION,
size: new google.maps.Size(24, 32),
scaledSize: new google.maps.Size(24, 32),
anchor: new google.maps.Point(12, 32),