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 /*********************************************************
  56  * Game and supporting classes                           *
  57  *********************************************************/
  58
  59 function copy_to_clipboard(id)
  60 {
  61   const tmp = document.createElement("input");
  62   tmp.setAttribute("value", document.getElementById(id).innerHTML);
  63   document.body.appendChild(tmp);
  64   tmp.select();
  65   document.execCommand("copy");
  66   document.body.removeChild(tmp);
  67 }
  68
  69 function GameInfo(props) {
  70   if (! props.id)
  71     return null;
  72
  73   return (
  74     <div className="game-info">
  75       <span className="game-id">{props.id}</span>
  76       {" "}
  77       Share this link to invite friends:{" "}
  78       <span id="game-share-url">{props.url}</span>
  79       {" "}
  80       <button
  81         className="inline"
  82         onClick={() => copy_to_clipboard('game-share-url')}
  83       >Copy Link</button>
  84     </div>
  85   );
  86 }
  87
  88 function PlayerInfo(props) {
  89   if (! props.player.id)
  90     return null;
  91
  92   return (
  93     <div className="player-info">
  94       <span className="players-header">Players: </span>
  95       {props.player.name}
  96       {props.other_players.map(other => (
  97         <span key={other.id}>
  98           {", "}
  99           {other.name}
 100         </span>
 101       ))}
 102     </div>
 103   );
 104 }
 105
 106 function fetch_method_json(method, api = '', data = {}) {
 107   const response = fetch(api, {
 108     method: method,
 109     headers: {
 110       'Content-Type': 'application/json'
 111     },
 112     body: JSON.stringify(data)
 113   });
 114   return response;
 115 }
 116
 117 function fetch_post_json(api = '', data = {}) {
 118   return fetch_method_json('POST', api, data);
 119 }
 120
 121 async function fetch_put_json(api = '', data = {}) {
 122   return fetch_method_json('PUT', api, data);
 123 }
 124
 125 class CategoryRequest extends React.Component {
 126   constructor(props) {
 127     super(props);
 128   }
 129
 130   render() {
 131     return (
 132       <div className="category-request">
 133         <h2>Submit a Category</h2>
 134         <p>
 135           Suggest a category to play with your friends. Don't forget to
 136           include the number of items for each person to submit.
 137         </p>
 138
 139         <form>
 140           <div className="form-field large">
 141             <input
 142               type="text"
 143               id="category"
 144               placeholder="6 things at the beach"
 145               required pattern=".*[0-9]+.*"
 146               title="Category must contain a number"
 147               >
 148             </input>
 149           </div>
 150
 151           <div className="form-field large">
 152             <button type="submit">
 153               Send
 154             </button>
 155           </div>
 156
 157         </form>
 158       </div>
 159     );
 160   }
 161 }
 162
 163 class Game extends React.Component {
 164   constructor(props) {
 165     super(props);
 166     this.state = {
 167       game_info: {},
 168       player_info: {},
 169       other_players: [],
 170     };
 171   }
 172
 173   set_game_info(info) {
 174     this.setState({
 175       game_info: info
 176     });
 177   }
 178
 179   set_player_info(info) {
 180     this.setState({
 181       player_info: info
 182     });
 183   }
 184
 185   set_other_player_info(info) {
 186     const other_players_copy = [...this.state.other_players];
 187     const idx = other_players_copy.findIndex(o => o.id === info.id);
 188     if (idx >= 0) {
 189       other_players_copy[idx] = info;
 190     } else {
 191       other_players_copy.push(info);
 192     }
 193     this.setState({
 194       other_players: other_players_copy
 195     });
 196   }
 197
 198   render() {
 199     const state = this.state;
 200
 201     return [
 202       <GameInfo
 203         key="game-info"
 204         id={state.game_info.id}
 205         url={state.game_info.url}
 206       />,
 207       <PlayerInfo
 208         key="player-info"
 209         game={this}
 210         player={state.player_info}
 211         other_players={state.other_players}
 212       />,
 213       <p key="spacer"></p>,
 214       <CategoryRequest
 215         key="category-request"
 216       />
 217     ];
 218   }
 219 }
 220
 221 ReactDOM.render(<Game
 222                   ref={(me) => window.game = me}
 223                 />, document.getElementById("empathy"));