Initial commit

Source/WinStats.js

@@ -0,0 +1,71 @@
+import React from "react";
+import Store from "./interface/Store";
+
+export default class WinStats extends React.Component {
+    constructor() {
+        super()
+        this.state = { stats: Store.getGameStats(), hand: Store.getHand() }
+        this.getStats = this.getStats.bind(this)
+        this.color = ['charcoal', '#ff3333', '#32cd32', '#4F94CD']
+    }
+
+    componentDidMount() {
+        Store.on("gmestats", this.getStats)
+    }
+
+    componentWillUnmount() {
+        Store.removeListener("gmestats", this.getStats)
+    }
+
+    getStats() {
+        console.log('gmestats')
+        this.setState({ stats: Store.getGameStats(), hand: Store.getHand() })
+    }
+
+    newGame() {
+        //  Act.apiCall('service', 'NEWGME', {match: this.props.game});
+        this.props.newgame()
+    }
+
+    render() {
+        const msg = this.state.stats.length > 0
+            ? this.state.stats.map((m) => {
+                return <div className="flexRow flexSpace" style={{ color: this.color[m.clr] }}>
+                    <div>{m.tag}</div>
+                    <div>{m.msg}</div>
+                </div>
+            })
+            : <div></div>
+
+        const crds = this.state.hand.length > 0
+            ? this.state.hand.map((c) => {
+                return <img src={c.crd + '.svg'} className="card" />
+            })
+            : <div></div>
+
+        return (
+            <div className="stats">
+
+                <div className="btn" onClick={this.newGame.bind(this)}>
+                    play another game
+                  </div>
+
+                <div className="flexCol" style={{ margin: "0 0 5px 5px" }}>
+                    <div className="boxHdr" >
+                        Game statistics
+                  </div>
+
+                    <div style={{ border: "solid 1px gray", fontFamily: "OpenSans", fontSize: "15px" }}>
+                        {msg}
+                    </div>
+                </div>
+
+                <div className="flexRow flexCenter" style={{ margin: "1px" }}>
+                    <div className="flexCol">
+                        {crds}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}