mapguesser/public/static/js/maps.js

(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';
                }
            }
        }
    };

    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.initializeDescriptionDivs();
    Maps.calculateDescriptionDivHeights();

    window.onresize = function () {
        Maps.calculateDescriptionDivHeights();
    };

    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;
    };

    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);
    };

    if (document.getElementById('multiButton')) {
        document.getElementById('multiButton').onclick = function () {
            MapGuesser.showModal('multi');
            document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
            document.getElementById('multiForm').elements.roomId.select();
            document.getElementById('playMode').style.visibility = 'hidden';
        }
    }

    if (document.getElementById('challengeButton')) {
        document.getElementById('challengeButton').onclick = function () {
            MapGuesser.showModal('challenge');
            document.getElementById('playMode').style.visibility = 'hidden';
            var timeLimit = document.getElementById('timeLimit').value;
            document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
        };
    }

    document.getElementById('closePlayModeButton').onclick = function () {
        MapGuesser.hideModal();
    };

    document.getElementById('closeMultiButton').onclick = function () {
        MapGuesser.hideModal();
    };

    document.getElementById('closeChallengeButton').onclick = function () {
        MapGuesser.hideModal();
    }

    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;
            document.getElementById('challengeMapId').value = this.dataset.mapId;
        };
    }

    document.getElementById('timeLimit').oninput = function () {
        var timeLimit = document.getElementById('timeLimit').value;
        document.getElementById('timeLimitLabel').innerText = 'Time limit of ' + Util.printTimeForHuman(timeLimit);
        document.getElementById('timerEnabled').checked = true;
    }
})();