X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=54d6c2660975aac30c9376ba05cff1c4feef3048;hp=1ee8000ab09376e7557b2dcdcdee3d844bde1963;hb=3c2c043c4a6e389a597736c9fd366b716ac7237c;hpb=b0b2d2d5dd5c3bac29537e2f5b206208f0a43898 diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx index 1ee8000..54d6c26 100644 --- a/empathy/empathy.jsx +++ b/empathy/empathy.jsx @@ -52,6 +52,40 @@ events.addEventListener("player-update", event => { window.game.set_other_player_info(info); }); +events.addEventListener("game-state", event => { + const state = JSON.parse(event.data); + + window.game.set_prompts(state.prompts); + + window.game.set_active_prompt(state.active_prompt); + + window.game.set_scores(state.scores); +}); + +events.addEventListener("prompt", event => { + const prompt = JSON.parse(event.data); + + window.game.add_or_update_prompt(prompt); +}); + +events.addEventListener("start", event => { + const prompt = JSON.parse(event.data); + + window.game.set_active_prompt(prompt); +}); + +events.addEventListener("answered", event => { + const players_answered = JSON.parse(event.data); + + window.game.set_players_answered(players_answered); +}); + +events.addEventListener("scores", event => { + const scores = JSON.parse(event.data); + + window.game.set_scores(scores); +}); + /********************************************************* * Game and supporting classes * *********************************************************/ @@ -66,7 +100,7 @@ function copy_to_clipboard(id) document.body.removeChild(tmp); } -function GameInfo(props) { +const GameInfo = React.memo(props => { if (! props.id) return null; @@ -83,9 +117,9 @@ function GameInfo(props) { >Copy Link ); -} +}); -function PlayerInfo(props) { +const PlayerInfo = React.memo(props => { if (! props.player.id) return null; @@ -101,7 +135,7 @@ function PlayerInfo(props) { ))} ); -} +}); function fetch_method_json(method, api = '', data = {}) { const response = fetch(api, { @@ -122,7 +156,7 @@ async function fetch_put_json(api = '', data = {}) { return fetch_method_json('PUT', api, data); } -class CategoryRequest extends React.Component { +class CategoryRequest extends React.PureComponent { constructor(props) { super(props); this.category = React.createRef(); @@ -140,19 +174,26 @@ class CategoryRequest extends React.Component { } handle_submit(event) { + const form = event.currentTarget; const category_input = this.category.current; const category = category_input.value; /* Prevent the default page-changing form-submission behavior. */ event.preventDefault(); - if (! /[0-9]/.test(category)) { + const match = category.match(/[0-9]+/); + if (match === null) { category_input.setCustomValidity("Category must include a number"); - event.currentTarget.reportValidity(); + form.reportValidity(); return; } - console.log("Do something here with category: " + category); + fetch_post_json("prompts", { + items: parseInt(match[0], 10), + prompt: category + }); + + form.reset(); } render() { @@ -160,8 +201,8 @@ class CategoryRequest extends React.Component {
- Suggest a category to play with your friends. Don't forget to - include the number of items for each person to submit. + Suggest a category to play. Don't forget to include the + number of items for each person to submit.