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

Move past-questions from the InGame to the GameBoard

Browse source
This commit is contained in:
Oliver-Akins 2020-12-12 18:03:04 -07:00
parent 1a7875f233
commit 6735a5e860
2 changed files with 40 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -69,14 +69,28 @@
</div> </div>
</div> </div>
</div> </div>
<button
class="past-questions-toggle clickable"
@click.self="toggleInsert()"
>
{{ visible ? `Hide` : `Show` }} Past Questions
</button>
<transition name="expand-from-left">
<past-questions v-if="visible" />
</transition>
</div> </div>
</template> </template>
<script> <script>
import PastQuestions from './PastQuestions';
export default { export default {
name: `GameBoard`, name: `GameBoard`,
components: {}, components: {
"past-questions": PastQuestions
},
data() {return { data() {return {
visible: false,
answers: { answers: {
team_1: [ ``, ``, ``, ``, ``, ``, ``, `` ], team_1: [ ``, ``, ``, ``, ``, ``, ``, `` ],
team_2: [ ``, ``, ``, ``, ``, ``, ``, `` ], team_2: [ ``, ``, ``, ``, ``, ``, ``, `` ],
@ -101,7 +115,14 @@ export default {
value: this.answers[`team_${team}`][answerIndex - 1] value: this.answers[`team_${team}`][answerIndex - 1]
}; };
// Send data to socket.io server // Send data to socket.io server
} },
toggleInsert() {
if (!this.visible) {
// request questions from server
console.log(`Fetching questions for team`)
};
this.visible = !this.visible;
},
}, },
sockets: { sockets: {
UpdateAnswer(data) { UpdateAnswer(data) {
@ -129,8 +150,10 @@ export default {
padding-bottom: 10px; padding-bottom: 10px;
flex-direction: row; flex-direction: row;
border-radius: 20px; border-radius: 20px;
position: relative;
margin: 15px auto;
display: flex; display: flex;
margin: 0; width: 95%;
} }
.team-container { .team-container {
@ -192,4 +215,17 @@ input[type="text"].team-answer {
input[type="text"].other-team-answer { input[type="text"].other-team-answer {
padding-left: 5%; padding-left: 5%;
} }
button {
background-color: var(--board-background-alt);
border-radius: 0 20px 0 7px;
border-style: none;
position: absolute;
outline: none;
padding: 10px;
right: 0;
top: 0;
}
button:hover { background-color: var(--board-background-alt-darken); }
button:focus { background-color: var(--board-background-alt-lighten); }
</style> </style>

14
web/src/views/InGame.vue
View file

@ -1,9 +1,6 @@
<template> <template>
<div id="GameView" class="maximize"> <div id="GameView" class="maximize">
<div class="game-board-container"> <game-board />
<past-questions />
<game-board />
</div>
<player-hand /> <player-hand />
<team-reminder /> <team-reminder />
<discard-hand /> <discard-hand />
@ -12,7 +9,6 @@
<script> <script>
import DiscardHand from "../components/DiscardHandButton"; import DiscardHand from "../components/DiscardHandButton";
import PastQuestions from '../components/PastQuestions';
import TeamReminder from "../components/TeamReminder"; import TeamReminder from "../components/TeamReminder";
import GameBoard from "../components/GameBoard"; import GameBoard from "../components/GameBoard";
import PlayerHand from "../components/Hand"; import PlayerHand from "../components/Hand";
@ -20,7 +16,6 @@ import PlayerHand from "../components/Hand";
export default { export default {
name: `InGame`, name: `InGame`,
components: { components: {
"past-questions": PastQuestions,
"team-reminder": TeamReminder, "team-reminder": TeamReminder,
"discard-hand": DiscardHand, "discard-hand": DiscardHand,
"player-hand": PlayerHand, "player-hand": PlayerHand,
@ -34,11 +29,4 @@ export default {
<style scoped> <style scoped>
@import "../css/theme.css"; @import "../css/theme.css";
@import "../css/style.css"; @import "../css/style.css";
.game-board-container {
text-align: center;
position: relative;
margin: 15px auto;
width: 95%;
}
</style> </style>