simondev.Quick_3D_MMORPG/client/main.js

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/FBXLoader.js';

import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.js';


const _CHARACTER_MODELS = {
  zombie: {
    base: 'mremireh_o_desbiens.fbx',
    path: './resources/characters/zombie/',
    animations: {
      idle: 'idle.fbx',
      walk: 'walk.fbx',
      run: 'run.fbx',
      dance: 'dance.fbx',
    },
    nameOffset: 25,
  },
  guard: {
    base: 'castle_guard_01.fbx',
    path: './resources/characters/guard/',
    animations: {
      idle: 'Sword And Shield Idle.fbx',
      walk: 'Sword And Shield Walk.fbx',
      run: 'Sword And Shield Run.fbx',
      dance: 'Macarena Dance.fbx',
    },
    nameOffset: 20,
  }
}


class FloatingName {
  constructor(params) {
    this.params_ = params;
    this.Init_();
  }

  Destroy() {
    this.element_ = null;
  }

  Init_() {
    const modelData = _CHARACTER_MODELS[this.params_.desc.character.class];

    this.element_ = document.createElement('canvas');
    this.context2d_ = this.element_.getContext('2d');
    this.context2d_.canvas.width = 256;
    this.context2d_.canvas.height = 128;
    this.context2d_.fillStyle = '#FFF';
    this.context2d_.font = "18pt Helvetica";
    this.context2d_.shadowOffsetX = 3;
    this.context2d_.shadowOffsetY = 3;
    this.context2d_.shadowColor = "rgba(0,0,0,0.3)";
    this.context2d_.shadowBlur = 4;
    this.context2d_.textAlign = 'center';
    this.context2d_.fillText(this.params_.desc.account.name, 128, 64);

    const map = new THREE.CanvasTexture(this.context2d_.canvas);

    this.sprite_ = new THREE.Sprite(
        new THREE.SpriteMaterial({map: map, color: 0xffffff}));
    this.sprite_.scale.set(20, 10, 1)
    this.sprite_.position.y += modelData.nameOffset;
    this.params_.parent.add(this.sprite_);
  }
};


class OurLoadingManager {
  constructor(loader) {
    this.loader_ = loader;
    this.files_ = new Set();
    this.onLoad = () => {};
  }

  load(file, cb) {
    this.files_.add(file);

    this.loader_.load(file, (result) => {
      this.files_.delete(file);
      cb(result);

      if (this.files_.size == 0) {
        this.onLoad();
      }
    });
  }
};


class BasicCharacterControllerProxy {
  constructor(animations) {
    this.animations_ = animations;
  }

  get animations() {
    return this.animations_;
  }
};


class AnimatedMesh {
  constructor(params) {
    this.params_ = params;
    this.group_ = new THREE.Group();
    this.params_.scene.add(this.group_);
    this.target_ = null;
    this.animations_ = {};
    this.mixer_ = null;
    this.onLoad = () => {};
    this.Load_();
  }

  Destroy() {
    if (this.target_) {
      this.target_.traverse(c => {
        if (c.material) {
          c.material.dispose();
        }
        if (c.geometry) {
          c.geometry.dispose();
        }
      });
    }
    this.params_.scene.remove(this.group_);
  }

  get position() {
    return this.group_.position;
  }

  get quaternion() {
    return this.group_.quaternion;
  }

  Load_() {
    const modelData = _CHARACTER_MODELS[this.params_.desc.character.class];
    const loader = new FBXLoader();
    loader.setPath(modelData.path);
    loader.load(modelData.base, (fbx) => {
      fbx.scale.setScalar(0.1);
      fbx.traverse(c => {
        c.castShadow = true;
      });

      this.target_ = fbx;
      this.group_.add(this.target_);

      this.mixer_ = new THREE.AnimationMixer(this.target_);

      const _OnLoad = (animName, anim) => {
        const clip = anim.animations[0];
        const action = this.mixer_.clipAction(clip);
  
        this.animations_[animName] = {
          clip: clip,
          action: action,
        };
      };

      // LoadingManager seems to be broken when you attempt to load multiple
      // resources multiple times, only first onLoad is called.
      // So roll our own.
      const loader = new FBXLoader();
      loader.setPath(modelData.path);

      this.manager_ = new OurLoadingManager(loader);
      this.manager_.load(
          modelData.animations.idle,
          (a) => { _OnLoad('idle', a); });
      this.manager_.load(
          modelData.animations.walk,
          (a) => { _OnLoad('walk', a); });
      this.manager_.load(
          modelData.animations.run,
          (a) => { _OnLoad('run', a); });
      this.manager_.load(
          modelData.animations.dance,
          (a) => { _OnLoad('dance', a); });
      this.manager_.onLoad = () => {
        this.onLoad();
      };
    });
  }

