for (let prompt of state.prompts) {
window.game.add_or_update_prompt(prompt);
}
+
+ window.game.set_active_prompt(state.active_prompt);
});
events.addEventListener("prompt", event => {
window.game.add_or_update_prompt(prompt);
});
+events.addEventListener("start", event => {
+ const prompt = JSON.parse(event.data);
+
+ window.game.set_active_prompt(prompt);
+});
+
/*********************************************************
* Game and supporting classes *
*********************************************************/
);
});
+const LetsPlay = React.memo(props => {
+
+ function handle_click(prompt_id) {
+ fetch_post_json
+ }
+
+ const quorum = Math.round((props.num_players + 1) / 2);
+ const max_votes = props.prompts.reduce(
+ (max_so_far, v) => Math.max(max_so_far, v.votes.length), 0);
+
+ if (max_votes < quorum)
+ return null;
+
+ const candidates = props.prompts.filter(p => p.votes.length >= quorum);
+ const index = Math.floor(Math.random() * candidates.length);
+ const winner = candidates[index];
+
+ return (
+ <div className="lets-play">
+ <h2>Let's Play</h2>
+ <p>
+ That should be enough voting. If you're not waiting for any
+ other players to join, then let's start.
+ </p>
+ <button
+ className="lets-play"
+ onClick={() => fetch_post_json(`start/${winner.id}`) }
+ >
+ Start Game
+ </button>
+ </div>
+ );
+});
+
+const ActivePrompt = React.memo(props => {
+
+ function handle_submit(event) {
+
+ /* Prevent the default page-changing form-submission behavior. */
+ event.preventDefault();
+ }
+
+ return (
+ <div className="active-prompt">
+ <h2>The Game of Empathy</h2>
+ <p>
+ Remember, you're trying to match your answers with
+ what the other players submit.
+ Give {props.prompt.items} responses for the following prompt:
+ </p>
+ <h2>{props.prompt.prompt}</h2>
+ <form onSubmit={handle_submit}>
+ {Array(props.prompt.items).fill(null).map((whocares,i) => {
+ return (
+ <div
+ key={i}
+ className="form-field large">
+ <input
+ type="text"
+ name={`response_${i}`}
+ required
+ autoComplete="off"
+ />
+ </div>
+ );
+ })}
+
+ <div
+ key="submit-button"
+ className="form-field large">
+ <button type="submit">
+ Send
+ </button>
+ </div>
+
+ </form>
+ </div>
+ );
+});
+
class Game extends React.PureComponent {
constructor(props) {
super(props);
});
}
+ set_active_prompt(prompt) {
+ this.setState({
+ active_prompt: prompt
+ });
+ }
+
render() {
const state = this.state;
+ if (state.active_prompt) {
+ return <ActivePrompt
+ prompt={state.active_prompt}
+ />;
+ }
+
return [
<GameInfo
key="game-info"
<PromptOptions
key="prompts"
prompts={state.prompts}
+ />,
+ <LetsPlay
+ key="lets-play"
+ num_players={1+state.other_players.length}
+ prompts={state.prompts}
/>
];
}