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 function CategoryRequest(props) {
 126   return (
 127     <div className="category-request">
 128       <h2>Submit a Category</h2>
 129       <p>
 130           Suggest a category to play with your friends. Don't forget to
 131           include the number of items for each person to submit.
 132       </p>
 133
 134       <form>
 135         <div className="form-field large">
 136           <input
 137             type="text"
 138             id="category"
 139             placeholder="6 things at the beach"
 140             required pattern=".*[0-9]+.*"
 141             title="Category must contain a number"
 142           >
 143           </input>
 144         </div>
 145
 146         <div className="form-field large">
 147           <button type="submit">
 148             Send
 149           </button>
 150         </div>
 151
 152       </form>
 153     </div>
 154   );
 155 }
 156
 157 class Game extends React.Component {
 158   constructor(props) {
 159     super(props);
 160     this.state = {
 161       game_info: {},
 162       player_info: {},
 163       other_players: [],
 164     };
 165   }
 166
 167   set_game_info(info) {
 168     this.setState({
 169       game_info: info
 170     });
 171   }
 172
 173   set_player_info(info) {
 174     this.setState({
 175       player_info: info
 176     });
 177   }
 178
 179   set_other_player_info(info) {
 180     const other_players_copy = [...this.state.other_players];
 181     const idx = other_players_copy.findIndex(o => o.id === info.id);
 182     if (idx >= 0) {
 183       other_players_copy[idx] = info;
 184     } else {
 185       other_players_copy.push(info);
 186     }
 187     this.setState({
 188       other_players: other_players_copy
 189     });
 190   }
 191
 192   render() {
 193     const state = this.state;
 194
 195     return [
 196       <GameInfo
 197         key="game-info"
 198         id={state.game_info.id}
 199         url={state.game_info.url}
 200       />,
 201       <PlayerInfo
 202         key="player-info"
 203         game={this}
 204         player={state.player_info}
 205         other_players={state.other_players}
 206       />,
 207       <p key="spacer"></p>,
 208       <CategoryRequest
 209         key="category-request"
 210       />
 211     ];
 212   }
 213 }
 214
 215 ReactDOM.render(<Game
 216                   ref={(me) => window.game = me}
 217                 />, document.getElementById("empathy"));