Initial commit

Source/SeriesStats.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Store from "./interface/Store";
+
+export default class SeriesStats extends React.Component {
+    constructor() {
+        super()
+        this.state = { stats: Store.getSeriesStats() }
+        this.getStats = this.getStats.bind(this)
+        this.color = ['#d0d0d0', '#ff3333', '#32cd32', '#4F94CD']
+    }
+
+    componentDidMount() {
+        Store.on("serstats", this.getStats)
+    }
+
+    componentWillUnmount() {
+        Store.removeListener("serstats", this.getStats)
+    }
+
+    getStats() {
+        this.setState({ stats: Store.getSeriesStats() })
+    }
+
+    render() {
+        return (
+            <div className="flexRow">
+                <div style={{ marginRight: "2px" }}>played</div>
+                <div className="flexRow flexAlign" style={{ borderTop: "1px solid grey", borderRight: "1px solid grey", borderBottom: "1px solid grey" }}>
+                    <div style={{ minWidth: "25px", marginRight: "2px", height: "17px", backgroundColor: this.color[0] }}>
+                        {this.state.stats.plyd}
+                    </div>
+                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[1] }}>{this.state.stats.c1}</div>
+                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[2] }}>{this.state.stats.c2}</div>
+                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[3], marginRight: "2px" }}>{this.state.stats.c3}</div>
+                </div>
+            </div>
+        );
+    }
+}