Compare commits

..

No commits in common. "b00fe4ebe35421025b3521f43d06616e1a00b602" and "c2df9b77135b15b4a701c82c1f63112ec356cc2a" have entirely different histories.

10 changed files with 19 additions and 211 deletions

View File

@ -168,37 +168,6 @@
display: none; display: none;
} }
#highscoresTable {
margin: 1em;
border-collapse: collapse;
width: 90%;
}
#highscoresTable td, #highscoresTable th {
border: 1px solid #ddd;
padding: 8px;
}
#highscoresTable tr:nth-child(even) {
background-color: #f2f2f2;
}
#highscoresTable tr:hover {
background-color: #ddd;
}
#highscoresTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #e8a349;
color: white;
}
#highscoresTable tr.ownPlayer {
font-weight: 500;
}
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {
#mapName { #mapName {
display: none; display: none;
@ -226,9 +195,6 @@
bottom: 25px; bottom: 25px;
left: 10px; left: 10px;
} }
.hideOnMobile {
display: none;
}
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {

View File

@ -31,7 +31,7 @@ main {
color: #ffffff; color: #ffffff;
} }
p, h1, h2, input, textarea, select, button, a, table { p, h1, h2, input, textarea, select, button, a {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }

View File

@ -93,7 +93,6 @@ div.mapItem>div.buttonContainer {
#restrictions input[type=range] { #restrictions input[type=range] {
height: 1.5em; height: 1.5em;
margin-left: 2em; margin-left: 2em;
width: 70%;
} }
#timeLimitType { #timeLimitType {

View File