  Update(timeElapsed) {
    if (this.mixer_) {
      this.mixer_.update(timeElapsed);
    }
  }
};


class BasicCharacterController {
  constructor(params) {
    this._Init(params);
  }

  _Init(params) {
    this.params_ = params;
    this.decceleration_ = new THREE.Vector3(-0.0005, -0.0001, -5.0);
    this.acceleration_ = new THREE.Vector3(1, 0.25, 50.0);
    this.velocity_ = new THREE.Vector3(0, 0, 0);
    this.position_ = new THREE.Vector3();
    this.quaternion_ = new THREE.Quaternion();
    this.loaded_ = false;

    this._input = new BasicCharacterControllerInput();

    this.target_ = new AnimatedMesh({
        scene: params.scene,
        desc: params.desc,
    });
    this.target_.onLoad = () => {
      this.loaded_ = true;
      this.stateMachine_.SetState('idle');
    }
    this.stateMachine_ = new CharacterFSM(
        new BasicCharacterControllerProxy(this.target_.animations_));
  }

  get IsLoaded() {
    return this.loaded_;
  }

  get Position() {
    return this.position_;
  }

  get Rotation() {
    return this.quaternion_;
  }

  SetTransform(p, q) {
    this.position_.copy(p);
    this.quaternion_.copy(q);
    this.target_.group_.position.copy(this.position_);
    this.target_.group_.quaternion.copy(this.quaternion_);
  }

  CreateTransformPacket() {
    return [
        this.stateMachine_.currentState_.Name,
        this.position_.toArray(),
        this.quaternion_.toArray(),
    ];
  }

  Update(timeInSeconds) {
    if (!this.stateMachine_.currentState_) {
      return;
    }

    this.stateMachine_.Update(timeInSeconds, this._input);

    const velocity = this.velocity_;
    const frameDecceleration = new THREE.Vector3(
        velocity.x * this.decceleration_.x,
        velocity.y * this.decceleration_.y,
        velocity.z * this.decceleration_.z
    );
    frameDecceleration.multiplyScalar(timeInSeconds);
    frameDecceleration.z = Math.sign(frameDecceleration.z) * Math.min(
        Math.abs(frameDecceleration.z), Math.abs(velocity.z));

    velocity.add(frameDecceleration);

    const controlObject = this.target_;
    const _Q = new THREE.Quaternion();
    const _A = new THREE.Vector3();
    const _R = controlObject.quaternion.clone();

    const acc = this.acceleration_.clone();
    if (this._input._keys.shift) {
      acc.multiplyScalar(2.0);
    }

    if (this.stateMachine_.currentState_.Name == 'dance') {
      acc.multiplyScalar(0.0);
    }

    if (this._input._keys.forward) {
      velocity.z += acc.z * timeInSeconds;
    }
    if (this._input._keys.backward) {
      velocity.z -= acc.z * timeInSeconds;
    }
    if (this._input._keys.left) {
      _A.set(0, 1, 0);
      _Q.setFromAxisAngle(_A, 4.0 * Math.PI * timeInSeconds * this.acceleration_.y);
      _R.multiply(_Q);
    }
    if (this._input._keys.right) {
      _A.set(0, 1, 0);
      _Q.setFromAxisAngle(_A, 4.0 * -Math.PI * timeInSeconds * this.acceleration_.y);
      _R.multiply(_Q);
    }

    controlObject.quaternion.copy(_R);

    const oldPosition = new THREE.Vector3();
    oldPosition.copy(controlObject.position);

    const forward = new THREE.Vector3(0, 0, 1);
    forward.applyQuaternion(controlObject.quaternion);
    forward.normalize();

    const sideways = new THREE.Vector3(1, 0, 0);
    sideways.applyQuaternion(controlObject.quaternion);
    sideways.normalize();

    sideways.multiplyScalar(velocity.x * timeInSeconds);
    forward.multiplyScalar(velocity.z * timeInSeconds);

    controlObject.position.add(forward);
    controlObject.position.add(sideways);

    this.position_.copy(controlObject.position);
    this.quaternion_.copy(controlObject.quaternion);

    this.target_.Update(timeInSeconds);
  }
};

