Update

package.json

@@ -11,7 +11,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17",
-    "reactstrap": "^5.0.0-alpha.4"
+    "reactstrap": "^5.0.0-alpha.4",
+    "wolfy87-eventemitter": "^5.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/Game/services/EventManager.js

@@ -0,0 +1,4 @@
+import EventEmitter from 'wolfy87-eventemitter';
+
+
+export default new EventEmitter();

src/Game/views/base/Card.js

@@ -0,0 +1,84 @@
+import * as PIXI from 'pixi.js';
+//import Text from './Text.js';
+import { getParam } from '../../../helpers/url';
+
+import draggable from '../../../helpers/draggable';
+import dragAndDrop from '../../../helpers/dragAndDrop';
+
+import GuiableContainer from '../../../helpers/Guiable';
+
+const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
+const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
+class Card extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            image,
+            x,
+            y
+        } = props;
+
+        // Properties Component 
+        this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
+        this.position.set(x,y);
+
+        this.x = x || 0;
+        this.y = y || 0;
+
+        // GUI
+        this.addFolder('Card');
+        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.construct(props);
+    }
+
+    construct(props) {
+        let [w,h] = [200,320];
+
+        this.sprite = new PIXI.Sprite(DefaultImage);
+        this.sprite.anchor.set(0.5,0.5);
+        this.sprite.width = w;
+        this.sprite.height= h;
+
+        this.interactive = true;
+        this.hitArea = new PIXI.Rectangle(-w/2,-h/2,w,h);
+        this.cursor = 'pointer';
+
+        this.addChild(this.sprite);
+        dragAndDrop(this);
+
+        this.loadImage(this.imageURL);
+    }
+
+    loadImage(img) {
+        this.imageURL = img;
+        this.setTexture(PIXI.Texture.fromImage(img));
+    }
+
+    setTexture(texture) {
+        this.sprite.texture = texture;
+    }
+
+    onClick(fn) {
+        this.sprite.on('pointerdown', (e) => fn(e));
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/Card',
+            image: this.imageURL,
+            x: this.position.x,
+            y: this.position.y
+        };
+    }
+}
+
+export default Card;

src/Game/views/base/CardHolder.js

@@ -0,0 +1,92 @@
+import * as PIXI from 'pixi.js';
+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);
+
+class CardHolder extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y,
+            w,
+            h
+        } = props;
+
+        // Properties Component 
+        this.x = x || 0;
+        this.y = y || 0;
+        this.w = w || 10;
+        this.h = h || 10;
+
+        // GUI
+        this.addFolder('CardHolder');
+        this.addToFolder('CardHolder', this, 'x').onFinishChange((v) => this.change({x: v}));
+        this.addToFolder('CardHolder', this, 'y').onFinishChange((v) => this.change({y: v}));
+        this.addToFolder('CardHolder', this, 'w').onFinishChange((v) => this.change({w: v}));
+        this.addToFolder('CardHolder', this, 'h').onFinishChange((v) => this.change({h: v}));
+        //
+        this.construct(props);
+    }
+
+    construct(props) {
+        this.sprite = new PIXI.Graphics();
+        this.sprite.beginFill(0xFFFF00,0.1);
+
+        // set the line style to have a width of 5 and set the color to red
+        this.sprite.lineStyle(3, 0xFF0000);
+        this.sprite.pivot.set(this.w/2,this.h/2);
+        this.sprite.drawRect(0, 0, this.w, this.h); // Center this shit 
+        this.sprite.interactive = true;
+        this.sprite.hitArea = new PIXI.Rectangle(0, 0, this.w, this.h);
+        this.sprite.cursor = 'pointer';
+        this.sprite.on('mouseup', () => EventManager.trigger('CardPlaced', [this.position]));
+
+        this.position.set(this.x,this.y);
+
+        EventManager.on('CardDragging', () => this.addChild(this.sprite));
+        EventManager.on('CardDraggingFinished', () => this.removeChild(this.sprite));
+    }
+
+    change(props) {
+        let newdata = {
+            x: this.x,
+            y: this.y,
+            w: this.w,
+            h: this.h,
+            ...props
+        };
+        this.x = newdata.x;
+        this.y = newdata.y;
+        this.w = newdata.w;
+        this.h = newdata.h;
+
+        this.position.set(this.x,this.y);
+        this.sprite.width = this.w;
+        this.sprite.height = this.h;
+    }
+
+    onDrop(fn) {
+        // TODO
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/CardHolder',
+            x: this.position.x,
+            y: this.position.y,
+            w: this.sprite.width,
+            h: this.sprite.height
+        };
+    }
+}
+
+export default CardHolder;

