2020-06-25 20:42:12 +02:00
|
|
|
(function () {
|
|
|
|
var Maps = {
|
|
|
|
descriptionDivs: null,
|
|
|
|
|
|
|
|
addStaticMaps: function () {
|
|
|
|
var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
|
|
|
|
for (var i = 0; i < imgContainers.length; i++) {
|
|
|
|
var imgContainer = imgContainers[i];
|
|
|
|
|
|
|
|
var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
|
|
|
|
'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
|
|
|
|
'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
|
|
|
|
imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
|
|
|
|
'&key=' + GOOGLE_MAPS_JS_API_KEY;
|
|
|
|
|
|
|
|
imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
initializeDescriptionDivs: function () {
|
|
|
|
Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');
|
|
|
|
|
|
|
|
for (var i = 0; i < Maps.descriptionDivs.length; i++) {
|
|
|
|
var description = Maps.descriptionDivs[i];
|
|
|
|
var boundingClientRect = description.getBoundingClientRect();
|
|
|
|
|
|
|
|
description.defaultHeight = boundingClientRect.height;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
calculateDescriptionDivHeights: function () {
|
|
|
|
var currentY;
|
|
|
|
var rows = [];
|
|
|
|
for (var i = 0; i < Maps.descriptionDivs.length; i++) {
|
|
|
|
var description = Maps.descriptionDivs[i];
|
|
|
|
var boundingClientRect = description.getBoundingClientRect();
|
|
|
|
|
|
|
|
if (currentY !== boundingClientRect.y) {
|
|
|
|
rows.push([]);
|
|
|
|
}
|
|
|
|
|
|
|
|
rows[rows.length - 1].push(description);
|
|
|
|
|
|
|
|
currentY = boundingClientRect.y;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
|
|
var row = rows[i];
|
|
|
|
|
|
|
|
var maxHeight = 0;
|
|
|
|
for (var j = 0; j < row.length; j++) {
|
|
|
|
var description = row[j];
|
|
|
|
|
|
|
|
if (description.defaultHeight > maxHeight) {
|
|
|
|
maxHeight = description.defaultHeight;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var j = 0; j < row.length; j++) {
|
|
|
|
var description = row[j];
|
|
|
|
|
|
|
|
description.style.height = maxHeight + 'px';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-05-21 11:30:30 +02:00
|
|
|
var Util = {
|
|
|
|
printTimeForHuman: function (time) {
|
|
|
|
if (time < 60) {
|
|
|
|
return '' + time + ' seconds';
|
|
|
|
} else if (time == 60) {
|
|
|
|
return '1 minute';
|
|
|
|
} else if (time % 60 == 0) {
|
|
|
|
return '' + Math.floor(time / 60) + ' minutes';
|
|
|
|
} else if (time % 60 == 1) {
|
|
|
|
return '' + Math.floor(time / 60) + ' minutes and 1 second';
|
|
|
|
} else {
|
|
|
|
return '' + Math.floor(time / 60) + ' minutes and ' + time % 60 + ' seconds';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-06-25 20:42:12 +02:00
|
|
|
Maps.addStaticMaps();
|
|
|
|
|
|
|
|
Maps.initializeDescriptionDivs();
|
|
|
|
Maps.calculateDescriptionDivHeights();
|
|
|
|
|
|
|
|
window.onresize = function () {
|
|
|
|
Maps.calculateDescriptionDivHeights();
|
|
|
|
};
|
2021-03-20 10:26:57 +01:00
|
|
|
|
|
|
|
document.getElementById('multiForm').onsubmit = function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
var roomId = this.elements.roomId.value;
|
|
|
|
if (roomId.length !== 6) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
window.location.href = '/multiGame/' + this.elements.roomId.value;
|
|
|
|
};
|
|
|
|
|
2021-05-12 13:51:06 +02:00
|
|
|
document.getElementById('challengeForm').onsubmit = function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
var url = '/challenge/create.json';
|
|
|
|
var formData = new FormData(this);
|
|
|
|
|
|
|
|
document.getElementById('loading').style.visibility = 'visible';
|
|
|
|
MapGuesser.httpRequest('POST', url, function() {
|
|
|
|
document.getElementById('loading').style.visibility = 'hidden';
|
|
|
|
|
|
|
|
if (this.response.error) {
|
|
|
|
Game.handleErrorResponse(this.response.error);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
window.location.href = '/challenge/' + this.response.challengeToken;
|
|
|
|
|
|
|
|
}, formData);
|
|
|
|
};
|
|
|
|
|
2021-03-20 10:26:57 +01:00
|
|
|
document.getElementById('multiButton').onclick = function () {
|
|
|
|
MapGuesser.showModal('multi');
|
|
|
|
document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
|
|
|
|
document.getElementById('multiForm').elements.roomId.select();
|
2021-05-12 13:51:06 +02:00
|
|
|
document.getElementById('playMode').style.visibility = 'hidden';
|
|
|
|
}
|
|
|
|
|
2021-05-19 17:11:49 +02:00
|
|
|
if (document.getElementById('challengeButton')) {
|
|
|
|
document.getElementById('challengeButton').onclick = function () {
|
|
|
|
MapGuesser.showModal('challenge');
|
|
|
|
document.getElementById('createNewChallengeButton').href = '/challenge/new/' + this.dataset.mapId;
|
|
|
|
document.getElementById('playMode').style.visibility = 'hidden';
|
|
|
|
|
|
|
|
var timeLimit = document.getElementById('timeLimit').value;
|
2021-05-21 11:30:30 +02:00
|
|
|
document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
|
2021-05-19 17:11:49 +02:00
|
|
|
};
|
2021-03-20 10:26:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById('closePlayModeButton').onclick = function () {
|
|
|
|
MapGuesser.hideModal();
|
|
|
|
};
|
|
|
|
|
|
|
|
document.getElementById('closeMultiButton').onclick = function () {
|
|
|
|
MapGuesser.hideModal();
|
|
|
|
};
|
|
|
|
|
2021-05-12 13:51:06 +02:00
|
|
|
document.getElementById('closeChallengeButton').onclick = function () {
|
|
|
|
MapGuesser.hideModal();
|
|
|
|
}
|
|
|
|
|
2021-03-20 10:26:57 +01:00
|
|
|
var buttons = document.getElementById('mapContainer').getElementsByClassName('playButton');
|
|
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
|
|
var button = buttons[i];
|
|
|
|
|
|
|
|
button.onclick = function () {
|
|
|
|
MapGuesser.showModal('playMode');
|
|
|
|
document.getElementById('singleButton').href = '/game/' + this.dataset.mapId;
|
|
|
|
document.getElementById('multiButton').dataset.mapId = this.dataset.mapId;
|
2021-05-12 13:51:06 +02:00
|
|
|
document.getElementById('challengeMapId').value = this.dataset.mapId;
|
2021-03-20 10:26:57 +01:00
|
|
|
};
|
|
|
|
}
|
2021-05-12 13:51:06 +02:00
|
|
|
|
|
|
|
document.getElementById('timeLimit').oninput = function () {
|
|
|
|
var timeLimit = document.getElementById('timeLimit').value;
|
2021-05-21 11:30:30 +02:00
|
|
|
document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
|
2021-05-12 13:51:06 +02:00
|
|
|
document.getElementById('timerEnabled').checked = true;
|
|
|
|
}
|
2020-06-25 20:42:12 +02:00
|
|
|
})();
|