Agregada funcionalidad descartar carta

Agregados botones para Seq/Tri/Quad/Win

src/components/carta.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div(style="display: inline-block")
+div(@click="fnDescartar" style="display: inline-block")
     div.c-carta(v-if="valor === 0")
         div.c-carta-oculta(v-html="'&nbsp;'")
     div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="'carta-' + tipoCarta")
@@ -104,11 +104,16 @@ export default defineComponent({
             }
         });
 
+        const fnDescartar = () => {
+            props.fnDescartar!!(props.valor);
+        }
+
         return {
             tipo,
             tipoCarta,
             valorC,
             colorDragon,
+            fnDescartar,
             pxesc
         }
     }

src/views/Ayuda/Ayuda.vue

@@ -278,9 +278,13 @@ div
             grupo-cartas(:cartas="[2, 2, 3, 20, 20, 21, 34, 35, 52, 52, 53]")
 
         div.yaku
-            p 3 triples de J, Q y K
+            p 3 triples o cuádruples de J, Q y K
             grupo-cartas(:cartas="[192, 192, 192, 224, 224, 224, 256, 256, 256, 16, 16]")
 
+        div.yaku
+            p Solo dragones, J, K y Q
+            grupo-cartas(:cartas="[64, 64, 64, 128, 128, 128, 192, 192, 192, 224, 224]")
+
         div.yaku
             p 1 par del mismo número, mismo color y mismo símbolo (no disponible)
 

src/views/Juego/Juego.vue

@@ -7,10 +7,15 @@ div
                 span(:style="{fontSize: `${pH * 10}px`}") {{ cartasRestantes }}
                 br
                 span(:style="{fontSize: `${pH * 2.5}px`}") Cartas restantes
-            mano(:mano="mano2" :posicion="2" :esTurnoActual="turnoActual === obtClave(map, '2')")
-            mano(:mano="mano3" :posicion="3" :esTurnoActual="turnoActual === obtClave(map, '3')")
-            mano(:mano="mano4" :posicion="4" :esTurnoActual="turnoActual === obtClave(map, '4')")
-            mano(:mano="mano1" :posicion="1" :esTurnoActual="turnoActual === obtClave(map, '1')")
+            mano(:mano="mano2" :posicion="2" :esTurnoActual="turnoActual === obtClaveMap('2')")
+            mano(:mano="mano3" :posicion="3" :esTurnoActual="turnoActual === obtClaveMap('3')")
+            mano(:mano="mano4" :posicion="4" :esTurnoActual="turnoActual === obtClaveMap('4')")
+            mano(
+                :mano="mano1"
+                :posicion="1"
+                :esTurnoActual="turnoActual === obtClaveMap('1')"
+                :fnDescartarCarta="descartarCarta"
+            )
 
 //
 </template>
@@ -187,6 +192,7 @@ export default defineComponent({
             }
         };
 
