gitify

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:latest
+
+# global deps
+RUN npm install gulp-cli -g
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN npm install
+# If you are building your code for production
+# RUN npm install --only=production
+
+# Bundle app source
+COPY . .
+RUN gulp
+
+EXPOSE 8080
+
+CMD [ "npm", "start" ]

client/js/00-selfcall.js

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

client/js/10-config.js

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

client/js/10-framework-init.js

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

client/js/20-component-card.js

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,56 @@
+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

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

gulpfile.js

@@ -0,0 +1,22 @@
+var gulp = require('gulp');
+var sourcemaps = require('gulp-sourcemaps');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify-es').default;
+var selfExecute = require('gulp-self-execute');
+
+var paths = {
+  scripts: 'client/js/**/*.js',
+  images: 'client/img/**/*'
+};
+
+gulp.task('js', function(){
+  return gulp.src(paths.scripts)
+    .pipe(sourcemaps.init())
+      .pipe(concat('app.min.js'))
+      .pipe(uglify())
+      .pipe(selfExecute())
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('static'))
+});
+
+gulp.task('default', [ 'js' ]);

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "socket-io-crafty",
+  "version": "0.0.1",
+  "description": "Socket.IO for a CraftyJS game on Node.js on Docker",
+  "author": "JMM <jmm@yavook.de>",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.16.1",
+    "socket.io": "^2.1.1",
+    "gulp": "*",
+    "gulp-concat": "*",
+    "gulp-sourcemaps": "*",
+    "gulp-uglify-es": "*"
+  }
+}

server.js

@@ -0,0 +1,23 @@
+// libraries
+var
+  http = require('http'),
+  socketio = require('socket.io'),
+  express = require('express');
+
+// socket.io framework
+let app = express();
+let web = http.Server(app);
+let io = socketio(web);
+
+// Listen server
+web.listen(8080, function () {
+  console.log('listening on port 8080');
+});
+
+// Static content
+app.use(express.static(__dirname + '/static'));
+
+// Server logic
+io.on('connection', function (socket) {
+  console.log('a user connected');
+});

static/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Crafty Things</title>
+    <link rel="stylesheet" href="style.css" />
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="/lib/jquery-3.3.1.min.js"></script>
+    <script src="/lib/crafty-min.js"></script>
+    <script src="app.min.js"></script>
+  </head>
+  <body />
+</html>

static/style.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  background-color: #aaa;
+  background-image: url(//gameranx.com/wp-content/uploads/2016/02/Final-Fantasy-XV-4K-Wallpaper.jpg);
+  background-size: cover;
+}