Started implementing card browser for stacks

client/src/components/game/board.vue

@@ -72,6 +72,7 @@
 			</div>
 		</div>
 		<context-menu v-ref:context></context-menu>
+		<card-browser v-ref:browser></card-browser>
 	</div>
 </template>
 
@@ -80,6 +81,7 @@ import die from './die.vue';
 import card from './card.vue';
 import stack from './stack.vue';
 import contextMenu from '../ui/contextmenu.vue';
+import cardBrowser from '../ui/cardbrowser.vue';
 import deckLoader from '../ui/deckloader.vue';
 import store from '../../store.js';
 
@@ -90,11 +92,16 @@ export default {
 		card,
 		stack,
 		contextMenu,
+		cardBrowser,
 		deckLoader
 	},
 	events: {
-		'openContext': function(contextActions, event) {
+		openContext: function(contextActions, event) {
 			this.$refs.context.openMenu(contextActions, event);
+		},
+		openBrowser: function(cards) {
+			console.log('board: ' + cards);
+			this.$refs.browser.openBrowser(cards);
 		}
 	},
 	computed: {

client/src/components/game/stack.vue

@@ -69,7 +69,8 @@ export default {
 		},
 
 		peekAtCards: function() {
-			store.socket.emit('chat', 'DEBUG', this.cards);
+			console.log('stack:' + this.cards);
+			this.$dispatch('openBrowser', this.cards);
 		}
 	}
 }

client/src/components/ui/cardbrowser.vue

@@ -0,0 +1,79 @@
+<style lang="sass">
+.card-browser {
+	position:absolute;
+	width: 100vw;
+	top:50%;
+	margin-top:-226px;
+  left: 0;
+  overflow-x: scroll;
+  z-index: 99;
+}
+
+.card-browser__list {
+	margin:0;
+	padding:0;
+	list-style-type:none;
+	width:9960px; //332*30
+  display: block;
+  height: 452px;
+}
+
+.card-browser__item {
+	display:inline-block;
+}
+
+.card-browser__overlay {
+	position:fixed;
+	top:0;
+	right:0;
+	bottom:0;
+	left:0;
+	background-color:transparentize(black,0.2);
+	z-index:98;
+}
+
+.card-browser .card {
+	width:332px;
+	height:452px;
+	background-size:332px 452px;
+}
+
+</style>
+
+<template>
+	<div class="card-browser__overlay" v-show="viewBrowser" @click="closeBrowser"></div>
+	<div class="card-browser" v-show="viewBrowser">
+		<ul class="card-browser__list">
+			<li v-for="cardName in cards" track-by="$index" class="card-browser__item">
+				<card :card-name="cardName"></card>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import card from '../game/card.vue';
+
+export default {
+	components: {
+		card
+	},
+	data: function() {
+		return {
+			viewBrowser: false,
+			cards: []
+		}
+	},
+	methods: {
+		openBrowser: function(cards) {
+			console.log('browser: ' + cards);
+			this.cards = cards;
+			console.log('browser own: ' + this.cards);
+			this.viewBrowser = true;
+		},
+		closeBrowser: function() {
+			this.viewBrowser = false;
+		}
+	}
+}
+</script>

client/src/components/ui/contextmenu.vue

@@ -83,7 +83,7 @@ export default {
 			this.positionMenu(e.x, e.y);
 		},
 
-		closeMenu: function(e) {
+		closeMenu: function() {
 			this.viewMenu = false;
 		},
 

server/app.js

@@ -271,10 +271,10 @@ function checkGameStatus(roomId) {
 			}
 		});
 
-		console.log('there are ' + numPlayers + ' out of ' + activeGames[roomId].maxPlayers + '. ' + numReadyPlayers + ' of them have valid lists.');
+		//console.log('there are ' + numPlayers + ' out of ' + activeGames[roomId].maxPlayers + '. ' + numReadyPlayers + ' of them have valid lists.');
 
 		if (numReadyPlayers === numPlayers) {
-			console.log('all players are ready');
+			//console.log('all players are ready');
 
 			//initialize first five phase
 			if (activeGames[roomId].gameRound === -1) {