CoffeeScript!

client/js/00-selfcall.js

@@ -1,2 +0,0 @@
-// self-calling function
-$(function () {

client/js/10-config.js

@@ -1,16 +0,0 @@
-const CONF = {
-  playmat: {
-    w: 1600,
-    h: 900,
-  },
-
-  card: {
-    w: 172,
-    h: 240,
-  },
-
-  anim: {
-    time: 300,
-    func: "smootherStep",
-  },
-}

client/js/10-framework-init.js

@@ -1,5 +0,0 @@
-// init Socket.IO
-var socket = io();
-
-// init CraftyJS framework
-Crafty.init();

client/js/20-component-card.js

@@ -1,78 +0,0 @@
-Crafty.c("Card", {
-  required: "2D, Canvas, Mouse, Tween",
-
-  init: function () {
-    this.attr({
-      w: 1* CONF.card.w,
-      h: 1* CONF.card.h,
-      tapped: false,
-      rotation: 0,
-    });
-    this.origin("center");
-  },
-
-  remove: function () {
-    Crafty.log("Card was removed!");
-  },
-
-  place: function (px, py) {
-    this.tween({ x: px, y: py }, CONF.anim.time, CONF.anim.func);
-    return this;
-  },
-
-  events: {
-    Tap: function (newState) {
-      this.tapped = !!newState;
-      let _rotation = this.baseRot + 90 * this.tapped;
-      this.tween({ rotation: _rotation }, CONF.anim.time, CONF.anim.func);
-    },
-
-    ToggleTap: function () {
-      this.trigger("Tap", !this.tapped);
-    },
-
-    MouseOver: function () {
-      this.z_old = this._z;
-      this.z = 1;
-    },
-
-    MouseOut: function () {
-      this.z = this.z_old;
-      delete this.z_old;
-    }
-  },
-
-});
-
-Crafty.c("EnemyCard", {
-  required: "Card",
-
-  init: function () {
-    this.baseRot = 180;
-    this.rotation = this.baseRot;
-  },
-
-});
-
-Crafty.c("AllyCard", {
-  required: "Card, Draggable",
-
-  init: function () {
-    this.baseRot = 0;
-    this.rotation = this.baseRot;
-  },
-
-  events: {
-    DoubleClick: function () {
-      this.trigger("ToggleTap");
-    },
-
-    StopDrag: function () {
-      function round100(v) {
-        return Math.round(v / 100) * 100;
-      }
-      this.place(round100(this._x), round100(this._y));
-    },
-  },
-
-});

client/js/30-scene-game.js

@@ -1,56 +0,0 @@
-Crafty.viewport.clampToEntities = false;
-
-Crafty.viewport.follow(
-  Crafty.e("2D, Color, Canvas")
-    .attr({
-      x: 0,
-      y: 0,
-      w: 1* CONF.playmat.w,
-      h: 2* CONF.playmat.h,
-    })
-    .color("teal")
-    .origin("center")
-);
-
-Crafty.bind("ViewportResize", function () {
-  let sX = this.viewport._width / 1600,
-      sY = this.viewport._height / 1800;
-
-  this.viewport.scale(Math.min(sX, sY));
-});
-
-Crafty.trigger("ViewportResize");
-
-// Testing playmat
-
-Crafty.sprite(997, 582, "//i.imgur.com/cwGQdAS.png", { playmat: [0, 0] });
-
-Crafty.e("playmat, 2D, Canvas")
-  .attr({ x: 0, y: 900, w: 1600, h: 900 });
-
-Crafty.e("playmat, 2D, Canvas")
-  .attr({ x: 0, y: 900, w: 1600, h: 900 })
-  .origin("top middle")
-  .attr({ rotation:180 });
-
-// Testing some entities
-
-Crafty.sprite(480, 670, "//www.fftcgmognet.com/images/cards/hd/1/1/107.jpg", { shantotto: [0, 0] });
-
-let card = Crafty.e("shantotto, AllyCard")
-  .attr({ x: 0, y: 0 })
-  .bind("DoubleClick", function () {
-    this.destroy();
-  });
-
-Crafty.e("shantotto, AllyCard")
-  .place(300, 0);
-
-Crafty.e("shantotto, AllyCard")
-  .place(600, 0);
-
-Crafty.e("shantotto, EnemyCard")
-  .place(900, 0);
-
-// Crafty.e("shantotto, AllyCard")
-//   .attr({ x: 0, y: 0, w: 1200, h: 1675 });

client/js/99-selfcall.js

@@ -1 +0,0 @@
-});

client/scripts/10-config.coffee

@@ -0,0 +1,13 @@
+CONF =
+
+  playmat:
+    w: 1600
+    h: 900
+
+  card:
+    w: 172
+    h: 240
+
+  anim:
+    time: 300
+    func: 'smootherStep'

client/scripts/10-framework-init.coffee

@@ -0,0 +1,5 @@
+# init Socket.IO
+socket = io()
+
+# init CraftyJS framework
+Crafty.init()

client/scripts/20-component-card.coffee

