abstracted gui; more robust change handling

src/components/play/Board.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Base from './_base';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import API from '../SpreadsheetData';
@@ -6,7 +7,7 @@ import Movement from './rules/movement';
 import '../../scss/play/battleboard.scss';
 
 @observer
-export default class Board extends React.Component {
+export default class Board extends Base {
 	@observable spaces = [];
 	@observable phase = "none";
 	@observable activeplayer = true;
@@ -23,8 +24,6 @@ export default class Board extends React.Component {
 			'mirage': [this.empty_card("mirage")]
 		});
 
-		// todo remove / currently simulating
-		this.submitChange({event: "phase", action: "movement"});
 		this.loadcards();
 	}
 
@@ -57,21 +56,12 @@ export default class Board extends React.Component {
 		return card;
 	}
 
-	// This is a wraper function for preforming changes to game state
-	// It preforms the change locally and propegates it higher
-	// So that a network listener can reflect the change on the other client
-	// Local changes only could use "make change"
-	submitChange = (change) => {
-		this.props.submitChange(change);
-		this.makeChange(change);
-	}
-
 	// TODO if the board state is changed externally
 	// {'event': 'action'}
 	makeChange = (change) => {
 		// seriously calling without a change?
 		if (!change) return;
-		console.log(change); // TODO remove
+		console.log("board ->", change); // TODO remove
 
 		let action = change.action;
 		switch (change.event) {

src/components/play/Gui.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import Base from './_base';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+
+@observer
+export default class Gui extends Base {
+
+	constructor(props) {
+		super(props);
+	}
+
+	makeChange = (change) => {
+		// TODO
+	}
+
+	endTurn() {
+	  this.props.submitChange({event: "active", action: true}, "board");
+	}
+
+	render() {
+		return (
+			<div className="gui">
+			  <div className="card-preview">
+			    <div className="location"><img src="https://drive.google.com/uc?id=0B6oyUfwoM3u1SHJ5ejJPTk85THM" /></div>
+			  </div>
+			  <div className="hand">
+			    <span className="card_name">Hand</span>
+			    <div className="attacks">
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			    </div>
+			    <div className="mugic">
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			      <div></div>
+			    </div>
+			  </div>
+			  <div className="decks">
+			    <div className="general">
+			      <span className="card_name">General Discard</span>
+			      <img></img>
+			    </div>
+			    <div className="attack">
+			      <span className="card_name">Attack Discard</span>
+			      <img></img>
+			    </div>
+			    <div className="draw">
+			      <span className="card_name">Attack Deck</span>
+			      <img></img>
+			    </div>
+			  </div>
+			  <div className="left-gui">
+			    <div className="burst">
+			      <span>No cards on burst</span>
+			    </div>
+			    <div className="turn-actions">
+			      <div className="endturn"><button onClick={this.endTurn.bind(this)}>Pass</button></div>
+			    </div>
+			  </div>
+			  <div className="right-gui">
+			    <div className="chat">
+			      <span>Chatting with Opponent</span>
+			    </div>
+			  </div>
+			</div>
+		);	
+	}
+}

src/components/play/_base.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class Base extends React.Component {
+
+	constructor(props) {
+		super(props);
+	}
+
+	// This is a wraper function for preforming changes to game state
+	// It preforms the change locally and propegates it higher
+	// So that a network listener can reflect the change on the other client
+	// Local changes only can simply use "makeChange"
+	submitChange = (change) => {
+		this.props.submitChange(change);
+		this.makeChange(change);
+	}
+
+	makeChange = (change) => {
+		throw ('override this method');
+	}
+
+}

src/components/play/index.js

@@ -3,7 +3,9 @@ import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import API from '../SpreadsheetData';
 import {Loading} from '../Snippets';
-import Board from './Board.js'
+import Board from './Board';
+import Gui from './Gui';
+
 import '../../scss/play/play.scss';
 import '../../scss/play/gui.scss';
 
@@ -15,19 +17,47 @@ export default class Play extends React.Component {
   	super(props);
   }
 
-  handleChange() {
-    // When handling movement, flip the card's owner before sending network
-    // Flip the board's numbers
-  }
-
   componentDidUpdate() {
-    // this.makeChange();
-    this.makeChange({event:"active", action: true});
+    // todo remove / currently simulating
+    this.makeBoardChange({event:"active", action: true});
+    this.makeBoardChange({event: "phase", action: "movement"});
   }
 
-  // TODO own GUI class
-  endTurn() {
-    this.makeChange({event: "active", action: true});
+  sendNetworkChange(change, destination) {
+    // TODO implement network change
+    console.log("network ->", destination, change);
+  }
+
+  // wrapper function
+  receiveNetworkChange(change, destination) {
+    this.recieveChange(change, destination);
+  }
+
+  // Parent function to handle any intercomponent or remote commands
+  // send the command to that destination
+  recieveChange(change, destination) {
+    switch(destination) {
+      case "board":
+        this.makeBoardChange(change);
+        break;
+      case "gui":
+        this.makeGuiChange(change);
+        break;
+      default:
+        throw "invalid destination";
+    }
+  }
+
+  recieveGuiChange(change, destination) {
+    if (destination) this.recieveChange(change, destination);
+    this.sendNetworkChange(change, destination || "gui");
+  }
+
+  // When handling movement, flip the card's owner before sending network
+  // Flip the board's numbers
+  receiveBoardChange(change, destination) {
+    if (destination) this.recieveChange(change, destination);
+    this.sendNetworkChange(change, destination || "board");
   }
 
   render() {
@@ -39,58 +69,13 @@ export default class Play extends React.Component {
     
     return (
       <div className="play">
-        <div className="gui">
-          <div className="card-preview">
-            <div className="location"><img src="https://drive.google.com/uc?id=0B6oyUfwoM3u1SHJ5ejJPTk85THM" /></div>
-          </div>
-          <div className="hand">
-            <span className="card_name">Hand</span>
-            <div className="attacks">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-            <div className="mugic">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-          <div className="decks">
-            <div className="general">
-              <span className="card_name">General Discard</span>
-              <img></img>
-            </div>
-            <div className="attack">
-              <span className="card_name">Attack Discard</span>
-              <img></img>
-            </div>
-            <div className="draw">
-              <span className="card_name">Attack Deck</span>
-              <img></img>
-            </div>
-          </div>
-          <div className="left-gui">
-            <div className="burst">
-              <span>No cards on burst</span>
-            </div>
-            <div className="turn-actions">
-              <div className="endturn"><button onClick={this.endTurn.bind(this)}>Pass</button></div>
-            </div>
-          </div>
-          <div className="right-gui">
-            <div className="chat">
-              <span>Chatting with Opponent</span>
-            </div>
-          </div>
-        </div>
+        <Gui 
+          submitChange={this.recieveGuiChange.bind(this)} 
+          ref={n => {if (n) this.makeGuiChange = n.makeChange}}
+        />
         <Board 
-          submitChange={this.handleChange.bind(this)} 
-          ref={n => {if (n) this.makeChange = n.makeChange}}
+          submitChange={this.receiveBoardChange.bind(this)} 
+          ref={n => {if (n) this.makeBoardChange = n.makeChange}}
         />
       </div>
     );