From 6169725f7d96402d499786ac1c08e25c1476f8aa Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 26 Oct 2020 11:58:32 -0500
Subject: [PATCH] Agregado indicador de dragon del jugador y indicador de mano
 abierta/cerrada.

---
 src/variables.ts                              |  6 ++--
 .../Juego/components/contenedor-cartas.vue    |  3 +-
 src/views/Juego/components/mano.vue           | 34 ++++++++++++++-----
 .../opciones-mano/opcion-ignorar.vue          |  7 ++--
 .../components/opciones-mano/opcion-seq.vue   |  7 ++--
 .../components/opciones-mano/opcion-tri.vue   |  7 ++--
 .../components/opciones-mano/opcion-win.vue   |  7 ++--
 7 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/variables.ts b/src/variables.ts
index e159aa9..6ed4812 100644
--- a/src/variables.ts
+++ b/src/variables.ts
@@ -1,4 +1,4 @@
-export const servidor =  "0.0.0.0:8080"; // "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
-export const servidorF = `http://${servidor}`;
-export const wsServidor = `ws://${servidor}`;
+export const servidor = "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
+export const servidorF = `https://${servidor}`;
+export const wsServidor = `wss://${servidor}`;
 
diff --git a/src/views/Juego/components/contenedor-cartas.vue b/src/views/Juego/components/contenedor-cartas.vue
index 2ee9125..de631bf 100644
--- a/src/views/Juego/components/contenedor-cartas.vue
+++ b/src/views/Juego/components/contenedor-cartas.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div.cont-cuadrante-cartas-juego
-    img.img-dragon-partida(:src="rutaImgDragon")
+    img.img-dragon-partida(:src="rutaImgDragon" title="Dragon de la partida")
     br
     span.txt-cartas {{ cartasRestantes }} cartas
 
@@ -49,6 +49,7 @@ export default defineComponent({
     text-align: center
     border: solid calc(var(--phx) / 2) #212121
     border-radius: calc(var(--phx))
+    z-index: 10
 
 
 .txt-cartas
diff --git a/src/views/Juego/components/mano.vue b/src/views/Juego/components/mano.vue
index 353e53a..2135653 100644
--- a/src/views/Juego/components/mano.vue
+++ b/src/views/Juego/components/mano.vue
@@ -12,16 +12,18 @@ div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
             :ws="ws"
             :oportunidad="oportunidadSeq"
         )
-        div.opcion-mano(v-if="oportunidadQuad" :style="{backgroundColor: '#9C27B0'}")
-            | Quad
         opcion-win(v-if="oportunidadWin"
             :idUsuario="idUsuario"
             :ws="ws"
             :oportunidad="oportunidadWin"
         )
-        opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadQuad || oportunidadWin"
+        opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadWin"
             :idUsuario="idUsuario" :ws="ws"
         )
+    div.contenedor-dragon-jugador
+        img.imagen-dragon-jugador(:src="rutaDragonJugador" title="Dragon del jugador")
+        i.ph-lock.img-lock-jugador(v-if="idUsuario && mano.cartasReveladas.length === 0" title="Mano cerrada")
+        i.ph-lock-open.img-lock-jugador(v-else-if="idUsuario && mano.cartasReveladas.length !== 0" title="Mano abierta")
     div.cuadrante-mano
         carta(v-for="(c, i) in cartas" :valor="c" :movimiento="posiciones[i]" :fnDescartar="descartarCarta" :key="i")
         carta(:valor="-1")
@@ -164,22 +166,23 @@ export default defineComponent({
             return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Tri")
         });
 
-        const oportunidadQuad = computed<Oportunidad | undefined>(() => {
-            return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Quad")
-        });
-
         const oportunidadWin = computed<Oportunidad | undefined>(() => {
             return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Win")
         });
 
+        const rutaDragonJugador = computed(() => {
+            const nombreDragonMin = props.mano?.dragon?.toLowerCase();
+            return `/img/Dragon_${nombreDragonMin}.webp`;
+        });
+
         return {
             cartas,
             posiciones,
             descartarCarta,
             oportunidadSeq,
             oportunidadTri,
-            oportunidadQuad,
             oportunidadWin,
+            rutaDragonJugador,
             posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
         }
     }
