From 6735a5e8608a68b6a2e6e4413aeaabb1bec190bb Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 12 Dec 2020 18:03:04 -0700
Subject: [PATCH] Move past-questions from the InGame to the GameBoard

---
 web/src/components/GameBoard.vue | 42 +++++++++++++++++++++++++++++---
 web/src/views/InGame.vue         | 14 +----------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/web/src/components/GameBoard.vue b/web/src/components/GameBoard.vue
index e071c09..e76c6ab 100644
--- a/web/src/components/GameBoard.vue
+++ b/web/src/components/GameBoard.vue
@@ -69,14 +69,28 @@
 				</div>
 			</div>
 		</div>
+		<button
+			class="past-questions-toggle clickable"
+			@click.self="toggleInsert()"
+		>
+			{{ visible ? `Hide` : `Show` }} Past Questions
+		</button>
+		<transition name="expand-from-left">
+			<past-questions v-if="visible" />
+		</transition>
 	</div>
 </template>
 
 <script>
+import PastQuestions from './PastQuestions';
+
 export default {
 	name: `GameBoard`,
-	components: {},
+	components: {
+		"past-questions": PastQuestions
+	},
 	data() {return {
+		visible: false,
 		answers: {
 			team_1: [ ``, ``, ``, ``, ``, ``, ``, `` ],
 			team_2: [ ``, ``, ``, ``, ``, ``, ``, `` ],
@@ -101,7 +115,14 @@ export default {
 				value: this.answers[`team_${team}`][answerIndex - 1]
 			};
 			// Send data to socket.io server
-		}
+		},
+		toggleInsert() {
+			if (!this.visible) {
+				// request questions from server
+				console.log(`Fetching questions for team`)
+			};
+			this.visible = !this.visible;
+		},
 	},
 	sockets: {
 		UpdateAnswer(data) {
@@ -129,8 +150,10 @@ export default {
 	padding-bottom: 10px;
 	flex-direction: row;
 	border-radius: 20px;
+	position: relative;
+	margin: 15px auto;
 	display: flex;
-	margin: 0;
+	width: 95%;
 }
 
 .team-container {
@@ -192,4 +215,17 @@ input[type="text"].team-answer {
 input[type="text"].other-team-answer {
 	padding-left: 5%;
 }
+
+button {
+	background-color: var(--board-background-alt);
+	border-radius: 0 20px 0 7px;
+	border-style: none;
+	position: absolute;
+	outline: none;
+	padding: 10px;
+	right: 0;
+	top: 0;
+}
+button:hover { background-color: var(--board-background-alt-darken); }
+button:focus { background-color: var(--board-background-alt-lighten); }
 </style>
\ No newline at end of file
diff --git a/web/src/views/InGame.vue b/web/src/views/InGame.vue
index b5b072f..1990f5d 100644
--- a/web/src/views/InGame.vue
+++ b/web/src/views/InGame.vue
@@ -1,9 +1,6 @@
 <template>
 	<div id="GameView" class="maximize">
-		<div class="game-board-container">
-			<past-questions />
-			<game-board />
-		</div>
+		<game-board />
 		<player-hand />
 		<team-reminder />
 		<discard-hand />
@@ -12,7 +9,6 @@
 
 <script>
 import DiscardHand from "../components/DiscardHandButton";
-import PastQuestions from '../components/PastQuestions';
 import TeamReminder from "../components/TeamReminder";
 import GameBoard from "../components/GameBoard";
 import PlayerHand from "../components/Hand";
@@ -20,7 +16,6 @@ import PlayerHand from "../components/Hand";
 export default {
 	name: `InGame`,
 	components: {
-		"past-questions": PastQuestions,
 		"team-reminder": TeamReminder,
 		"discard-hand": DiscardHand,
 		"player-hand": PlayerHand,
@@ -34,11 +29,4 @@ export default {
 <style scoped>
 @import "../css/theme.css";
 @import "../css/style.css";
-
-.game-board-container {
-	text-align: center;
-	position: relative;
-	margin: 15px auto;
-	width: 95%;
-}
 </style>
\ No newline at end of file