Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add styling for when an answer is correct.

Browse source
This commit is contained in:
Oliver-Akins 2021-01-07 18:16:54 -07:00
parent 2f190cafd8
commit c1226a81c5
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web/src/components/GameBoard.vue
View file

@ -10,8 +10,11 @@
a model attribute to keep them synced correctly. a model attribute to keep them synced correctly.
--> -->
<div <div
class="answer"
v-for="answerIndex in 8" 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}`" :key="`${otherTeamID}-answer-container-${answerIndex}`"
> >
<input <input
@ -51,8 +54,11 @@
and having them be disabled for all other players and having them be disabled for all other players
--> -->
<div <div
class="answer"
v-for="answerIndex in 8" 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}`" :key="`${teamID}-answer-container-${answerIndex}`"
> >
<input <input
@ -118,6 +124,13 @@ export default {
}, },
}, },
methods: { 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) { answerInputHandler(answerIndex) {
/** /**
* Sends input data updates to the server when they occur, indicating * Sends input data updates to the server when they occur, indicating
@ -190,6 +203,10 @@ h2 {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.answer.correct > input {
border-color: green !important;
border-width: 3px;
}
.eye-container { .eye-container {
position: absolute; position: absolute;