implement connector and puck logic

Author: fstiehle

app/angular2/src/app/play/connector.ts

@@ -0,0 +1,84 @@
+import mojs from 'mo-js';
+
+/**
+ * Connector between Junctions
+ */
+export default class Connector {
+  
+  /**
+   * Uses as a mute for the rescale process
+   */
+  const MUTE = 100;
+  const CLASS_NAME = "connector";
+  const SHAPE = "rect";
+  const STROKE = 0;
+  const POINTS = 0;
+  
+  /**
+   * Coordinates
+   */ 
+  let x = 0;
+  let y = 0;
+  let top: string; // % value
+  let left: string; // % value
+   
+  let length: number;
+  let rotation: number;
+  
+  /**
+   * @param x coordinate
+   * @param y coordinate
+   * @param length
+   * @param rotation
+   */
+  constructor(x: number, y: number, length: number, rotation: number) {
+    this.x = x;
+    this.y = y;
+    this.length = length;
+    this.rotation = rotation;
+    
+    this.left = this.calculateOffset(x);
+    this.top = this.calculateOffset(y);
+    
+    this.mojs = this.generateMojs();
+  }
+
+  /**
+   * @Override
+   * Creates a new mojs from class variables
+   * @returns {mojs.Shape}
+   */
+  private generateMojs() {
+      return new mojs.Shape({
+          parent: "#" + Game.defaults.BOARD_ID,
+          className: this.CLASS_NAME,
+          shape: this.SHAPE,
+          points: this.POINTS,
+          strokeWidth: this.STROKE,
+          radius: this.radius(),
+          left: this.left + "%",
+          top: this.top + "%",
+
+          angle: this.rotation,
+          radiusY: this.calculateScale(),
+          isShowStart: true
+      });
+  };
+
+  private radius() {
+      return this.length * document.getElementById(Game.defaults.BOARD_ID).offsetWidth / this.MUTE_RADIUS;
+  }
+
+  /**
+   * @Override
+   * Rescales the mojs object
+   */
+  rescale() {
+    this.mojs.tune({
+        radius: this.radius(),
+        radiusY: this.calculateScale()
+    })
+    .replay();
+  }
+  
+}

app/angular2/src/app/play/junction.ts

@@ -1,3 +1,5 @@
+import mojs from 'mo-js';
+
 /**
  * Junction
  * Holds the mojs shape 
@@ -18,13 +20,13 @@ export default Junction {
    */ 
   let x = 0;
   let y = 0;
-  let top: String; // % value
-  let left: String; // % value
+  let top: string; // % value
+  let left: string; // % value
 
   /**
    * HTML ID
    */ 
-  let id: String;
+  let id: string;
 
   /**  
    * @param x coordinate

app/angular2/src/app/play/play.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import Junction from './Junction';
+import Connector from './Connector';
+import Puck from './Puck';
 
 @Component({
   selector: 'app-play',
@@ -11,8 +13,10 @@ import Junction from './Junction';
  */
 export class PlayComponent implements OnInit {
 
-  constructor() { }
-
+  constructor() { 
+    
+  }
+  
   ngOnInit() {
   }
 

app/angular2/src/app/play/puck.ts

@@ -0,0 +1,83 @@
+import mojs from 'mo-js';
+
+/**
+ * Puck thats placed on a Junction
+ * Holds the mojs shape
+ * @param x coordinate
+ * @param y coordinate
+ * @param id
+ * @constructor
+ */
+export default class Puck {
+  
+  /**
+   * Uses as a mute for the rescale process
+   */
+  const MUTE = 25;
+  const CLASS_NAME = "puck hidden";
+  const CLASS_NAME_ACTIVATED = "puck";
+  const SHAPE = "polygon";
+  const STROKE = 3;
+  const POINTS = 6;
+  
+  /**
+   * Coordinates
+   */ 
+  let x = 0;
+  let y = 0;
+  let top: string; // % value
+  let left: string; // % value
+   
+  let length: number;
+  let rotation: number;
+  
+  constructor(x: number, y: number, id: string) {
+    this.x = x;
+    this.y = y;
+    this.id = id;
+    
+    this.left = this.calculateOffset(x);
+    this.top = this.calculateOffset(y);
+    
+    this.mojs = this.generateMojs();
+    this.mojs.el.dataset.id = id;
+  }
+
+  /**
+   * Activates puck on the board
+   * @param man player of puck
+   */
+  activate(man) {
+      $(this.mojs.el).attr("class", this.CLASS_NAME_ACTIVATED + " " + man.toLowerCase());
+      this.mojs.play();
+  }
+
+  /**
+   * Deactivates and hide the puck on the board
+   */
+  deactivate() {
+      $(this.mojs.el).attr("class", this.CLASS_NAME);
+  }
+
+  /**
+   * Puck Event Handler
+   * !!@this is here the clicked element!!
+   */
+  clickEvent() {
+      var data = Game.State.data,
+          playerState = data.currentPlayer.currentState === "HOP" ? "MOVE": data.currentPlayer.currentState;
+
+      // prevent player from selection opponents puck
+      if (playerState !== "PICK" && !$(this).hasClass(data.currentPlayer.man.toLowerCase())) {
+          return;
+      }
+      if (playerState === "MOVE" && Game.mouseQueue.length === 0) {
+          Game.mouseQueue.push(this);
+          $(this).addClass("selected");
+          return;
+      }
+      //Game.State.requestCommand(playerState.toLowerCase(), [this.dataset.id]);
+      Game.Socket.send("processCommand", playerState.toLowerCase(), [this.dataset.id]);
+  }
+  
+}