From 165a29ec1a1ee1af266a4d1feaa9d164a2a41c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Sun, 30 Sep 2018 22:23:16 +0200 Subject: [PATCH] CoffeeScript! --- client/js/00-selfcall.js | 2 - client/js/10-config.js | 16 ----- client/js/10-framework-init.js | 5 -- client/js/20-component-card.js | 78 ------------------------- client/js/30-scene-game.js | 56 ------------------ client/js/99-selfcall.js | 1 - client/scripts/10-config.coffee | 13 +++++ client/scripts/10-framework-init.coffee | 5 ++ client/scripts/20-component-card.coffee | 76 ++++++++++++++++++++++++ client/scripts/30-scene-game.coffee | 76 ++++++++++++++++++++++++ gulpfile.js | 12 ++-- package.json | 6 +- 12 files changed, 182 insertions(+), 164 deletions(-) delete mode 100644 client/js/00-selfcall.js delete mode 100644 client/js/10-config.js delete mode 100644 client/js/10-framework-init.js delete mode 100644 client/js/20-component-card.js delete mode 100644 client/js/30-scene-game.js delete mode 100644 client/js/99-selfcall.js create mode 100644 client/scripts/10-config.coffee create mode 100644 client/scripts/10-framework-init.coffee create mode 100644 client/scripts/20-component-card.coffee create mode 100644 client/scripts/30-scene-game.coffee diff --git a/client/js/00-selfcall.js b/client/js/00-selfcall.js deleted file mode 100644 index 4607cbc..0000000 --- a/client/js/00-selfcall.js +++ /dev/null @@ -1,2 +0,0 @@ -// self-calling function -$(function () { diff --git a/client/js/10-config.js b/client/js/10-config.js deleted file mode 100644 index f8929ae..0000000 --- a/client/js/10-config.js +++ /dev/null @@ -1,16 +0,0 @@ -const CONF = { - playmat: { - w: 1600, - h: 900, - }, - - card: { - w: 172, - h: 240, - }, - - anim: { - time: 300, - func: "smootherStep", - }, -} diff --git a/client/js/10-framework-init.js b/client/js/10-framework-init.js deleted file mode 100644 index 6394325..0000000 --- a/client/js/10-framework-init.js +++ /dev/null @@ -1,5 +0,0 @@ -// init Socket.IO -var socket = io(); - -// init CraftyJS framework -Crafty.init(); diff --git a/client/js/20-component-card.js b/client/js/20-component-card.js deleted file mode 100644 index 3efde8b..0000000 --- a/client/js/20-component-card.js +++ /dev/null @@ -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)); - }, - }, - -}); diff --git a/client/js/30-scene-game.js b/client/js/30-scene-game.js deleted file mode 100644 index ce7ff7b..0000000 --- a/client/js/30-scene-game.js +++ /dev/null @@ -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 }); diff --git a/client/js/99-selfcall.js b/client/js/99-selfcall.js deleted file mode 100644 index 27b8217..0000000 --- a/client/js/99-selfcall.js +++ /dev/null @@ -1 +0,0 @@ -}); diff --git a/client/scripts/10-config.coffee b/client/scripts/10-config.coffee new file mode 100644 index 0000000..ac296d5 --- /dev/null +++ b/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' diff --git a/client/scripts/10-framework-init.coffee b/client/scripts/10-framework-init.coffee new file mode 100644 index 0000000..ff27098 --- /dev/null +++ b/client/scripts/10-framework-init.coffee @@ -0,0 +1,5 @@ +# init Socket.IO +socket = io() + +# init CraftyJS framework +Crafty.init() diff --git a/client/scripts/20-component-card.coffee b/client/scripts/20-component-card.coffee new file mode 100644 index 0000000..9795dbd --- /dev/null +++ b/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 diff --git a/client/scripts/30-scene-game.coffee b/client/scripts/30-scene-game.coffee new file mode 100644 index 0000000..9bf7888 --- /dev/null +++ b/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 }); diff --git a/gulpfile.js b/gulpfile.js index eb9abb9..509c350 100644 --- a/gulpfile.js +++ b/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')) }); diff --git a/package.json b/package.json index f5b84f9..001a42f 100644 --- a/package.json +++ b/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": "*" } }