From ed04066d100b1200021f635e7088657caba86f5e Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Fri, 20 Nov 2020 18:40:44 +0100
Subject: [PATCH] add deck, add table view

---
 frontend/src/App.vue              |  2 +-
 frontend/src/components/Deck.vue  | 45 +++++++++++++++++++++++++++++++
 frontend/src/components/Lobby.vue | 16 +++++++++--
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Deck.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2ead57f..57d5e17 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -120,7 +120,7 @@ export default {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	color: #2c3e50;
-	margin: 60px;
+	margin: 16pt;
 }
 h1,h2,h3,h4,p,span{
 	font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
new file mode 100644
index 0000000..9946788
--- /dev/null
+++ b/frontend/src/components/Deck.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="deck">
+		<!-- <div v-if="lastScrap != null" :class="{ card:true, equipment: lastScrap.is_equipment }">
+			<h3>{{lastScrap.name}}</h3>
+			<emoji>{{lastScrap.icon}}</emoji>
+			<span>{{lastScrap.number}}{{lastScrap.suit}}</span>
+		</div> -->
+		<div style="position:relative">
+			<div class="card back" style="position:absolute; bottom:-3pt;right:-2pt;"/>
+			<div class="card back" style="position:absolute; bottom:-1pt;right:-1pt;"/>
+			<card :card="card" class="back"/>
+		</div>
+	</div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue'
+
+export default {
+	name: 'Deck',
+	components: {
+		Card,
+	},
+	data: () => ({
+		card: {
+			name: 'PewPew!',
+			icon: '💥',
+		},
+	}),
+	sockets: {
+
+	},
+	methods: {
+		
+	},
+}
+</script>
+<style scoped>
+.deck {
+  display:flex;
+  margin:0;
+  align-items: center;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index dd9b1c7..4a0a1e6 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -3,10 +3,13 @@
 		<h1>Lobby: {{ lobbyName }}</h1>
 		<h3>Giocatori</h3>
 		<div style="display:flex">
+			<div style="position: relative;width:260pt;height:400pt;">
+				<Card v-for="p in playersTable" v-bind:key="p" :card="p.card" :style="p.style"/>
+			</div>
 			<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
-			<Card v-for="p in players" v-bind:key="p" :card="getPlayerCard(p)"/>
 		</div>
 		<div v-if="started">
+			<deck/>
 			<player/>
 		</div>
 		<chat/>
@@ -19,6 +22,7 @@ import Card from '@/components/Card.vue'
 import Chooser from './Chooser.vue'
 import Chat from './Chat.vue'
 import Player from './Player.vue'
+import Deck from './Deck.vue'
 
 export default {
 	name: 'Lobby',
@@ -27,6 +31,7 @@ export default {
 		Chooser,
 		Chat,
 		Player,
+		Deck,
 	},
 	props: {
 		username: String
@@ -41,7 +46,6 @@ export default {
 	}),
 	sockets: {
 		room(data) {
-			console.log(data)
 			this.lobbyName = data.name
 			this.started = data.started
 			this.players = data.players
@@ -67,6 +71,14 @@ export default {
 		},
 		showChooser() {
 			return this.availableCharacters.length > 0;
+		},
+		playersTable() {
+			return this.players.map((x,i) => {
+				let offsetAngle = 360.0 / this.players.length
+				let rotateAngle = (i) * offsetAngle
+				let size = 130
+				return {card:this.getPlayerCard(x), style: `position:absolute;transform: rotate(${rotateAngle}deg) translate(0, -${size}pt) rotate(-${rotateAngle}deg) translate(${size}pt,${size}pt)`}
+			})
 		}
 	},
 	methods: {