From b29dd89688b4d0fdda6da09f6b5843a57778b6e3 Mon Sep 17 00:00:00 2001
From: Cain Hall <cain.hall98@gmail.com>
Date: Thu, 13 Sep 2018 19:33:54 +1000
Subject: [PATCH 1/4] [wip] - Move player functionality to Room component,
 player join and selection redo start

---
 src/App.vue              |  1 +
 src/components/Board.vue | 55 +++---------------------
 src/components/Lobby.vue | 17 ++++----
 src/components/Room.vue  | 90 +++++++++++++++++++++++++++++++++++++++-
 src/components/block.vue |  4 +-
 5 files changed, 105 insertions(+), 62 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 54a6d34..64fa47f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@ export default {
 body{
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-weight: 500;
+    font-size: 16px;
 }
 #app {
   -webkit-font-smoothing: antialiased;
diff --git a/src/components/Board.vue b/src/components/Board.vue
index 9c2be52..859d658 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -1,14 +1,6 @@
 <template>
   <div>
     <div class="container" :class="{ active: activeBlock !== false}">
-
-      <!-- Player information -->
-      <div class="player-info">
-        Player ID: {{ player.id }} <br />
-        Team: {{ player.team }} <br />
-        <button @click="leaveRoom()">leave game</button>
-      </div>
-
       <!-- Click Overlay -->
       <div class="click-overlay" v-if="activeBlock" @click="unselect()">
       </div>
@@ -39,7 +31,7 @@
 import intersectionWith from 'lodash/intersectionWith'
 import isEqual from 'lodash/isEqual'
 import cursorPosition from '../utilities/cursorPosition'
-import roomService from '../services/room.service'
+// import roomService from '../services/room.service'
 import block from './block'
 import { GRID_SIZE } from '../../config'
 const userId = window.localStorage.getItem('userId')
@@ -51,12 +43,6 @@ export default {
     block
   },
   sockets: {
-    connected: function () {
-      console.log('socket connected')
-    },
-    disconnected: function () {
-      console.log('socket disconnected')
-    },
     blockMove: function (res) {
       console.log('SOCKET SERVER BLOCK MOVE', res)
       this.moveBlock(res.block)
@@ -65,6 +51,9 @@ export default {
       const blockToEdit = this.blocks.find(x => x._id === res.block._id)
       blockToEdit.grid = res.block.grid
       blockToEdit.pieces = res.block.pieces
+    },
+    playerJoined: function (res) {
+      this.blocks = res.room.blocks
     }
   },
   data () {
@@ -73,12 +62,10 @@ export default {
       blocks: [],
       rows: Array.apply(null, Array(20)).map(function (x, i) { return i }),
       cols: Array.apply(null, Array(20)).map(function (x, i) { return i }),
-      activeBlock: false,
-      player: {}
+      activeBlock: false
     }
   },
   mounted () {
-    this.joinRoom()
     document.addEventListener('mousemove', (e) => {
       this.mouseController(e)
     }, false)
@@ -160,29 +147,6 @@ export default {
         })
       }
     },
-    joinRoom: function () {
-      roomService.join({
-        roomId: this.roomId,
-        userId: window.localStorage.getItem('userId')
-      }).then(res => {
-        window.localStorage.setItem('userId', res.data.player._id)
-        this.player = {
-          id: res.data.player._id,
-          team: res.data.player.team
-        }
-        this.blocks = res.data.room.blocks
-      })
-    },
-    leaveRoom: async function () {
-      await this.$confirm('Are you sure you want to leave?', 'Warning', {
-        confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        this.$router.push({ path: `/` })
-      })
-    },
     findNearbyBlocks: function (block) {
       const areaRadius = 1
       const area = {
@@ -277,15 +241,6 @@ $block-size: 20px;
   }
 }
 
-.player-info {
-  position: fixed;
-  right: 0;
-  text-align: right;
-  bottom: 0px;
-  text-transform: capitalize;
-  font-size: 12px;
-}
-
 .dragging .piece, .block:hover {
   opacity: 1;
 }
diff --git a/src/components/Lobby.vue b/src/components/Lobby.vue
index 553f964..c9db0e2 100644
--- a/src/components/Lobby.vue
+++ b/src/components/Lobby.vue
@@ -64,7 +64,7 @@
 
 <script>
 import RoomService from '../services/room.service'