src/Game/views/demo/CardToHolder.js

@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js';
+
+import Card from '../base/Card';
+import CardHolder from '../base/CardHolder';
+
+class CardToHolder extends PIXI.Container{
+    constructor() {
+        super();
+
+        let card = new Card({});
+        this.addChild(card);
+
+        let holder = new CardHolder({'x':-170,'y':0,'w':203,'h':323});
+        this.addChild(holder);
+
+        let holder2 = new CardHolder({'x':200,'y':100,'w':203,'h':323});
+        this.addChild(holder2);
+    }
+
+    getAsJSON = () => {return {component: 'demo/CardToHolder'}}
+}
+
+export default CardToHolder;

src/Game/views/misc/Button.js

@@ -54,7 +54,7 @@ class Button extends GuiableContainer{
     }
 
     setTexture(texture) {
-        this.texture = texture;
+        this.sprite.texture = texture;
     }
 
     onClick(fn) {

src/Playground/Loader.js

@@ -24,9 +24,9 @@ class Loader extends PIXI.Container{
 
         this.gui.add(this, 'save');
         this.gui.add(this, 'load');
+        this.gui.add(this, 'loadJSON');
 
-        if(this.component)
-            this.loadComponent({component: this.component});
+        this.load();
     }
 
     destroy() {
@@ -34,7 +34,7 @@ class Loader extends PIXI.Container{
         this.GameLayer.toggleGui();
     }
 
-    load = () => {
+    loadJSON = () => {
         var loadJSON = prompt("Enter load info...", "");
         
         let jsonData = null;
@@ -47,8 +47,20 @@ class Loader extends PIXI.Container{
         this.loadComponent(jsonData);
     }
 
+    load = () => {
+        let loadJSON = localStorage.getItem('SavedDevData');
+        if(loadJSON) {
+            loadJSON = JSON.parse(loadJSON);
+            this.loadComponent(loadJSON);
+        } else {
+            if(this.component)
+                this.loadComponent({component: this.component}); 
+        } 
+    }
+
     save = () => {
         let data = JSON.stringify(this.instance.getAsJSON());
+        localStorage.setItem('SavedDevData', data);
         alert(data);
     }
 

src/helpers/dragAndDrop.js

@@ -0,0 +1,72 @@
+import EventManager from '../Game/services/EventManager';
+
+
+
+function dragAndDrop(sprite) {
+// Sprite must be interactive and if container Hit Area must be specified!
+    sprite
+    // events for drag start
+        .on('mousedown', onDragStart)
+        .on('touchstart', onDragStart)
+        // events for drag end
+        .on('mouseup', onDragEnd)
+        .on('mouseupoutside', onDragEnd)
+        .on('touchend', onDragEnd)
+        .on('touchendoutside', onDragEnd)
+        // events for drag move
+        .on('mousemove', onDragMove)
+        .on('touchmove', onDragMove);
+
+    EventManager.on('CardPlaced', (position) => {
+        console.log("CardPlaced");
+        sprite.placedPosition = position;
+    });
+}
+
+function onDragStart(event)
+{
+    // store a reference to the data
+    // the reason for this is because of multitouch
+    // we want to track the movement of this particular touch
+    this.data = event.data;
+    this.dragging = true;
+    
+    var newPosition = this.data.getLocalPosition(this);
+    this.draggingOffset = newPosition;
+
+    this.draggingInitial   = this.data.getLocalPosition(this.parent);
+    this.draggingInitial.x -= this.draggingOffset.x;
+    this.draggingInitial.y -= this.draggingOffset.y;
+
+    EventManager.emit('CardDragging');
+}
+
+function onDragEnd()
+{
+    this.alpha = 1;
+    this.dragging = false;
+    // set the interaction data to null
+    this.data = null;
+    if(this.placedPosition){
+        this.position.x = this.placedPosition.x;
+        this.position.y = this.placedPosition.y;
+    } else {
+        this.position.x = this.draggingInitial.x;
+        this.position.y = this.draggingInitial.y;
+    }
+
+
+
+    EventManager.emit('CardDraggingFinished');
+}
+
+function onDragMove()
+{
+    if (this.dragging)
+    {
+        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;