From d17f500beb4ffa50328b68ca818b6fd2862567b6 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Sun, 27 Dec 2020 19:19:17 -0500
Subject: [PATCH] Cambiar elementos visuales

---
 src/components/carta.vue                      | 21 ++++++++++++-------
 src/views/Ayuda/Ayuda.vue                     |  7 +++++++
 src/views/Inicio/Inicio.vue                   |  2 +-
 .../Juego/components/contenedor-cartas.vue    |  2 +-
 .../Juego/components/contenedor-descartes.vue |  6 +++---
 .../Juego/components/contenedor-dora.vue      |  2 +-
 .../opciones-mano/opcion-ignorar.vue          |  2 +-
 .../components/opciones-mano/opcion-seq.vue   |  2 +-
 .../components/opciones-mano/opcion-tri.vue   |  2 +-
 .../components/opciones-mano/opcion-win.vue   |  2 +-
 10 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/carta.vue b/src/components/carta.vue
index 77fb493..a54af4b 100644
--- a/src/components/carta.vue
+++ b/src/components/carta.vue
@@ -128,10 +128,10 @@ export default defineComponent({
         const claseDoraWatcher = getClaseDora(valorR, store);
         watchEffect(() => {
             if (claseDoraWatcher.value !== "") {
-                const tiempoHastaSig5s = 5000 - (new Date()).getTime() % 5000;
+                const tiempoHastaSigIntervalo = 4000 - (new Date()).getTime() % 4000;
                 setTimeout(() => {
                     claseDora.value = claseDoraWatcher.value;
-                }, tiempoHastaSig5s);
+                }, tiempoHastaSigIntervalo);
             }
         });
 
