Card Marvelous

package.json

@@ -7,6 +7,7 @@
     "bootstrap": "^4.0.0-beta.3",
     "dat.gui": "^0.7.1",
     "material-ui": "^0.20.0",
+    "pixi-tween": "^0.2.0",
     "pixi.js": "^4.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

src/Game/app.js

@@ -19,6 +19,7 @@ DATGUI.default.GUI.prototype.removeFolder = function(name) {
 ////
 class App {
 	constructor(){
+		this.__$$ = tweenManager;
 		this.animateables = [];
 		this.app = new PIXI.Application(window.innerWidth, window.innerHeight, {backgroundColor : 0x1099bb});
 		window.onresize = this.resize;

src/Game/assets/deck.js

@@ -0,0 +1,13 @@
+import * as PIXI from 'pixi.js';
+
+let Deck = {
+	Textures: [],
+	Filenames: []
+};
+for(var i=0;i<2;i++) {
+	let filename = '/files/assets/cards/sketches/' + i + '.png';
+	Deck.Filenames.push(filename);
+	Deck.Textures.push(PIXI.Texture.fromImage(filename));
+}
+
+export default Deck;

src/Game/views/Menu.js

@@ -1,4 +1,3 @@
-import * as PIXI from 'pixi.js';
 import GuiableContainer from '../../helpers/Guiable';
 import { getParam } from '../../helpers/url';
 import drag from '../../helpers/draggable';

src/Game/views/base/Card.js

@@ -6,10 +6,18 @@ import dragAndDrop from '../../../helpers/dragAndDrop';
 
 import GuiableContainer from '../../../helpers/Guiable';
 
+import Deck from '../../assets/deck';
 
 
-const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
-const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
+const BlueURL = '/files/assets/cards/frame_blue.png';
+const BlueImage = PIXI.Texture.fromImage(BlueURL);
+
+const RedURL = '/files/assets/cards/frame_red.png';
+const RedImage = PIXI.Texture.fromImage(RedURL);
+
+const LabelURL = '/files/assets/cards/label.png';
+const LabelImage = PIXI.Texture.fromImage(LabelURL);
 
 class Card extends GuiableContainer{
     constructor(props) {
@@ -21,7 +29,7 @@ class Card extends GuiableContainer{
         } = props;
 
         // Properties Component 
-        this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
+        this.imageURL = image || getParam('imageURL');
         this.position.set(x,y);
 
         this.x = x || 0;
@@ -32,43 +40,66 @@ class Card extends GuiableContainer{
         this.addToFolder('Card', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
         this.addToFolder('Card', this, 'x').onFinishChange((v) => this.position.x = v);
         this.addToFolder('Card', this, 'y').onFinishChange((v) => this.position.y = v);
+        this.addToFolder('Card', {team: false}, 'team').onFinishChange((v) => this.setTeam(v));
+        this.addToFolder('Card', {card: 0}, 'card', 0, 1).onFinishChange((v) => this.loadCard(v));
         //
 
         this.construct(props);
-        window.MM = this;
     }
 
     construct(props) {
-        let [w,h] = [200,320];
+        let [w,h] = [819/3,1020/3];
 
-        this.sprite = new PIXI.Sprite(DefaultImage);
+        this.sprite = new PIXI.Sprite();
         this.sprite.anchor.set(0.5,0.5);
-        this.sprite.width = w;
-        this.sprite.height= h;
+        this.sprite.width = w-30;
+        this.sprite.height= h-30*h/w;
+
+        this.frame = new PIXI.Sprite(BlueImage);
+        this.frame.anchor.set(0.5,0.5);
+        this.frame.width = w;
+        this.frame.height= h;
+        //this.frame.setTexture(RedImage);
+
+        let [lw,lh] = [1983/12,737/12];
+        this.label = new PIXI.Sprite(LabelImage);
+        this.label.anchor.set(0.5,0.5);
+        this.label.width = lw;
+        this.label.height= lh;
+        this.label.position.set(0,100);
+
 
         this.interactive = true;
         this.hitArea = new PIXI.Rectangle(-w/2,-h/2,w,h);
         this.cursor = 'pointer';
 
         this.addChild(this.sprite);
+        this.addChild(this.label);
+        this.addChild(this.frame);
         dragAndDrop(this);
 
-        this.loadImage(this.imageURL);
-
+        this.loadCard(0);
+    }
 
-        this._tween = PIXI.tweenManager.createTween(this);
-        this._tween.time = 1000;
-        this._tween.easing = PIXI.tween.Easing.outQuart();
-        this._tween.loop = false;
+    setTeam(team) {
+        switch(team) {
+            case 0: case 'R': case 'r': case false:
+                this.frame.setTexture(RedImage);
+                break;
+            case 1: case 'B': case 'b': case true:
+                this.frame.setTexture(BlueImage);
+                break;
+            default:break;
+        }
     }
 
-    loadImage(img) {
-        this.imageURL = img;
-        this.setTexture(PIXI.Texture.fromImage(img));
+    loadCard(number) {
+        this.imageURL = Deck.Filenames[number];
+        this.setTexture(Deck.Textures[number]);
     }
 
     setTexture(texture) {
-        this.sprite.texture = texture;
+        this.sprite.setTexture(texture);
     }
 
     onClick(fn) {
@@ -79,12 +110,18 @@ class Card extends GuiableContainer{
     moveTo(point, milliseconds=1000) {
         let path = new PIXI.tween.TweenPath();
         path.moveTo(this.position.x, this.position.y).lineTo(point.x, point.y);
+        this._tween = PIXI.tweenManager.createTween(this);
+        this._tween.easing = PIXI.tween.Easing.outQuart();
+        this._tween.loop = false;
         this._tween.path = path;
         this._tween.time = milliseconds;
         this._tween.start();
     }
     // Animate Scale
     scaleTo(newscale, milliseconds=1000) {
+        this._tween = PIXI.tweenManager.createTween(this);
+        this._tween.easing = PIXI.tween.Easing.outQuart();
+        this._tween.loop = false;
         this._tween.from({
             scale: { x: this.scale.x, y: this.scale.y }
         });

src/Game/views/base/CardHolder.js

@@ -1,11 +1,11 @@
 import * as PIXI from 'pixi.js';
-import { getParam } from '../../../helpers/url';
+//import { getParam } from '../../../helpers/url';
 
 import GuiableContainer from '../../../helpers/Guiable';
 import EventManager from '../../services/EventManager';
 
-const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
-const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+//const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
+//const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
 
 class CardHolder extends GuiableContainer{
     constructor(props) {

src/Game/views/base/CollectionDeck.js

@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js';
 import GuiableContainer from '../../../helpers/Guiable';
 import CardHolder from '../base/CardHolder';
-import Card from '../base/Card';
+//import Card from '../base/Card';
 
 const DefaultImageUrl = '/files/assets/ui/papyrus.jpg';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);

src/helpers/dragAndDrop.js

@@ -14,6 +14,8 @@ function dragAndDrop(sprite) {
         // events for drag move
         .on('mousemove', onDragMove)
         .on('touchmove', onDragMove);
+
+    sprite.placeFn = place.bind(sprite);
 }
 
 function place(position, dropCallback) {
@@ -41,8 +43,6 @@ function onDragStart(event)
     this.draggingInitial.y -= this.draggingOffset.y;
 
     EventManager.emit('CardDragging');
-
-    this.placeFn = place.bind(this);
     // Add CardPlace Callback 
     EventManager.on('CardPlaced', this.placeFn);
 }
@@ -59,7 +59,6 @@ function onDragEnd()
         this.moveTo(this.draggingInitial);
     }
     EventManager.emit('CardDraggingFinished');
-    
     // Remove Card Placed Callbacks
     EventManager.off('CardPlaced', this.placeFn);
 }
@@ -71,7 +70,6 @@ function onDragMove()
         var newPosition = this.data.getLocalPosition(this.parent);
         this.position.x = newPosition.x - this.draggingOffset.x;
         this.position.y = newPosition.y - this.draggingOffset.y;
-
     }
 }
 export default dragAndDrop;