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>
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue