Agregada pantalla que muestra la mano, yaku y puntos del ganador

src/styles/global.sass

@@ -8,6 +8,7 @@ body
 .tema-automatico
   --color-fondo: #ffffff
   --color-texto: #151515
+  --color-fondo-transparente: rgba(255, 255, 255, 0.8)
   --color-borde: gray
   --color-texto-carta-roja: #b71c1c
   --color-fondo-carta-roja: #ffffff
@@ -25,6 +26,7 @@ body
   .tema-automatico
     --color-fondo: #151515
     --color-texto: #dedede
+    --color-fondo-transparente: rgba(21, 21, 21, 0.85)
     --color-borde: #c1c1c1
     --color-texto-carta-roja: #dedede
     --color-fondo-carta-roja: #b71c1c

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/Ayuda/Ayuda.vue

@@ -332,6 +332,7 @@ div
 import {defineComponent} from "vue";
 import carta from "@/components/carta.vue";
 import grupoCartas from "../../components/grupo-cartas.vue";
+import { useDimensions } from "@/components/useDimensions";
 
 const cartas = [2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15,
     16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 34, 34, 35, 35, 36, 36, 37, 37, 38, 38, 39, 39, 40, 40, 41,
@@ -399,20 +400,24 @@ export default defineComponent({
         grupoCartas
     },
     setup() {
+        const {phx} = useDimensions();
+
         return {
             cartas,
             cartasR,
             parCartasR,
             seqCartasR,
             triCartasR,
-            cuaCartasR
+            cuaCartasR,
+            phx,
+            escala: 1
         }
     }
 });
 
 </script>
 
-<style scoped lang="sass">
+<style lang="sass" vars="{phx, escala}">
 
 .pad
     padding-left: 2rem

src/views/Juego/Juego.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 div
+    pantalla-ganador(:datos="datosJuego")
     contenedor-dora(:turnosRestantes="turnosDora")
     div.con-int-juego
         div.cont-2-juego
@@ -28,15 +29,19 @@ import { wsServidor } from "@/variables";
 import contenedorDora from "./components/contenedor-dora.vue"
 import mano from "@/views/Juego/components/mano.vue";
 import contenedorCartas from "./components/contenedor-cartas.vue"
+import pantallaGanador from "./components/pantalla-ganador.vue"
+import { EstadoJuego } from "@/views/Juego/types/EstadoJuego";
+import { DatosJuego } from "@/views/Juego/types/DatosJuego";
+import { Dragon, Mano } from "@/views/Juego/types/Mano";
 