@@ -0,0 +1,76 @@
+Crafty.c 'Card',
+  required: '2D, Canvas, Mouse, Tween'
+
+  init: ->
+    @attr {
+      w: 1 * CONF.card.w
+      h: 1 * CONF.card.h
+      tapped: false
+    }
+    @origin 'center'
+    return
+
+  remove: ->
+    Crafty.log 'Card was removed!'
+    return
+
+  place: (px, py) ->
+    @tween {
+      x: px
+      y: py
+    }, CONF.anim.time, CONF.anim.func
+
+  events:
+    Tap: (newState) ->
+      @tapped = !!newState
+      _rotation = @baseRot + 90 * @tapped
+
+      @tween {
+        rotation: _rotation
+      }, CONF.anim.time, CONF.anim.func
+      return
+
+    ToggleTap: ->
+      @trigger 'Tap', !@tapped
+      return
+
+    MouseOver: ->
+      @z_old = @_z
+      @z = 1
+      return
+
+    MouseOut: ->
+      @z = @z_old
+      delete @z_old
+      return
+
+
+Crafty.c 'EnemyCard',
+  required: 'Card'
+
+  init: ->
+    @baseRot = 180
+    @rotation = @baseRot
+    return
+
+
+Crafty.c 'AllyCard',
+  required: 'Card, Draggable'
+
+  init: ->
+    @baseRot = 0
+    @rotation = @baseRot
+    return
+
+  events:
+    DoubleClick: ->
+      @trigger 'ToggleTap'
+      return
+
+    StopDrag: ->
+
+      round100 = (v) ->
+        Math.round(v / 100) * 100
+
+      @place round100(@_x), round100(@_y)
+      return

client/scripts/30-scene-game.coffee

@@ -0,0 +1,76 @@
+Crafty.viewport.clampToEntities = false
+
+Crafty.viewport.follow(Crafty.e('2D, Canvas')
+  .attr {
+    x: 0
+    y: 0
+    w: 1 * CONF.playmat.w
+    h: 2 * CONF.playmat.h
+  }
+  .origin('center')
+)
+
+Crafty.bind 'ViewportResize', ->
+  sX = @viewport._width / 1600
+  sY = @viewport._height / 1800
+
+  @viewport.scale Math.min(sX, sY)
+  return
+
+Crafty.trigger 'ViewportResize'
+
+# Testing playmat
+# custom playmats at https://imgur.com/a/VSosu#cwGQdAS
+Crafty.sprite 997, 582, '//i.imgur.com/cwGQdAS.png',
+  playmat: [
+    0
+    0
+  ]
+
+Crafty.e('playmat, 2D, Canvas')
+  .attr {
+    x: 0
+    y: 900
+    w: 1600
+    h: 900
+  }
+
+Crafty.e('playmat, 2D, Canvas')
+  .attr {
+    x: 0
+    y: 900
+    w: 1600
+    h: 900
+  }
+  .origin('top middle')
+  .attr {
+    rotation: 180
+  }
+
+# Testing some entities
+Crafty.sprite 480, 670, '//www.fftcgmognet.com/images/cards/hd/1/1/107.jpg',
+  shantotto: [
+    0
+    0
+  ]
+
+card = Crafty.e('shantotto, AllyCard')
+  .attr {
+    x: 0
+    y: 0
+  }
+  .bind 'DoubleClick', ->
+    @destroy()
+    return
+
+Crafty.e('shantotto, AllyCard')
+  .place 300, 0
+
+Crafty.e('shantotto, AllyCard')
+  .place 600, 0
+
+Crafty.e('shantotto, EnemyCard')
+  .place 900, 0
+
+# Crafty.e("shantotto, AllyCard")
+#   .attr({ x: 0, y: 0, w: 1200, h: 1675 });

gulpfile.js

@@ -1,11 +1,12 @@
 var gulp = require('gulp');
 var sourcemaps = require('gulp-sourcemaps');
-var concat = require('gulp-concat');
+var coffee = require('gulp-coffee');
+var insert = require('gulp-insert');
 var uglify = require('gulp-uglify-es').default;
-var selfExecute = require('gulp-self-execute');
+var concat = require('gulp-concat');
 
 var paths = {
-  scripts: 'client/js/**/*.js',
+  scripts: 'client/scripts/**/*.coffee',
   images: 'client/img/**/*'
 };
 
@@ -13,8 +14,11 @@ gulp.task('js', function(){
   return gulp.src(paths.scripts)
     .pipe(sourcemaps.init())
       .pipe(concat('app.min.js'))
+      .pipe(coffee({bare: true}))
+      .pipe(insert.transform(function(contents, file) {
+        return '$(function () {' + contents + '});';
+      }))
       .pipe(uglify())
-      .pipe(selfExecute())
     .pipe(sourcemaps.write())
     .pipe(gulp.dest('static'))
 });

package.json

@@ -11,8 +11,10 @@
     "express": "^4.16.1",
     "socket.io": "^2.1.1",
     "gulp": "*",
-    "gulp-concat": "*",
     "gulp-sourcemaps": "*",
-    "gulp-uglify-es": "*"
+    "gulp-coffee": "*",
+    "gulp-insert": "*",
+    "gulp-uglify-es": "*",
+    "gulp-concat": "*"
   }
 }