@ -21,7 +21,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
googleLink: null, googleLink: null,
history: [], history: [],
restrictions: null, restrictions: null,
finishers: null,
readyToContinue: true, readyToContinue: true,
timeoutEnd: null, timeoutEnd: null,
@ -297,7 +296,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
return; return;
} }
Game.loadHistory(this.response); Game.loadHistory(this.response.history);
if (this.response.finished) { if (this.response.finished) {
@ -335,14 +334,13 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
} }
if (Game.restrictions.timeLimit) { if (Game.restrictions.timeLimit) {
Game.startCountdown(Game.restrictions.timeLimit, function () { Game.startCountdown(Game.restrictions.timeLimit, function() {
Game.guess(); Game.guess();
}); });
} }
}, },
disableRestrictions: function () { disableRestrictions: function () {
Game.panorama.setOptions({ Game.panorama.setOptions({
clickToGo: true, clickToGo: true,
linksControl: true, linksControl: true,
@ -352,7 +350,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
document.getElementById('panningBlockerCover').style.display = null; document.getElementById('panningBlockerCover').style.display = null;
Game.startCountdown(0); Game.startCountdown(0);
Game.timeoutEnd = null;
}, },
transitToResultMap: function () { transitToResultMap: function () {
@ -390,11 +387,11 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
} }
}, },
loadHistory: function (response) { loadHistory: function (history) {
if (!response.history) if (!history)
return; return;
Game.history = response.history; Game.history = history;
for (var i = 0; i < Game.rounds.length; ++i) { for (var i = 0; i < Game.rounds.length; ++i) {
var round = Game.rounds[i]; var round = Game.rounds[i];
@ -413,7 +410,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
} }
Game.rounds = []; Game.rounds = [];
Game.scoreSum = 0;
for (var i = 0; i < Game.history.length; ++i) { for (var i = 0; i < Game.history.length; ++i) {
var round = Game.history[i]; var round = Game.history[i];
@ -421,7 +417,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] }); Game.rounds.push({ position: round.position, guessPosition: round.result.guessPosition, realMarker: null, guessMarkers: [] });
Game.addPositionToResultMap(true); Game.addPositionToResultMap(true);
if (round.result.guessPosition) { if (round.result.guessPosition) {
Game.addGuessPositionToResultMap(round.result.guessPosition, round.result, true); Game.addGuessPositionToResultMap(round.result.guessPosition, null, true);
} }
Game.scoreSum += round.result.score; Game.scoreSum += round.result.score;
@ -436,10 +432,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
} }
} }
} }
if (response.finishers) {
Game.finishers = new Set(response.finishers);
}
}, },
reset: function () { reset: function () {
@ -471,7 +463,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
distanceInfo.children[0].style.display = null; distanceInfo.children[0].style.display = null;
distanceInfo.children[1].style.display = null; distanceInfo.children[1].style.display = null;
distanceInfo.children[2].style.display = null; distanceInfo.children[2].style.display = null;
document.getElementById('summaryInfo').innerHTML = "Game finished."
var scoreInfo = document.getElementById('scoreInfo'); var scoreInfo = document.getElementById('scoreInfo');
scoreInfo.children[0].style.display = null; scoreInfo.children[0].style.display = null;
scoreInfo.children[1].style.display = null; scoreInfo.children[1].style.display = null;
@ -490,9 +481,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
document.getElementById('panningBlockerCover').style.display = null; document.getElementById('panningBlockerCover').style.display = null;
Game.history = [];
Game.finishers = null;
Game.initialize(); Game.initialize();
}, },
@ -601,7 +589,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
resultBounds.extend(position); resultBounds.extend(position);
if (guessPosition) { if (guessPosition) {
Game.addGuessPositionToResultMap(guessPosition, result); Game.addGuessPositionToResultMap(guessPosition);
resultBounds.extend(guessPosition); resultBounds.extend(guessPosition);
} }
@ -661,16 +649,11 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
}, },
guess: function () { guess: function () {
Game.disableRestrictions();
var data = new FormData(); var data = new FormData();
if (Game.timeoutEnd) {
var timeLeft = Math.ceil((Game.timeoutEnd - new Date()) / 1000);
data.append('timeLeft', timeLeft);
}
Game.disableRestrictions();
if (Game.guessMarker) { if (Game.guessMarker) {
var guessPosition = Game.guessMarker.getPosition().toJSON(); var guessPosition = Game.guessMarker.getPosition().toJSON();
Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition; Game.rounds[Game.rounds.length - 1].guessPosition = guessPosition;
@ -692,7 +675,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
return; return;
} }
Game.loadHistory(this.response); Game.history = this.response.history;
Game.restrictions = this.response.restrictions; Game.restrictions = this.response.restrictions;
Game.receiveResult(this.response.position, guessPosition, this.response.result, this.response.allResults); Game.receiveResult(this.response.position, guessPosition, this.response.result, this.response.allResults);
@ -735,8 +718,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
var position = round.position; var position = round.position;
var guessMarker = { marker: null, line: null, info: null }; var guessMarker = { marker: null, line: null, info: null };
var markerSvg = result && result.userName ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg'; var markerSvg = result ? 'marker-gray-empty.svg' : 'marker-blue-empty.svg';
var markerLabel = result && result.userName ? result.userName.charAt(0).toUpperCase() : '?'; var markerLabel = result ? result.userName.charAt(0).toUpperCase() : '?';
guessMarker.marker = new google.maps.Marker({ guessMarker.marker = new google.maps.Marker({
map: Game.map, map: Game.map,
@ -786,9 +769,8 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
}); });
if (result) { if (result) {
const userName = result.userName ? result.userName : 'me';
guessMarker.info = new google.maps.InfoWindow({ guessMarker.info = new google.maps.InfoWindow({
content: '<p class="small bold">' + userName + '</p>' + content: '<p class="small bold">' + result.userName + '</p>' +
'<p class="small">' + Util.printDistanceForHuman(result.distance) + ' | ' + result.score + ' points</p>', '<p class="small">' + Util.printDistanceForHuman(result.distance) + ' | ' + result.score + ' points</p>',
}); });
@ -815,31 +797,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
return { width: percent + '%', backgroundColor: color }; return { width: percent + '%', backgroundColor: color };
}, },
calculateHighScores: function () {
var highscores = new Map();
highscores.set('me', Game.scoreSum);
for (var i = 0; i < Game.history.length; ++i) {
const round = Game.history[i];
if (round.allResults) {
for (const result of round.allResults) {
if (Game.finishers.has(result.userName)) {
if (highscores.has(result.userName)) {
highscores.set(result.userName, highscores.get(result.userName) + result.score);
} else {
highscores.set(result.userName, result.score);
}
}
}
}
}
var sortedHighscores = Array.from(highscores, ([userName, score]) => ({ 'userName': userName, 'score': score }))
.sort(function (resultA, resultB) { return resultB.score - resultA.score });
return sortedHighscores;
},
showSummary: function () { showSummary: function () {
var distanceInfo = document.getElementById('distanceInfo'); var distanceInfo = document.getElementById('distanceInfo');
distanceInfo.children[0].style.display = 'none'; distanceInfo.children[0].style.display = 'none';
@ -899,44 +856,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
var scoreBar = document.getElementById('scoreBar'); var scoreBar = document.getElementById('scoreBar');
scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
scoreBar.style.width = scoreBarProperties.width; scoreBar.style.width = scoreBarProperties.width;
if (Game.type == GameType.CHALLENGE) {
var highscores = this.calculateHighScores();
var summaryInfo = document.getElementById('summaryInfo');
if (highscores.length > 2) {
var table = document.getElementById('highscoresTable');
for (const result of highscores) {
var userName = document.createElement('td');
userName.innerHTML = result.userName;
var score = document.createElement('td');
score.innerHTML = result.score;
var line = document.createElement('tr');
line.appendChild(userName);
line.appendChild(score);
table.appendChild(line);
if (result.userName === 'me') {
line.setAttribute('class', 'ownPlayer');
}
}
MapGuesser.showModal('highscores');
} else if (highscores.length == 2) {
if (highscores[0].userName === 'me') {
summaryInfo.innerHTML = 'You won! <span class="hideOnMobile">' + highscores[1].userName + ' got only ' + highscores[1].score + ' points.</span>';
} else {
summaryInfo.innerHTML = 'You lost! <span class="hideOnMobile">' + highscores[0].userName + ' won with ' + highscores[0].score + ' points.</span>';
}
} else if (highscores.length == 1) {
// summaryInfo.innerHTML = 'You are the first to finish. Challenge other by sending them the link and come back for the results.'
summaryInfo.innerHTML = 'You are the first to finish.'
}
}
}, },
rewriteGoogleLink: function () { rewriteGoogleLink: function () {
@ -1184,8 +1103,4 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
document.getElementById('compassContainer').onclick = function () { document.getElementById('compassContainer').onclick = function () {
Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch }); Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
} }
document.getElementById('closeHighscoresButton').onclick = function () {
MapGuesser.hideModal();
};
})(); })();