class BasicCharacterControllerInput {
  constructor() {
    this._Init();    
  }

  _Init() {
    this._keys = {
      forward: false,
      backward: false,
      left: false,
      right: false,
      space: false,
      shift: false,
    };
    document.addEventListener('keydown', (e) => this.OnKeyDown_(e), false);
    document.addEventListener('keyup', (e) => this._onKeyUp(e), false);
  }

  OnKeyDown_(event) {
    if (event.currentTarget.activeElement != document.body) {
      return;
    }
    switch (event.keyCode) {
      case 87: // w
        this._keys.forward = true;
        break;
      case 65: // a
        this._keys.left = true;
        break;
      case 83: // s
        this._keys.backward = true;
        break;
      case 68: // d
        this._keys.right = true;
        break;
      case 32: // SPACE
        this._keys.space = true;
        break;
      case 16: // SHIFT
        this._keys.shift = true;
        break;
    }
  }

  _onKeyUp(event) {
    if (event.currentTarget.activeElement != document.body) {
      return;
    }
    switch(event.keyCode) {
      case 87: // w
        this._keys.forward = false;
        break;
      case 65: // a
        this._keys.left = false;
        break;
      case 83: // s
        this._keys.backward = false;
        break;
      case 68: // d
        this._keys.right = false;
        break;
      case 32: // SPACE
        this._keys.space = false;
        break;
      case 16: // SHIFT
        this._keys.shift = false;
        break;
    }
  }
};


class FiniteStateMachine {
  constructor() {
    this._states = {};
    this.currentState_ = null;
  }

  _AddState(name, type) {
    this._states[name] = type;
  }

  SetState(name) {
    const prevState = this.currentState_;
    
    if (prevState) {
      if (prevState.Name == name) {
        return;
      }
      prevState.Exit();
    }

    const state = new this._states[name](this);

    this.currentState_ = state;
    state.Enter(prevState);
  }

  Update(timeElapsed, input) {
    if (this.currentState_) {
      this.currentState_.Update(timeElapsed, input);
    }
  }
};


class CharacterFSM extends FiniteStateMachine {
  constructor(proxy) {
    super();
    this._proxy = proxy;
    this._Init();
  }

  _Init() {
    this._AddState('idle', IdleState);
    this._AddState('walk', WalkState);
    this._AddState('run', RunState);
    this._AddState('dance', DanceState);
  }
};


class State {
  constructor(parent) {
    this._parent = parent;
  }

  Enter() {}
  Exit() {}
  Update() {}
};


class DanceState extends State {
  constructor(parent) {
    super(parent);

    this._FinishedCallback = () => {
      this._Finished();
    }
  }

  get Name() {
    return 'dance';
  }

  Enter(prevState) {
    const curAction = this._parent._proxy.animations_['dance'].action;
    const mixer = curAction.getMixer();
    mixer.addEventListener('finished', this._FinishedCallback);

    if (prevState) {
      const prevAction = this._parent._proxy.animations_[prevState.Name].action;

      curAction.reset();  
      curAction.setLoop(THREE.LoopOnce, 1);
      curAction.clampWhenFinished = true;
      curAction.crossFadeFrom(prevAction, 0.2, true);
      curAction.play();
    } else {
      curAction.play();
    }
  }

  _Finished() {
    this._Cleanup();
    this._parent.SetState('idle');
  }

