From 4656c55ca17e7e8c2baf6166d433736e089d7577 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 26 Oct 2020 10:55:30 -0500
Subject: [PATCH] Agregado indicador de dragon de la partida

---
 .../Juego/components/contenedor-cartas.vue    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/views/Juego/components/contenedor-cartas.vue b/src/views/Juego/components/contenedor-cartas.vue
index 3b70bfa..255ac18 100644
--- a/src/views/Juego/components/contenedor-cartas.vue
+++ b/src/views/Juego/components/contenedor-cartas.vue
@@ -1,14 +1,14 @@
 <template lang="pug">
 div.cont-cuadrante-cartas-juego
-    span.num-cartas(:style="{fontSize: `${pH * 10}px`}") {{ cartasRestantes }}
+    img.img-dragon-partida(:src="rutaImgDragon")
     br
-    span.txt-cartas(:style="{fontSize: `${pH * 2.5}px`}") Cartas restantes {{ dragonPartida }}
+    span.txt-cartas {{ cartasRestantes }} cartas
 
 //
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, computed} from "vue";
 
 export default defineComponent({
     name: "contenedor-cartas",
@@ -23,8 +23,14 @@ export default defineComponent({
         }
     },
     setup(props) {
-        return {
+        const rutaImgDragon = computed(() => {
+            const nombreDragonMin = props.dragonPartida.toLowerCase();
 
+            return `/img/Dragon_${nombreDragonMin}.webp`;
+        });
+
+        return {
+            rutaImgDragon
         };
     }
 });
@@ -42,12 +48,14 @@ export default defineComponent({
     right: 41%
     text-align: center
 
-    .num-cartas
-        font-size: calc(var(--pH) * 10px)
 
-    .txt-cartas
-        font-size: calc(var(--pH) * 2.5px)
+.txt-cartas
+    font-size: calc(var(--phx) * 2)
 
 
+.img-dragon-partida
+    height: calc(var(--phx) * 12)
+    width: auto
+
 //
 </style>