diff --git a/index.html b/index.html index adab832..c61559c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,10 @@

2048

-
0
+
+
0
+
0
+

Join the numbers and get to the 2048 tile!

@@ -73,6 +76,7 @@ + diff --git a/js/application.js b/js/application.js index 1ce870e..a4d310a 100644 --- a/js/application.js +++ b/js/application.js @@ -1,4 +1,4 @@ // Wait till the browser is ready to render the game (avoids glitches) window.requestAnimationFrame(function () { - var manager = new GameManager(4, KeyboardInputManager, HTMLActuator); + new GameManager(4, KeyboardInputManager, HTMLActuator, LocalScoreManager); }); diff --git a/js/game_manager.js b/js/game_manager.js index 1880d48..91c0390 100644 --- a/js/game_manager.js +++ b/js/game_manager.js @@ -1,6 +1,7 @@ -function GameManager(size, InputManager, Actuator) { +function GameManager(size, InputManager, Actuator, ScoreManager) { this.size = size; // Size of the grid this.inputManager = new InputManager; + this.scoreManager = new ScoreManager; this.actuator = new Actuator; this.startTiles = 2; @@ -51,11 +52,17 @@ GameManager.prototype.addRandomTile = function () { // Sends the updated grid to the actuator GameManager.prototype.actuate = function () { + if (this.scoreManager.get() < this.score) { + this.scoreManager.set(this.score); + } + this.actuator.actuate(this.grid, { - score: this.score, - over: this.over, - won: this.won + score: this.score, + over: this.over, + won: this.won, + bestScore: this.scoreManager.get() }); + }; // Save all tile positions and remove merger info diff --git a/js/html_actuator.js b/js/html_actuator.js index 186a63f..0984570 100644 --- a/js/html_actuator.js +++ b/js/html_actuator.js @@ -1,6 +1,7 @@ function HTMLActuator() { this.tileContainer = document.querySelector(".tile-container"); this.scoreContainer = document.querySelector(".score-container"); + this.bestContainer = document.querySelector(".best-container"); this.messageContainer = document.querySelector(".game-message"); this.score = 0; @@ -21,6 +22,7 @@ HTMLActuator.prototype.actuate = function (grid, metadata) { }); self.updateScore(metadata.score); + self.updateBestScore(metadata.bestScore); if (metadata.over) self.message(false); // You lose if (metadata.won) self.message(true); // You win! @@ -103,11 +105,17 @@ HTMLActuator.prototype.updateScore = function (score) { } }; +HTMLActuator.prototype.updateBestScore = function (bestScore) { + this.bestContainer.textContent = bestScore; +}; + HTMLActuator.prototype.message = function (won) { var type = won ? "game-won" : "game-over"; - var message = won ? "You win!" : "Game over!" + var message = won ? "You win!" : "Game over!"; - // if (ga) ga("send", "event", "game", "end", type, this.score); + if (typeof ga !== "undefined") { + ga("send", "event", "game", "end", type, this.score); + } this.messageContainer.classList.add(type); this.messageContainer.getElementsByTagName("p")[0].textContent = message; diff --git a/js/local_score_manager.js b/js/local_score_manager.js new file mode 100644 index 0000000..95c6966 --- /dev/null +++ b/js/local_score_manager.js @@ -0,0 +1,31 @@ +window.fakeStorage = { + _data : {}, + setItem : function (id, val) { + console.log('set'); + return this._data[id] = String(val); + }, + getItem : function (id) { + return this._data.hasOwnProperty(id) ? this._data[id] : undefined; + }, + removeItem : function (id) { return delete this._data[id]; }, + clear : function () { return this._data = {}; } +}; + +function LocalScoreManager() { + var localSupported = !!window.localStorage; + this.key = 'bestScore'; + this.storage = localSupported ? window.localStorage : window.fakeStorage; +} + +LocalScoreManager.prototype.get = function () { + var score = this.storage.getItem(this.key); + if (typeof score === "undefined" || score === null) { + score = 0; + } + return score; +}; + +LocalScoreManager.prototype.set = function (score) { + this.storage.setItem(this.key, score); +}; + diff --git a/style/main.css b/style/main.css index abf1921..06f4ed5 100644 --- a/style/main.css +++ b/style/main.css @@ -49,9 +49,12 @@ h1.title { top: -50px; opacity: 0; } } -.score-container { +.scores-container { + float: right; } + +.score-container, .best-container { position: relative; - float: right; + display: inline-block; background: #bbada0; padding: 15px 25px; font-size: 25px; @@ -60,19 +63,19 @@ h1.title { font-weight: bold; border-radius: 3px; color: white; - margin-top: 8px; } - .score-container:after { + margin-top: 8px; + text-align: center; } + .score-container:after, .best-container:after { position: absolute; width: 100%; top: 10px; left: 0; - content: "Score"; text-transform: uppercase; font-size: 13px; line-height: 13px; text-align: center; color: #eee4da; } - .score-container .score-addition { + .score-container .score-addition, .best-container .score-addition { position: absolute; right: 30px; color: red; @@ -86,6 +89,12 @@ h1.title { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; } +.score-container:after { + content: "Score"; } + +.best-container:after { + content: "Best"; } + p { margin-top: 0; margin-bottom: 10px; diff --git a/style/main.scss b/style/main.scss index 731d38d..4ffe138 100644 --- a/style/main.scss +++ b/style/main.scss @@ -58,11 +58,15 @@ h1.title { } } -.score-container { +.scores-container { + float: right; +} + +.score-container, .best-container { $height: 25px; position: relative; - float: right; + display: inline-block; background: $game-container-background; padding: 15px 25px; font-size: $height; @@ -72,13 +76,13 @@ h1.title { border-radius: 3px; color: white; margin-top: 8px; + text-align: center; &:after { position: absolute; width: 100%; top: 10px; left: 0; - content: "Score"; text-transform: uppercase; font-size: 13px; line-height: 13px; @@ -100,6 +104,14 @@ h1.title { } } +.score-container:after { + content: "Score"; +} + +.best-container:after { + content: "Best" +} + p { margin-top: 0; margin-bottom: 10px;