71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
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>
|
|
);
|
|
}
|
|
} |