  _Cleanup() {
    const action = this._parent._proxy.animations_['dance'].action;
    
    action.getMixer().removeEventListener('finished', this._CleanupCallback);
  }

  Exit() {
    this._Cleanup();
  }

  Update(_) {
  }
};


class WalkState extends State {
  constructor(parent) {
    super(parent);
  }

  get Name() {
    return 'walk';
  }

  Enter(prevState) {
    const curAction = this._parent._proxy.animations_['walk'].action;
    if (prevState) {
      const prevAction = this._parent._proxy.animations_[prevState.Name].action;

      curAction.enabled = true;

      if (prevState.Name == 'run') {
        const ratio = curAction.getClip().duration / prevAction.getClip().duration;
        curAction.time = prevAction.time * ratio;
      } else {
        curAction.time = 0.0;
        curAction.setEffectiveTimeScale(1.0);
        curAction.setEffectiveWeight(1.0);
      }

      curAction.crossFadeFrom(prevAction, 0.5, true);
      curAction.play();
    } else {
      curAction.play();
    }
  }

  Exit() {
  }

  Update(timeElapsed, input) {
    if (!input) {
      return;
    }

    if (input._keys.forward || input._keys.backward) {
      if (input._keys.shift) {
        this._parent.SetState('run');
      }
      return;
    }

    this._parent.SetState('idle');
  }
};


class RunState extends State {
  constructor(parent) {
    super(parent);
  }

  get Name() {
    return 'run';
  }

  Enter(prevState) {
    const curAction = this._parent._proxy.animations_['run'].action;
    if (prevState) {
      const prevAction = this._parent._proxy.animations_[prevState.Name].action;

      curAction.enabled = true;

      if (prevState.Name == 'walk') {
        const ratio = curAction.getClip().duration / prevAction.getClip().duration;
        curAction.time = prevAction.time * ratio;
      } else {
        curAction.time = 0.0;
        curAction.setEffectiveTimeScale(1.0);
        curAction.setEffectiveWeight(1.0);
      }

      curAction.crossFadeFrom(prevAction, 0.5, true);
      curAction.play();
    } else {
      curAction.play();
    }
  }

  Exit() {
  }

  Update(timeElapsed, input) {
    if (!input) {
      return;
    }

    if (input._keys.forward || input._keys.backward) {
      if (!input._keys.shift) {
        this._parent.SetState('walk');
      }
      return;
    }

    this._parent.SetState('idle');
  }
};


class IdleState extends State {
  constructor(parent) {
    super(parent);
  }

  get Name() {
    return 'idle';
  }

  Enter(prevState) {
    const idleAction = this._parent._proxy.animations_['idle'].action;
    if (prevState) {
      const prevAction = this._parent._proxy.animations_[prevState.Name].action;
      idleAction.time = 0.0;
      idleAction.enabled = true;
      idleAction.setEffectiveTimeScale(1.0);
      idleAction.setEffectiveWeight(1.0);
      idleAction.crossFadeFrom(prevAction, 0.5, true);
      idleAction.play();
    } else {
      idleAction.play();
    }
  }

  Exit() {
  }

  Update(_, input) {
    if (!input) {
      return;
    }
    if (input._keys.forward || input._keys.backward) {
      this._parent.SetState('walk');
    } else if (input._keys.space) {
      this._parent.SetState('dance');
    }
  }
};


class ThirdPersonCamera {
  constructor(params) {
    this.params_ = params;
    this._camera = params.camera;

    this._currentPosition = new THREE.Vector3();
    this._currentLookat = new THREE.Vector3();
  }

  _CalculateIdealOffset() {
    const idealOffset = new THREE.Vector3(-15, 20, -30);
    idealOffset.applyQuaternion(this.params_.target.Rotation);
    idealOffset.add(this.params_.target.Position);
    return idealOffset;
  }

  _CalculateIdealLookat() {
    const idealLookat = new THREE.Vector3(0, 10, 50);
    idealLookat.applyQuaternion(this.params_.target.Rotation);
    idealLookat.add(this.params_.target.Position);
    return idealLookat;
  }

