X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=b03d697ef1cfd2561ffc1b223d4939e3b616fa4a;hp=0771bbe3d46e04071927e93de3b01ad3f38910b7;hb=ae931528b06e796b57147b974b669e980b18c51f;hpb=efb56934eb9333fb19e515432c5f03f47e5aa3cf diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx index 0771bbe..b03d697 100644 --- a/empathy/empathy.jsx +++ b/empathy/empathy.jsx @@ -60,6 +60,8 @@ events.addEventListener("game-state", event => { } window.game.set_active_prompt(state.active_prompt); + + window.game.set_scores(state.scores); }); events.addEventListener("prompt", event => { @@ -74,6 +76,18 @@ events.addEventListener("start", event => { window.game.set_active_prompt(prompt); }); +events.addEventListener("answered", event => { + const players_answered = JSON.parse(event.data); + + window.game.set_players_answered(players_answered); +}); + +events.addEventListener("scores", event => { + const scores = JSON.parse(event.data); + + window.game.set_scores(scores); +}); + /********************************************************* * Game and supporting classes * *********************************************************/ @@ -291,51 +305,98 @@ const LetsPlay = React.memo(props => { ); }); -const ActivePrompt = React.memo(props => { +class ActivePrompt extends React.PureComponent { + + constructor(props) { + super(props); + const items = props.prompt.items; + + this.state = { + submitted: false + }; - function handle_submit(event) { + this.answers = [...Array(items)].map(() => React.createRef()); + this.handle_submit = this.handle_submit.bind(this); + } + + async handle_submit(event) { + const form = event.currentTarget; /* Prevent the default page-changing form-submission behavior. */ event.preventDefault(); + + const response = await fetch_post_json(`answer/${this.props.prompt.id}`, { + answers: this.answers.map(r => r.current.value) + }); + if (response.status == 200) { + const result = await response.json(); + if (! result.valid) { + add_message("danger", result.message); + return; + } + } else { + add_message("danger", "An error occurred submitting your answers"); + return; + } + + /* Everything worked. Server is happy with our answers. */ + form.reset(); + this.setState({ + submitted: true + }); } - return ( -
- Remember, you're trying to match your answers with - what the other players submit. - Give {props.prompt.items} responses for the following prompt: -
-