Adds all the text entry slots and CSS to the game board area
This commit is contained in:
Oliver-Akins
parent
287af267d6
commit
d9e7cd6c1b
1 changed files with 353 additions and 3 deletions
|
|
@ -1,17 +1,367 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: `GameBoard`,
|
name: `GameBoard`,
|
||||||
components: {},
|
components: {},
|
||||||
computed: {},
|
computed: {
|
||||||
|
teamID() {
|
||||||
|
return this.$store.getters.teamName.replace(/\s/g, `-`).toLowerCase();
|
||||||
|
},
|
||||||
|
otherTeamID() {
|
||||||
|
return this.$store.getters.otherTeamName.replace(/\s/g, `-`).toLowerCase();
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
|
sockets: {
|
||||||
|
UpdateAnswer() {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
team: 1 | 2,
|
||||||
|
answer: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8,
|
||||||
|
value: String,
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
@import "../css/theme.css";
|
@import "../css/theme.css";
|
||||||
@import "../css/style.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>
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue