refactoring

client/scripts/20-component-Card.coffee

@@ -1,5 +1,6 @@
 ################
-# component name
+# Card
+################
 Crafty.c 'Card',
   # Mouse interactivity, Tween (animation smooth)
   required: '2D, Canvas, Mouse, Tween'
@@ -53,7 +54,8 @@ Crafty.c 'Card',
       return
 
 ################
-# component name
+# EnemyCard
+################
 Crafty.c 'EnemyCard',
   # is a card
   required: 'Card'
@@ -65,7 +67,8 @@ Crafty.c 'EnemyCard',
     return
 
 ################
-# component name
+# AllyCard
+################
 Crafty.c 'AllyCard',
   # is a card
   required: 'Card, Draggable'

client/scripts/20-component-Playmat.coffee

@@ -0,0 +1,39 @@
+################
+# Playmat
+################
+Crafty.c 'Playmat',
+  # Basic 2D Entity
+  required: '2D, Canvas'
+
+  # initialize Playmat
+  init: ->
+    @attr {
+      x: 0
+      y: CONF.playmat.h
+      z: CONF.layer.playmats
+      w: CONF.playmat.w
+      h: CONF.playmat.h
+    }
+    @origin 'top middle'
+    return
+
+################
+# EnemyPlaymat
+################
+Crafty.c 'EnemyPlaymat',
+  # Is a Playmat
+  required: 'Playmat'
+
+  # initialize Playmat
+  init: ->
+    @attr {
+      rotation: 180
+    }
+    return
+
+################
+# AllyPlaymat
+################
+Crafty.c 'AllyPlaymat',
+  # Is a Playmat
+  required: 'Playmat'

client/scripts/30-scene-Battle.coffee

@@ -0,0 +1,37 @@
+Crafty.defineScene "Battle", ->
+  
+  # free viewport
+  Crafty.viewport.clampToEntities = false
+
+  # attach viewport to an (invisible) entity twice as big as a playmat
+  Crafty.viewport.follow(
+    Crafty.e('2D, Canvas')
+      .attr {
+        w: 1 * CONF.playmat.w
+        h: 2 * CONF.playmat.h
+      }
+      .origin('center')
+  )
+
+  # scale viewport automatically (show that new entity)
+  Crafty.bind 'ViewportResize', ->
+    sX = @viewport._width / (1 * CONF.playmat.w)
+    sY = @viewport._height / (2 * CONF.playmat.h)
+
+    @viewport.scale Math.min(sX, sY)
+    return
+
+  # force scale adjustment
+  Crafty.trigger 'ViewportResize'
+
+  # Example playmats at https://imgur.com/a/VSosu#cwGQdAS
+  Crafty.sprite 997, 582, '//i.imgur.com/cwGQdAS.png',
+    playmat: [
+      0
+      0
+    ]
+
+  Crafty.e('playmat, AllyPlaymat')
+  Crafty.e('playmat, EnemyPlaymat')
+
+  return

client/scripts/30-scene-game.coffee

@@ -1,79 +0,0 @@
-# free viewport
-Crafty.viewport.clampToEntities = false
-
-# attach viewport to an entity twice as big as a playmat
-Crafty.viewport.follow(
-  Crafty.e('2D, Canvas')
-    .attr {
-      w: 1 * CONF.playmat.w
-      h: 2 * CONF.playmat.h
-    }
-    .origin('center')
-)
-
-# scale viewport automatically (show that new entity)
-Crafty.bind 'ViewportResize', ->
-  sX = @viewport._width / (1 * CONF.playmat.w)
-  sY = @viewport._height / (2 * CONF.playmat.h)
-
-  @viewport.scale Math.min(sX, sY)
-  return
-
-# force scale adjustment
-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 });

client/scripts/40-test-entities.coffee

@@ -0,0 +1,30 @@
+# Load base scene
+Crafty.scene "Battle"
+
+# 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 });