View File

@ -65,32 +65,6 @@
} }
}; };
var Util = {
printTimeForHuman: function (time) {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
var time_str = '';
if (minutes == 1) {
time_str += '1 minute';
} else if (minutes > 1) {
time_str += minutes + ' minutes';
}
if (minutes > 0 && seconds > 0) {
time_str += ' and ';
}
if (seconds == 1) {
time_str += '1 second';
} else if (seconds > 1) {
time_str += seconds + ' seconds';
}
return time_str;
}
};
Maps.addStaticMaps(); Maps.addStaticMaps();
Maps.initializeDescriptionDivs(); Maps.initializeDescriptionDivs();
@ -145,7 +119,7 @@
document.getElementById('playMode').style.visibility = 'hidden'; document.getElementById('playMode').style.visibility = 'hidden';
var timeLimit = document.getElementById('timeLimit').value; var timeLimit = document.getElementById('timeLimit').value;
document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit); document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
}; };
} }
@ -175,7 +149,7 @@
document.getElementById('timeLimit').oninput = function () { document.getElementById('timeLimit').oninput = function () {
var timeLimit = document.getElementById('timeLimit').value; var timeLimit = document.getElementById('timeLimit').value;
document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit); document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + timeLimit + ' seconds per round';
document.getElementById('timerEnabled').checked = true; document.getElementById('timerEnabled').checked = true;
} }
})(); })();

View File