  Update(timeElapsed) {
    const idealOffset = this._CalculateIdealOffset();
    const idealLookat = this._CalculateIdealLookat();

    // const t = 0.05;
    // const t = 4.0 * timeElapsed;
    const t = 1.0 - Math.pow(0.001, timeElapsed);

    this._currentPosition.lerp(idealOffset, t);
    this._currentLookat.lerp(idealLookat, t);

    this._camera.position.copy(this._currentPosition);
    this._camera.lookAt(this._currentLookat);
  }
}


class PlayerEntity {
  constructor(params) {
    this.params_ = params;
    this.Init_();
  }

  Init_() {
  }

  CreateFromDesc(desc) {
    const params = {
      camera: this.params_.camera,
      scene: this.params_.scene,
      desc: desc,
    };
    this.controls_ = new BasicCharacterController(params);

    this.thirdPersonCamera_ = new ThirdPersonCamera({
      camera: this.params_.camera,
      target: this.controls_,
    });

    this.updateTimer_ = 0.0;
  }

  UpdateTransform(data) {
    const s = data[0];
    const p = data[1];
    const q = data[2];
    this.controls_.SetTransform(
        new THREE.Vector3(...p),
        new THREE.Quaternion(...q)
    );
  }

  Update(timeElapsed) {
    this.controls_.Update(timeElapsed);
    this.thirdPersonCamera_.Update(timeElapsed);
    this.SendTransform_(timeElapsed);
  }

  SendTransform_(timeElapsed) {
    this.updateTimer_ -= timeElapsed;
    if (this.updateTimer_ <= 0.0 && this.controls_.IsLoaded) {
      this.updateTimer_ = 0.1;
      this.params_.socket.emit(
        'world.update',
        this.controls_.CreateTransformPacket(),
      );
    }
  }
};


class NetworkCharacterController {
  constructor(params) {
    this._Init(params);
  }

  Destroy() {
    this.name_.Destroy();
    this.name_ = null;
    this.target_.Destroy();
    this.target_ = null;
  }

  _Init(params) {
    this.params_ = params;

    this.target_ = new AnimatedMesh({
        scene: params.scene,
        desc: params.desc,
    });
    this.target_.onLoad = () => {
      this.stateMachine_ = new CharacterFSM(
          new BasicCharacterControllerProxy(this.target_.animations_));
      this.stateMachine_.SetState('idle');
    }

    this.name_ = new FloatingName({
        parent: this.target_.group_,
        desc: params.desc,
    });
  }

  get position() {
    return this.target_.position;
  }

  get quaternion() {
    return this.target_.quaternion;
  }

  SetState(s) {
    if (!this.stateMachine_) {
      return;
    }
    this.stateMachine_.SetState(s);
  }

  Update(timeInSeconds) {
    if (!this.stateMachine_) {
      return;
    }

    this.stateMachine_.Update(timeInSeconds, null);
    this.target_.Update(timeInSeconds);
  }
};


class NetworkEntity {
  constructor(params) {
    this.params_ = params;
    this.transformUpdates_ = [];
    this.targetFrame_ = null;
    this.lastFrame_ = null;
    this.Init_();
  }

  Destroy() {
    this.controller_.Destroy();
  }

  Init_() {
  }

  CreateFromDesc(desc, transform) {
    this.controller_ = new NetworkCharacterController({
        scene: this.params_.scene,
        desc: desc,
    });
    this.controller_.position.set(...transform[1]);
    this.controller_.quaternion.set(...transform[2]);
    this.targetFrame_ = {time: 0.1, transform: transform};
}

  UpdateTransform(data) {
    this.transformUpdates_.push({time: 0.1, transform: data});
  }

  Update(timeElapsed) {
    this.controller_.Update(timeElapsed);

    this.ApplyLCT_(timeElapsed);
  }

