Add styling for when an answer is correct.

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;