Cambiar elementos visuales

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

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")

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

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

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
 
 

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)
 
 //

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")
         }
     }
 });

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
         }
     }

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
         }
     }

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")
         }
     }
 });