+        const obtClaveMap = (s: string) => obtClave(map, s);
         return {
             dora,
             doraOculto,
@@ -197,7 +203,8 @@ export default defineComponent({
             mano3,
             mano4,
             turnoActual,
-            obtClave,
+            obtClaveMap,
+            descartarCarta,
             pH,
             ph,
             pw,

src/views/Juego/components/contenedor-descartes.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+div.cont-cuadrante-descarte(:class="claseTurnoActual")
+    div(v-for="cartas in grupoCartas")
+        carta(v-for="(c, i) in cartas" :valor="c" :escala="escala" :key="i")
+
+//
+</template>
+
+<script lang="ts">
+import {defineComponent, computed} from "vue";
+import { useDimensions } from "@/components/useDimensions";
+import carta from "@/components/carta.vue";
+
+const splitArray = (arr: number[], numElems: number) => {
+    const res = [];
+    let i = 0;
+    while (true) {
+        if (i >= arr.length) break;
+        const arrTemp = [];
+        for (let j = 0; j < numElems; i++, j++) {
+            if (i >= arr.length) break;
+            arrTemp.push(arr[i]);
+        }
+        res.push(arrTemp);
+    }
+    return res;
+};
+
+export default defineComponent({
+    name: "contenedor-descartes",
+    components: {carta},
+    props: {
+        cartas: {
+            type: Array,
+            default: []
+        },
+        escala: {
+            type: Number,
+            default: 0.75
+        },
+        esTurnoActual: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props) {
+        const {phx} = useDimensions();
+
+        const grupoCartas = computed(() => splitArray(props.cartas as number[], 6));
+        const claseTurnoActual = computed(() => props.esTurnoActual? "cont-cuadrante-descarte-turno-actual": "");
+
+        return {
+            grupoCartas,
+            claseTurnoActual,
+            phx
+        }
+    }
+});
+
+</script>
+
+<style scoped lang="sass" vars="{phx, escala}">
+
+.cont-cuadrante-descarte
+    position: absolute
+    width: 25%
+    height: 20%
+    bottom: 17%
+    right: 37.5%
+    text-align: left
+    border-radius: calc(var(--phx) * 1.5 * var(--escala))
+    border-top-style: solid
+    border-top-width: calc(var(--phx) * 1.25 * var(--escala))
+    border-top-color: #4CAF50
+
+.cont-cuadrante-descarte-turno-actual
+    border-top-color: red
+
+//
+</style>

src/views/Juego/components/mano.vue

@@ -1,7 +1,23 @@
 <template lang="pug">
 div.cont-cuadrante-2-mano
+    contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
+    div.cont-opciones-mano
+        div.opcion-mano(v-if="hayTri" :style="{backgroundColor: '#3F51B5'}")
+            | Tri
+        div.opcion-mano(v-if="haySeq" :style="{backgroundColor: '#009688'}")
+            | Seq
+        div.opcion-mano(v-if="hayQuad" :style="{backgroundColor: '#9C27B0'}")
+            | Quad
+        div.opcion-mano(v-if="hayWin" :style="{backgroundColor: '#f44336'}")
+            | Win
+        div.opcion-mano(:style="{backgroundColor: '#9E9E9E'}")
+            | Ignorar
     div.cuadrante-mano
         carta(v-for="(c, i) in cartas" :valor="c" :movimiento="posiciones[i]" :fnDescartar="descartarCarta" :key="i")
+        carta(:valor="-1")
+        carta(:valor="mano.sigCarta" :fnDescartar="descartarCarta")
+        carta(:valor="-1")
+        carta(v-for="(c, i) in mano.cartasReveladas" :valor="c" :key="i")
 
 //
 </template>
@@ -10,6 +26,9 @@ div.cont-cuadrante-2-mano
 import { computed, defineComponent, ref, watch } from "vue";
 import { useDimensions } from "@/components/useDimensions";
 import carta from "@/components/carta.vue";
+import contenedorDescartes from "./contenedor-descartes.vue"
+import { Mano } from "@/views/Juego/types/Mano";
+import { Oportunidad } from "@/views/Juego/types/Oportunidad";
 
 const estaOrdenado = (nums: number[]) => {
     for (let i = 0, j = 1; j < nums.length ; i++, j++) {
@@ -22,7 +41,7 @@ const esperar = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)
 
 export default defineComponent({
     name: "mano",
-    components: {carta},
+    components: {carta, contenedorDescartes},
     props: {
         mano: Object,
         posicion: Number,
@@ -33,11 +52,7 @@ export default defineComponent({
     setup(props) {
         const {pH, phx} = useDimensions();
         const anchoCarta = computed(() => pH.value * 5 + 2 * (pH.value * 0.225))
-        const cartas = ref<number[]>(props.mano?.cartas);
-        const entrada = props.mano?.sigCarta;
-        const gruposAbiertos = props.mano?.cartasReveladas;
-        const descartes = props.mano?.descartes;
-        const ultimaCartaDescartada = props.oportunidades?.cartaDescartada ?? 0;
+        const cartas = ref<number[]>((props.mano as Mano).cartas);
         const posicion = props.posicion;
         const esTurnoActual = props.esTurnoActual;
         const oportunidades = props.oportunidades;
@@ -114,11 +129,42 @@ export default defineComponent({
             posiciones.value = new Array(n.length).fill("none");
         });
 
+        const hayTri = computed(() => {
+            for (const o of (props.mano!! as Mano).oportunidades) {
+                if (o.nombreOportunidad === "Tri") return true;
+            }
+            return false;
+        });
+
+        const haySeq = computed(() => {
+            for (const o of props.mano!!.oportunidades) {
+                if ((o as unknown as Oportunidad).nombreOportunidad === "Seq") return true;
+            }
+            return false;
+        });
+
+        const hayQuad = computed(() => {
+            for (const o of props.mano!!.oportunidades) {
+                if ((o as unknown as Oportunidad).nombreOportunidad === "Quad") return true;
+            }
+            return false;
+        });
+
+        const hayWin = computed(() => {
+            for (const o of props.mano!!.oportunidades) {
+                if ((o as unknown as Oportunidad).nombreOportunidad === "Win") return true;
+            }
+            return false;
+        });
 
         return {
             cartas,
             posiciones,
             descartarCarta,
+            hayTri,
+            haySeq,
+            hayQuad,
+            hayWin,
             phx,
             posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
         }
@@ -129,6 +175,30 @@ export default defineComponent({
 
 <style scoped lang="sass" vars="{phx, posicionW}">
 
+.cont-opciones-mano
+    position: absolute
+    width: 65%
+    height: 7%
+    bottom: 11%
+    left: 13%
+    text-align: right
+
+
+.opcion-mano
+    display: inline-block
+    min-width: 17%
+    font-size: calc(var(--phx) * 3)
+    text-align: center
+    cursor: pointer
+    margin-left: var(--phx)
+    padding: var(--phx) 0
+    color: white
+    font-weight: bold
+    border-radius: calc(var(--phx) * 0.5)
+    box-shadow: 0 0 10px 1px rgba(100, 100, 100, 0.5)
+    transition: transform 100ms
+
+
 .cont-cuadrante-2-mano
     position: absolute
     width: 100%

src/views/Juego/types/Mano.ts

@@ -0,0 +1,10 @@
+import { Oportunidad } from "@/views/Juego/types/Oportunidad";
+
+export declare class Mano {
+    cartas: number[]
+    cartasReveladas: number[][]
+    descartes: number[]
+    sigCarta: number
+    oportunidades: Oportunidad[]
+}
+

src/views/Juego/types/Oportunidad.ts

@@ -0,0 +1,15 @@
+export declare interface Oportunidad {
+    cartaDescartada: number
+    nombreOportunidad: string
+}
+
+export declare class OportunidadSeq implements Oportunidad {
+    cartaDescartada: number;
+    nombreOportunidad: string;
+    combinaciones: {first: number, second: number}[]
+}
+
+export declare class OportunidadTri implements Oportunidad {
+    cartaDescartada: number;
+    nombreOportunidad: string;
+}