.classpath

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<classpath>
-	<classpathentry kind="output" path="bin"/>
-</classpath>

.project

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>endg-2048</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.jdt.core.javabuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.jdt.core.javanature</nature>
-	</natures>
-</projectDescription>

assets/js/application.js

@@ -1,6 +1,4 @@
 // Wait till the browser is ready to render the game (avoids glitches)
-window.requestAnimationFrame(function (){
+window.requestAnimationFrame(function () {
-	let storage = new RemoteStorageManager;
+  new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
-  new GameManager(4, new KeyboardInputManager, new HTMLActuator("game1"), storage, "game1");
-  new GameManager(4, undefined, new HTMLActuator("game2"), storage, "game2");
 });

assets/js/game_manager.js

@@ -1,24 +1,21 @@
-function GameManager(size, InputManager, Actuator, StorageManager, game){
+function GameManager(size, InputManager, Actuator, StorageManager) {
   this.size           = size; // Size of the grid
-  this.inputManager   = InputManager;
+  this.inputManager   = new InputManager;
-  this.storageManager = StorageManager;
+  this.storageManager = new StorageManager;
-  this.actuator       = Actuator;
+  this.actuator       = new Actuator;
-  this.game = game;
 
   this.startTiles     = 2;
 
-  if(this.inputManager){
   this.inputManager.on("move", this.move.bind(this));
   this.inputManager.on("restart", this.restart.bind(this));
   this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
-  }
 
   this.setup();
 }
 
 // Restart the game
 GameManager.prototype.restart = function () {
-  this.storageManager.sendAction("restart");
+  this.storageManager.clearGameState();
   this.actuator.continueGame(); // Clear the game won/lost message
   this.setup();
 };
@@ -35,12 +32,11 @@ GameManager.prototype.isGameTerminated = function () {
 };
 
 // Set up the game
-GameManager.prototype.setup = function (){
+GameManager.prototype.setup = function () {
-	this.storageManager.onData((data) => {
+  var previousState = this.storageManager.getGameState();
-		if(data.action === "state"){
+
   // Reload the game from a previous game if present
-  			if (data.value) {
+  if (previousState) {
-				var previousState = JSON.parse(data.value);
     this.grid        = new Grid(previousState.grid.size,
                                 previousState.grid.cells); // Reload grid
     this.score       = previousState.score;
@@ -60,8 +56,6 @@ GameManager.prototype.setup = function (){
 
   // Update the actuator
   this.actuate();
-			}
-		}, this.game);
 };
 
 // Set up the initial tiles to start the game with
@@ -83,6 +77,17 @@ GameManager.prototype.addRandomTile = function () {
 
 // Sends the updated grid to the actuator
 GameManager.prototype.actuate = function () {
+  if (this.storageManager.getBestScore() < this.score) {
+    this.storageManager.setBestScore(this.score);
+  }
+
+  // Clear the state when the game is over (game over only, not win)
+  if (this.over) {
+    console.log("over "+this.score);
+    this.storageManager.clearGameState();
+  } else {
+    this.storageManager.setGameState(this.serialize());
+  }
 
   this.actuator.actuate(this.grid, {
     score:      this.score,
@@ -92,8 +97,6 @@ GameManager.prototype.actuate = function () {
     terminated: this.isGameTerminated()
   });
 
-  this.storageManager.sendAction("state", JSON.stringify(this.serialize()));
-
 };
 
 // Represent the current game as an object
@@ -108,7 +111,7 @@ GameManager.prototype.serialize = function () {
 };
 
 // Save all tile positions and remove merger info
-GameManager.prototype.prepareTiles = function (){
+GameManager.prototype.prepareTiles = function () {
   this.grid.eachCell(function (x, y, tile) {
     if (tile) {
       tile.mergedFrom = null;

assets/js/html_actuator.js

@@ -1,8 +1,8 @@
-function HTMLActuator(id) {
+function HTMLActuator() {
-  this.tileContainer    = document.querySelector(".tile-container-"+id);
+  this.tileContainer    = document.querySelector(".tile-container");
-  this.scoreContainer   = document.querySelector(".score-container-"+id);
+  this.scoreContainer   = document.querySelector(".score-container");
-  this.bestContainer    = document.querySelector(".best-container-"+id);
+  this.bestContainer    = document.querySelector(".best-container");
-  this.messageContainer = document.querySelector(".game-message-"+id);
+  this.messageContainer = document.querySelector(".game-message");
 
   this.score = 0;
 }

assets/js/local_storage_manager.js

@@ -0,0 +1,63 @@
+window.fakeStorage = {
+  _data: {},
+
+  setItem: function (id, val) {
+    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 LocalStorageManager() {
+  this.bestScoreKey     = "bestScore";
+  this.gameStateKey     = "gameState";
+
+  var supported = this.localStorageSupported();
+  this.storage = supported ? window.localStorage : window.fakeStorage;
+}
+
+LocalStorageManager.prototype.localStorageSupported = function () {
+  var testKey = "test";
+
+  try {
+    var storage = window.localStorage;
+    storage.setItem(testKey, "1");
+    storage.removeItem(testKey);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+// Best score getters/setters
+LocalStorageManager.prototype.getBestScore = function () {
+  return this.storage.getItem(this.bestScoreKey) || 0;
+};
+
+LocalStorageManager.prototype.setBestScore = function (score) {
+  this.storage.setItem(this.bestScoreKey, score);
+};
+
+// Game state getters/setters and clearing
+LocalStorageManager.prototype.getGameState = function () {
+  var stateJSON = this.storage.getItem(this.gameStateKey);
+  return stateJSON ? JSON.parse(stateJSON) : null;
+};
+
+LocalStorageManager.prototype.setGameState = function (gameState) {
+  this.storage.setItem(this.gameStateKey, JSON.stringify(gameState));
+};
+
+LocalStorageManager.prototype.clearGameState = function () {
+  this.storage.removeItem(this.gameStateKey);
+};

assets/js/remote_storage_manager.js

@@ -1,51 +0,0 @@
-function RemoteStorageManager() {
-  this.storage = new WebSocket("ws://localhost/");
-  openListeners = [];
-  dataListeners = [];
-  
-  this.bestScore = 0;
-  
-  this.storage.onopen = function(){
-	  this.connected = true;
-	  openListeners.forEach(listener => listener());
-  }
-  
-  this.storage.onmessage = function(e){
-	  let data = JSON.parse(e.data);
-	  let list = dataListeners[data.game];
-	  if(list !== undefined) list.forEach(listener => listener(data));
-	  console.log(data);
-	  
-	  if(data.action === "bestScore"){
-		  this.bestScore = data.value;
-	  }
-  }
-  
-  this.openListeners = openListeners;
-  this.dataListeners = dataListeners;
-}
-
-RemoteStorageManager.prototype.onConnected = function(func){
-	if(this.connected){
-		func();
-		return;
-	}
-	this.openListeners.push(func);
-}
-
-RemoteStorageManager.prototype.onData = function(func, game){
-	let listeners = this.dataListeners[game];
-	if(listeners == undefined){
-		listeners = [];
-		this.dataListeners[game] = listeners;
-	}
-	listeners.push(func);
-}
-
-RemoteStorageManager.prototype.sendAction = function(action, value){
-	this.storage.send(JSON.stringify(value === undefined ? {action:action} : {action:action,value:value}));
-}
-
-RemoteStorageManager.prototype.getBestScore = function(){
-	return this.bestScore;
-}

assets/style/main.css

@@ -116,10 +116,8 @@ hr {
   margin-bottom: 30px; }
 
 .container {
-  width: 40%;
+  width: 500px;
-  margin: 0 auto;
+  margin: 0 auto; }
-  display: inline-block;
-}
 
 @-webkit-keyframes fade-in {
   0% {

index.html

@@ -18,11 +18,12 @@
 </head>
 <body>
   <div class="container">
+
     <div class="heading">
       <h1 class="title">2048</h1>
       <div class="scores-container">
-        <div class="score-container score-container-game1">0</div>
+        <div class="score-container">0</div>
-        <div class="best-container best-container-game1">0</div>
+        <div class="best-container">0</div>
       </div>
     </div>
 
@@ -32,7 +33,7 @@
     </div>
 
     <div class="game-container">
-      <div class="game-message game-message-game1">
+      <div class="game-message">
         <p></p>
         <div class="lower">
 	        <a class="keep-playing-button">Keep going</a>
@@ -66,55 +67,17 @@
           <div class="grid-cell"></div>
         </div>
       </div>
-      <div class="tile-container tile-container-game1"></div>
+        <div class="tile-container">
       </div>
     </div>
 
-  <div class="container">
+    <p class="game-explanation">
-    <div class="heading">
+      <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
-      <h1 class="title">2048</h1>
+    </p>
-      <div class="scores-container">
+    <hr>
-        <div class="score-container score-container-game2">0</div>
+    <p>
-        <div class="best-container best-container-game2">0</div>
+      <strong class="important">Note:</strong> This site is the official version of 2048. You can access it on your phone via the <a href="https://hub.endmove.eu">EndStorage Hub</a>.
-      </div>
+    </p>
-    </div>
-
-    <div class="game-container">
-	    <div class="game-message game-message-game2">
-        <p></p>
-        <div class="lower">
-	        <a class="keep-playing-button">Keep going</a>
-          <a class="retry-button">Try again</a>
-        </div>
-      </div>
-      <div class="grid-container">
-        <div class="grid-row">
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-        </div>
-        <div class="grid-row">
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-        </div>
-        <div class="grid-row">
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-        </div>
-        <div class="grid-row">
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-          <div class="grid-cell"></div>
-        </div>
-      </div>
-      <div class="tile-container tile-container-game2"></div>
-    </div>
   </div>
 
   <script src="assets/js/bind_polyfill.js"></script>
@@ -124,7 +87,7 @@
   <script src="assets/js/html_actuator.js"></script>
   <script src="assets/js/grid.js"></script>
   <script src="assets/js/tile.js"></script>
-  <script src="assets/js/remote_storage_manager.js"></script>
+  <script src="assets/js/local_storage_manager.js"></script>
   <script src="assets/js/game_manager.js"></script>
   <script src="assets/js/application.js"></script>
 </body>