X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=5782b7879076bdd8812bccffc58a281b63760d5b;hp=e887b1b8b9b1af33ddc76aa751613f66a2253205;hb=5d49d1235592034458ce875b5d73d024ef23355d;hpb=49d80bcfff46b8d9efa846decf9415e43ea354f5 diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx index e887b1b..5782b78 100644 --- a/empathy/empathy.jsx +++ b/empathy/empathy.jsx @@ -363,6 +363,45 @@ class CategoryRequest extends React.PureComponent { } } +const PromptOption = React.memo(props => { + + const prompt = props.prompt; + + if (prompt.votes_against.find(v => v === props.player.name)) + return false; + + return ( + + ); +}); + const PromptOptions = React.memo(props => { if (props.prompts.length === 0) @@ -375,29 +414,13 @@ const PromptOptions = React.memo(props => { Select any categories below that you'd like to play. You can choose as many as you'd like.

- {props.prompts.map(p => { - return ( - - ); - })} + {props.prompts.map( + prompt => + )} ); }); @@ -437,15 +460,34 @@ class Ambiguities extends React.PureComponent { constructor(props) { super(props); - const word_sets = props.words.map(word => { - const set = new Set(); - set.add(word); - return set; - }); + function canonize(word) { + return word.replace(/((a|an|the) )?(.*?)s?$/i, '$3'); + } + + const word_sets = []; + + for (let word of props.words) { + const word_canon = canonize(word); + let found_match = false; + for (let set of word_sets) { + const set_canon = canonize(set.values().next().value); + if (word_canon === set_canon) { + set.add(word); + found_match = true;; + break; + } + } + if (! found_match) { + const set = new Set(); + set.add(word); + word_sets.push(set); + } + } this.state = { word_sets: word_sets, - selected: null + selected: null, + starred: null }; this.submitted = false; @@ -460,7 +502,8 @@ class Ambiguities extends React.PureComponent { const response = await fetch_post_json( `judged/${this.props.prompt.id}`,{ - word_groups: this.state.word_sets.map(set => Array.from(set)) + word_groups: this.state.word_sets.map(set => Array.from(set)), + kudos: Array.from(this.state.starred) } ); @@ -572,26 +615,33 @@ class Ambiguities extends React.PureComponent { let still_waiting = null; const judging_players = Object.keys(this.props.players_judging); if (judging_players.length) { - still_waiting = [ -

- Still waiting for the following player - {judging_players.length > 1 ? 's' : '' } - : -

, - - ]; + still_waiting = ( +
+

+ Still waiting for the following player + {judging_players.length > 1 ? 's' : '' } + : +

+ +
+ ); } if (this.props.players_judged.has(this.props.player.name)) { @@ -640,6 +690,21 @@ class Ambiguities extends React.PureComponent { ); })} + { + event.stopPropagation(); + this.setState({ + starred: set + }); + }} + > + {this.state.starred === set ? + '★' : '☆' + } + ); })} @@ -745,26 +810,33 @@ class ActivePrompt extends React.PureComponent { let still_waiting = null; const answering_players = Object.keys(this.props.players_answering);; if (answering_players.length) { - still_waiting = [ -

- Still waiting for the following player - {answering_players.length > 1 ? 's' : ''} - : -

, - - ]; + still_waiting = ( +
+

+ Still waiting for the following player + {answering_players.length > 1 ? 's' : ''} + : +

+ +
+ ); } if (this.props.players_answered.has(this.props.player.name)) { @@ -950,12 +1022,29 @@ class Game extends React.PureComponent { } set_player_answering(player) { + /* Set the player as actively answering now. */ this.setState({ players_answering: { ...this.state.players_answering, [player]: {active: true} } }); + /* And arrange to have them marked idle very shortly. + * + * Note: This timeout is intentionally very, very short. We only + * need it long enough that the browser has latched onto the state + * change to "active" above. We actually use a CSS transition + * delay to control the user-perceptible length of time after + * which an active player appears inactive. + */ + setTimeout(() => { + this.setState({ + players_answering: { + ...this.state.players_answering, + [player]: {active: false} + } + }); + }, 100); } set_answering_idle(value) { @@ -1015,12 +1104,30 @@ class Game extends React.PureComponent { } set_player_judging(player) { + /* Set the player as actively judging now. */ this.setState({ players_judging: { ...this.state.players_judging, [player]: {active: true} } }); + /* And arrange to have them marked idle very shortly. + * + * Note: This timeout is intentionally very, very short. We only + * need it long enough that the browser has latched onto the state + * change to "active" above. We actually use a CSS transition + * delay to control the user-perceptible length of time after + * which an active player appears inactive. + */ + setTimeout(() => { + this.setState({ + players_judging: { + ...this.state.players_judging, + [player]: {active: false} + } + }); + }, 100); + } set_judging_idle(value) { @@ -1082,15 +1189,29 @@ class Game extends React.PureComponent { const players_total = 1 + state.other_players.length; if (state.scores) { + + let perfect_score = 0; + for (let i = 0; + i < state.active_prompt.items && + i < state.scores.words.length; + i++) + { + perfect_score += state.scores.words[i].players.length; + } + return (

{state.active_prompt.prompt}

Scores