feature/MAPG-235-basic-challenge-mode #48
@ -199,6 +199,12 @@
 | 
			
		||||
    font-weight: 500;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (max-width: 899px) {
 | 
			
		||||
    .hideOnNarrowScreen {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (max-width: 599px) {
 | 
			
		||||
    #mapName {
 | 
			
		||||
        display: none;
 | 
			
		||||
@ -226,9 +232,6 @@
 | 
			
		||||
        bottom: 25px;
 | 
			
		||||
        left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
    .hideOnMobile {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media screen and (min-width: 600px) {
 | 
			
		||||
 | 
			
		||||
@ -299,6 +299,9 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
 | 
			
		||||
                Game.loadHistory(this.response);
 | 
			
		||||
 | 
			
		||||
                Game.restrictions = this.response.restrictions;
 | 
			
		||||
                Game.displayRestrictions();
 | 
			
		||||
 | 
			
		||||
                if (this.response.finished) {
 | 
			
		||||
 | 
			
		||||
                    Game.transitToResultMap();
 | 
			
		||||
@ -306,8 +309,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
 | 
			
		||||
                } else {
 | 
			
		||||
 | 
			
		||||
                    Game.restrictions = this.response.restrictions;
 | 
			
		||||
 | 
			
		||||
                    Game.panoId = this.response.place.panoId;
 | 
			
		||||
                    Game.pov = this.response.place.pov;
 | 
			
		||||
 | 
			
		||||
@ -339,6 +340,47 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
                    Game.guess();
 | 
			
		||||
                });
 | 
			
		||||
            }
 | 
			
		||||
            
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        displayRestrictions: function () {
 | 
			
		||||
            if (!Game.restrictions) {
 | 
			
		||||
                return;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            
 | 
			
		||||
 | 
			
		||||
            var restrictionsForDisplay = [];
 | 
			
		||||
            if (Game.restrictions.timeLimit) {
 | 
			
		||||
                restrictionsForDisplay.push('time limit per ' + Game.restrictions.timeLimitType);
 | 
			
		||||
            }
 | 
			
		||||
            if (Game.restrictions.noPan) {
 | 
			
		||||
                restrictionsForDisplay.push('no camera change');
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
                if (Game.restrictions.noMove) {
 | 
			
		||||
                    restrictionsForDisplay.push('no move');
 | 
			
		||||
                }
 | 
			
		||||
                if (Game.restrictions.noZoom) {
 | 
			
		||||
                    restrictionsForDisplay.push('no zoom');
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // create restrictions span for header
 | 
			
		||||
            var restrictions = document.createElement('span');
 | 
			
		||||
            restrictions.setAttribute('id', 'restrictions');
 | 
			
		||||
            restrictions.setAttribute('class', 'hideOnNarrowScreen');
 | 
			
		||||
            var restrictionsTitle = document.createElement('span');
 | 
			
		||||
            restrictionsTitle.setAttribute('class', 'bold');
 | 
			
		||||
            restrictionsTitle.innerText = 'Restrictions: ';
 | 
			
		||||
            var restrictionsList = document.createElement('span');
 | 
			
		||||
            restrictionsList.innerText = restrictionsForDisplay.join(', ');
 | 
			
		||||
            restrictions.appendChild(restrictionsTitle);
 | 
			
		||||
            restrictions.appendChild(restrictionsList);
 | 
			
		||||
 | 
			
		||||
            var roundContainer = document.getElementById('roundContainer');
 | 
			
		||||
            var header = roundContainer.parentNode;
 | 
			
		||||
            header.insertBefore(restrictions, roundContainer);
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        disableRestrictions: function () {
 | 
			
		||||
@ -355,6 +397,14 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
            Game.timeoutEnd = null;
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        hideRestrictions: function() {
 | 
			
		||||
            var restrictions = document.getElementById('restrictions');
 | 
			
		||||
            if (restrictions) {
 | 
			
		||||
                var header = restrictions.parentNode;
 | 
			
		||||
                header.removeChild(restrictions);
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        transitToResultMap: function () {
 | 
			
		||||
            // TODO: refactor - it is necessary for mobile
 | 
			
		||||
            if (window.getComputedStyle(document.getElementById('guess')).visibility === 'hidden') {
 | 
			
		||||
@ -487,6 +537,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
            document.getElementById("navigation").style.visibility = 'visible';
 | 
			
		||||
 | 
			
		||||
            Game.disableRestrictions();
 | 
			
		||||
            Game.hideRestrictions();
 | 
			
		||||
 | 
			
		||||
            document.getElementById('panningBlockerCover').style.display = null;
 | 
			
		||||
 | 
			
		||||
@ -900,6 +951,12 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
            scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
 | 
			
		||||
            scoreBar.style.width = scoreBarProperties.width;
 | 
			
		||||
 | 
			
		||||
            Game.showHighscores();
 | 
			
		||||
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        showHighscores: function() {
 | 
			
		||||
 | 
			
		||||
            if (Game.type == GameType.CHALLENGE) {
 | 
			
		||||
                var highscores = this.calculateHighScores();
 | 
			
		||||
                var summaryInfo = document.getElementById('summaryInfo');
 | 
			
		||||
@ -925,18 +982,16 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 | 
			
		||||
                } 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>';
 | 
			
		||||
                        summaryInfo.innerHTML = 'You won! <span class="hideOnNarrowScreen">' + 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>';
 | 
			
		||||
                        summaryInfo.innerHTML = 'You lost! <span class="hideOnNarrowScreen">' + 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.'
 | 
			
		||||
                    summaryInfo.innerHTML = 'You are the first to finish. <span class="hideOnNarrowScreen">Invite your friends by sending them the link.</span>'
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
        rewriteGoogleLink: function () {
 | 
			
		||||
 | 
			
		||||
@ -226,14 +226,15 @@ class GameFlowController implements ISecured
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        $response['restrictions'] = [
 | 
			
		||||
            'timeLimit' => $challenge->getTimeLimit() * 1000,
 | 
			
		||||
            'timeLimitType' => $challenge->getTimeLimitType(),
 | 
			
		||||
            'noMove' => $challenge->getNoMove(),
 | 
			
		||||
            'noPan' => $challenge->getNoPan(),
 | 
			
		||||
            'noZoom' => $challenge->getNoZoom()
 | 
			
		||||
        ];
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return $response;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user