Client.js

import LagNetwork from "./LagNetwork";
import Entity from "./Entity";
import Renderer from "./Renderer";

// =============================================================================
//  The Client.
// =============================================================================

class Client {
  constructor(canvas, status) {
    // Local representation of the entities.
    this.entities = {};

    // Input state.
    this.key_left = false;
    this.key_right = false;

    // Simulated network connection.
    this.network = new LagNetwork();
    this.server = null;
    this.lag = 0;

    // Unique ID of our entity. Assigned by Server on connection.
    this.entity_id = null;

    // Data needed for reconciliation.
    this.client_side_prediction = false;
    this.server_reconciliation = false;
    this.input_sequence_number = 0;
    this.pending_inputs = [];

    // Entity interpolation toggle.
    this.entity_interpolation = true;

    // UI.
    this.status = status;
    this.renderer = new Renderer(canvas);

    // Update rate.
    this.setUpdateRate(50);
  }

  setUpdateRate(hz) {
    this.update_rate = hz;

    clearInterval(this.update_interval);
    this.update_interval = setInterval(() => {
      this.update();
    }, 1000 / this.update_rate);
  }

  // Update Client state.
  update() {
    // Listen to the server.
    this.processServerMessages();

    if (this.entity_id == null) {
      return; // Not connected yet.
    }

    // Process inputs.
    this.processInputs();

    // Interpolate other entities.
    if (this.entity_interpolation) {
      this.interpolateEntities();
    }

    // Render the World.
    this.renderer.renderWorld(this.entities);

    // Show some info.
    var info = "Non-acknowledged inputs: " + this.pending_inputs.length;
    this.status.textContent = info;
  }

  // Get inputs and send them to the server.
  // If enabled, do client-side prediction.
  processInputs() {
    // Compute delta time since last update.
    var now_ts = +new Date();
    var last_ts = this.last_ts || now_ts;
    var dt_sec = (now_ts - last_ts) / 1000.0;
    this.last_ts = now_ts;

    // Package player's input.
    var input;
    if (this.key_right) {
      input = { press_time: dt_sec };
    } else if (this.key_left) {
      input = { press_time: -dt_sec };
    } else {
      // Nothing interesting happened.
      return;
    }

    // Send the input to the server.
    input.input_sequence_number = this.input_sequence_number++;
    input.entity_id = this.entity_id;
    this.server.network.send(this.lag, input);

    // Do client-side prediction.
    if (this.client_side_prediction) {
      this.entities[this.entity_id].applyInput(input);
    }

    // Save this input for later reconciliation.
    this.pending_inputs.push(input);
  }

  // Process all messages from the server, i.e. world updates.
  // If enabled, do server reconciliation.
  processServerMessages() {
    while (true) {
      var message = this.network.receive();
      if (!message) {
        break;
      }

      // World state is a list of entity states.
      for (var i = 0; i < message.length; i++) {
        var state = message[i];

        // If this is the first time we see this entity, create a local representation.
        if (!this.entities[state.entity_id]) {
          var entity = new Entity();
          entity.entity_id = state.entity_id;
          this.entities[state.entity_id] = entity;
        }

        var entity = this.entities[state.entity_id];

        if (state.entity_id == this.entity_id) {
          // Received the authoritative position of this client's entity.
          entity.x = state.position;

          if (this.server_reconciliation) {
            // Server Reconciliation. Re-apply all the inputs not yet processed by
            // the server.
            var j = 0;
            while (j < this.pending_inputs.length) {
              var input = this.pending_inputs[j];
              if (input.input_sequence_number <= state.last_processed_input) {
                // Already processed. Its effect is already taken into account into the world update
                // we just got, so we can drop it.
                this.pending_inputs.splice(j, 1);
              } else {
                // Not processed by the server yet. Re-apply it.
                entity.applyInput(input);
                j++;
              }
            }
          } else {
            // Reconciliation is disabled, so drop all the saved inputs.
            this.pending_inputs = [];
          }
        } else {
          // Received the position of an entity other than this client's.

          if (!this.entity_interpolation) {
            // Entity interpolation is disabled - just accept the server's position.
            entity.x = state.position;
          } else {
            // Add it to the position buffer.
            var timestamp = +new Date();
            entity.position_buffer.push({
              timestamp,
              position: state.position,
            });
          }
        }
      }
    }
  }

  interpolateEntities() {
    // Compute render timestamp.
    var now = +new Date();
    var render_timestamp = now - 1000.0 / this.server.update_rate;

    for (var i in this.entities) {
      var entity = this.entities[i];

      // No point in interpolating this client's entity.
      if (entity.entity_id == this.entity_id) {
        continue;
      }

      // Find the two authoritative positions surrounding the rendering timestamp.
      var buffer = entity.position_buffer;

      // Drop older positions.
      while (buffer.length >= 2 && buffer[1].timestamp <= render_timestamp) {
        buffer.shift();
      }

      // Interpolate between the two surrounding authoritative positions.
      if (
        buffer.length >= 2 &&
        buffer[0].timestamp <= render_timestamp &&
        render_timestamp <= buffer[1].timestamp
      ) {
        var x0 = buffer[0].position;
        var x1 = buffer[1].position;
        var t0 = buffer[0].timestamp;
        var t1 = buffer[1].timestamp;

        entity.x = x0 + ((x1 - x0) * (render_timestamp - t0)) / (t1 - t0);
      }
    }
  }
}

export default Client;