From d9e7cd6c1bc89e6e07591b6f73f25340809ab76b Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Thu, 10 Dec 2020 15:18:37 -0700
Subject: [PATCH] Adds all the text entry slots and CSS to the game board area

---
 web/src/components/GameBoard.vue | 356 ++++++++++++++++++++++++++++++-
 1 file changed, 353 insertions(+), 3 deletions(-)

diff --git a/web/src/components/GameBoard.vue b/web/src/components/GameBoard.vue
index deb1ec9..b3bac03 100644
--- a/web/src/components/GameBoard.vue
+++ b/web/src/components/GameBoard.vue
@@ -1,17 +1,367 @@
 <template>
-	<div></div>
+	<div id="GameBoard">
+		<div id="other-team-answers" class="team-container">
+			<h2 class="centre">{{ $store.getters.otherTeamName }} Answers</h2>
+			<div class="answer-container">
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-1`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[1] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[1] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[1] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-2`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[2] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[2] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[2] }}x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-3`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[3] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[3] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[3] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-4`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[4] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[4] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[4] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-5`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[5] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[5] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[5] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-6`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[6] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[6] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[6] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-7`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[7] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[7] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[7] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${otherTeamID}-answer-8`" disabled>
+					<span class="other-team eye-container" v-if="$store.state[`team_${3 - $store.state.team}`].eyes[8] > 0">
+						<span
+							v-if="$store.state[`team_${3 - $store.state.team}`].eyes[8] > 1"
+							class="eye-multiplier"
+						>
+							{{ $store.state[`team_${3 - $store.state.team}`].eyes[8] }} x
+						</span>
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+					</span>
+				</div>
+			</div>
+		</div>
+		<div id="team-answers" class="team-container">
+			<h2 class="centre">{{ $store.getters.teamName }} Answers</h2>
+			<div class="answer-container">
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-1`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[1] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[1] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[1] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-2`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[2] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[2] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[2] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-3`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[3] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[3] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[3] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-4`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[4] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[4] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[4] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-5`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[5] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[5] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[5] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-6`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[6] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[6] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[6] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-7`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[7] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[7] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[7] }}
+						</span>
+					</span>
+				</div>
+				<div class="answer">
+					<input type="text" :id="`${teamID}-answer-8`">
+					<span class="team eye-container" v-if="$store.state[`team_${$store.state.team}`].eyes[8] > 0">
+						<img
+							class="eye"
+							:src="`/assets/${$store.state.eye_icon}`"
+							alt="reveal another letter"
+						>
+						<span
+							v-if="$store.state[`team_${$store.state.team}`].eyes[8] > 1"
+							class="eye-multiplier"
+						>
+							x {{ $store.state[`team_${$store.state.team}`].eyes[8] }}
+						</span>
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
 	name: `GameBoard`,
 	components: {},
-	computed: {},
+	computed: {
+		teamID() {
+			return this.$store.getters.teamName.replace(/\s/g, `-`).toLowerCase();
+		},
+		otherTeamID() {
+			return this.$store.getters.otherTeamName.replace(/\s/g, `-`).toLowerCase();
+		},
+	},
 	methods: {},
+	sockets: {
+		UpdateAnswer() {
+			/*
+			{
+				team: 1 | 2,
+				answer: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8,
+				value: String,
+			}
+			*/
+		}
+	},
 }
 </script>
 
-<style>
+<style scoped>
 @import "../css/theme.css";
 @import "../css/style.css";
+
+#GameBoard {
+	background-color: var(--board-background);
+	color: var(--board-background-text);
+	justify-content: space-evenly;
+	padding: 0 10px 10px;
+	border-radius: 20px;
+	flex-direction: row;
+	margin: 15px auto;
+	display: flex;
+	width: 95%;
+}
+
+.team-container {
+	display: inline-block;
+	width: 45%;
+}
+
+.answer-container {
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: center;
+	display: flex;
+}
+
+.answer {
+	position: relative;
+	width: 100%;
+}
+
+.eye-container {
+	position: absolute;
+	width: 70px;
+	z-index: 1;
+}
+.team {
+	right: -40px;
+	top: 25%;
+}
+.other-team {
+	left: -40px;
+	top: 25%;
+}
+
+.eye {
+	height: 25px;
+	vertical-align: bottom;
+}
+
+.eye-multiplier {
+	display: inline-block;
+}
+
+input[type="text"] {
+	font-family: var(--fonts);
+	background-color: var(--board-background-alt);
+	color: var(--board-background-alt-text);
+	border-radius: 7px;
+	font-size: larger;
+	padding: 12px;
+	outline: none;
+	margin: 7px 0;
+	border: none;
+	width: 95%;
+}
 </style>
\ No newline at end of file