server sets playerId

Ephs05msm · Apr 18, 2017 · 150b202 · 150b202
1 parent 9b7c074
commit 150b202
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/components/game.js b/components/game.js
@@ -23,6 +23,7 @@ const Game = {
     socket: null,
     roomCode: null,
     joinField: 'Game Code',
+    playerId: null,
     stepNumber: 0,
     player1Score: 2,
     player2Score: 2,
@@ -54,20 +55,18 @@ const Game = {
 
   componentDidUpdate (prevProps, prevState) {
     const { xIsNext: prevTurn } = prevState
-    const { xIsNext, roomCode, history, stepNumber, socket } = this.state
+    const { xIsNext } = this.state
 
     if (prevTurn !== xIsNext) {
       socket.emit('player move', xIsNext)
     }
-    if (roomCode) {
-      socket.emit('game created', roomCode, history[stepNumber].squares)
-    }
   },
 
   render () {
     const {
       roomCode,
       joinField,
+      playerId,
       stepNumber,
       history,
       xIsNext,
@@ -103,14 +102,16 @@ const Game = {
             score={player1Score}
             side='left'
             xIsNext={xIsNext}
-            winner={winner} 
+            winner={winner}
+            playerId={playerId}
           />
           <Sidebar
             player='2'
             score={player2Score}
             side='right'
             xIsNext={xIsNext}
-            winner={winner} 
+            winner={winner}
+            playerId={playerId}
           />
           <MoveList
             roomCode={roomCode}

diff --git a/components/multiMenu.js b/components/multiMenu.js
@@ -9,7 +9,12 @@ const MultiMenu = {
   displayName: 'MultiMenu',
 
   render () {
-    const { roomCode, joinField, onClick, onFormClick, onChange } = this.props
+    const {
+      roomCode,
+      joinField,
+      onClick,
+      onFormClick,
+      onChange } = this.props
 
     if (!roomCode) {
       return (

diff --git a/mixins/multiplayer.js b/mixins/multiplayer.js
@@ -8,9 +8,14 @@ export default {
       alpha: true,
       casing: 'upper'
     })
+    const { history, stepNumber, socket } = this.state
 
-    this.setState({
-      roomCode: roomCode
+    socket.emit('game created', roomCode, history[stepNumber].squares)
+    socket.on('create success', (id) => {
+      this.setState({
+        roomCode: roomCode,
+        playerId: id
+      })
     })
   },
 
@@ -25,9 +30,10 @@ export default {
 
     socket.emit('join request', joinField)
 
-    socket.on('join success', () => {
+    socket.on('join success', (id) => {
       this.setState({
-        roomCode: joinField
+        roomCode: joinField,
+        playerId: id
       })
     })
 

diff --git a/server.js b/server.js
@@ -28,9 +28,10 @@ app.prepare().then(() => {
     })
 
     socket.on('game created', (code, squares) => {
-      socket.join(code, (err) => {
-        if (!gameSquares[code]) {
-          gameSquares[code] = squares
+      socket.join(code, (err) => { // join room named after code
+        if (!gameSquares[code]) { // game doesn't exist yet
+          gameSquares[code] = squares // create game key and save squares
+          socket.emit('create success', 2) // send back playerId of 2 (host moves last)
         }
       })
       console.log(gameSquares)
@@ -44,7 +45,7 @@ app.prepare().then(() => {
         } else if (clients.length === 0) { // game has no players
           socket.emit('no game')
         } else if (clients.length === 1) { // game has one player
-          socket.emit('join success')
+          socket.emit('join success', 1) // send back playerId of 1 (guest moves first)
         } else { // do nothing
           return null
         }