Widok z opcja kart czy getelemn czy uzytkownik

This commit is contained in:
pawlaczyk 2019-01-05 21:30:17 +01:00
parent a7aa79eb46
commit 73b8e5fc3d

View File

@ -3,7 +3,6 @@
<div class="cards">
<v-container>
<!-- widok gentelmana, ktory wybiera karty -->
<div id="gentelmanView" v-show="gentelaman">
<v-layout column align-center>
<!-- karta pytanie na srodku -->
<v-flex class="mt-5">
@ -21,12 +20,12 @@
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg2 v-for="card in cards" :key="card.name">
<v-flex xs12 sm6 md4 lg2 v-for="card in visibleCards()" :key="card.name">
<v-card flat class="text-xs-center ma-1 grey lighten-2 ">
<v-responsive class="pt-4">
<v-card-text class="">
<!-- karty odpowiedzi -->
<!-- karty odpowiedzi albo karty dane uzytkownika zlaeznie czy jest gentelmenem czy nie -->
<div class="card" @click="chosenCard">
<div class="card-main">
<v-avatar size ="100" color="white mb-1">
@ -41,11 +40,7 @@
</v-flex>
</v-layout>
</div>
<!-- Widok gracz, ktory daje swoje karty -->
<div id="user_view" v-show="!gentelaman">
<h1>Uzytkownik</h1>
</div>
</v-container>
</div>
</template>
@ -54,7 +49,7 @@
export default {
data(){
return{
gentelaman: true,
gentelaman: false,
cards: [
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
@ -63,13 +58,34 @@ export default {
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
],
userCards: [
{ text: 'karta uzyktkownika0'},
{ text: 'karta uzyktkownika1'},
{ text: 'karta uzyktkownika2'},
{ text: 'karta uzyktkownika3'},
{ text: 'karta uzyktkownika4'},
{ text: 'karta uzyktkownika5'},
{ text: 'karta uzyktkownika6'},
{ text: 'karta uzyktkownika7'},
{ text: 'karta uzyktkownika8'},
{ text: 'karta uzyktkownika9'}
],
questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
}
},
methods:{
chosenCard(){
console.log("Wybrano karte")
},
visibleCards(){
console.log("Visible cards function")
if (this.gentelaman===true){
return this.cards
}
else{
return this.userCards
}
}
}
}