From c1226a81c518b56127a9fc2070cf1594b987b1c8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Thu, 7 Jan 2021 18:16:54 -0700
Subject: [PATCH] Add styling for when an answer is correct.

---
 web/src/components/GameBoard.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/components/GameBoard.vue b/web/src/components/GameBoard.vue
index 30c263c..81d94c6 100644
--- a/web/src/components/GameBoard.vue
+++ b/web/src/components/GameBoard.vue
@@ -10,8 +10,11 @@
 					a model attribute to keep them synced correctly.
 				-->
 				<div
-					class="answer"
 					v-for="answerIndex in 8"
+					:class="[
+						`answer`,
+						answers[`team_${3 - $store.state.team}`][answerIndex-1].toLowerCase() == $store.state.chosen_object+`.` ? `correct`: ``
+					]"
 					:key="`${otherTeamID}-answer-container-${answerIndex}`"
 				>
 					<input
@@ -51,8 +54,11 @@
 					and having them be disabled for all other players
 				-->
 				<div
-					class="answer"
 					v-for="answerIndex in 8"
+					:class="[
+						`answer`,
+						answers[`team_${$store.state.team}`][answerIndex-1].toLowerCase() == $store.state.chosen_object+`.` ? `correct`: ``
+					]"
 					:key="`${teamID}-answer-container-${answerIndex}`"
 				>
 					<input
@@ -118,6 +124,13 @@ export default {
 		},
 	},
 	methods: {
+		isCorrect(team, answerIndex) {
+			let typedAnswer = this.answers[`team_${team}`][answerIndex - 1].toLowerCase();
+			if (this.$store.state.chosen_object == typedAnswer) {
+				return `correct`;
+			};
+			return ``;
+		},
 		answerInputHandler(answerIndex) {
 			/**
 			 * Sends input data updates to the server when they occur, indicating
@@ -190,6 +203,10 @@ h2 {
 	position: relative;
 	width: 100%;
 }
+.answer.correct > input {
+	border-color: green !important;
+	border-width: 3px;
+}
 
 .eye-container {
 	position: absolute;