add server for MMO sync. basic movimentation working

app/css/main.styl

@@ -4,6 +4,11 @@ body
   overflow hidden
   font 16px primary
 
+// main#game
+//   cursor url(../images/cursor-pointer.png), pointer
+//   &.attack
+//     cursor url(../images/cursor-punch.png) -8px -8px,  auto !important
+
 input
   font 24px primary
   width 50vw
@@ -24,8 +29,8 @@ input
   right 0
   left 0
   margin auto
-  z-index 100
   transition opacity 0.2s
+  z-index -100
 
   form
     position absolute
@@ -44,4 +49,4 @@ input
     pointer-events all
     display block
     opacity 1
-
+    z-index 100

app/js/behaviors/CharacterController.js

@@ -7,99 +7,47 @@ export default class CharacterController extends Behaviour {
 
   onAttach (camera) {
     this.camera = camera
+    this.camera.lookAt(this.object.position)
+
     this.originalY = this.object.position.y
 
-    this.object.behave(new Chat)
+    this.object.addBehaviour(new Chat)
 
     this.light = new THREE.SpotLight(0xffffff, 1, 300, 10);
     this.light.target = this.object
-    // this.light = new THREE.PointLight(0xffffff, 1, 50, 1 );
-
-    // light.castShadow = true;
-    // light.shadowCameraNear = 1;
-    // light.shadowCameraFar = 30;
-    // light.shadowCameraVisible = true;
-    // light.shadowMapWidth = 64;
-    // light.shadowMapHeight = 64;
-    // light.shadowMapWidth = 2048;
-    // light.shadowMapHeight = 1024;
-    // light.shadowBias = 0.01;
-    // light.shadowDarkness = 0.5;
-
-    // this.light.position.set(0, 3, 0)
     this.light.position.set(0, 5, 0)
     this.object.add(this.light)
 
-    this.keys = {
-      up: false,
-      down: false,
-      left: false,
-      right: false
-    }
-
-    document.addEventListener('keydown', this.onKeyDown.bind(this))
-    document.addEventListener('keyup', this.onKeyUp.bind(this))
-  }
-
-  onKeyDown (e) {
-    if (e.which == Keycode.UP || e.which == Keycode.W) {
-      this.keys.up = true
-
-    } else if (e.which == Keycode.DOWN || e.which == Keycode.S) {
-      this.keys.down = true
-
-    } else if (e.which == Keycode.LEFT || e.which == Keycode.A) {
-      this.keys.left = true
-
-    } else if (e.which == Keycode.RIGHT || e.which == Keycode.D) {
-      this.keys.right = true
-    }
-  }
-
-  onKeyUp (e) {
-    if (e.which == Keycode.UP || e.which == Keycode.W) {
-      this.keys.up = false
-
-    } else if (e.which == Keycode.DOWN || e.which == Keycode.S) {
-      this.keys.down = false
-
-    } else if (e.which == Keycode.LEFT || e.which == Keycode.A) {
-      this.keys.left = false
-
-    } else if (e.which == Keycode.RIGHT || e.which == Keycode.D) {
-      this.keys.right = false
-    }
+    window.player = this.object
   }
 
   update () {
-    if (this.keys.up) {
-      this.object.position.z -= 0.1
-      this.object.direction = 'top'
-    }
-
-    if (this.keys.down) {
-      this.object.position.z += 0.1
-      this.object.direction = 'bottom'
-    }
-
-    if (this.keys.left) {
-      this.object.position.x -= 0.1
-      this.object.direction = 'left'
-    }
-
-    if (this.keys.right) {
-      this.object.position.x += 0.1
-      this.object.direction = 'right'
-    }
-
-    if (this.keys.up || this.keys.down || this.keys.left || this.keys.right) {
-      this.object.position.y = this.originalY + (Math.sin(clock.elapsedTime / 100) / 10)
-    }
-
+    // player moving
+    // if (this.keys.up || this.keys.down || this.keys.left || this.keys.right) {
+    //   this.object.position.y = this.originalY + (Math.sin(clock.elapsedTime / 100) / 10)
+    // }
+
+    // var vector = new THREE.Vector3();
+    //
+    // var widthHalf = 0.5 * window.innerWidth
+    // var heightHalf = 0.5 * window.innerHeight
+    //
+    // this.object.updateMatrixWorld();
+    // vector.setFromMatrixPosition(this.object.matrixWorld);
+    // vector.project(this.camera);
+    //
+    // vector.x = ( vector.x * widthHalf ) + widthHalf;
+    // vector.y = - ( vector.y * heightHalf ) + heightHalf;
+    //
+    // this.camera.position.x = vector.x // + (window.innerWidth / window.innerHeight)
+    // this.camera.position.z = vector.z
+    // this.camera.position.y = this.originalY + 12
+
+    // Update camera position
     // var characterPosition = this.object.localToWorld(this.object.position)
     this.camera.position.x = this.object.position.x // + (window.innerWidth / window.innerHeight)
-    this.camera.position.y = this.originalY + 12
     this.camera.position.z = this.object.position.z + 20
+    this.camera.position.y = this.originalY + 12
   }
 
   onDestroy () {

app/js/behaviors/DangerousThing.js

@@ -1,21 +1,43 @@
 import { Behaviour } from 'behaviour.js'
 
+import Lifebar from '../entities/Lifebar'
 import Shadow from './Shadow'
 
 export default class DangerousThing extends Behaviour {
 
   onAttach (amount = 0.05, duration) {
-    this.object.behave(new Shadow)
+    this.object.addBehaviour(new Shadow)
 
     this.tween = null
 
     this.initY = this.object.position.y
     this.destY = this.initY + amount
     this.duration = (duration) ? duration : 400 + (Math.random() * 200)
 
+    // lifebar
+    this.lifebar = new Lifebar()
+    this.lifebar.position.x = 0.5
+    this.lifebar.position.y = 2.5
+    this.lifebar.position.z = 1
+    this.lifebar.visible = false
+    this.object.add(this.lifebar)
+
+    this.on('mouseover', this.onMouseOver.bind(this))
+    this.on('mouseout', this.onMouseOut.bind(this))
+
     setTimeout(() => this.goUp(), Math.random() * 1500)
   }
 
+  onMouseOver (tileSelection) {
+    this.lifebar.visible = true
+    tileSelection.setColor(0xd00000)
+  }
+
+  onMouseOut (tileSelection) {
+    this.lifebar.visible = false
+    tileSelection.setColor()
+  }
+
   goUp () {
     this.tween = tweener.
       add(this.object.position).

app/js/behaviors/GameObject.js

@@ -0,0 +1,50 @@
+import { Behaviour } from 'behaviour.js'
+
+import lerp from 'lerp'
+
+export default class GameObject extends Behaviour {
+
+  onAttach (generator) {
+    this.nextPoint = null
+    this.generator = generator
+
+    this.on('patch', this.onPatch.bind(this))
+  }
+
+  update () {
+    if (this.nextPoint) {
+      this.object.position.x = lerp(this.object.position.x, this.nextPoint.x, 0.09)
+      this.object.position.z = lerp(this.object.position.z, this.nextPoint.z, 0.09)
+    }
+  }
+
+  onPatch (state, patch) {
+    if (patch.path.indexOf('position') !== -1) {
+      // TODO: possible leak here
+      this.nextPoint = this.generator.fixTilePosition(this.object.position.clone(), state.position.y, state.position.x)
+
+      var direction = null
+
+      if (this.object.userData.x < state.position.x) {
+        direction = 'bottom'
+      } else if (this.object.userData.x > state.position.x) {
+        direction = 'top'
+      } else if (this.object.userData.y > state.position.y) {
+        direction = 'left'
+      } else if (this.object.userData.y < state.position.y) {
+        direction = 'right'
+      }
+
+      if (direction) this.object.direction = direction
+
+      this.object.userData.x = state.position.x
+      this.object.userData.y = state.position.y
+    }
+
+  }
+
+  onDestroy () { }
+
+}
+
+

app/js/behaviors/LightOscillator.js

@@ -4,12 +4,13 @@ import lerp from 'lerp'
 
 export default class LightOscillator extends Behaviour {
 
-  onAttach (min, max) {
+  onAttach (min, max, lerpRatio = 0.2) {
     this.min = min
     this.max = max
 
     this.distance = this.object.distance
     this.decay = 1
+    this.lerpRatio = lerpRatio
 
     this.oscillateInterval = setInterval(this.oscillate.bind(this), 100)
     this.oscillate()
@@ -22,9 +23,9 @@ export default class LightOscillator extends Behaviour {
   }
 
   update () {
-    this.object.intensity = lerp(this.object.intensity, this.targetIntensity, 0.2)
-    this.object.distance = lerp(this.object.distance, this.targetDistance, 0.2)
-    this.object.decay = lerp(this.object.decay, this.targetDecay, 0.2)
+    this.object.intensity = lerp(this.object.intensity, this.targetIntensity, this.lerpRatio)
+    this.object.distance = lerp(this.object.distance, this.targetDistance, this.lerpRatio)
+    this.object.decay = lerp(this.object.decay, this.targetDecay, this.lerpRatio)
   }
 
   onDestroy () {

app/js/behaviors/NearPlayerOpacity.js

@@ -0,0 +1,27 @@
+import { Behaviour } from 'behaviour.js'
+
+export default class NearPlayerOpacity extends Behaviour {
+
+  onAttach () { }
+
+  update () {
+    // no need to apply opacity on daylight
+    if (!IS_DAY && player) {
+      var v1 = this.object.position
+        , v2 = player.position
+
+        , dx = v1.x - v2.x
+        , dy = v1.y - v2.y
+        , dz = v1.z - v2.z
+        , distance = Math.sqrt(dx*dx+dy*dy+dz*dz);
+
+      // TODO: improve me
+      // make it dynamic accouding to player illumination
+      (this.object.material || this.object.children[0].material).opacity = 5 / distance
+    }
+  }
+
+  onDestroy () { }
+
+}
+

app/js/behaviors/Pickable.js

@@ -1,12 +1,13 @@
 import { Behaviour } from 'behaviour.js'
 
 import Shadow from './Shadow'
+import NearPlayerOpacity from './NearPlayerOpacity'
 
 export default class Pickable extends Behaviour {
 
   onAttach () {
     this.tween = null
-    this.object.behave(new Shadow)
+    this.object.addBehaviour(new Shadow)
 
     this.initY = this.object.position.y
     this.destY = this.initY + 0.2

app/js/behaviors/Player/Network.js

@@ -4,19 +4,43 @@ import lerp from 'lerp'
 
 export default class Network extends Behaviour {
 
-  onAttach () {
+  onAttach (colyseus, room) {
+    this.colyseus = colyseus
+    this.room = room
     this.nextPoint = null
+
+    this.on('action', this.onAction.bind(this))
+  }
+
+  onAction (position) {
+    console.log("Action!", position)
+    this.room.send(['pos', position])
   }
 
   update () {
     if (this.nextPoint) {
-      this.object.position.x = lerp(this.object.position.x, this.nextPoint.x, 0.04)
-      this.object.position.z = lerp(this.object.position.z, this.nextPoint.z, 0.04)
+      this.object.position.x = lerp(this.object.position.x, this.nextPoint.x, 0.09)
+      this.object.position.z = lerp(this.object.position.z, this.nextPoint.z, 0.09)
     }
   }
 
   move(point, tileX, tileY) {
     this.nextPoint = point
+
+    var direction = null
+
+    if (this.object.userData.x < tileX) {
+      direction = 'bottom'
+    } else if (this.object.userData.x > tileX) {
+      direction = 'top'
+    } else if (this.object.userData.y > tileY) {
+      direction = 'left'
+    } else if (this.object.userData.y < tileY) {
+      direction = 'right'
+    }
+
+    if (direction) this.entity.emit('change-direction', direction)
+
     this.object.userData.x = tileX
     this.object.userData.y = tileY
   }

app/js/behaviors/PlayerBehaviour.js

@@ -5,7 +5,7 @@ import Shadow from './Shadow'
 export default class PlayerBehaviour extends Behaviour {
 
   onAttach () {
-    this.object.behave(new Shadow)
+    this.object.addBehaviour(new Shadow)
   }
 
   update () {

app/js/effects/Highlight.js

@@ -12,12 +12,12 @@ export default class Highlight extends THREE.Sprite {
       transparent: true
     }))
 
-    this.material.opacity = 0.3
+    this.material.opacity = 0.8
 
     this.name = name
-    this.scale.set(4, 4, 4)
+    this.scale.set(5, 4, 5)
 
-    this.behave(new Strechable)
+    this.addBehaviour(new Strechable)
   }
 
 }