  ApplyLCT_(timeElapsed) {    
    if (this.transformUpdates_.length == 0) {
      return;
    }

    for (let i = 0; i < this.transformUpdates_.length; ++i) {
      this.transformUpdates_[i].time -= timeElapsed;
    }

    while (this.transformUpdates_.length > 0 &&
        this.transformUpdates_[0].time <= 0.0) {
      this.lastFrame_ = {
        transform: [
          this.targetFrame_.transform[0],
          this.controller_.position.toArray(),
          this.controller_.quaternion.toArray()
        ]
      };
      this.targetFrame_ = this.transformUpdates_.shift();
      this.targetFrame_.time = 0.0;
    }

    if (this.targetFrame_ && this.lastFrame_) {
      this.targetFrame_.time += timeElapsed;
      const p1 = new THREE.Vector3(...this.lastFrame_.transform[1]);
      const p2 = new THREE.Vector3(...this.targetFrame_.transform[1]);
      const q1 = new THREE.Quaternion(...this.lastFrame_.transform[2]);
      const q2 = new THREE.Quaternion(...this.targetFrame_.transform[2]);
      this.controller_.position.copy(p1);
      this.controller_.quaternion.copy(q1);
      const t = Math.max(Math.min(this.targetFrame_.time / 0.1, 1.0), 0.0);
      this.controller_.position.lerp(p2, t);
      this.controller_.quaternion.slerp(q2, t);
      this.controller_.SetState(this.lastFrame_.transform[0]);
    }
  }
}


class Chatbox {
  constructor(params) {
    this.params_ = params;
    this.OnChat = () => {};
    this.Init_(); 
  }

  Init_() {
    this.element_ = document.getElementById('chat-input');
    this.element_.addEventListener(
        'keydown', (e) => this.OnKeyDown_(e), false);
  }

  OnKeyDown_(evt) {
    if (evt.keyCode === 13) {
      evt.preventDefault();
      const msg = this.element_.value;
      if (msg != '') {
        this.OnChat(msg);
      }
      this.element_.value = '';
    }
  }

  AddMessage(msg) {
    const e = document.createElement('div');
    e.className = 'chat-text';
    e.innerText = '[' + msg.name + ']: ' + msg.text;
    const chatElement = document.getElementById('chat-ui-text-area');
    chatElement.insertBefore(e, document.getElementById('chat-input'));
  }
};


class BasicMMODemo {
  constructor() {
    this._Initialize();
  }

  _Initialize() {
    this.threejs_ = new THREE.WebGLRenderer({
      antialias: true,
    });
    this.threejs_.outputEncoding = THREE.sRGBEncoding;
    this.threejs_.gammaFactor = 2.2;
    this.threejs_.shadowMap.enabled = true;
    this.threejs_.shadowMap.type = THREE.PCFSoftShadowMap;
    this.threejs_.setPixelRatio(window.devicePixelRatio);
    this.threejs_.setSize(window.innerWidth, window.innerHeight);

    document.getElementById('container').appendChild(
        this.threejs_.domElement);

    window.addEventListener('resize', () => {
      this.OnWindowResize_();
    }, false);

    const fov = 60;
    const aspect = 1920 / 1080;
    const near = 1.0;
    const far = 1000.0;
    this.camera_ = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this.camera_.position.set(75, 20, 0);

    this.scene_ = new THREE.Scene();

    let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
    light.position.set(20, 100, 10);
    light.target.position.set(0, 0, 0);
    light.castShadow = true;
    light.shadow.bias = -0.001;
    light.shadow.mapSize.width = 2048;
    light.shadow.mapSize.height = 2048;
    light.shadow.camera.near = 0.1;
    light.shadow.camera.far = 500.0;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500.0;
    light.shadow.camera.left = 100;
    light.shadow.camera.right = -100;
    light.shadow.camera.top = 100;
    light.shadow.camera.bottom = -100;
    this.scene_.add(light);

    light = new THREE.AmbientLight(0x101010);
    this.scene_.add(light);

    const controls = new OrbitControls(
      this.camera_, this.threejs_.domElement);
    controls.target.set(0, 20, 0);
    controls.update();

    const loader = new THREE.CubeTextureLoader();
    const texture = loader.load([
        './resources/posx.jpg',
        './resources/negx.jpg',
        './resources/posy.jpg',
        './resources/negy.jpg',
        './resources/posz.jpg',
        './resources/negz.jpg',
    ]);
    texture.encoding = THREE.sRGBEncoding;
    this.scene_.background = texture;

    const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(100, 100, 10, 10),
        new THREE.MeshStandardMaterial({
            color: 0x808080,
          }));
    plane.castShadow = false;
    plane.receiveShadow = true;
    plane.rotation.x = -Math.PI / 2;
    this.scene_.add(plane);

