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