Add a ready bit to client state, and render nothing before ready
[lmno.games] / empathy / empathy.jsx
1 const MAX_PROMPT_ITEMS = 20;
2
3 function undisplay(element) {
4   element.style.display="none";
5 }
6
7 function add_message(severity, message) {
8   message = `<div class="message ${severity}" onclick="undisplay(this)">
9 <span class="hide-button" onclick="undisplay(this.parentElement)">&times;</span>
10 ${message}
11 </div>`;
12   const message_area = document.getElementById('message-area');
13   message_area.insertAdjacentHTML('beforeend', message);
14 }
15
16 /*********************************************************
17  * Handling server-sent event stream                     *
18  *********************************************************/
19
20 const events = new EventSource("events");
21
22 events.onerror = function(event) {
23   if (event.target.readyState === EventSource.CLOSED) {
24     setTimeout(() => {
25       add_message("danger", "Connection to server lost.");
26     }, 1000);
27   }
28 };
29
30 events.addEventListener("game-info", event => {
31   const info = JSON.parse(event.data);
32
33   window.game.set_game_info(info);
34 });
35
36 events.addEventListener("player-info", event => {
37   const info = JSON.parse(event.data);
38
39   window.game.set_player_info(info);
40 });
41
42 events.addEventListener("player-enter", event => {
43   const info = JSON.parse(event.data);
44
45   window.game.set_other_player_info(info);
46 });
47
48 events.addEventListener("player-exit", event => {
49   const info = JSON.parse(event.data);
50
51   window.game.remove_player(info);
52 });
53
54 events.addEventListener("player-update", event => {
55   const info = JSON.parse(event.data);
56
57   if (info.id === window.game.state.player_info.id)
58     window.game.set_player_info(info);
59   else
60     window.game.set_other_player_info(info);
61 });
62
63 events.addEventListener("game-state", event => {
64   const state = JSON.parse(event.data);
65
66   window.game.reset_game_state();
67
68   window.game.set_prompts(state.prompts);
69
70   window.game.set_active_prompt(state.active_prompt);
71
72   window.game.set_players_answered(state.players_answered);
73
74   window.game.set_players_answering(state.players_answering);
75
76   window.game.set_answering_idle(state.answering_idle);
77
78   window.game.set_end_answers(state.end_answers);
79
80   window.game.set_ambiguities(state.ambiguities);
81
82   window.game.set_players_judged(state.players_judged);
83
84   window.game.set_players_judging(state.players_judging);
85
86   window.game.set_judging_idle(state.judging_idle);
87
88   window.game.set_end_judging(state.end_judging);
89
90   window.game.set_scores(state.scores);
91
92   window.game.state_ready();
93 });
94
95 events.addEventListener("prompt", event => {
96   const prompt = JSON.parse(event.data);
97
98   window.game.add_or_update_prompt(prompt);
99 });
100
101 events.addEventListener("start", event => {
102   const prompt = JSON.parse(event.data);
103
104   window.game.set_active_prompt(prompt);
105 });
106
107 events.addEventListener("player-answered", event => {
108   const player = JSON.parse(event.data);
109
110   window.game.set_player_answered(player);
111 });
112
113 events.addEventListener("player-answering", event => {
114   const player = JSON.parse(event.data);
115
116   window.game.set_player_answering(player);
117 });
118
119 events.addEventListener("answering-idle", event => {
120   const value = JSON.parse(event.data);
121
122   window.game.set_answering_idle(value);
123 });
124
125 events.addEventListener("vote-end-answers", event => {
126   const player = JSON.parse(event.data);
127
128   window.game.set_player_vote_end_answers(player);
129 });
130
131 events.addEventListener("unvote-end-answers", event => {
132   const player = JSON.parse(event.data);
133
134   window.game.set_player_unvote_end_answers(player);
135 });
136
137 events.addEventListener("ambiguities", event => {
138   const ambiguities = JSON.parse(event.data);
139
140   window.game.set_ambiguities(ambiguities);
141 });
142
143 events.addEventListener("player-judged", event => {
144   const player = JSON.parse(event.data);
145
146   window.game.set_player_judged(player);
147 });
148
149 events.addEventListener("player-judging", event => {
150   const player = JSON.parse(event.data);
151
152   window.game.set_player_judging(player);
153 });
154
155 events.addEventListener("judging-idle", event => {
156   const value = JSON.parse(event.data);
157
158   window.game.set_judging_idle(value);
159 });
160
161 events.addEventListener("vote-end-judging", event => {
162   const player = JSON.parse(event.data);
163
164   window.game.set_player_vote_end_judging(player);
165 });
166
167 events.addEventListener("unvote-end-judging", event => {
168   const player = JSON.parse(event.data);
169
170   window.game.set_player_unvote_end_judging(player);
171 });
172
173 events.addEventListener("scores", event => {
174   const scores = JSON.parse(event.data);
175
176   window.game.set_scores(scores);
177 });
178
179 /*********************************************************
180  * Game and supporting classes                           *
181  *********************************************************/
182
183 function copy_to_clipboard(id)
184 {
185   const tmp = document.createElement("input");
186   tmp.setAttribute("value", document.getElementById(id).innerHTML);
187   document.body.appendChild(tmp);
188   tmp.select();
189   document.execCommand("copy");
190   document.body.removeChild(tmp);
191 }
192
193 const GameInfo = React.memo(props => {
194   if (! props.id)
195     return null;
196
197   return (
198     <div className="game-info">
199       <span className="game-id">{props.id}</span>
200       {" "}
201       Share this link to invite friends:{" "}
202       <span id="game-share-url">{props.url}</span>
203       {" "}
204       <button
205         className="inline"
206         onClick={() => copy_to_clipboard('game-share-url')}
207       >Copy Link</button>
208     </div>
209   );
210 });
211
212 const PlayerInfo = React.memo(props => {
213   if (! props.player.id)
214     return null;
215
216   const all_players = [props.player, ...props.other_players];
217
218   const sorted_players = all_players.sort((a,b) => {
219     return b.score - a.score;
220   });
221
222   const names_and_scores = sorted_players.map(player => {
223     if (player.score)
224       return `${player.name} (${player.score})`;
225     else
226       return player.name;
227   }).join(', ');
228
229   return (
230     <div className="player-info">
231       <span className="players-header">Players: </span>
232       <span>{names_and_scores}</span>
233     </div>
234   );
235 });
236
237 function fetch_method_json(method, api = '', data = {}) {
238   const response = fetch(api, {
239     method: method,
240     headers: {
241       'Content-Type': 'application/json'
242     },
243     body: JSON.stringify(data)
244   });
245   return response;
246 }
247
248 function fetch_post_json(api = '', data = {}) {
249   return fetch_method_json('POST', api, data);
250 }
251
252 async function fetch_put_json(api = '', data = {}) {
253   return fetch_method_json('PUT', api, data);
254 }
255
256 class CategoryRequest extends React.PureComponent {
257   constructor(props) {
258     super(props);
259     this.category = React.createRef();
260
261     this.handle_change = this.handle_change.bind(this);
262     this.handle_submit = this.handle_submit.bind(this);
263   }
264
265   handle_change(event) {
266     const category_input = this.category.current;
267     const category = category_input.value;
268
269     const match = category.match(/[0-9]+/);
270     if (match) {
271       const num_items = parseInt(match[0], 10);
272       if (num_items <= MAX_PROMPT_ITEMS)
273         category_input.setCustomValidity("");
274     }
275   }
276
277   async handle_submit(event) {
278     const form = event.currentTarget;
279     const category_input = this.category.current;
280     const category = category_input.value;
281
282     /* Prevent the default page-changing form-submission behavior. */
283     event.preventDefault();
284
285     const match = category.match(/[0-9]+/);
286     if (match === null) {
287       category_input.setCustomValidity("Category must include a number");
288       form.reportValidity();
289       return;
290     }
291
292     const num_items = parseInt(match[0], 10);
293
294     if (num_items > MAX_PROMPT_ITEMS) {
295       category_input.setCustomValidity(`Maximum number of items is ${MAX_PROMPT_ITEMS}`);
296       form.reportValidity();
297       return;
298     }
299
300     const response = await fetch_post_json("prompts", {
301       items: num_items,
302       prompt: category
303     });
304
305     if (response.status === 200) {
306       const result = await response.json();
307       if (! result.valid) {
308         add_message("danger", result.message);
309         return;
310       }
311     } else {
312       add_message("danger", "An error occurred submitting your category");
313     }
314
315     form.reset();
316   }
317
318   render() {
319     return (
320       <div className="category-request">
321         <h2>Submit a Category</h2>
322         <p>
323           Suggest a category to play. Don't forget to include the
324           number of items for each person to submit.
325         </p>
326
327         <form onSubmit={this.handle_submit} >
328           <div className="form-field large">
329             <input
330               type="text"
331               id="category"
332               placeholder="6 things at the beach"
333               required
334               autoComplete="off"
335               onChange={this.handle_change}
336               ref={this.category}
337             />
338           </div>
339
340           <div className="form-field large">
341             <button type="submit">
342               Send
343             </button>
344           </div>
345
346         </form>
347       </div>
348     );
349   }
350 }
351
352 const PromptOptions = React.memo(props => {
353
354   if (props.prompts.length === 0)
355     return null;
356
357   return (
358     <div className="prompt-options">
359       <h2>Vote on Categories</h2>
360       <p>
361         Select any categories below that you'd like to play.
362         You can choose as many as you'd like.
363       </p>
364       {props.prompts.map(p => {
365         return (
366           <button
367             className="vote-button"
368             key={p.id}
369             onClick={() => fetch_post_json(`vote/${p.id}`) }
370           >
371             {p.prompt}
372             <div className="vote-choices">
373               {p.votes.map(v => {
374                 return (
375                   <div
376                     key={v}
377                     className="vote-choice"
378                   >
379                     {v}
380                   </div>
381                 );
382               })}
383             </div>
384           </button>
385         );
386       })}
387     </div>
388   );
389 });
390
391 const LetsPlay = React.memo(props => {
392
393   const quorum = Math.round((props.num_players + 1) / 2);
394   const max_votes = props.prompts.reduce(
395     (max_so_far, v) => Math.max(max_so_far, v.votes.length), 0);
396
397   if (max_votes < quorum)
398     return null;
399
400   const candidates = props.prompts.filter(p => p.votes.length >= quorum);
401   const index = Math.floor(Math.random() * candidates.length);
402   const winner = candidates[index];
403
404   return (
405     <div className="lets-play">
406       <h2>Let's Play</h2>
407       <p>
408         That should be enough voting. If you're not waiting for any
409         other players to join, then let's start.
410       </p>
411       <button
412         className="lets-play"
413         onClick={() => fetch_post_json(`start/${winner.id}`) }
414       >
415         Start Game
416       </button>
417     </div>
418   );
419 });
420
421 class Ambiguities extends React.PureComponent {
422
423   constructor(props) {
424     super(props);
425
426     const word_sets = props.words.map(word => {
427       const set = new Set();
428       set.add(word);
429       return set;
430     });
431
432     this.state = {
433       word_sets: word_sets,
434       selected: null
435     };
436
437     this.submitted = false;
438     this.judging_sent_recently = false;
439   }
440
441   async handle_submit() {
442
443     /* Don't submit a second time. */
444     if (this.submitted)
445       return;
446
447     const response = await fetch_post_json(
448       `judged/${this.props.prompt.id}`,{
449         word_groups: this.state.word_sets.map(set => Array.from(set))
450       }
451     );
452
453     if (response.status === 200) {
454       const result = await response.json();
455       if (! result.valid) {
456         add_message("danger", result.message);
457         return;
458       }
459     } else {
460       add_message("danger", "An error occurred submitting the results of your judging");
461       return;
462     }
463
464     this.submitted = true;
465   }
466
467   handle_click(word) {
468
469     /* Let the server know we are doing some judging, (but rate limit
470      * this so we don't send a "judging" notification more frquently
471      * than necessary.
472      */
473     if (! this.judging_sent_recently) {
474       fetch_post_json(`judging/${this.props.prompt.id}`);
475       this.judging_sent_recently = true;
476       setTimeout(() => { this.judging_sent_recently = false; }, 1000);
477     }
478
479     if (this.state.selected == word) {
480       /* Second click on same word removes the word from the group. */
481       const idx = this.state.word_sets.findIndex(s => s.has(word));
482       const set = this.state.word_sets[idx];
483       if (set.size === 1) {
484         /* When the word is already alone, there's nothing to do but
485          * to un-select it. */
486         this.setState({
487           selected: null
488         });
489         return;
490       }
491
492       const new_set = new Set([...set].filter(w => w !== word));
493       this.setState({
494         selected: null,
495         word_sets: [...this.state.word_sets.slice(0, idx),
496                     new_set,
497                     new Set().add(word),
498                     ...this.state.word_sets.slice(idx+1)]
499       });
500     } else if (this.state.selected) {
501       /* Click of a second word groups the two together. */
502       const idx1 = this.state.word_sets.findIndex(s => s.has(this.state.selected));
503       const idx2 = this.state.word_sets.findIndex(s => s.has(word));
504       const set1 = this.state.word_sets[idx1];
505       const set2 = this.state.word_sets[idx2];
506       const new_set = new Set([...set2, ...set1]);
507       if (idx1 < idx2) {
508         this.setState({
509           selected: null,
510           word_sets: [...this.state.word_sets.slice(0, idx1),
511                       ...this.state.word_sets.slice(idx1 + 1, idx2),
512                       new_set,
513                       ...this.state.word_sets.slice(idx2 + 1)]
514         });
515       } else {
516         this.setState({
517           selected: null,
518           word_sets: [...this.state.word_sets.slice(0, idx2),
519                       new_set,
520                       ...this.state.word_sets.slice(idx2 + 1, idx1),
521                       ...this.state.word_sets.slice(idx1 + 1)]
522         });
523       }
524     } else {
525       /* First click of a word selects it. */
526       this.setState({
527         selected: word
528       });
529     }
530   }
531
532   render() {
533     let move_on_button = null;
534
535     if (this.props.idle) {
536       move_on_button = (
537         <button
538           className="vote-button"
539           onClick={() => fetch_post_json(`end-judging/${this.props.prompt.id}`) }
540         >
541           Move On
542           <div className="vote-choices">
543             {[...this.props.votes].map(v => {
544               return (
545                 <div
546                   key={v}
547                   className="vote-choice"
548                 >
549                   {v}
550                   </div>
551               );
552             })}
553           </div>
554         </button>
555       );
556     }
557
558     if (this.props.players_judged.has(this.props.player.name)) {
559       return (
560         <div className="please-wait">
561           <h2>Submission received</h2>
562           <p>
563             The following players have completed judging:
564             {[...this.props.players_judged].join(', ')}
565           </p>
566           <p>
567             Still waiting for the following players:
568           </p>
569           <ul>
570             {Object.keys(this.props.players_judging).map(player => {
571               return (
572                 <li
573                   key={player}
574                 >
575                   {player}
576                   {this.props.players_judging[player] ?
577                    <span className="typing"/> : null }
578                 </li>
579               );
580             })}
581           </ul>
582           {move_on_button}
583
584         </div>
585       );
586     }
587
588     const btn_class = "ambiguity-button";
589     const btn_selected_class = btn_class + " selected";
590
591     return (
592       <div className="ambiguities">
593         <h2>Judging Answers</h2>
594         <p>
595           Click on each pair of answers that should be scored as equivalent,
596           (and click any word twice to split it out from a group). Remember,
597           what goes around comes around, so it's best to be generous when
598           judging.
599         </p>
600         {this.state.word_sets.map(set => {
601           return (
602             <div
603               className="ambiguity-group"
604               key={Array.from(set)[0]}
605             >
606               {Array.from(set).map(word => {
607                 return (
608                   <button
609                     className={this.state.selected === word ?
610                                btn_selected_class : btn_class }
611                     key={word}
612                     onClick={() => this.handle_click(word)}
613                   >
614                     {word}
615                   </button>
616                 );
617               })}
618             </div>
619           );
620         })}
621         <p>
622           Click here when done judging:<br/>
623           <button
624             onClick={() => this.handle_submit()}
625           >
626             Send
627           </button>
628         </p>
629       </div>
630     );
631   }
632 }
633
634 class ActivePrompt extends React.PureComponent {
635
636   constructor(props) {
637     super(props);
638     const items = props.prompt.items;
639
640     this.submitted = false;
641
642     this.answers = [...Array(items)].map(() => React.createRef());
643     this.answering_sent_recently = false;
644
645     this.handle_submit = this.handle_submit.bind(this);
646     this.handle_change = this.handle_change.bind(this);
647   }
648
649   handle_change(event) {
650     /* We don't care (or even look) at what the player is typing at
651      * this point. We simply want to be informed that the player _is_
652      * typing so that we can tell the server (which will tell other
653      * players) that there is activity here.
654      */
655
656     /* Rate limit so that we don't send an "answering" notification
657      * more frequently than necessary.
658      */
659     if (! this.answering_sent_recently) {
660       fetch_post_json(`answering/${this.props.prompt.id}`);
661       this.answering_sent_recently = true;
662       setTimeout(() => { this.answering_sent_recently = false; }, 1000);
663     }
664   }
665
666   async handle_submit(event) {
667     const form = event.currentTarget;
668
669     /* Prevent the default page-changing form-submission behavior. */
670     event.preventDefault();
671
672     /* And don't submit a second time. */
673     if (this.submitted)
674       return;
675
676     const response = await fetch_post_json(`answer/${this.props.prompt.id}`, {
677       answers: this.answers.map(r => r.current.value)
678     });
679     if (response.status === 200) {
680       const result = await response.json();
681       if (! result.valid) {
682         add_message("danger", result.message);
683         return;
684       }
685     } else {
686       add_message("danger", "An error occurred submitting your answers");
687       return;
688     }
689
690     /* Everything worked. Server is happy with our answers. */
691     form.reset();
692     this.submitted = true;
693   }
694
695   render() {
696     let move_on_button = null;
697     if (this.props.idle) {
698       move_on_button =(
699         <button
700           className="vote-button"
701           onClick={() => fetch_post_json(`end-answers/${this.props.prompt.id}`) }
702         >
703           Move On
704           <div className="vote-choices">
705             {[...this.props.votes].map(v => {
706               return (
707                 <div
708                   key={v}
709                   className="vote-choice"
710                 >
711                   {v}
712                 </div>
713               );
714             })}
715           </div>
716         </button>
717       );
718     }
719
720     if (this.props.players_answered.has(this.props.player.name)) {
721       return (
722         <div className="please-wait">
723           <h2>Submission received</h2>
724           <p>
725             The following players have submitted their answers:
726             {[...this.props.players_answered].join(', ')}
727           </p>
728           <p>
729           Still waiting for the following players:
730           </p>
731           <ul>
732             {Object.keys(this.props.players_answering).map(player => {
733               return (
734                 <li
735                   key={player}
736                 >
737                   {player}
738                   {this.props.players_answering[player] ?
739                    <span className="typing"/> : null }
740                 </li>
741               );
742             })}
743           </ul>
744           {move_on_button}
745
746         </div>
747       );
748     }
749
750     return (
751       <div className="active-prompt">
752         <h2>The Game of Empathy</h2>
753         <p>
754           Remember, you're trying to match your answers with
755           what the other players submit.
756           Give {this.props.prompt.items} answers for the following prompt:
757         </p>
758         <h2>{this.props.prompt.prompt}</h2>
759         <form onSubmit={this.handle_submit}>
760           {[...Array(this.props.prompt.items)].map((whocares,i) => {
761             return (
762               <div
763                 key={i}
764                 className="form-field large">
765                 <input
766                   type="text"
767                   name={`answer_${i}`}
768                   required
769                   autoComplete="off"
770                   onChange={this.handle_change}
771                   ref={this.answers[i]}
772                 />
773               </div>
774             );
775           })}
776
777           <div
778             key="submit-button"
779             className="form-field large">
780             <button type="submit">
781               Send
782             </button>
783           </div>
784
785         </form>
786       </div>
787     );
788   }
789 }
790
791 class Game extends React.PureComponent {
792   constructor(props) {
793     super(props);
794     this.state = {
795       game_info: {},
796       player_info: {},
797       other_players: [],
798       prompts: [],
799       active_prompt: null,
800       players_answered: new Set(),
801       players_answering: {},
802       answering_idle: false,
803       end_answers_votes: new Set(),
804       ambiguities: null,
805       players_judged: new Set(),
806       players_judging: {},
807       judging_idle: false,
808       end_judging_votes: new Set(),
809       scores: null,
810       ready: false
811     };
812   }
813
814   set_game_info(info) {
815     this.setState({
816       game_info: info
817     });
818   }
819
820   set_player_info(info) {
821     this.setState({
822       player_info: info
823     });
824   }
825
826   set_other_player_info(info) {
827     const other_players_copy = [...this.state.other_players];
828     const idx = other_players_copy.findIndex(o => o.id === info.id);
829     if (idx >= 0) {
830       other_players_copy[idx] = info;
831     } else {
832       other_players_copy.push(info);
833     }
834     this.setState({
835       other_players: other_players_copy
836     });
837   }
838
839   remove_player(info) {
840     this.setState({
841       other_players: this.state.other_players.filter(o => o.id !== info.id)
842     });
843   }
844
845   reset_game_state() {
846     this.setState({
847       prompts: [],
848       active_prompt: null,
849       players_answered: new Set(),
850       players_answering: {},
851       answering_idle: false,
852       end_answers_votes: new Set(),
853       ambiguities: null,
854       players_judged: new Set(),
855       players_judging: {},
856       judging_idle: false,
857       end_judging_votes: new Set(),
858       scores: null,
859       ready: false
860     });
861   }
862
863   set_prompts(prompts) {
864     this.setState({
865       prompts: prompts
866     });
867   }
868
869   add_or_update_prompt(prompt) {
870     const prompts_copy = [...this.state.prompts];
871     const idx = prompts_copy.findIndex(p => p.id === prompt.id);
872     if (idx >= 0) {
873       prompts_copy[idx] = prompt;
874     } else {
875       prompts_copy.push(prompt);
876     }
877     this.setState({
878       prompts: prompts_copy
879     });
880   }
881
882   set_active_prompt(prompt) {
883     this.setState({
884       active_prompt: prompt
885     });
886   }
887
888   set_players_answered(players) {
889     this.setState({
890       players_answered: new Set(players)
891     });
892   }
893
894   set_player_answered(player) {
895     const new_players_answering = {...this.state.players_answering};
896     delete new_players_answering[player];
897
898     this.setState({
899       players_answered: new Set([...this.state.players_answered, player]),
900       players_answering: new_players_answering
901     });
902   }
903
904   set_players_answering(players) {
905     const players_answering = {};
906     for (let player of players) {
907       players_answering[player] = {active: false};
908     }
909     this.setState({
910       players_answering: players_answering
911     });
912   }
913
914   set_player_answering(player) {
915     this.setState({
916       players_answering: {
917         ...this.state.players_answering,
918         [player]: {active: true}
919       }
920     });
921   }
922
923   set_answering_idle(value) {
924     this.setState({
925       answering_idle: value
926     });
927   }
928
929   set_end_answers(players) {
930     this.setState({
931       end_answers_votes: new Set(players)
932     });
933   }
934
935   set_player_vote_end_answers(player) {
936     this.setState({
937       end_answers_votes: new Set([...this.state.end_answers_votes, player])
938     });
939   }
940
941   set_player_unvote_end_answers(player) {
942     this.setState({
943       end_answers_votes: new Set([...this.state.end_answers_votes].filter(p => p !== player))
944     });
945   }
946
947   set_ambiguities(ambiguities) {
948     this.setState({
949       ambiguities: ambiguities
950     });
951   }
952
953   set_players_judged(players) {
954     this.setState({
955       players_judged: new Set(players)
956     });
957   }
958
959   set_player_judged(player) {
960     const new_players_judging = {...this.state.players_judging};
961     delete new_players_judging[player];
962
963     this.setState({
964       players_judged: new Set([...this.state.players_judged, player]),
965       players_judging: new_players_judging
966     });
967   }
968
969   set_players_judging(players) {
970     const players_judging = {};
971     for (let player of players) {
972       players_judging[player] = {active: false};
973     }
974     this.setState({
975       players_judging: players_judging
976     });
977   }
978
979   set_player_judging(player) {
980     this.setState({
981       players_judging: {
982         ...this.state.players_judging,
983         [player]: {active: true}
984       }
985     });
986   }
987
988   set_judging_idle(value) {
989     this.setState({
990       judging_idle: value
991     });
992   }
993
994   set_end_judging(players) {
995     this.setState({
996       end_judging_votes: new Set(players)
997     });
998   }
999
1000   set_player_vote_end_judging(player) {
1001     this.setState({
1002       end_judging_votes: new Set([...this.state.end_judging_votes, player])
1003     });
1004   }
1005
1006   set_player_unvote_end_judging(player) {
1007     this.setState({
1008       end_judging_votes: new Set([...this.state.end_judging_votes].filter(p => p !== player))
1009     });
1010   }
1011
1012   set_scores(scores) {
1013     this.setState({
1014       scores: scores
1015     });
1016   }
1017
1018   state_ready() {
1019     this.setState({
1020       ready: true
1021     });
1022   }
1023
1024   render() {
1025     const state = this.state;
1026     const players_total = 1 + state.other_players.length;
1027
1028     if (state.scores) {
1029       return (
1030         <div className="scores">
1031           <h2>Scores</h2>
1032           <ul>
1033             {state.scores.scores.map(score => {
1034               return (
1035                 <li key={score.player}>
1036                   {score.player}: {score.score}
1037                 </li>
1038               );
1039             })}
1040           </ul>
1041           <h2>Words submitted</h2>
1042           <ul>
1043             {state.scores.words.map(word => {
1044               return (
1045                 <li key={word.word}>
1046                   {`${word.word}: ${word.players.join(', ')}`}
1047                 </li>
1048               );
1049             })}
1050           </ul>
1051           <button
1052             className="new-game"
1053             onClick={() => fetch_post_json('reset') }
1054           >
1055             New Game
1056           </button>
1057         </div>
1058       );
1059     }
1060
1061     if (state.ambiguities){
1062       return <Ambiguities
1063                prompt={state.active_prompt}
1064                words={state.ambiguities}
1065                player={state.player_info}
1066                players_judged={state.players_judged}
1067                players_judging={state.players_judging}
1068                idle={state.judging_idle}
1069                votes={state.end_judging_votes}
1070              />;
1071     }
1072
1073     if (state.active_prompt) {
1074       return <ActivePrompt
1075                prompt={state.active_prompt}
1076                player={state.player_info}
1077                players_answered={state.players_answered}
1078                players_answering={state.players_answering}
1079                idle={state.answering_idle}
1080                votes={state.end_answers_votes}
1081              />;
1082     }
1083
1084     if (! state.ready)
1085       return null;
1086
1087     return [
1088       <GameInfo
1089         key="game-info"
1090         id={state.game_info.id}
1091         url={state.game_info.url}
1092       />,
1093       <PlayerInfo
1094         key="player-info"
1095         game={this}
1096         player={state.player_info}
1097         other_players={state.other_players}
1098       />,
1099       <p key="spacer"></p>,
1100       <CategoryRequest
1101         key="category-request"
1102       />,
1103       <PromptOptions
1104         key="prompts"
1105         prompts={state.prompts}
1106       />,
1107       <LetsPlay
1108         key="lets-play"
1109         num_players={1+state.other_players.length}
1110         prompts={state.prompts}
1111       />
1112     ];
1113   }
1114 }
1115
1116 ReactDOM.render(<Game
1117                   ref={(me) => window.game = me}
1118                 />, document.getElementById("empathy"));