Merge pull request #3 from teuswx:main

atualização do componente Board
cefetmg-dv · May 15, 2024 · ed868da · ed868da
2 parents b50c91d + c0730c2
commit ed868da
Showing 1 changed file with 72 additions and 17 deletions.
diff --git a/src/components/Board.vue b/src/components/Board.vue
@@ -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">
-              <Carta :carta="6" class="deck-card"></Carta>
-            </div>
-            <div class="col-1">
-              <Carta :carta="7" class="deck-card"></Carta>
+      <div class= "col align-self-center">
+        <div class= "row mb-5">
+          <Carta :carta="6" class="deck-card-1"  ></Carta>
+        </div>
+
+        <div class= "row">
+          <Carta :carta="6" class="deck-card-2"  ></Carta>
+        </div>
+      </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="(carta, idx) in jogador_1.cartas" :key="idx" class="col-1">
+                    <Carta :carta="carta.id" class="deck-card-1"></Carta>
+                </div>
+          </div>
+          <div class="row justify-content-center mb-3">
+            <div v-for="(carta, idx) in jogador_1.cartas" :key="idx" class="col-2">
+                    <Carta :carta="carta.id" class="deck-card-1"></Carta>
+                </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="(carta, idx) in jogador_2.cartas" :key="idx" class="col-2">
+              <Carta :carta="carta.id" class="deck-card"></Carta>
             </div>
-            <div class="col-1">
-              <Carta :carta="8" class="deck-card"></Carta>
+          </div>
+          <div class="row justify-content-center">
+            <div v-for="(carta, idx) in jogador_2.cartas" :key="index" class="col-1">
+              <Carta :carta="carta.id" class="deck-card"></Carta>
             </div>
           </div>
         </div>
-        <div class="col-12">
-            <div class="row justify-content-center">
-                <div v-for="(carta, idx) in jogador_1.cartas" :key="index" class="col-1">
-                    <Carta :carta="carta.id" class="deck-card"></Carta>
-                </div>
-            </div>
+
+<!-- Aqui ficam posicionados os gênios do jogador 1 e 2 -->
+
+        <div class= "col align-self-center">
+          <div class= "row mb-5">
+            <Carta :carta="6" class="genio-card-1"></Carta>
+          </div>
+          <div class= "row ">
+            <Carta :carta="6" class="genio-card-2 "  ></Carta>
+          </div>
         </div>
+
+
     </div>
+  </div>
 </template>
 
 
@@ -44,7 +78,10 @@ export default {
             nome: 'Jogador 1',
             cartas: [],
         },
-      //
+        jogador_2: {
+            nome: 'Jogador 2',
+            cartas: [],
+        }
     };
   },
   created() {
@@ -53,12 +90,24 @@ export default {
     this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(3));
     this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(4));
     this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(5));
+
+    this.jogador_2.cartas.push(hepCartas.buscarCartaPorId(1));
+    this.jogador_2.cartas.push(hepCartas.buscarCartaPorId(2));
+    this.jogador_2.cartas.push(hepCartas.buscarCartaPorId(3));
+    this.jogador_2.cartas.push(hepCartas.buscarCartaPorId(4));
+    this.jogador_2.cartas.push(hepCartas.buscarCartaPorId(5));
   },
   mounted() {
     // TODO
   },
   methods: {
-    // TODO
+    //função para preencher uma mão 
+    preencher() {
+      this.jogador_1.cartas.push(hepCartas.buscarCartaPorId(this.gerarNumeroAleatorio(1,10)));
+    },
+    gerarNumeroAleatorio(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
   }
 };
 </script>
@@ -68,4 +117,10 @@ export default {
 <!-- CSS                                                                    -->
 <!-- ---------------------------------------------------------------------- -->
 <style scoped>
+.deck-card-1{
+  transform: rotate(180deg);
+}
+.genio-card-1{
+  transform: rotate(180deg);
+}
 </style>