put in number field for giving clue, updates all views

callbacka · Nov 26, 2019 · 6a945be · 6a945be
1 parent f0c3434
commit 6a945be
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/client/components/Hand.js b/client/components/Hand.js
@@ -5,7 +5,8 @@ export default class Hand extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      clue: ''
+      clue: '',
+      clueNum: ''
     }
     this.handleChange = this.handleChange.bind(this)
     this.giveClue = this.giveClue.bind(this)
@@ -14,7 +15,12 @@ export default class Hand extends React.Component {
 
   giveClue = evt => {
     evt.preventDefault()
-    socket.emit('give clue', this.props.room, this.state.clue)
+    socket.emit(
+      'give clue',
+      this.props.room,
+      this.state.clue,
+      this.state.clueNum
+    )
   }
 
   handleChange(evt) {
@@ -41,14 +47,22 @@ export default class Hand extends React.Component {
               onChange={this.handleChange}
               value={this.state.clue}
             />
+            <label htmlFor="clue">Number:</label>
+            <input
+              name="clueNum"
+              type="number"
+              autoComplete="off"
+              onChange={this.handleChange}
+              value={this.state.clueNum}
+            />
             <button type="submit">Submit</button>
           </form>
         )
       } else {
         return (
           <div id="hand-bottom">
-            Your codemaster gave the clue {this.props.currentClue.clue} Please
-            select your guesses.{' '}
+            Your codemaster gave the clue {this.props.currentClue.clue} for{' '}
+            {this.props.currentClue.clueNum}. Please select your guesses.{' '}
             <button type="button" onClick={this.handleClick}>
               Change turn
             </button>
@@ -68,7 +82,8 @@ export default class Hand extends React.Component {
       return (
         <div id="hand-bottom">
           Player {this.props.currentClue.player} gave the clue{' '}
-          {this.props.currentClue.clue} Waiting for{' '}
+          {this.props.currentClue.clue} for {this.props.currentClue.clueNum}.
+          Waiting for the
           {this.props.currentPlayer.team} {this.props.currentPlayer.role} to
           submit their guesses.
         </div>

diff --git a/server/classes/deck.js b/server/classes/deck.js
@@ -13,6 +13,7 @@ class deck {
     this.shuffleColors()
   }
 
+  // will need to populate the array below with a randomized selection of 25 words.
   shuffleWords() {
     const shuffled = [
       'a',

diff --git a/server/socket/index.js b/server/socket/index.js
@@ -64,11 +64,12 @@ module.exports = io => {
       socket.emit('guesser view', rooms[roomName].deck.words)
     })
 
-    socket.on('give clue', (roomName, clue) => {
+    socket.on('give clue', (roomName, clue, clueNum) => {
       const {player} = rooms[roomName].players.filter(
         client => client.id === socket.id
       )[0]
       rooms[roomName].boardstate.currentClue.clue = clue
+      rooms[roomName].boardstate.currentClue.clueNum = clueNum
       rooms[roomName].boardstate.currentClue.player = player
       rooms[roomName].boardstate.activePlayer =
         rooms[roomName].boardstate.activePlayer % 4 + 1