@@ -228,5 +231,20 @@ export default defineComponent({
     text-align: left
 
 
+.contenedor-dragon-jugador
+    position: absolute
+    bottom: 10%
+    left: 13%
+
+
+.imagen-dragon-jugador
+    width: calc(var(--phx) * 5)
+
+
+.img-lock-jugador
+    font-size: calc(var(--phx) * 3)
+    display: inline-block
+    padding-left: calc(var(--phx))
+
 //
 </style>
diff --git a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
index 73c2f30..bb9d156 100644
--- a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
@@ -24,7 +24,7 @@ export default defineComponent({
     },
     setup(props) {
         const route = useRoute();
-        const {pH, phx} = useDimensions();
+        const {pH} = useDimensions();
 
         const idJuego = route.params.id;
 
@@ -40,15 +40,14 @@ export default defineComponent({
 
         return {
             enviarSolicitudIgnorarOportunidad,
-            tamano: computed(() => (pH.value * -0.75) + "px"),
-            phx
+            tamano: computed(() => (pH.value * -0.75) + "px")
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass" vars="{tamano, phx}">
+<style lang="sass" vars="{tamano}">
 
 .opcion-mano
     display: inline-block
diff --git a/src/views/Juego/components/opciones-mano/opcion-seq.vue b/src/views/Juego/components/opciones-mano/opcion-seq.vue
index 2d21771..c141369 100644
--- a/src/views/Juego/components/opciones-mano/opcion-seq.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-seq.vue
@@ -3,7 +3,6 @@ div.opcion-mano(v-for="opcion in opciones" @click="enviarSolicitudSeq(opcion)" :
     div.contenedor-cartas-opcion-mano
         carta(v-for="(c, i) in obtCartasOrdenadas(opcion)"
             :valor="c"
-            :escala="0.5"
             :key="i"
             :resaltarCarta="false"
         )
@@ -37,7 +36,7 @@ export default defineComponent({
     },
     setup(props) {
         const route = useRoute();
-        const {pH, phx} = useDimensions();
+        const {pH} = useDimensions();
 
         const idJuego = route.params.id;
 
@@ -70,14 +69,14 @@ export default defineComponent({
             enviarSolicitudSeq,
             obtCartasOrdenadas,
             tamano: computed(() => (pH.value * -0.75) + "px"),
-            phx
+            escala: 0.5
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass" vars="{tamano, phx}">
+<style lang="sass" vars="{tamano, escala}">
 
 .contenedor-cartas-opcion-mano
     position: absolute
diff --git a/src/views/Juego/components/opciones-mano/opcion-tri.vue b/src/views/Juego/components/opciones-mano/opcion-tri.vue
index 9e7b2fb..f60ea68 100644
--- a/src/views/Juego/components/opciones-mano/opcion-tri.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-tri.vue
@@ -3,7 +3,6 @@ div.opcion-mano(@click="enviarSolicitudSeq()" :style="{backgroundColor: '#3F51B5
     div.contenedor-cartas-opcion-mano
         carta(v-for="(c, i) in obtCartas()"
             :valor="c"
-            :escala="0.5"
             :key="i"
             :resaltarCarta="false"
         )
@@ -37,7 +36,7 @@ export default defineComponent({
     },
     setup(props) {
         const route = useRoute();
-        const {pH, phx} = useDimensions();
+        const {pH} = useDimensions();
 
         const idJuego = route.params.id;
 
@@ -75,14 +74,14 @@ export default defineComponent({
             enviarSolicitudSeq,
             obtCartas,
             tamano: computed(() => (pH.value * -0.75) + "px"),
-            phx
+            escala: 0.5
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass" vars="{tamano, phx}">
+<style lang="sass" vars="{tamano, escala}">
 
 .contenedor-cartas-opcion-mano
     position: absolute
diff --git a/src/views/Juego/components/opciones-mano/opcion-win.vue b/src/views/Juego/components/opciones-mano/opcion-win.vue
index 69cd364..07e170d 100644
--- a/src/views/Juego/components/opciones-mano/opcion-win.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-win.vue
@@ -28,7 +28,7 @@ export default defineComponent({
     },
     setup(props) {
         const route = useRoute();
-        const {pH, phx} = useDimensions();
+        const {pH} = useDimensions();
 
         const idJuego = route.params.id;
 
@@ -48,15 +48,14 @@ export default defineComponent({
 
         return {
             enviarSolicitudWin,
-            tamano: computed(() => (pH.value * -0.75) + "px"),
-            phx
+            tamano: computed(() => (pH.value * -0.75) + "px")
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass" vars="{tamano, phx}">
+<style lang="sass" vars="{tamano}">
 
 .opcion-mano
     position: relative