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

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 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

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

MikeShi42

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

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() {
    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

    …
    <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

@import url(fonts/clear-sans.css);

/* Styling to make the message containers look nice  */
.message-container {
  background: #8e7967;
  color: white;
  text-align: center;
  padding: 1em;
  margin: 1em;
  font-weight: bold;

MikeShi42

function waitingPlayerTwo(show) {
  const messageContainer = document.querySelector('.waiting-message');
  messageContainer.style.display = show ? 'block' : 'none';
}

function countdownMessage(show, number) {
  const messageContainer = document.querySelector('.countdown-message');
  const countdownNumber = document.querySelector('.countdown-number');
  
  messageContainer.style.display = show ? 'block' : 'none';