-import { setItem, getItem } from '../utilities/localStorage'
+import { setItem } from '../utilities/localStorage'
 import { distanceInWordsStrict } from 'date-fns'
 
 export default {
@@ -81,13 +81,14 @@ export default {
       return distanceInWordsStrict(date, new Date())
     },
     joinRoom: function (id) {
-      RoomService.join({roomId: id, userId: getItem('userId')}).then(res => {
-        setItem('userId', res.data.player._id)
-        this.$message({ type: 'success', message: 'You have joined a room' })
-        this.$router.push({ path: `/room/${res.data.room._id}` })
-      }).catch(e => {
-        this.$message({ type: 'error', message: e })
-      })
+      this.$router.push({ path: `/room/${id}` })
+      // RoomService.join({roomId: id, userId: getItem('userId')}).then(res => {
+      //   setItem('userId', res.data.player._id)
+      //   this.$message({ type: 'success', message: 'You have joined a room' })
+      //   this.$router.push({ path: `/room/${res.data.room._id}` })
+      // }).catch(e => {
+      //   this.$message({ type: 'error', message: e })
+      // })
     },
     createRoom: function (roomName) {
       RoomService.create(roomName).then(res => {
diff --git a/src/components/Room.vue b/src/components/Room.vue
index de7f60c..fe8007c 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -1,17 +1,103 @@
 <template>
   <div>
-    <Board :roomId="$route.params.id" />
+    <Board :roomId="$route.params.id" :player="player" />
+      <!-- Player information -->
+      <div class="player-info">
+        Player ID: {{ player.id }} <br />
+        Team: {{ player.team }} <br />
+        <button @click="leaveRoom()">leave game</button>
+      </div>
   </div>
 </template>
 <script>
 import Board from './Board'
+const userId = window.localStorage.getItem('userId')
 
 export default {
   components: {
     Board
+  },
+  sockets: {
+    connected: function () {
+      console.log('socket connected')
+    },
+    disconnected: function () {
+      console.log('socket disconnected')
+    },
+    roomJoined: function (res) {
+      res.player = this.player
+      switch (res.status) {
+        case 'select': this.playerSelect(); break
+        case 'joined': this.joinGame(); break
+        case 'full': this.spectate(); break
+        default: this.kick()
+      }
+    },
+    playerJoined: function (res) {
+      console.log('played joined!', res.player)
+      this.players = res.players
+    }
+  },
+  data () {
+    return {
+      player: {},
+      players: []
+    }
+  },
+  mounted () {
+    this.joinRoom()
+  },
+  methods: {
+    joinRoom: function () {
+      // connect to the room
+      this.$socket.emit('room_connect', { roomId: this.$route.params.id, userId })
+      // roomService.join({
+      //   roomId: this.roomId,
+      //   userId: window.localStorage.getItem('userId')
+      // }).then(res => {
+      //   window.localStorage.setItem('userId', res.data.player._id)
+      //   this.player = {
+      //     id: res.data.player._id,
+      //     team: res.data.player.team
+      //   }
+      //   this.blocks = res.data.room.blocks
+      // })
+    },
+    playerSelect: function () {
+      console.log('playerselect')
+      this.$confirm('Are you sure you want to join', 'Info', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        center: true
+      }).then(() => {
+        // choose nickname and colour here
+        this.$socket.emit('player_connect', { room: this.roomId, userId, colour: 'red', nickName: 'Cain' })
+      })
+    },
+    leaveRoom: async function () {
+      await this.$confirm('Are you sure you want to leave?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        center: true
+      }).then(() => {
+        this.$router.push({ path: `/` })
+      })
+    },
+    joinGame: function (room) {
+
+    }
   }
 }
-
 </script>
 <style lang="scss">
+.player-info {
+  position: fixed;
+  right: 0;
+  text-align: right;
+  bottom: 0px;
+  text-transform: capitalize;
+  font-size: 12px;
+}
 </style>
diff --git a/src/components/block.vue b/src/components/block.vue
index 93eeeef..a86c75a 100644
--- a/src/components/block.vue
+++ b/src/components/block.vue
@@ -56,9 +56,9 @@ export default {
   }
   .helper {
     position: absolute;
-    // outline: 1px solid rgba(255,0,0,0.2);
+    outline: 1px solid rgba(255,0,0,0.2);
     background-size: 20px 20px;
-    // background-image: linear-gradient(to right, #e7e7e7 1px, transparent 1px), linear-gradient(to bottom, #e7e7e7 1px, transparent 1px);
+    background-image: linear-gradient(to right, #e7e7e7 1px, transparent 1px), linear-gradient(to bottom, #e7e7e7 1px, transparent 1px);
   }
   .block-id {
     position: absolute;

From a868bfc8d93ca44d1b0b7661e50ef17cc354ba7b Mon Sep 17 00:00:00 2001
From: Cain Hall <cain.hall98@gmail.com>
Date: Fri, 14 Sep 2018 16:37:09 +1000
Subject: [PATCH 2/4] room id syntax error

---
 server                   | 2 +-
 src/components/Board.vue | 1 +
 src/components/Room.vue  | 4 +++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/server b/server
index 37e5349..0a81518 160000
--- a/server
+++ b/server
@@ -1 +1 @@
-Subproject commit 37e5349f5bcd28672070079a246a1dcb3d9fdaa4
+Subproject commit 0a815180840cf1d52bad8394ca04db86cf4b7f7d
diff --git a/src/components/Board.vue b/src/components/Board.vue
index 859d658..f32dff9 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -53,6 +53,7 @@ export default {
       blockToEdit.pieces = res.block.pieces
     },
     playerJoined: function (res) {
+      console.log('played joined board!', res.player)
       this.blocks = res.room.blocks
     }
   },
diff --git a/src/components/Room.vue b/src/components/Room.vue
index fe8007c..57db795 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -25,6 +25,8 @@ export default {
       console.log('socket disconnected')
     },
     roomJoined: function (res) {
+      console.log('room joined', res.status)
+
       res.player = this.player
       switch (res.status) {
         case 'select': this.playerSelect(); break
@@ -72,7 +74,7 @@ export default {
         center: true
       }).then(() => {
         // choose nickname and colour here
-        this.$socket.emit('player_connect', { room: this.roomId, userId, colour: 'red', nickName: 'Cain' })
+        this.$socket.emit('player_connect', { room: this.$route.params.id, userId, colour: 'red', nickName: 'Cain' })
       })
     },
     leaveRoom: async function () {

From e34ccfc7298fdae150151fe3f900922e4a8eb891 Mon Sep 17 00:00:00 2001
From: Cain Hall <cain.hall98@gmail.com>
Date: Tue, 18 Sep 2018 18:38:20 +1000
Subject: [PATCH 3/4] player connection logic

---
 server                   |  2 +-
 src/components/Board.vue |  5 ++++-
 src/components/Room.vue  | 11 ++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/server b/server
index 0a81518..a4228cc 160000
--- a/server
+++ b/server
@@ -1 +1 @@
-Subproject commit 0a815180840cf1d52bad8394ca04db86cf4b7f7d
+Subproject commit a4228ccfa781c5c2c0cf5a6b9a02eeb5590e0800
diff --git a/src/components/Board.vue b/src/components/Board.vue
index f32dff9..3c367fd 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -53,7 +53,10 @@ export default {
       blockToEdit.pieces = res.block.pieces
     },
     playerJoined: function (res) {
-      console.log('played joined board!', res.player)
+      console.log('played joined board!', res)
+      this.blocks = res.room.blocks
+    },
+    roomJoined: function (res) {
       this.blocks = res.room.blocks
     }
   },
diff --git a/src/components/Room.vue b/src/components/Room.vue
index 57db795..4a418b2 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -25,7 +25,7 @@ export default {
       console.log('socket disconnected')
     },
     roomJoined: function (res) {
-      console.log('room joined', res.status)
+      console.log('room joined', res)
 
       res.player = this.player
       switch (res.status) {
@@ -34,10 +34,6 @@ export default {
         case 'full': this.spectate(); break
         default: this.kick()
       }
-    },
-    playerJoined: function (res) {
-      console.log('played joined!', res.player)
-      this.players = res.players
     }
   },
   data () {
@@ -66,15 +62,16 @@ export default {
       // })
     },
     playerSelect: function () {
+      // window.localStorage.setItem('userId', this.player.id)
       console.log('playerselect')
-      this.$confirm('Are you sure you want to join', 'Info', {
+      this.$confirm('Team Selection here', 'Info', {
         confirmButtonText: 'OK',
         cancelButtonText: 'Cancel',
         type: 'warning',
         center: true
       }).then(() => {
         // choose nickname and colour here
-        this.$socket.emit('player_connect', { room: this.$route.params.id, userId, colour: 'red', nickName: 'Cain' })
+        this.$socket.emit('player_connect', { roomId: this.$route.params.id, userId, colour: 'red', nickName: 'Cain' })
       })
     },
     leaveRoom: async function () {

From 5770d48778a6e961a058b43e607577d6a1a9194a Mon Sep 17 00:00:00 2001
From: Cain Hall <cain.hall98@gmail.com>
Date: Fri, 21 Sep 2018 16:41:36 +1000
Subject: [PATCH 4/4] fix stupid player bug

---
 src/components/Room.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Room.vue b/src/components/Room.vue
index 4a418b2..2ebdd2f 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -27,7 +27,8 @@ export default {
     roomJoined: function (res) {
       console.log('room joined', res)
 
-      res.player = this.player
+      this.player = res.player
+      window.localStorage.setItem('userId', this.player._id)
       switch (res.status) {
         case 'select': this.playerSelect(); break
         case 'joined': this.joinGame(); break