-const manoInicial = {
+const manoInicial: Mano = {
     cartas: [],
-    allIn: false,
-    cartaSig: -1,
     cartasReveladas: [],
     descartes: [],
     sigCarta: -1,
-    oportunidades: []
+    oportunidades: [],
+    dragon: "Negro" as Dragon,
+    esGanador: false
 };
 
 const obtClave = (obj: any, valor: string): string | undefined => {
@@ -47,7 +52,7 @@ const obtClave = (obj: any, valor: string): string | undefined => {
 
 export default defineComponent({
     name: "Juego",
-    components: {contenedorDora, mano, contenedorCartas},
+    components: {contenedorDora, mano, contenedorCartas, pantallaGanador},
     setup() {
         const route = useRoute();
         const store = useStore();
@@ -63,12 +68,13 @@ export default defineComponent({
 
         const dragonPartida = ref("");
 
-        const mano1 = ref(manoInicial);
+        const mano1 = ref<Mano>(manoInicial);
-        const mano2 = ref(manoInicial);
+        const mano2 = ref<Mano>(manoInicial);
-        const mano3 = ref(manoInicial);
+        const mano3 = ref<Mano>(manoInicial);
-        const mano4 = ref(manoInicial);
+        const mano4 = ref<Mano>(manoInicial);
 
-        const oportunidades = ref({});
+        const estadoJuego = ref<EstadoJuego>("Iniciado");
+        const datosJuego = ref<DatosJuego>();
 
         const idJuego: string = route.params.id as string;
         const idUsuario = store.state.idUsuario;
@@ -106,14 +112,15 @@ export default defineComponent({
                 switch (info.operacion) {
                     case "actualizar_datos": {
                         cartaDescartada.value = false;
-                        const d = info.datos;
+                        const d: DatosJuego = info.datos;
-                        console.log(info.datos);
+                        datosJuego.value = d;
-                        dora.value = info.datos.dora;
+                        dora.value = d.dora;
                         doraOculto.value = info.datos.doraOculto;
                         store.commit("setDora", [info.datos.dora, info.datos.doraOculto]);
 
                         turnosDora.value = info.datos.turnosHastaDora;
                         dragonPartida.value = d.dragonPartida;
+                        estadoJuego.value = d.estadoJuego;
 
                         // Mapear IDS a posiciones
                         const turnoJugador = d.ordenJugadores.findIndex((id: string) => id === idUsuario);
@@ -123,7 +130,7 @@ export default defineComponent({
                         map[d.ordenJugadores[(turnoJugador + 3) % 4]] = "4";
 
                         for (const idUsuario in d.manos) {
-                            const mano = d.manos[idUsuario];
+                            const mano: Mano = d.manos[idUsuario];
                             const posMano = map[idUsuario];
 
                             const vSetMano = (() => {
@@ -173,9 +180,6 @@ export default defineComponent({
 
                         break;
                     }
-                    case "oportunidad": {
-                        oportunidades.value = info.datos;
-                    }
                 }
             });
 
@@ -213,6 +217,8 @@ export default defineComponent({
             mano3,
             mano4,
             turnoActual,
+            estadoJuego,
+            datosJuego,
             obtClaveMap,
             descartarCarta,
             pH,

src/views/Juego/components/mano.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
     contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
-    div.cont-opciones-mano
+    div.cont-opciones-mano(v-if="mano.esGanador === false")
         opcion-tri(v-if="oportunidadTri"
             :idUsuario="idUsuario"
             :ws="ws"
@@ -19,11 +19,11 @@ div.cont-cuadrante-2-mano(:style="'transform: rotate(' + posicionW + ')'")
         )
         opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadWin"
             :idUsuario="idUsuario" :ws="ws"
+            :tipoOportunidad="(oportunidadWin && oportunidadWin.esTsumo)? 'tsumo': 'oportunidad'"
         )
     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")

src/views/Juego/components/opciones-mano/opcion-ignorar.vue

@@ -20,6 +20,10 @@ export default defineComponent({
         ws: {
             type: WebSocket,
             required: true
+        },
+        tipoOportunidad: {
+            type: String,
+            default: "oportunidad"
         }
     },
     setup(props) {
@@ -30,7 +34,7 @@ export default defineComponent({
 
         const enviarSolicitudIgnorarOportunidad = () => {
             props.ws.send(JSON.stringify({
-                operacion: "ignorar_oportunidad",
+                operacion: `ignorar_${props.tipoOportunidad}`,
                 datos: JSON.stringify({
                     idJuego,
                     idUsuario: props.idUsuario

src/views/Juego/components/opciones-mano/opcion-win.vue

@@ -40,8 +40,7 @@ export default defineComponent({
                 operacion: "llamar_ron",
                 datos: JSON.stringify({
                     idJuego,
-                    idUsuario: props.idUsuario,
+                    idUsuario: props.idUsuario
-                    cartaDescartada: op.value.cartaDescartada
                 })
             }));
         };

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

@@ -0,0 +1,120 @@
+<template lang="pug">
+div.contenedor-pantalla-ganador(v-if="manoGanadora" :style="'--escala: 1.5; --phx: ' + phx + ';'")
+    h1 Ganador!
+
+    grupo-cartas(:cartas="cartasManoGanadora")
+
+    hr
+
+    h2 Yaku:
+    h3.yaku(v-for="y in yaku") {{ y }}
+
+    hr
+
+    h2 {{ valorMano }} puntos!
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent, computed} from "vue";
+import { DatosJuego } from "@/views/Juego/types/DatosJuego";
+import { useDimensions } from "@/components/useDimensions";
+import { Mano } from "@/views/Juego/types/Mano";
+import grupoCartas from "@/components/grupo-cartas.vue"
+import { OportunidadWin } from "@/views/Juego/types/Oportunidad";
+
+export default defineComponent({
+    name: "pantalla-ganador",
+    components: {grupoCartas},
+    props: {
+        datos: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        const datos = computed<DatosJuego>(() => (props.datos as unknown) as DatosJuego);
+        const {phx} = useDimensions();
+
+        const manoGanadora = computed<Mano | undefined>(() => {
+            if (!datos.value) return;
+
+            return Object.values(datos.value.manos).find((m) => m.esGanador);
+        });
+
+        const cartasManoGanadora = computed(() => {
+            if (manoGanadora.value === undefined) return [];
+
+            const cartas: Array<number> = [];
+
+            cartas.push(...manoGanadora.value.cartas)
+            cartas.push(-1);
+
+            // TODO: Diferenciar entre Ron y Tsumo. Por ahora solo Ron
+            const manoDescartadorTupla = Object.entries(datos.value.manos).find(([id]) =>
+                id === datos.value.turnoActual
+            );
+
+            if (manoDescartadorTupla === undefined) return [];
+
+            const descartesDescartador = manoDescartadorTupla[1].descartes;
+            const cartaDescartada = descartesDescartador[descartesDescartador.length - 1];
+
+            cartas.push(cartaDescartada);
+
+            for (const grupo of manoGanadora.value.cartasReveladas) {
+                cartas.push(-1);
+                cartas.push(...grupo);
+            }
+
+            return cartas;
+        });
+
+        const yaku = computed<Array<string>>(() => {
+            if (manoGanadora.value === undefined) return [];
+
+            const oportunidadWin = manoGanadora.value!!.oportunidades.find((o) => o.nombreOportunidad === "Win")!! as OportunidadWin;
+            return oportunidadWin.yaku;
+        });
+
+        const valorMano = computed(() => {
+            const n = yaku.value.length;
+            const preValor = 1000 + (270 * n**2) - (18 * n**3);
+            // Eliminar los 2 ultimos números.
+            return Math.floor(preValor / 100) * 100;
+        });
+
+        return {
+            manoGanadora,
+            cartasManoGanadora,
+            phx,
+            valorMano,
+            yaku
+        }
+    }
+});
+
+</script>
+
+<style scoped lang="sass">
+
+.contenedor-pantalla-ganador
+    position: fixed
+    top: 10%
+    left: 10%
+    width: 80%
+    height: 80%
+    z-index: 100
+    background-color: var(--color-fondo-transparente)
+    padding: 1rem
+
+h1, h2, h3, h4, h5
+    margin: 0
+    padding: 1rem 0
+
+.yaku
+    padding: 0
+
+//
+</style>

src/views/Juego/types/DatosJuego.ts

@@ -0,0 +1,16 @@
+import { Dragon, Mano } from "./Mano";
+import { EstadoJuego } from "./EstadoJuego";
+
+export interface DatosJuego {
+    dora: Array<number>,
+    doraOculto: Array<number>,
+    manos: {
+        [s: string]: Mano
+    },
+    cartasRestantes: number,
+    ordenJugadores: Array<string>,
+    turnoActual: string,
+    turnosHastaDora: number,
+    dragonPartida: Dragon,
+    estadoJuego: EstadoJuego
+}

src/views/Juego/types/EstadoJuego.ts

@@ -0,0 +1 @@
+export type EstadoJuego = "Espera" | "Iniciado" | "Terminado";

src/views/Juego/types/Mano.ts

@@ -9,5 +9,6 @@ export declare class Mano {
     sigCarta: number
     oportunidades: Oportunidad[]
     dragon: Dragon
+    esGanador: boolean
 }
 

src/views/Juego/types/Oportunidad.ts

@@ -1,6 +1,6 @@
 export declare interface Oportunidad {
-    cartaDescartada: number
+    cartaDescartada: number;
-    nombreOportunidad: string
+    nombreOportunidad: string;
 }
 
 export declare class OportunidadSeq implements Oportunidad {
@@ -18,4 +18,6 @@ export declare class OportunidadTri implements Oportunidad {
 export declare class OportunidadWin implements Oportunidad {
     cartaDescartada: number;
     nombreOportunidad: string;
+    esTsumo: boolean;
+    yaku: string[];
 }