git.cworth.org Git - lmno.games/blob - empathy/empathy.jsx

   1 function undisplay(element) {
   2   element.style.display="none";
   3 }
   4
   5 function add_message(severity, message) {
   6   message = `<div class="message ${severity}" onclick="undisplay(this)">
   7 <span class="hide-button" onclick="undisplay(this.parentElement)">&times;</span>
   8 ${message}
   9 </div>`;
  10   const message_area = document.getElementById('message-area');
  11   message_area.insertAdjacentHTML('beforeend', message);
  12 }
  13
  14 /*********************************************************
  15  * Handling server-sent event stream                     *
  16  *********************************************************/
  17
  18 const events = new EventSource("events");
  19
  20 events.onerror = function(event) {
  21   if (event.target.readyState === EventSource.CLOSED) {
  22     setTimeout(() => {
  23       add_message("danger", "Connection to server lost.");
  24     }, 1000);
  25   }
  26 };
  27
  28 events.addEventListener("game-info", event => {
  29   const info = JSON.parse(event.data);
  30
  31   window.game.set_game_info(info);
  32 });
  33
  34 events.addEventListener("player-info", event => {
  35   const info = JSON.parse(event.data);
  36
  37   window.game.set_player_info(info);
  38 });
  39
  40 events.addEventListener("player-enter", event => {
  41   const info = JSON.parse(event.data);
  42
  43   window.game.set_other_player_info(info);
  44 });
  45
  46 events.addEventListener("player-update", event => {
  47   const info = JSON.parse(event.data);
  48
  49   if (info.id === window.game.state.player_info.id)
  50     window.game.set_player_info(info);
  51   else
  52     window.game.set_other_player_info(info);
  53 });
  54
  55 events.addEventListener("game-state", event => {
  56   const state = JSON.parse(event.data);
  57
  58   for (let prompt of state.prompts) {
  59     window.game.add_or_update_prompt(prompt);
  60   }
  61 });
  62
  63 events.addEventListener("prompt", event => {
  64   const prompt = JSON.parse(event.data);
  65
  66   window.game.add_or_update_prompt(prompt);
  67 });
  68
  69 /*********************************************************
  70  * Game and supporting classes                           *
  71  *********************************************************/
  72
  73 function copy_to_clipboard(id)
  74 {
  75   const tmp = document.createElement("input");
  76   tmp.setAttribute("value", document.getElementById(id).innerHTML);
  77   document.body.appendChild(tmp);
  78   tmp.select();
  79   document.execCommand("copy");
  80   document.body.removeChild(tmp);
  81 }
  82
  83 function GameInfo(props) {
  84   if (! props.id)
  85     return null;
  86
  87   return (
  88     <div className="game-info">
  89       <span className="game-id">{props.id}</span>
  90       {" "}
  91       Share this link to invite friends:{" "}
  92       <span id="game-share-url">{props.url}</span>
  93       {" "}
  94       <button
  95         className="inline"
  96         onClick={() => copy_to_clipboard('game-share-url')}
  97       >Copy Link</button>
  98     </div>
  99   );
 100 }
 101
 102 function PlayerInfo(props) {
 103   if (! props.player.id)
 104     return null;
 105
 106   return (
 107     <div className="player-info">
 108       <span className="players-header">Players: </span>
 109       {props.player.name}
 110       {props.other_players.map(other => (
 111         <span key={other.id}>
 112           {", "}
 113           {other.name}
 114         </span>
 115       ))}
 116     </div>
 117   );
 118 }
 119
 120 function fetch_method_json(method, api = '', data = {}) {
 121   const response = fetch(api, {
 122     method: method,
 123     headers: {
 124       'Content-Type': 'application/json'
 125     },
 126     body: JSON.stringify(data)
 127   });
 128   return response;
 129 }
 130
 131 function fetch_post_json(api = '', data = {}) {
 132   return fetch_method_json('POST', api, data);
 133 }
 134
 135 async function fetch_put_json(api = '', data = {}) {
 136   return fetch_method_json('PUT', api, data);
 137 }
 138
 139 class CategoryRequest extends React.Component {
 140   constructor(props) {
 141     super(props);
 142     this.category = React.createRef();
 143
 144     this.handle_change = this.handle_change.bind(this);
 145     this.handle_submit = this.handle_submit.bind(this);
 146   }
 147
 148   handle_change(event) {
 149     const category_input = this.category.current;
 150     const category = category_input.value;
 151
 152     if (/[0-9]/.test(category))
 153       category_input.setCustomValidity("");
 154   }
 155
 156   handle_submit(event) {
 157     const form = event.currentTarget;
 158     const category_input = this.category.current;
 159     const category = category_input.value;
 160
 161     /* Prevent the default page-changing form-submission behavior. */
 162     event.preventDefault();
 163
 164     const match = category.match(/[0-9]+/);
 165     if (match === null) {
 166       category_input.setCustomValidity("Category must include a number");
 167       form.reportValidity();
 168       return;
 169     }
 170
 171     fetch_post_json("prompts", {
 172       items: parseInt(match[0], 10),
 173       prompt: category
 174     });
 175
 176     form.reset();
 177   }
 178
 179   render() {
 180     return (
 181       <div className="category-request">
 182         <h2>Submit a Category</h2>
 183         <p>
 184           Suggest a category to play. Don't forget to include the
 185           number of items for each person to submit.
 186         </p>
 187
 188         <form onSubmit={this.handle_submit} >
 189           <div className="form-field large">
 190             <input
 191               type="text"
 192               id="category"
 193               placeholder="6 things at the beach"
 194               required
 195               autoComplete="off"
 196               onChange={this.handle_change}
 197               ref={this.category}
 198             />
 199           </div>
 200
 201           <div className="form-field large">
 202             <button type="submit">
 203               Send
 204             </button>
 205           </div>
 206
 207         </form>
 208       </div>
 209     );
 210   }
 211 }
 212
 213 function PromptOptions(props) {
 214
 215   function handle_click(id) {
 216     fetch_post_json(`vote/${id}`);
 217   }
 218
 219   if (props.prompts.length === 0)
 220     return null;
 221
 222   return (
 223     <div className="prompt-options">
 224       <h2>Vote on Categories</h2>
 225       <p>
 226         Select any categories below that you'd like to play.
 227         You can choose as many as you'd like.
 228       </p>
 229       {props.prompts.map(p => {
 230         return (
 231           <button
 232             className="vote-button"
 233             key={p.id}
 234             onClick={() => handle_click(p.id)}
 235           >
 236             {p.prompt}
 237           </button>
 238         );
 239       })}
 240     </div>
 241   );
 242 }
 243
 244 class Game extends React.Component {
 245   constructor(props) {
 246     super(props);
 247     this.state = {
 248       game_info: {},
 249       player_info: {},
 250       other_players: [],
 251       prompts: []
 252     };
 253   }
 254
 255   set_game_info(info) {
 256     this.setState({
 257       game_info: info
 258     });
 259   }
 260
 261   set_player_info(info) {
 262     this.setState({
 263       player_info: info
 264     });
 265   }
 266
 267   set_other_player_info(info) {
 268     const other_players_copy = [...this.state.other_players];
 269     const idx = other_players_copy.findIndex(o => o.id === info.id);
 270     if (idx >= 0) {
 271       other_players_copy[idx] = info;
 272     } else {
 273       other_players_copy.push(info);
 274     }
 275     this.setState({
 276       other_players: other_players_copy
 277     });
 278   }
 279
 280   add_or_update_prompt(prompt) {
 281     const prompts_copy = [...this.state.prompts];
 282     const idx = prompts_copy.findIndex(p => p.id === prompt.id);
 283     if (idx >= 0) {
 284       prompts_copy[idx] = prompt;
 285     } else {
 286       prompts_copy.push(prompt);
 287     }
 288     this.setState({
 289       prompts: prompts_copy
 290     });
 291   }
 292
 293   render() {
 294     const state = this.state;
 295
 296     return [
 297       <GameInfo
 298         key="game-info"
 299         id={state.game_info.id}
 300         url={state.game_info.url}
 301       />,
 302       <PlayerInfo
 303         key="player-info"
 304         game={this}
 305         player={state.player_info}
 306         other_players={state.other_players}
 307       />,
 308       <p key="spacer"></p>,
 309       <CategoryRequest
 310         key="category-request"
 311       />,
 312       <PromptOptions
 313         key="prompts"
 314         prompts={state.prompts}
 315       />
 316     ];
 317   }
 318 }
 319
 320 ReactDOM.render(<Game
 321                   ref={(me) => window.game = me}
 322                 />, document.getElementById("empathy"));