X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=54d6c2660975aac30c9376ba05cff1c4feef3048;hp=0771bbe3d46e04071927e93de3b01ad3f38910b7;hb=3c2c043c4a6e389a597736c9fd366b716ac7237c;hpb=efb56934eb9333fb19e515432c5f03f47e5aa3cf diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx index 0771bbe..54d6c26 100644 --- a/empathy/empathy.jsx +++ b/empathy/empathy.jsx @@ -55,11 +55,11 @@ events.addEventListener("player-update", event => { events.addEventListener("game-state", event => { const state = JSON.parse(event.data); - for (let prompt of state.prompts) { - window.game.add_or_update_prompt(prompt); - } + window.game.set_prompts(state.prompts); window.game.set_active_prompt(state.active_prompt); + + window.game.set_scores(state.scores); }); events.addEventListener("prompt", event => { @@ -74,6 +74,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 +303,98 @@ const LetsPlay = React.memo(props => { ); }); -const ActivePrompt = React.memo(props => { +class ActivePrompt extends React.PureComponent { - function handle_submit(event) { + constructor(props) { + super(props); + const items = props.prompt.items; + + this.state = { + submitted: false + }; + + 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: -
-