72 lines
2.9 KiB
JavaScript
72 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import Store from "./interface/Store";
|
|
|
|
export default class Players extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.state = { plylst: Store.getPlayers() };
|
|
this.getPlayers = this.getPlayers.bind(this)
|
|
this.color = ['grey', 'red', 'green', 'blue']
|
|
}
|
|
|
|
componentDidMount() {
|
|
Store.on("playlist", this.getPlayers)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
Store.removeListener("playlist", this.getPlayers)
|
|
}
|
|
|
|
getPlayers() {
|
|
this.setState({ plylst: Store.getPlayers() })
|
|
}
|
|
|
|
render() {
|
|
const p = this.props.players
|
|
const t = this.props.turn
|
|
const plyrs = this.state.plylst.map((d, i) => {
|
|
return (
|
|
<div className="flexRow">
|
|
<div style={{ height: "94px", width: "66px", marginRight: "3px" }}>
|
|
{t.length ? <img src={t[i].crd + '.svg'} style={{ height: "91px" }} /> : null}
|
|
</div>
|
|
<div>
|
|
<div className="player" style={{ marginBottom: "3px" }}>
|
|
{p.length && p[i].live === true
|
|
? <div className="flexCol flexSpace plyrImg" style={{ backgroundImage: "url(" + d.Img + ")" }}>
|
|
<div className="flexEnd">
|
|
<div className="plyrCoin" style={{ backgroundColor: this.color[d.coin] }}>
|
|
</div>
|
|
</div>
|
|
<div className="flexCenter" >
|
|
{t.length && t[i].req
|
|
? <img src="checkmark.png" style={{ width: "54px", height: "54px" }} />
|
|
: <div></div>
|
|
}
|
|
</div>
|
|
</div>
|
|
: <div className="plyrImg plyBlnk">
|
|
<div className="flexEnd">
|
|
<div className="plyrCoin" style={{ backgroundColor: "#d0d0d0" }}>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div className="flexCol flexCenter plyrName"
|
|
style={{ backgroundColor: t.length && t[i].turn === true ? '#FFFF66' : 'white' }} >
|
|
{d.Desc}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
return (
|
|
<div className="flexCol" style={{ margin: "10px 5px" }}>
|
|
{plyrs}
|
|
</div>
|
|
);
|
|
}
|
|
} |