    this.SetupSocket_();

    this.entities_ = {};

    this.chatbox_ = new Chatbox();
    this.chatbox_.OnChat = (txt) => { this.OnChat_(txt); };

    this.previousRAF_ = null;
    this.RAF_();
  }

  GenerateRandomName_() {
    const names1 = [
        'Aspiring', 'Nameless', 'Cautionary', 'Excited',
        'Modest', 'Maniacal', 'Caffeinated', 'Sleepy',
        'Passionate', 'Masochistic', 'Aging', 'Pedantic',
        'Talkative',
    ];
    const names2 = [
        'Coder', 'Mute', 'Giraffe', 'Snowman',
        'Machinist', 'Fondler', 'Typist',
        'Noodler', 'Arborist', 'Peeper', 'Ghost',
    ];
    const n1 = names1[
        Math.floor(Math.random() * names1.length)];
    const n2 = names2[
        Math.floor(Math.random() * names2.length)];
    return n1 + ' ' + n2;
  }

  SetupSocket_() {
    this.socket_ = io('ws://localhost:3000', {
        reconnection: false,
        transports: ['websocket'],
    });

    this.socket_.on("connect", () => {
      console.log(this.socket_.id);
      const randomName = this.GenerateRandomName_();
      this.socket_.emit('login.commit', randomName);
    });

    this.socket_.on("disconnect", () => {
      console.log('DISCONNECTED: ' + this.socket_.id); // undefined
    });

    this.socket_.onAny((e, d) => {
      this.OnMessage_(e, d);
    });
  }

  OnChat_(txt) {
    this.socket_.emit('chat.msg', txt);
  }

  OnMessage_(e, d) {
    if (e == 'world.player') {
      this.playerID_ = d.id;
      const e = new PlayerEntity({
          scene: this.scene_,
          camera: this.camera_,
          socket: this.socket_
      });
      e.CreateFromDesc(d.desc);
      e.UpdateTransform(d.transform);
      this.entities_[d.id] = e;
      console.log('entering world: ' + d.id);
    } else if (e == 'world.update') {
      const updates = d;
      const alive = {};

      alive[this.playerID_] = this.entities_[this.playerID_];

      for (let u of updates) {
        if ('desc' in u) {
          const e = new NetworkEntity({scene: this.scene_});
          e.CreateFromDesc(u.desc, u.transform);
          this.entities_[u.id] = e;
        } else {
          this.entities_[u.id].UpdateTransform(u.transform);
        }

        alive[u.id] = this.entities_[u.id];
      }

      const dead = [];
      for (let k in this.entities_) {
        if (!(k in alive)) {
          dead.push(this.entities_[k]);
        }
      }

      this.entities_ = alive;

      for (let i = 0; i < dead.length; ++i) {
        dead[i].Destroy();
      }
    } else if (e == 'chat.message') {
      this.chatbox_.AddMessage(d);
    }
  }

  OnWindowResize_() {
    this.camera_.aspect = window.innerWidth / window.innerHeight;
    this.camera_.updateProjectionMatrix();
    this.threejs_.setSize(window.innerWidth, window.innerHeight);
  }

  RAF_() {
    requestAnimationFrame((t) => {
      if (this.previousRAF_ == null) {
        this.previousRAF_ = t;
      }

      this.Update_((t - this.previousRAF_) * 0.001);
      this.threejs_.render(this.scene_, this.camera_);
      this.previousRAF_ = t;
      this.RAF_();
    });
  }

  Update_(timeElapsed) {
    for (let k in this.entities_) {
      this.entities_[k].Update(timeElapsed);
    }
  }
}


let _APP = null;

window.addEventListener('DOMContentLoaded', () => {
  _APP = new BasicMMODemo();
});