Eliminado cursor 'pointer' de las cartas vacias y al reves. Mejorado texto del ganador

src/components/carta.vue

@@ -5,15 +5,20 @@ div.cont-carta(
         @mouseenter="aplicarResaltadoCarta"
         @mouseleave="quitarResaltadoCarta"
     )
-    div.c-carta.c-carta-oculta-top(v-if="valor === 0")
+    div.c-carta.c-carta-transparente(v-if="valor === -1")
+    // Carta oculta
+    div.c-carta.c-carta-oculta-top(v-else-if="valor === 0")
         div.c-carta-oculta(v-html="' '")
-    div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="['carta-' + tipoCarta, claseResaltado, claseDora]")
+    // Carta de números
+    div.c-carta.c-carta-pointer(v-else-if="tipo === 0 || tipo === 1" :class="['carta-' + tipoCarta, claseResaltado, claseDora]")
         span.c-carta-numero {{ valorC }}
         div.c-carta-img
             v-img-simbolo(:tipo="nombreSimbolo")
-    div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="['carta-' + tipoCarta, claseResaltado, claseDora]")
+    // Carta de dragon
+    div.c-carta.c-carta-pointer(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="['carta-' + tipoCarta, claseResaltado, claseDora]")
         img.img-dragon(:src="'/img/Dragon_' + colorDragon + '.webp'" :alt="'Dragon ' + colorDragon")
-    div.c-carta(v-else :class="['carta-' + tipoCarta, claseDora, claseResaltado]" v-html="valorC")
+    // Carta de realeza
+    div.c-carta.c-carta-pointer(v-else :class="['carta-' + tipoCarta, claseDora, claseResaltado]" v-html="valorC")
 
 //
 </template>
@@ -187,10 +192,13 @@ export default defineComponent({
     min-width: calc(var(--phx) * 5 * var(--escala))
     text-align: center
     vertical-align: middle
-    cursor: pointer
+    cursor: default
     transition: transform 50ms, opacity 50ms
     user-select: none
 
+.c-carta-pointer
+    cursor: pointer
+
 
 .c-carta-bonus
     overflow: hidden
@@ -229,6 +237,9 @@ export default defineComponent({
     border-radius: 0.1rem
     opacity: 0.75
 
+.c-carta-transparente
+    opacity: 0
+
 .c-carta-numero
     display: inline-block
     position: absolute

src/variables.ts

@@ -1,4 +1,4 @@
-export const servidor = "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
+export const servidor = "0.0.0.0:8080"; // "rimajonb.araozu.dev"; // "0.0.0.0:8080"; //
-export const servidorF = `https://${servidor}`;
+export const servidorF = `http://${servidor}`;
-export const wsServidor = `wss://${servidor}`;
+export const wsServidor = `ws://${servidor}`;
 

src/views/Juego/components/pantalla-ganador.vue

@@ -7,17 +7,21 @@ div.contenedor-pantalla-ganador(v-if="manoGanadora" :style="'--escala: 1.5; --ph
     hr
 
     h2 Yaku:
-    h3.yaku(v-for="y in yaku") {{ y }} : {{ obtValorYaku(y) }} puntos
+    h3.yaku(v-for="y in yaku") {{ obtTextoYaku(y) }}
 
     hr
 
-    h2 {{ valorMano }} puntos!
+    h2 {{ valorMano }} puntos
+
+    hr
+
+    h2 {{ valorManoAnimada }} puntos
 
 //
 </template>
 
 <script lang="ts">
-import {defineComponent, computed} from "vue";
+import { defineComponent, computed, ref, Ref, onMounted } from "vue";
 import { DatosJuego } from "@/views/Juego/types/DatosJuego";
 import { useDimensions } from "@/components/useDimensions";
 import { Mano } from "@/views/Juego/types/Mano";
@@ -25,6 +29,10 @@ import grupoCartas from "@/components/grupo-cartas.vue"
 import { OportunidadWin } from "@/views/Juego/types/Oportunidad";
 import { obtValorYaku, Yaku } from "@/views/Juego/types/valoresYaku";
 
+const aumentarValorA = (ref: Ref<number>, valorDestino: number) => {
+
+};
+
 export default defineComponent({
     name: "pantalla-ganador",
     components: {grupoCartas},
@@ -86,18 +94,32 @@ export default defineComponent({
             }
             if (n === 0) return 100;
 
-            const preValor = 1000 + (270 * n**2) - (18 * n**3);
+            const preValor = 1000 + (270 * n ** 2) - (18 * n ** 3);
             // Eliminar los 2 ultimos números.
             return Math.floor(preValor / 100) * 100;
         });
 
+        const obtTextoYaku = (y: Yaku) => {
+            const valorYaku = obtValorYaku(y);
+            if (valorYaku === 0) return "";
+
+            return y + " : " + valorYaku + (valorYaku === 1 ? " punto" : " puntos");
+        };
+
+        const valorManoAnimada = ref(0);
+
+        onMounted(() => {
+            aumentarValorA(valorManoAnimada, 1000);
+        });
+
         return {
             manoGanadora,
             cartasManoGanadora,
             phx,
             valorMano,
             yaku,
-            obtValorYaku
+            obtTextoYaku,
+            valorManoAnimada
         }
     }
 });

src/views/Tutorial/Tutorial.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div.contenedor-tutorial
+div.contenedor-tutorial(:style="'--phx: ' + phx + '; --escala: 1;'")
     barra-lateral.layout
 
     div.layout.contenido
@@ -15,10 +15,18 @@ div.contenedor-tutorial
 import {defineComponent} from "vue";
 import barraLateral from "./components/barra-lateral.vue";
 import slotEstilos from "./components/slot-estilos.vue"
+import { useDimensions } from "@/components/useDimensions";
 
 export default defineComponent({
     name: "Tutorial",
-    components: {barraLateral, slotEstilos}
+    components: {barraLateral, slotEstilos},
+    setup() {
+        const {phx} = useDimensions();
+
+        return {
+            phx
+        }
+    }
 });
 
 </script>

src/views/Tutorial/components/barra-lateral.vue

@@ -44,11 +44,7 @@ div.barra-lateral
         router-link(to="/") Yaku no acumulable
 
     router-link(to="/") Bonus
-    div.inner
+    br
-        router-link(to="/") Bonus cerrado
-        br
-        router-link(to="/") Bonus abierto
-
     router-link(to="/") Dragones
     div.inner
         router-link(to="/") Dragon de la partida