MultiPlayer V1, its a pure 1 vs 1

.classpath

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

.project

@@ -0,0 +1,17 @@
+<?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,4 +1,6 @@
 // Wait till the browser is ready to render the game (avoids glitches)
 window.requestAnimationFrame(function (){
-  new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
+	let storage = new RemoteStorageManager;
+  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,21 +1,24 @@
-function GameManager(size, InputManager, Actuator, StorageManager) {
+function GameManager(size, InputManager, Actuator, StorageManager, game){
   this.size           = size; // Size of the grid
-  this.inputManager   = new InputManager;
-  this.storageManager = new StorageManager;
-  this.actuator       = new Actuator;
+  this.inputManager   = InputManager;
+  this.storageManager = StorageManager;
+  this.actuator       = 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.clearGameState();
+  this.storageManager.sendAction("restart");
   this.actuator.continueGame(); // Clear the game won/lost message
   this.setup();
 };
@@ -33,10 +36,11 @@ GameManager.prototype.isGameTerminated = function () {
 
 // Set up the game
 GameManager.prototype.setup = function (){
-  var previousState = this.storageManager.getGameState();
-
+	this.storageManager.onData((data) => {
+		if(data.action === "state"){
 			// Reload the game from a previous game if present
-  if (previousState) {
+  			if (data.value) {
+				var previousState = JSON.parse(data.value);
     			this.grid        = new Grid(previousState.grid.size,
                 previousState.grid.cells); // Reload grid
 			    this.score       = previousState.score;
@@ -56,6 +60,8 @@ GameManager.prototype.setup = function () {
 			
 			  // Update the actuator
 			  this.actuate();
+			}
+		}, this.game);
 };
 
 // Set up the initial tiles to start the game with
@@ -77,17 +83,6 @@ 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,
@@ -97,6 +92,8 @@ GameManager.prototype.actuate = function () {
     terminated: this.isGameTerminated()
   });
   
+  this.storageManager.sendAction("state", JSON.stringify(this.serialize()));
+
 };
 
 // Represent the current game as an object

assets/js/html_actuator.js

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

assets/js/local_storage_manager.js

@@ -1,63 +0,0 @@
-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

@@ -0,0 +1,51 @@
+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,8 +116,10 @@ hr {
   margin-bottom: 30px; }
 
 .container {
-  width: 500px;
-  margin: 0 auto; }
+  width: 40%;
+  margin: 0 auto;
+  display: inline-block;
+}
 
 @-webkit-keyframes fade-in {
   0% {

index.html

@@ -18,12 +18,11 @@
 </head>
 <body>
   <div class="container">
-
     <div class="heading">
       <h1 class="title">2048</h1>
       <div class="scores-container">
-        <div class="score-container">0</div>
-        <div class="best-container">0</div>
+        <div class="score-container score-container-game1">0</div>
+        <div class="best-container best-container-game1">0</div>
       </div>
     </div>
 
@@ -33,7 +32,7 @@
     </div>
 
     <div class="game-container">
-      <div class="game-message">
+      <div class="game-message game-message-game1">
         <p></p>
         <div class="lower">
 	        <a class="keep-playing-button">Keep going</a>
@@ -67,17 +66,55 @@
           <div class="grid-cell"></div>
         </div>
       </div>
-        <div class="tile-container">
+      <div class="tile-container tile-container-game1"></div>
     </div>
   </div>
   
-    <p class="game-explanation">
-      <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>
-    </p>
-    <hr>
-    <p>
-      <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>.
-    </p>
+  <div class="container">
+    <div class="heading">
+      <h1 class="title">2048</h1>
+      <div class="scores-container">
+        <div class="score-container score-container-game2">0</div>
+        <div class="best-container best-container-game2">0</div>
+      </div>
+    </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>
@@ -87,7 +124,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/local_storage_manager.js"></script>
+  <script src="assets/js/remote_storage_manager.js"></script>
   <script src="assets/js/game_manager.js"></script>
   <script src="assets/js/application.js"></script>
 </body>