Skip to content

Commit

Permalink
atualização do Board
Browse files Browse the repository at this point in the history
  • Loading branch information
teuswx committed May 10, 2024
1 parent 99e8ddd commit 73feae9
Showing 1 changed file with 74 additions and 17 deletions.
91 changes: 74 additions & 17 deletions src/components/Board.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,62 @@
<!-- HTML -->
<!-- ---------------------------------------------------------------------- -->
<template>

<!-- Aqui ficam posicionados os decks do jogador 1 e 2 -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-1">
<Card :cardId="6" class="deck-card"></Card>
</div>
<div class="col-1">
<Card :cardId="7" class="deck-card"></Card>
</div>
<div class="col-1">
<Card :cardId="8" class="deck-card"></Card>
</div>
</div>
<div class= "col align-self-center">
<div class= "row mb-5">
<Card :cardId="6" class="deck-card-1" ></Card>
</div>

<div class= "row">
<Card :cardId="6" class="deck-card-2" ></Card>
</div>
<div class="col-12">
<div class="row justify-content-center">
<div v-for="(card, index) in player1.cards" :key="index" class="col-1">
</div>

<!-- Aqui ficam posicionados a mão e o campo do jogador 1 -->

<div class="col-10">
<div class="row justify-content-center mb-2">
<div v-for="(card, index) in player1.cards" :key="index" class="col-1">
<Card :cardId="card.id" class="deck-card-1"></Card>
</div>
</div>
<div class="row justify-content-center mb-3">
<div v-for="(card, index) in player1.cards" :key="index" class="col-2">
<Card :cardId="card.id" class="deck-card-1"></Card>
</div>
</div>

<!-- Aqui ficam posicionados a mão e o campo do jogador 2-->

<div class="row justify-content-center mb-2">
<div v-for="(card, index) in player2.cards" :key="index" class="col-2">
<Card :cardId="card.id" class="deck-card"></Card>
</div>
</div>
</div>
<div class="row justify-content-center">
<div v-for="(card, index) in player2.cards" :key="index" class="col-1">
<Card :cardId="card.id" class="deck-card"></Card>
</div>
</div>
</div>

<!-- Aqui ficam posicionados os gênios do jogador 1 e 2 -->

<div class= "col align-self-center">
<div class= "row mb-5">
<Card :cardId="6" class="genio-card-1"></Card>
</div>
<div class= "row ">
<Card :cardId="6" class="genio-card-2 " ></Card>
</div>
</div>


</div>
</div>
</template>


Expand All @@ -44,21 +78,38 @@ export default {
name: 'Player 1',
cards: [],
},
player2: {
name: 'Player 2',
cards: [],
},
//
};
},
created() {
this.player1.cards.push(cardUtils.getCard(1));
this.player1.cards.push(cardUtils.getCard(2));
this.player1.cards.push(cardUtils.getCard(3));
this.player1.cards.push(cardUtils.getCard(4));
this.player1.cards.push(cardUtils.getCard(5));
this.player2.cards.push(cardUtils.getCard(1));
this.player2.cards.push(cardUtils.getCard(2));
this.player2.cards.push(cardUtils.getCard(3));
this.player2.cards.push(cardUtils.getCard(4));
this.player2.cards.push(cardUtils.getCard(5));
},
mounted() {
// TODO
},
methods: {
// TODO
//função para preencher uma mão
preencher(){
this.player1.cards.push(cardUtils.getCard(this.gerarNumeroAleatorio(1,10)));
},
gerarNumeroAleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
};
</script>
Expand All @@ -68,4 +119,10 @@ export default {
<!-- CSS -->
<!-- ---------------------------------------------------------------------- -->
<style scoped>
.deck-card-1{
transform: rotate(180deg);
}
.genio-card-1{
transform: rotate(180deg);
}
</style>

0 comments on commit 73feae9

Please sign in to comment.