MikeShi42

    …
    <div class="above-game">
      <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
      <a class="restart-button">New Game</a>
    </div>
    
    <!-- Add these two divs -->
    <div class="message-container waiting-message" style="display: none;">
      Waiting for Player 2...
    </div>

MikeShi42

  setup() {
    if (!this.remotePlayer) {
      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.grid        = new Grid(this.size);
    this.score       = 0;
    this.over        = false;

MikeShi42

  setup() {
    if (!this.remotePlayer) {
      this.inputManager.on("move", this.move.bind(this));
      this.inputManager.on("restart", this.restart.bind(this));
      this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
    }

    var previousState = this.storageManager.getGameState();
    ...

MikeShi42

  setup() {
    var previousState = this.storageManager.getGameState();
     ...
  }

MikeShi42

class GameManager {
  constructor(socket, remotePlayer, size, InputManager, Actuator, StorageManager) {
    ...
    this.startTiles     = 2;
    this.remotePlayer = remotePlayer;
    ...

MikeShi42

class GameManager {
  constructor(socket, remotePlayer, size, InputManager, Actuator, StorageManager) {
    ...
    this.startTiles     = 2;

    // We’ll be deleting these 3 lines
    this.inputManager.on("move", this.move.bind(this));
    this.inputManager.on("restart", this.restart.bind(this));
    this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
  

MikeShi42

let remoteGame = null;
let localGame = null;

// Wait till the browser is ready to render the game (avoids glitches)
window.requestAnimationFrame(function () {
  const socket = io.connect(window.location.origin);
  
  remoteGame = new GameManager(socket, true, 4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
  localGame = new GameManager(socket, false, 4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
});

MikeShi42

class HTMLActuator {
  constructor(remotePlayer) {
    if (remotePlayer) {
      this.tileContainer    = document.querySelector("#player-two .tile-container");
      this.messageContainer = document.querySelector("#player-two .game-message");
    } else {
      this.tileContainer    = document.querySelector("#player-one .tile-container");
      this.messageContainer = document.querySelector("#player-one .game-message");
    }
    

MikeShi42

  constructor(socket, remotePlayer, size, InputManager, Actuator, StorageManager) {
    ...

    // Add these two lines
    this.remotePlayer = remotePlayer;
    this.socket = socket;

    // Add this new if statement
    if (this.remotePlayer) {
      this.socket.on('move', this.handleRemoteMove.bind(this));

MikeShi42

  handleRemoteMove(data) {
    const grid = data.grid;
    const metadata = data.metadata;
    this.actuator.actuate(grid, metadata);
  }