+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>
+ );
+});
+