@ -149,7 +149,6 @@ class GameFlowController
{ {
$currentPlace = $this->placeRepository->getByRoundInChallenge($challenge, $currentRound); $currentPlace = $this->placeRepository->getByRoundInChallenge($challenge, $currentRound);
// if the last round was played ($currentPlace == null) or history is explicitly requested (for initializing)
if (!isset($currentPlace) || $withHistory) { if (!isset($currentPlace) || $withHistory) {
$withRelations = [User::class, PlaceInChallenge::class, Place::class]; $withRelations = [User::class, PlaceInChallenge::class, Place::class];
@ -193,14 +192,6 @@ class GameFlowController
if (!isset($currentPlace)) { // game finished if (!isset($currentPlace)) { // game finished
$response['finished'] = true; $response['finished'] = true;
// list all players who finished the challenge
$response['finishers'] = [];
foreach ($this->userInChallengeRepository->getAllByChallengeWithUsers($challenge) as $userInChallenge) {
if ($userInChallenge->getCurrentRound() == $currentRound && $userInChallenge->getUser()->getId() != $userId) {
$response['finishers'][] = $userInChallenge->getUser()->getDisplayName();
}
}
} else { // continue game } else { // continue game
$response['place'] = [ $response['place'] = [
'panoId' => $currentPlace->getPanoIdCached(), 'panoId' => $currentPlace->getPanoIdCached(),
@ -248,11 +239,6 @@ class GameFlowController
$response = $this->prepareChallengeResponse($userId, $challenge, $currentRound, true); $response = $this->prepareChallengeResponse($userId, $challenge, $currentRound, true);
if ($challenge->getTimeLimitType() === 'game' && $challenge->getTimeLimit() !== null && $userInChallenge->getCurrentRound() > 0) {
$timeLimit = max(10, $userInChallenge->getTimeLeft());
$response['restrictions']['timeLimit'] = $timeLimit * 1000;
}
return new JsonContent($response); return new JsonContent($response);
} }
@ -395,19 +381,9 @@ class GameFlowController
$response['result'] = ['distance' => null, 'score' => 0]; $response['result'] = ['distance' => null, 'score' => 0];
} }
// save user relevant state of challenge
$userInChallenge->setCurrentRound($nextRound); $userInChallenge->setCurrentRound($nextRound);
$timeLeft = $this->request->post('timeLeft');
if (isset($timeLeft)) {
$userInChallenge->setTimeLeft(intval($timeLeft));
}
$this->pdm->saveToDb($userInChallenge); $this->pdm->saveToDb($userInChallenge);
if ($challenge->getTimeLimitType() === 'game' && isset($timeLeft)) {
$timeLimit = max(10, intval($timeLeft));
$response['restrictions']['timeLimit'] = $timeLimit * 1000;
}
if(isset($response['history'][$currentRound]['allResults'])) { if(isset($response['history'][$currentRound]['allResults'])) {
$response['allResults'] = $response['history'][$currentRound]['allResults']; $response['allResults'] = $response['history'][$currentRound]['allResults'];
} }

View File

@ -50,7 +50,7 @@ class UserInChallenge extends Model
public function setTimeLeft(?int $timeLeft): void public function setTimeLeft(?int $timeLeft): void
{ {
if(isset($timeLeft)) { if(isset($timeLeft)) {
$this->timeLeft = max(0, $timeLeft); $this->timeLeft = $timeLeft;
} }
} }

View File

@ -32,14 +32,6 @@ class UserInChallengeRepository
yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class); yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class);
} }
public function getAllByChallengeWithUsers(Challenge $challenge) : Generator
{
$select = new Select(\Container::$dbConnection);
$select->where('challenge_id', '=', $challenge->getId());
yield from $this->pdm->selectMultipleFromDb($select, UserInChallenge::class, true, [User::class]);
}
public function getByUserIdAndChallenge(int $userId, Challenge $challenge): ?UserInChallenge public function getByUserIdAndChallenge(int $userId, Challenge $challenge): ?UserInChallenge
{ {
$select = new Select(\Container::$dbConnection); $select = new Select(\Container::$dbConnection);

View File

@ -12,20 +12,6 @@
<div id="players" class="marginTop"></div> <div id="players" class="marginTop"></div>
<button id="startMultiGameButton" class="button fullWidth marginTop green">Start game</button> <button id="startMultiGameButton" class="button fullWidth marginTop green">Start game</button>
</div> </div>
<div id="highscores" class="modal">
<h2>Highscores</h2>
<div>
<table id="highscoresTable">
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="right">
<button id="closeHighscoresButton" class="gray marginTop" type="button">Close</button>
</div>
</div>
@endsection @endsection
@section(subheader) @section(subheader)
@ -56,7 +42,7 @@
<div id="distanceInfo"> <div id="distanceInfo">
<p>You were <span id="distance" class="bold"></span> close.</p> <p>You were <span id="distance" class="bold"></span> close.</p>
<p>You didn't guess in this round.</p> <p>You didn't guess in this round.</p>
<p id="summaryInfo" class="bold">Game finished.</p> <p class="bold">Game finished.</p>
</div> </div>
<div id="scoreInfo"> <div id="scoreInfo">
<p>You earned <span id="score" class="bold"></span> points.</p> <p>You earned <span id="score" class="bold"></span> points.</p>

View File

@ -51,7 +51,7 @@ TODO: condition!
<label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label> <label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
</div> </div>
<div> <div>
<input type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" /> <input type="range" id="timeLimit" name="timeLimit" min="10" max="600" value="120" />
</div> </div>
<div id="timeLimitType"> <div id="timeLimitType">
Time limit Time limit