@@ -176,17 +176,24 @@ export default defineComponent({
 
 <style lang="sass">
 
+.cont-carta
+    margin-left: 1px
+
 .c-carta-resaltada
     transform: translateY(calc(var(--phx) * -1))
+    filter: saturate(1.75) !important
+    opacity: 1 !important
 
 .c-carta
+    opacity: 0.85
     position: relative
     font:
         size: calc(var(--phx) * 4 * var(--escala))
         weight: normal
         family: "Secular One", "Pt Serif", serif
     display: table-cell
-    border: solid calc(var(--phx) * 0.2 * var(--escala)) var(--color-borde)
+    border: solid calc(var(--phx) * 0.3 * var(--escala)) var(--color-borde)
+    margin-left: 1px
     width: calc(var(--phx) * 5 * var(--escala))
     height: calc(var(--phx) * 8.5 * var(--escala))
     min-width: calc(var(--phx) * 5 * var(--escala))
@@ -211,14 +218,14 @@ export default defineComponent({
         top: -95%
         width: 100%
         height: 100%
-        background-image: linear-gradient(135deg, rgba(210, 210, 210, 0.0) 0%, rgba(210, 210, 210, 0.0) 35%, rgba(210, 210, 210, 0.3) 45%, rgba(210, 210, 210, 0.9) 53%, rgba(210, 210, 210, 0.3) 57%, rgba(210, 210, 210, 0.0) 65%, rgba(210, 210, 210, 0.0) 100%)
-        transition: transform 500ms
-        animation-duration: 5s
+        background-image: linear-gradient(135deg, rgba(210, 210, 210, 0.0) 0%, rgba(210, 210, 210, 0.0) 45%, rgba(210, 210, 210, 0.3) 55%, rgba(210, 210, 210, 0.9) 63%, rgba(210, 210, 210, 0.3) 67%, rgba(210, 210, 210, 0.0) 75%, rgba(210, 210, 210, 0.0) 100%)
+        transition: transform 1000ms
+        animation-duration: 4s
         animation-name: brillocarta
         animation-iteration-count: infinite
 
 @keyframes brillocarta
-    35%
+    50%
         transform: translateY(200%)
 
     to
diff --git a/src/views/Ayuda/Ayuda.vue b/src/views/Ayuda/Ayuda.vue
index 1532bbd..fe9592b 100644
--- a/src/views/Ayuda/Ayuda.vue
+++ b/src/views/Ayuda/Ayuda.vue
@@ -17,6 +17,13 @@ div
 
         div.pad
 
+            div.yaku
+                h4
+                    i.ph-lock-bold.img-lock(title="Solo en mano cerrada")
+                    | Mano completamente cerrada
+                p Ganar en tu turno con una mano cerrada
+                grupo-cartas(:cartas="[2, 4, 5, 7, 8, 42, 44, 46, 47, 48, 50]")
+
             div.yaku
                 h4
                     i.ph-lock-bold.img-lock(title="Solo en mano cerrada")
diff --git a/src/views/Inicio/Inicio.vue b/src/views/Inicio/Inicio.vue
index bef2888..f3bd702 100644
--- a/src/views/Inicio/Inicio.vue
+++ b/src/views/Inicio/Inicio.vue
@@ -21,7 +21,7 @@ div
 
     br
     p
-        router-link(to="/ayuda/") Ayuda
+        router-link(to="/ayuda/") Yaku
     br
     p
         router-link(to="/tutorial/") Tutorial
diff --git a/src/views/Juego/components/contenedor-cartas.vue b/src/views/Juego/components/contenedor-cartas.vue
index de631bf..5801ea2 100644
--- a/src/views/Juego/components/contenedor-cartas.vue
+++ b/src/views/Juego/components/contenedor-cartas.vue
@@ -53,7 +53,7 @@ export default defineComponent({
 
 
 .txt-cartas
-    font-size: calc(var(--phx) * 2)
+    font-size: calc(var(--phx) * 3)
 
 
 .img-dragon-partida
diff --git a/src/views/Juego/components/contenedor-descartes.vue b/src/views/Juego/components/contenedor-descartes.vue
index 7edf5d0..46e4b55 100644
--- a/src/views/Juego/components/contenedor-descartes.vue
+++ b/src/views/Juego/components/contenedor-descartes.vue
@@ -60,13 +60,13 @@ export default defineComponent({
 
 .cont-cuadrante-descarte
     position: absolute
-    width: 25%
+    width: 26%
     height: 20%
     bottom: 17%
-    right: 37.5%
+    right: 37%
     text-align: left
     border-top-style: solid
-    border-top-width: calc(var(--phx) * 1.25 * var(--escala))
+    border-top-width: calc(var(--phx) * 0.75 * var(--escala))
     border-top-color: transparent
 
 
diff --git a/src/views/Juego/components/contenedor-dora.vue b/src/views/Juego/components/contenedor-dora.vue
index 48cfbf3..f6e9890 100644
--- a/src/views/Juego/components/contenedor-dora.vue
+++ b/src/views/Juego/components/contenedor-dora.vue
@@ -56,7 +56,7 @@ export default defineComponent({
     padding: var(--phx)
     border-radius: calc(var(--phx) / 2)
     font-size: calc(var(--phx) * 2.5)
-    box-shadow: 0 0 calc(var(--phx) * 0.75) calc(var(--phx) * 0.75) #dedede
+    box-shadow: 0 0 calc(var(--phx)) calc(var(--phx)) rgba(120, 120, 120, 0.25)
     background-color: var(--color-fondo)
 
 //
diff --git a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
index 90e939d..b173888 100644
--- a/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-ignorar.vue
@@ -44,7 +44,7 @@ export default defineComponent({
 
         return {
             enviarSolicitudIgnorarOportunidad,
-            tamano: computed(() => (pH.value * -0.75) + "px")
+            tamano: computed(() => (pH.value * -0.25) + "px")
         }
     }
 });
diff --git a/src/views/Juego/components/opciones-mano/opcion-seq.vue b/src/views/Juego/components/opciones-mano/opcion-seq.vue
index c141369..e4f6e28 100644
--- a/src/views/Juego/components/opciones-mano/opcion-seq.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-seq.vue
@@ -68,7 +68,7 @@ export default defineComponent({
             opciones,
             enviarSolicitudSeq,
             obtCartasOrdenadas,
-            tamano: computed(() => (pH.value * -0.75) + "px"),
+            tamano: computed(() => (pH.value * -0.25) + "px"),
             escala: 0.5
         }
     }
diff --git a/src/views/Juego/components/opciones-mano/opcion-tri.vue b/src/views/Juego/components/opciones-mano/opcion-tri.vue
index f60ea68..1b1fea4 100644
--- a/src/views/Juego/components/opciones-mano/opcion-tri.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-tri.vue
@@ -73,7 +73,7 @@ export default defineComponent({
         return {
             enviarSolicitudSeq,
             obtCartas,
-            tamano: computed(() => (pH.value * -0.75) + "px"),
+            tamano: computed(() => (pH.value * -0.25) + "px"),
             escala: 0.5
         }
     }
diff --git a/src/views/Juego/components/opciones-mano/opcion-win.vue b/src/views/Juego/components/opciones-mano/opcion-win.vue
index 7f010db..42dd780 100644
--- a/src/views/Juego/components/opciones-mano/opcion-win.vue
+++ b/src/views/Juego/components/opciones-mano/opcion-win.vue
@@ -47,7 +47,7 @@ export default defineComponent({
 
         return {
             enviarSolicitudWin,
-            tamano: computed(() => (pH.value * -0.75) + "px")
+            tamano: computed(() => (pH.value * -0.25) + "px")
         }
     }
 });