Game state updates

client/src/components/app.vue

@@ -1,5 +1,11 @@
 <style lang="sass">
 @import 'main.scss';
+
+.boards {
+	display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
 </style>
 
 <template>
@@ -13,8 +19,8 @@
 		<div class="container">
 
 			<div class="boards">
-				<board player-type="opponent"></board>
-				<board player-type="you"></board>
+				<board v-for="playerId in otherPlayerIds" :player-id="playerId" player-type="opponent"></board>
+				<board :player-id="store.socketId" player-type="you"></board>
 			</div>
 
 			<sidebar></sidebar>
@@ -63,6 +69,17 @@ export default {
 		return {
 			store: store
 		}
+	},
+	computed: {
+		otherPlayerIds: function() {
+			var playerIds = [];
+			for (var playerId in store.state.players) {
+				if (playerId !== store.socketId) {
+					playerIds.push(playerId);
+				}
+			}
+			return playerIds;
+		}
 	}
 }
 </script>

client/src/components/game/board.vue

@@ -20,18 +20,21 @@
   justify-content:space-around;
 }
 
+.board--opponent {
+	border-bottom:1px dashed #CCC;
+}
+
 .board--you {
-	border-top:1px dashed #CCC;
 	.board__areas {
 		flex-direction: column-reverse;
 	}
 }
 </style>
 
 <template>
-	<div class="board board--{{ playerType }}">
+	<div class="board board--{{ playerType }}" id="board-{{ playerId }}">
 
-		<deck-loader v-if="(gameRound < 0)" :player="playerType"></deck-loader>
+		<deck-loader v-if="(gameRound < 0)" :player-type="playerType" :player-id="playerId"></deck-loader>
 
 		<div v-if="(gameRound >= 0)" class="board__player">
 			<div class="board__row">
@@ -81,7 +84,7 @@ import deckLoader from '../ui/deckloader.vue';
 import store from '../../store.js';
 
 export default {
-	props: ['player-type'],
+	props: ['player-type', 'player-id'],
 	components: {
 		die,
 		card,

client/src/components/ui/deckloader.vue

@@ -14,36 +14,38 @@ label {
 </style>
 
 <template>
-	<div class="deck-loader">
-		<h2>Deck Loader</h2>
+	<div v-if="(playerType === 'you')" class="deck-loader">
 
 		<div v-if="!decklistValid">
-			<label for="prebuilt-{{ player }}">Choose a prebuilt deck</label>
-			<select id="prebuilt-{{ player }}" name="prebuilt" v-model="prebuiltSelection" @change="populateDecklist">
+			<label for="prebuilt-{{ playerId }}">Choose a prebuilt deck</label>
+			<select id="prebuilt-{{ playerId }}" name="prebuilt" v-model="prebuiltSelection" @change="populateDecklist">
 				<option value="">Choose...</option>
 				<option v-for="(key, list) in prebuiltLists" value="{{ key }}">{{ list.pheonixborn }} - {{ list.name }}</option>
 			</select>
 
-			<label for="decklist-{{ player }}">Or paste your list here</label>
-			<textarea rows="5" name="decklist" id="decklist-{{ player }}" v-model="decklist"></textarea>
+			<label for="decklist-{{ playerId }}">Or paste your list here</label>
+			<textarea rows="5" name="decklist" id="decklist-{{ playerId }}" v-model="decklist"></textarea>
 
 			<button class="btn btn--block" @click="submitDecklistForValidation">Submit</button>
 
 			<p class="alert alert--error" v-if="validationError">{{ validationError }} Please re-submit.</p>
 		</div>
 
 		<div v-if="decklistValid">
-			<p class="alert alert--success">Your decklist is valid and locked in!</p>
+			<p class="alert alert--success">Your decklist is valid and locked in! Waiting for opponents.</p>
 		</div>
 
 	</div>
+	<div v-else>
+		<p class="alert alert--success">Your opponent is choosing their deck.</p>
+	</div>
 </template>
 
 <script>
 import store from '../../store.js';
 
 export default {
-	props: ['player'],
+	props: ['player-type', 'player-id'],
 	data: function() {
 		return {
 			prebuiltLists: {},
@@ -86,15 +88,7 @@ export default {
 				} else if (!valid) {
 					this.validationError = 'Unspecified validation error.';
 				}
-			} else {
-				//TODO - was the validation for my opponent?
-				
 			}
-
-			//TODO - if all players decklists are now validated, time to start the game!
-			store.state.gameRound = 0;
-
-			store.socket.emit('requestGameState', store.state.gameId);
 		}
 	}
 }

client/src/components/ui/infobar.vue

@@ -8,6 +8,10 @@
 	justify-content: space-between;
 }
 
+.infobar__playerlist, .infobar__title, .infobar__round {
+	flex:1;
+}
+
 .infobar__title {
 	font-size:1rem;
 	font-weight:normal;

client/src/entry.js

@@ -44,8 +44,8 @@ store.socket.on('chat', function(sender, msg, className){
 // recieve game ID (this is only sent to the specific room)
 store.socket.on('gameStateUpdated', function(gameId, gameState) {
 	store.state.gameId = gameId;
-	console.log(gameState);
 	store.state.players = gameState.players;
+	store.state.gameRound = gameState.gameRound;
 });
 
 // recieve game list

client/src/sass/main.scss

@@ -121,6 +121,7 @@ input[type="text"],textarea {
 // -----------------------------------------------------------[ LAYOUT ]
 .container {
 	display:flex;
+	height: calc(100vh - 2rem);
 }
 
 .boards {