Compare commits
No commits in common. "cc49c56075a62b789ac9e3b1cf72414ffee1d9fe" and "d3a12fb6f1a25a4634bd89e969fe9a80acabf135" have entirely different histories.
cc49c56075
...
d3a12fb6f1
@ -3,11 +3,6 @@
|
||||
process.title = 'mapguesser-multi';
|
||||
|
||||
class MultiGame {
|
||||
static ROUND_TIMEOUT_DEFAULT = 120000;
|
||||
static ROUND_TIMEOUT_MINIMUM = 15000;
|
||||
static ROUND_TIMEOUT_DIVIDER = 2;
|
||||
static ROUND_TIMEOUT_OFFSET = 500;
|
||||
|
||||
constructor() {
|
||||
this.rooms = new Map();
|
||||
}
|
||||
@ -72,13 +67,7 @@ class MultiGame {
|
||||
|
||||
var rounds = [];
|
||||
places.forEach(function (place) {
|
||||
rounds.push({
|
||||
place: place,
|
||||
results: new Map(),
|
||||
timeout: MultiGame.ROUND_TIMEOUT_DEFAULT,
|
||||
timeoutStarted: null,
|
||||
timeoutHandler: null
|
||||
})
|
||||
rounds.push({ place: place, results: new Map() })
|
||||
});
|
||||
|
||||
room.rounds = rounds;
|
||||
@ -97,24 +86,9 @@ class MultiGame {
|
||||
room.updated = new Date();
|
||||
|
||||
var round = room.rounds[room.currentRound];
|
||||
|
||||
clearTimeout(round.timeoutHandler);
|
||||
round.timeout = round.timeout - (new Date() - round.timeoutStarted);
|
||||
if (round.timeout > MultiGame.ROUND_TIMEOUT_DIVIDER * MultiGame.ROUND_TIMEOUT_MINIMUM) {
|
||||
round.timeout = round.timeout / MultiGame.ROUND_TIMEOUT_DIVIDER;
|
||||
} else if (round.timeout > MultiGame.ROUND_TIMEOUT_MINIMUM) {
|
||||
round.timeout = MultiGame.ROUND_TIMEOUT_MINIMUM;
|
||||
}
|
||||
round.timeoutStarted = new Date();
|
||||
var self = this;
|
||||
round.timeoutHandler = setTimeout(function () {
|
||||
self._endRoundTimeout(room, round);
|
||||
}, round.timeout + MultiGame.ROUND_TIMEOUT_OFFSET);
|
||||
|
||||
var member = room.members.get(token);
|
||||
var allResults = this._collectResultsInRound(room, round);
|
||||
|
||||
this._broadcastTimeout(room, round);
|
||||
this._broadcastGuess(room, member.userName, guessPosition, distance, score);
|
||||
|
||||
round.results.set(token, { guessPosition: guessPosition, distance: distance, score: score });
|
||||
@ -136,15 +110,12 @@ class MultiGame {
|
||||
|
||||
var round = room.rounds[room.currentRound];
|
||||
|
||||
round.timeoutStarted = new Date();
|
||||
var self = this;
|
||||
round.timeoutHandler = setTimeout(function () {
|
||||
self._endRoundTimeout(room, round);
|
||||
}, round.timeout + MultiGame.ROUND_TIMEOUT_OFFSET);
|
||||
|
||||
var data = {};
|
||||
data.place = { panoId: round.place.panoId, pov: round.place.pov };
|
||||
data.timeout = round.timeout;
|
||||
|
||||
if (room.currentRound > 0) {
|
||||
data.result = { position: room.rounds[room.currentRound - 1].place.position };
|
||||
}
|
||||
|
||||
var self = this;
|
||||
room.members.forEach(function (member) {
|
||||
@ -152,28 +123,11 @@ class MultiGame {
|
||||
});
|
||||
}
|
||||
|
||||
_endRoundTimeout(room, round) {
|
||||
clearTimeout(round.timeoutHandler);
|
||||
|
||||
var data = { position: round.place.position, allResults: this._collectResultsInRound(room, round) };
|
||||
var self = this;
|
||||
room.members.forEach(function (member, token) {
|
||||
if (round.results.has(token)) {
|
||||
return;
|
||||
}
|
||||
|
||||
self._sendToMember(member, 'end_round', data);
|
||||
});
|
||||
}
|
||||
|
||||
_sendInitialData(room, member, token) {
|
||||
var data = {};
|
||||
|
||||
if (room.currentRound >= 0) {
|
||||
var round = room.rounds[room.currentRound];
|
||||
|
||||
data.place = round.place;
|
||||
data.timeout = round.timeout - (new Date() - round.timeoutStarted);
|
||||
data.place = room.rounds[room.currentRound].place;
|
||||
}
|
||||
|
||||
data.history = [];
|
||||
@ -221,13 +175,6 @@ class MultiGame {
|
||||
return results;
|
||||
}
|
||||
|
||||
_broadcastTimeout(room, round) {
|
||||
var self = this;
|
||||
room.members.forEach(function (member) {
|
||||
self._sendToMember(member, 'timeout_changed', { timeout: round.timeout });
|
||||
});
|
||||
}
|
||||
|
||||
_broadcastGuess(room, userName, guessPosition, distance, score) {
|
||||
var data = { userName: userName, guessPosition: guessPosition, distance: distance, score: score };
|
||||
var round = room.rounds[room.currentRound];
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#distanceInfo>p:nth-child(2), #distanceInfo>p:nth-child(3), #scoreInfo>p:nth-child(2) {
|
||||
#distanceInfo>p:nth-child(2), #scoreInfo>p:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -111,44 +111,6 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#countdown {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 8px;
|
||||
background-color: #eeeeee;
|
||||
border: solid 1px #555555;
|
||||
border-radius: 3px;
|
||||
opacity: 0.95;
|
||||
z-index: 5;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#countdown.yellow {
|
||||
background-color: #f7c789;
|
||||
border: solid 1px #e8a349;
|
||||
}
|
||||
|
||||
#countdown.red {
|
||||
background-color: #f7a5a5;
|
||||
border: solid 1px #aa5e5e;
|
||||
}
|
||||
|
||||
#countdown p {
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
#countdown.yellow p {
|
||||
color: #9c4308;
|
||||
}
|
||||
|
||||
#countdown.red p {
|
||||
color: #701919;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
#mapName {
|
||||
display: none;
|
||||
|
||||
@ -17,9 +17,6 @@
|
||||
adaptGuess: false,
|
||||
googleLink: null,
|
||||
|
||||
timeoutEnd: null,
|
||||
countdownHandler: null,
|
||||
|
||||
MultiConnector: {
|
||||
connection: null,
|
||||
reconnectCounter: 0,
|
||||
@ -33,7 +30,9 @@
|
||||
|
||||
Game.MultiConnector.connection.onopen = function () {
|
||||
document.getElementById('loading').style.visibility = 'hidden';
|
||||
|
||||
Game.MultiConnector.reconnectCounter = 0;
|
||||
|
||||
Game.MultiConnector.connection.send(JSON.stringify({ func: 'connect_to_room', args: { roomId: roomId, token: Game.multi.token } }));
|
||||
};
|
||||
|
||||
@ -70,14 +69,6 @@
|
||||
case 'guess':
|
||||
Game.MultiConnector.guess(json.data);
|
||||
break;
|
||||
|
||||
case 'timeout_changed':
|
||||
Game.MultiConnector.timeoutChanged(json.data);
|
||||
break;
|
||||
|
||||
case 'end_round':
|
||||
Game.MultiConnector.endRound(json.data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -116,10 +107,6 @@
|
||||
document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
|
||||
}
|
||||
|
||||
if (data.timeout) {
|
||||
Game.startCountdown(data.timeout);
|
||||
}
|
||||
|
||||
if (data.place) {
|
||||
Game.panoId = data.place.panoId;
|
||||
Game.pov = data.place.pov;
|
||||
@ -152,18 +139,27 @@
|
||||
},
|
||||
|
||||
newRound: function (data) {
|
||||
//TODO: workaround until results are not sent
|
||||
if (Game.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
}
|
||||
|
||||
if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
|
||||
Game.reset();
|
||||
}
|
||||
|
||||
// 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.addPositionToResultMap();
|
||||
}
|
||||
|
||||
Game.panoId = data.place.panoId;
|
||||
Game.pov = data.place.pov;
|
||||
|
||||
document.getElementById('multi').style.visibility = 'hidden';
|
||||
Game.resetRound();
|
||||
Game.startNewRound();
|
||||
|
||||
Game.startCountdown(data.timeout);
|
||||
},
|
||||
|
||||
guess: function (data) {
|
||||
@ -173,26 +169,6 @@
|
||||
resultBounds.extend(data.guessPosition);
|
||||
|
||||
Game.map.fitBounds(resultBounds);
|
||||
},
|
||||
|
||||
timeoutChanged: function (data) {
|
||||
Game.startCountdown(data.timeout);
|
||||
},
|
||||
|
||||
endRound: function (data) {
|
||||
// TODO: refactor - it is necessary for mobile
|
||||
if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
|
||||
document.getElementById('showGuessButton').click();
|
||||
}
|
||||
|
||||
document.getElementById('guessButton').disabled = true;
|
||||
document.getElementById('panoCover').style.visibility = 'visible';
|
||||
|
||||
Game.showResults(data.position, null, { distance: NaN, score: 0 }, data.allResults);
|
||||
|
||||
if (!Game.multi.owner) {
|
||||
document.getElementById('continueButton').style.display = 'none';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -313,7 +289,6 @@
|
||||
var distanceInfo = document.getElementById('distanceInfo');
|
||||
distanceInfo.children[0].style.display = null;
|
||||
distanceInfo.children[1].style.display = null;
|
||||
distanceInfo.children[2].style.display = null;
|
||||
var scoreInfo = document.getElementById('scoreInfo');
|
||||
scoreInfo.children[0].style.display = null;
|
||||
scoreInfo.children[1].style.display = null;
|
||||
@ -404,68 +379,6 @@
|
||||
Game.panorama.setPano(panoId);
|
||||
},
|
||||
|
||||
showResults: function (position, guessPosition, result, allResults) {
|
||||
if (Game.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
}
|
||||
|
||||
if (Game.guessMarker) {
|
||||
Game.guessMarker.setMap(null);
|
||||
Game.guessMarker = null;
|
||||
}
|
||||
|
||||
document.getElementById('guess').classList.add('result');
|
||||
|
||||
Game.scoreSum += result.score;
|
||||
document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
|
||||
|
||||
var resultBounds = new google.maps.LatLngBounds();
|
||||
|
||||
Game.rounds[Game.rounds.length - 1].position = position;
|
||||
Game.addPositionToResultMap();
|
||||
resultBounds.extend(position);
|
||||
|
||||
if (guessPosition) {
|
||||
Game.addGuessPositionToResultMap(guessPosition);
|
||||
resultBounds.extend(guessPosition);
|
||||
}
|
||||
|
||||
if (allResults) {
|
||||
for (var i = 0; i < allResults.length; ++i) {
|
||||
var currentResult = allResults[i];
|
||||
Game.addGuessPositionToResultMap(currentResult.guessPosition, currentResult);
|
||||
resultBounds.extend(currentResult.guessPosition);
|
||||
}
|
||||
}
|
||||
|
||||
Game.map.setOptions({
|
||||
draggableCursor: 'grab'
|
||||
});
|
||||
Game.map.fitBounds(resultBounds);
|
||||
|
||||
var distanceInfo = document.getElementById('distanceInfo');
|
||||
if (Number.isNaN(result.distance)) {
|
||||
distanceInfo.children[0].style.display = 'none';
|
||||
distanceInfo.children[1].style.display = 'block';
|
||||
} else {
|
||||
distanceInfo.children[0].style.display = 'block';
|
||||
distanceInfo.children[1].style.display = 'none';
|
||||
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(result.distance);
|
||||
}
|
||||
|
||||
document.getElementById('score').innerHTML = result.score;
|
||||
|
||||
var scoreBarProperties = Game.calculateScoreBarProperties(result.score, Game.MAX_SCORE);
|
||||
var scoreBar = document.getElementById('scoreBar');
|
||||
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
|
||||
scoreBar.style.width = scoreBarProperties.width;
|
||||
|
||||
if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
|
||||
document.getElementById('continueButton').style.display = 'none';
|
||||
document.getElementById('showSummaryButton').style.display = 'block';
|
||||
}
|
||||
},
|
||||
|
||||
guess: function () {
|
||||
if (!Game.guessMarker) {
|
||||
return;
|
||||
@ -475,6 +388,9 @@
|
||||
Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
|
||||
|
||||
document.getElementById('guessButton').disabled = true;
|
||||
if (Game.adaptGuess) {
|
||||
document.getElementById('guess').classList.remove('adapt');
|
||||
}
|
||||
document.getElementById('panoCover').style.visibility = 'visible';
|
||||
|
||||
var data = new FormData();
|
||||
@ -491,15 +407,58 @@
|
||||
return;
|
||||
}
|
||||
|
||||
Game.showResults(this.response.position, guessPosition, this.response.result, this.response.allResults);
|
||||
Game.guessMarker.setMap(null);
|
||||
Game.guessMarker = null;
|
||||
|
||||
document.getElementById('guess').classList.add('result');
|
||||
|
||||
Game.scoreSum += this.response.result.score;
|
||||
document.getElementById('currentScoreSum').innerHTML = String(Game.scoreSum) + '/' + String(Game.rounds.length * Game.MAX_SCORE);
|
||||
|
||||
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'
|
||||
});
|
||||
Game.map.fitBounds(resultBounds);
|
||||
|
||||
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(this.response.result.distance);
|
||||
document.getElementById('score').innerHTML = this.response.result.score;
|
||||
|
||||
var scoreBarProperties = Game.calculateScoreBarProperties(this.response.result.score, Game.MAX_SCORE);
|
||||
var scoreBar = document.getElementById('scoreBar');
|
||||
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
|
||||
scoreBar.style.width = scoreBarProperties.width;
|
||||
|
||||
if (Game.rounds.length === Game.NUMBER_OF_ROUNDS) {
|
||||
document.getElementById('continueButton').style.display = 'none';
|
||||
document.getElementById('showSummaryButton').style.display = 'block';
|
||||
}
|
||||
|
||||
if (this.response.place) {
|
||||
Game.panoId = this.response.place.panoId;
|
||||
Game.pov = this.response.place.pov;
|
||||
} else {
|
||||
if (!Game.multi.owner) {
|
||||
//TODO: "waiting for" disabled button
|
||||
document.getElementById('continueButton').style.display = 'none';
|
||||
}
|
||||
Game.panoId = null;
|
||||
Game.pov = null;
|
||||
}
|
||||
}, data);
|
||||
},
|
||||
@ -616,8 +575,7 @@
|
||||
showSummary: function () {
|
||||
var distanceInfo = document.getElementById('distanceInfo');
|
||||
distanceInfo.children[0].style.display = 'none';
|
||||
distanceInfo.children[1].style.display = 'none';
|
||||
distanceInfo.children[2].style.display = 'block';
|
||||
distanceInfo.children[1].style.display = 'block';
|
||||
var scoreInfo = document.getElementById('scoreInfo');
|
||||
scoreInfo.children[0].style.display = 'none';
|
||||
scoreInfo.children[1].style.display = 'block';
|
||||
@ -687,47 +645,6 @@
|
||||
Game.googleLink.href = 'https://maps.google.com/maps';
|
||||
}
|
||||
}, 1);
|
||||
},
|
||||
|
||||
startCountdown: function (timeout) {
|
||||
if (Game.countdownHandler) {
|
||||
clearInterval(Game.countdownHandler);
|
||||
}
|
||||
|
||||
Game.timeoutEnd = new Date(new Date().getTime() + timeout);
|
||||
Game.countdownElement = document.getElementById('countdown');
|
||||
Game.countdownTimeElement = document.getElementById('countdownTime');
|
||||
|
||||
Game.setCountdownTime(Math.round(timeout / 1000));
|
||||
|
||||
Game.countdownHandler = setInterval(function () {
|
||||
var timeLeft = Math.round((Game.timeoutEnd - new Date()) / 1000);
|
||||
|
||||
Game.setCountdownTime(timeLeft);
|
||||
|
||||
if (timeLeft <= 0) {
|
||||
document.getElementById('panoCover').style.visibility = 'visible';
|
||||
clearInterval(Game.countdownHandler);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
setCountdownTime: function (time) {
|
||||
if (time <= 0) {
|
||||
Game.countdownElement.style.visibility = 'hidden';
|
||||
return;
|
||||
}
|
||||
|
||||
if (time <= 15) {
|
||||
Game.countdownElement.className = 'red';
|
||||
} else if (time <= 30) {
|
||||
Game.countdownElement.className = 'yellow';
|
||||
} else {
|
||||
Game.countdownElement.className = '';
|
||||
}
|
||||
|
||||
Game.countdownElement.style.visibility = 'visible';
|
||||
Game.countdownTimeElement.innerHTML = time;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -21,9 +21,6 @@
|
||||
@endsection
|
||||
|
||||
@section(main)
|
||||
<div id="countdown">
|
||||
<p id="countdownTime" class="mono bold"></p>
|
||||
</div>
|
||||
<div id="panoCover"></div>
|
||||
<div id="panorama"></div>
|
||||
<div id="showGuessButtonContainer">
|
||||
@ -40,7 +37,6 @@
|
||||
<div id="resultInfo">
|
||||
<div id="distanceInfo">
|
||||
<p>You were <span id="distance" class="bold"></span> close.</p>
|
||||
<p>You didn't guess in this round.</p>
|
||||
<p class="bold">Game finished.</p>
|
||||
</div>
|
||||
<div id="scoreInfo">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user