move game source to frontend ~ refine Makefile ~

Makefile

@@ -1,4 +1,22 @@
-COMPOSE:=sudo docker-compose
+COMPOSE:=docker-compose
+
+ifeq ($(shell which $(COMPOSE) > /dev/null; echo $$?),0)
+  # prefer system's docker-compose
+else ifeq ($(shell which pipenv > /dev/null; echo $$?),0)
+  # fallback to pipenv
+  COMPOSE:=$(shell pipenv run which $(COMPOSE))
+	$(info found compose as $(COMPOSE))
+else
+  $(error compose not found, please install)
+endif
+
+# need root privileges?
+PRIVGROUP:=docker
+ifneq ($(findstring $(PRIVGROUP),$(shell groups)),$(PRIVGROUP))
+	$(info need to run compose as root)
+  COMPOSE:=sudo $(COMPOSE)
+endif
+
 CANARY:=node_modules/.yarn-integrity
 
 .PHONY: all

frontend/.vue-cli-ui/db.json

@@ -6,7 +6,7 @@
       "favorite": 0,
       "type": "vue",
       "name": "frontend",
-      "openDate": 1551353165715,
+      "openDate": 1556529929207,
       "widgets": [
         {
           "id": "5sGiztidd",

frontend/package.json

@@ -25,10 +25,14 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
+    "coffee-loader": "^0.9.0",
+    "coffeescript": "^2.3.2",
+    "craftyjs": "^0.9.0",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-coffeescript": "^0.0.3",
     "vue-cli-plugin-vuetify": "^0.4.6",
     "vue-template-compiler": "^2.5.21",
     "vuetify-loader": "^1.0.5"

frontend/src/App.vue

@@ -8,6 +8,7 @@
       <v-spacer></v-spacer>
       <v-btn flat :to="{ path: '/' }">Home</v-btn>
       <v-btn flat :to="{ path: '/about' }">About</v-btn>
+      <v-btn flat :to="{ path: '/game' }">Game</v-btn>
       <v-btn
         flat
         href="https://github.com/vuetifyjs/vuetify/releases/latest"

frontend/src/crafty/Game.coffee

@@ -0,0 +1,49 @@
+# base scene
+require '../crafty/scenes/Battle.coffee'
+Crafty.scene "Battle"
+
+# annoying shantotto
+Crafty.sprite 480, 670, '//www.fftcgmognet.com/images/cards/hd/1/1/107.jpg',
+  shantotto: [
+    0
+    0
+  ]
+
+# create cards
+require '../crafty/components/Card.coffee'
+
+Crafty.e 'shantotto, AllyCard'
+  .attr {
+    card:
+      type: 'backup'
+  }
+
+Crafty.e 'shantotto, AllyCard'
+  .attr {
+    card:
+      type: 'backup'
+  }
+
+Crafty.e 'shantotto, AllyCard'
+  .attr {
+    card:
+      type: 'backup'
+  }
+
+# place cards
+CONF = require '../crafty/config.coffee'
+
+Crafty 'AllyCard'
+  .each (index) ->
+    switch @card.type
+      when 'backup'
+        @trigger 'Place',
+          x: CONF.coord.x.main + index * CONF.coord.x.step
+          y: CONF.coord.y.bkup
+    return
+
+
+Crafty.e 'shantotto, EnemyCard'
+  .trigger 'Place',
+    x: 900
+    y: 0

frontend/src/crafty/components/BigCard.coffee

@@ -1,3 +1,4 @@
+CONF = require '../config.coffee'
 # intermediate config
 bcConf = Crafty.clone CONF.bigcard
 

frontend/src/crafty/components/Card.coffee

@@ -1,3 +1,4 @@
+CONF = require '../config.coffee'
 require './BigCard.coffee'
 
 ################

frontend/src/crafty/components/Playmat.coffee

@@ -1,3 +1,5 @@
+CONF = require '../config.coffee'
+
 ################
 # Playmat
 ################

frontend/src/crafty/config.coffee

@@ -1,4 +1,4 @@
-window.CONF =
+module.exports =
 
   playmat:
     w: 2000

frontend/src/crafty/scenes/Battle.coffee

@@ -1,3 +1,4 @@
+CONF = require '../config.coffee'
 require '../components/Playmat.coffee'
 
 Crafty.defineScene "Battle", ->
@@ -32,7 +33,7 @@ Crafty.defineScene "Battle", ->
   Crafty.trigger 'ViewportResize'
 
   # Example playmats at https://imgur.com/a/VSosu#cwGQdAS
-  Crafty.sprite 2000, 1000, 'assets/ff7.jpg',
+  Crafty.sprite 2000, 1000, require('@/assets/ff7.jpg'),
     playmat: [
       0
       0

frontend/src/router.js

@@ -21,6 +21,11 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () =>
         import(/* webpackChunkName: "about" */ './views/About.vue')
+    },
+    {
+      path: '/game',
+      name: 'game',
+      component: () => import(/* webpackChunkName: "game" */ './views/Game.vue')
     }
   ]
 })

frontend/src/views/Game.vue

@@ -0,0 +1,21 @@
+<template lang="html">
+  <div ref="game"></div>
+</template>
+
+<script>
+export default {
+  name: 'Game',
+  mounted() {
+    this.$nextTick(function() {
+      // framework
+      require('craftyjs/dist/crafty')
+
+      // initialize on ref="game"
+      window.Crafty.init(this.$refs.game)
+
+      // load fftcg
+      require('@/crafty/Game.coffee')
+    })
+  }
+}
+</script>

src/style/custom.scss

@@ -1,19 +0,0 @@
-//
-// Bootstrap and its default variables
-//
-
-@import "~bootstrap/scss/bootstrap";
-
-html, body {
-  height: 100%;
-}
-
-
-body {
-  margin: 0;
-  background-color: #aaa;
-  // background-image: url(//gameranx.com/wp-content/uploads/2016/02/Final-Fantasy-XV-4K-Wallpaper.jpg);
-  background-position-x: center;
-  background-position-y: center;
-  background-size: cover;
-}