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

Update hand to display the most recent question when the hand area until they receive a new card from the mediums.

Browse source
This commit is contained in:
Oliver-Akins 2021-01-03 15:59:12 -07:00
parent 1eac963bc5
commit d639ed4a48
1 changed files with 61 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

69
web/src/components/Hand.vue
View file

@ -1,5 +1,9 @@
<template>
<div id="PlayerHand">
<div class="recentQuestion" v-if="mostRecentQuestion">
{{ mostRecentQuestion }}
</div>
<div class="hand" v-else>
<div
class="card"
v-for="cardIndex in questions.length"
@ -17,21 +21,25 @@
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: `PlayerHand`,
components: {},
data() {return {
mostRecentQuestion: null,
}},
computed: {
userRole() {
return this.$store.state.role;
},
isGuesser() {
return this.userRole == this.$store.state.guesser_name;
return this.userRole === `guesser`;
},
isWriter() {
return this.userRole == this.$store.state.writer_name;
return this.userRole === `writer`;
},
buttonLabel() {
if (this.isGuesser) {
@ -49,18 +57,11 @@ export default {
methods: {
sendCard(cardIndex) {
// Determine what the source of the card is for the server to take
// appropriate action.
let role = `unknown`;
if (this.isGuesser)
role = `guesser`
else if (this.isWriter)
role = `writer`
// Create the data object for the server to receive
let data = {
game_code: this.$store.state.game_code,
text: this.questions[cardIndex - 1],
from: role,
from: this.userRole,
team: this.$store.state.team,
};
@ -68,13 +69,22 @@ export default {
// Discard the rest of the writer's hand
if (this.isWriter) {
this.$store.state.questions = [];
this.mostRecentQuestion = data.text;
this.$store.commit(`replaceHand`, []);
};
// TODO -> send data to server
console.debug(data);
this.$socket.client.emit(`SendCard`, data);
}
},
mounted() {
if (this.isGuesser) {
console.debug(`Getting hand from server`);
this.$socket.client.emit(`GetHand`, {
game_code: this.$store.state.game_code,
team: this.$store.state.team
});
};
},
sockets: {
UpdateHand(data) {
/**
@ -87,16 +97,18 @@ export default {
* }
*/
console.debug(`Updating hand.`);
console.debug(data);
switch (data.mode) {
case `append`:
// TODO -> Implement appending
if (this.isWriter && this.mostRecentQuestion) {
this.mostRecentQuestion = null;
};
this.$store.commit(`appendToHand`, data.questions);
break;
case `replace`:
this.$store.state.questions = data.questions;
this.$store.commit(`replaceHand`, data.questions);
break;
default:
console.error(`Server returned an unsupported mode.`);
console.error(`Server returned an unsupported mode: ${data.mode}`);
};
},
},
@ -109,16 +121,29 @@ export default {
#PlayerHand {
background-color: var(--background2);
border-radius: 20px;
margin: 0 auto;
padding: 0px;
width: 95%;
}
.recentQuestion {
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 100%;
}
.hand {
justify-content: space-evenly;
flex-direction: row;
border-radius: 20px;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
margin: 0 auto;
display: flex;
padding: 0px;
width: 95%;
height: 100%;
width: 100%;
}
.card {