Agregado codigo para recibir OportunidadWin
Araozu
parent
158e482043
commit
a47aeb5944
|
|
@ -178,7 +178,7 @@ export default defineComponent({
|
|||
width: 100%
|
||||
height: 100%
|
||||
color: #ffb500
|
||||
background-image: linear-gradient(135deg, rgba(180, 180, 180, 0.0) 0%, rgba(180, 180, 180, 0.0) 35%, rgba(180, 180, 180, 0.3) 45%, rgba(180, 180, 180, 0.6) 53%, rgba(180, 180, 180, 0.3) 57%, rgba(180, 180, 180, 0.0) 65%, rgba(180, 180, 180, 0.0) 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
|
||||
animation-name: brillocarta
|
||||
|
|
|
|||
|
|
@ -2,21 +2,26 @@
|
|||
div.cont-cuadrante-2-mano
|
||||
contenedor-descartes(:cartas="mano.descartes" :esTurnoActual="esTurnoActual")
|
||||
div.cont-opciones-mano
|
||||
opcion-tri(v-if="hayTri"
|
||||
opcion-tri(v-if="oportunidadTri"
|
||||
:idUsuario="idUsuario"
|
||||
:ws="ws"
|
||||
:oportunidad="oportunidadTri"
|
||||
)
|
||||
opcion-seq(v-if="haySeq"
|
||||
opcion-seq(v-if="oportunidadSeq"
|
||||
:idUsuario="idUsuario"
|
||||
:ws="ws"
|
||||
:oportunidad="oportunidadSeq"
|
||||
)
|
||||
div.opcion-mano(v-if="hayQuad" :style="{backgroundColor: '#9C27B0'}")
|
||||
div.opcion-mano(v-if="oportunidadQuad" :style="{backgroundColor: '#9C27B0'}")
|
||||
| Quad
|
||||
div.opcion-mano(v-if="hayWin" :style="{backgroundColor: '#f44336'}")
|
||||
| Win
|
||||
opcion-ignorar(v-if="hayTri || haySeq || hayQuad || hayWin" :idUsuario="idUsuario" :ws="ws")
|
||||
opcion-win(v-if="oportunidadWin"
|
||||
:idUsuario="idUsuario"
|
||||
:ws="ws"
|
||||
:oportunidad="oportunidadWin"
|
||||
)
|
||||
opcion-ignorar(v-if="oportunidadTri || oportunidadSeq || oportunidadQuad || oportunidadWin"
|
||||
:idUsuario="idUsuario" :ws="ws"
|
||||
)
|
||||
div.cuadrante-mano
|
||||
carta(v-for="(c, i) in cartas" :valor="c" :movimiento="posiciones[i]" :fnDescartar="descartarCarta" :key="i")
|
||||
carta(:valor="-1")
|
||||
|
|
@ -37,7 +42,8 @@ import { Mano } from "@/views/Juego/types/Mano";
|
|||
import opcionIgnorar from "./opciones-mano/opcion-ignorar.vue";
|
||||
import opcionSeq from "./opciones-mano/opcion-seq.vue";
|
||||
import opcionTri from "./opciones-mano/opcion-tri.vue";
|
||||
import { Oportunidad } from "@/views/Juego/types/Oportunidad";
|
||||
import opcionWin from "./opciones-mano/opcion-win.vue"
|
||||
import { Oportunidad, OportunidadSeq, OportunidadTri, OportunidadWin } from "@/views/Juego/types/Oportunidad";
|
||||
|
||||
const estaOrdenado = (nums: number[]) => {
|
||||
for (let i = 0, j = 1; j < nums.length ; i++, j++) {
|
||||
|
|
@ -55,12 +61,16 @@ export default defineComponent({
|
|||
contenedorDescartes,
|
||||
opcionSeq,
|
||||
opcionIgnorar,
|
||||
opcionTri
|
||||
opcionTri,
|
||||
opcionWin
|
||||
},
|
||||
props: {
|
||||
idUsuario: String,
|
||||
ws: WebSocket,
|
||||
mano: Object,
|
||||
mano: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
posicion: Number,
|
||||
esTurnoActual: Boolean,
|
||||
oportunidades: Object,
|
||||
|
|
@ -146,53 +156,30 @@ export default defineComponent({
|
|||
posiciones.value = new Array(n.length).fill("none");
|
||||
});
|
||||
|
||||
const hayTri = computed(() => {
|
||||
console.log(props.mano);
|
||||
for (const o of (props.mano!! as Mano).oportunidades) {
|
||||
if (o?.nombreOportunidad === "Tri") return true;
|
||||
}
|
||||
return false;
|
||||
const oportunidadSeq = computed<Oportunidad | undefined>(() => {
|
||||
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Seq")
|
||||
});
|
||||
|
||||
const haySeq = computed(() => {
|
||||
for (const o of props.mano!!.oportunidades) {
|
||||
if (o?.nombreOportunidad === "Seq") return true;
|
||||
}
|
||||
return false;
|
||||
const oportunidadTri = computed<Oportunidad | undefined>(() => {
|
||||
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Tri")
|
||||
});
|
||||
|
||||
const hayQuad = computed(() => {
|
||||
for (const o of props.mano!!.oportunidades) {
|
||||
if (o?.nombreOportunidad === "Quad") return true;
|
||||
}
|
||||
return false;
|
||||
const oportunidadQuad = computed<Oportunidad | undefined>(() => {
|
||||
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Quad")
|
||||
});
|
||||
|
||||
const hayWin = computed(() => {
|
||||
for (const o of props.mano!!.oportunidades) {
|
||||
if (o?.nombreOportunidad === "Win") return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const oportunidadSeq = computed(() => {
|
||||
return props.mano!!.oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Seq")
|
||||
});
|
||||
|
||||
const oportunidadTri = computed(() => {
|
||||
return props.mano!!.oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Tri")
|
||||
const oportunidadWin = computed<Oportunidad | undefined>(() => {
|
||||
return (props.mano as Mano).oportunidades.find((obj: Oportunidad) => obj.nombreOportunidad === "Win")
|
||||
});
|
||||
|
||||
return {
|
||||
cartas,
|
||||
posiciones,
|
||||
descartarCarta,
|
||||
hayTri,
|
||||
haySeq,
|
||||
hayQuad,
|
||||
hayWin,
|
||||
oportunidadSeq,
|
||||
oportunidadTri,
|
||||
oportunidadQuad,
|
||||
oportunidadWin,
|
||||
phx,
|
||||
posicionW: computed(() => (90 * (5 - posicion!!)) + "deg")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template lang="pug">
|
||||
div.opcion-mano(@click="enviarSolicitudWin()" :style="{backgroundColor: '#f44336'}")
|
||||
span Win
|
||||
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useDimensions } from "@/components/useDimensions";
|
||||
import { OportunidadTri, OportunidadWin } from "../../types/Oportunidad";
|
||||
|
||||
export default defineComponent({
|
||||
name: "opcion-tri",
|
||||
props: {
|
||||
idUsuario: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
ws: {
|
||||
type: WebSocket,
|
||||
required: true
|
||||
},
|
||||
oportunidad: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const route = useRoute();
|
||||
const {pH, phx} = useDimensions();
|
||||
|
||||
const idJuego = route.params.id;
|
||||
|
||||
const op = computed(() => props.oportunidad as OportunidadWin)
|
||||
|
||||
const enviarSolicitudWin = () => {
|
||||
if (op.value !== undefined) {
|
||||
props.ws.send(JSON.stringify({
|
||||
operacion: "llamar_win",
|
||||
datos: JSON.stringify({
|
||||
idJuego,
|
||||
idUsuario: props.idUsuario,
|
||||
cartaDescartada: op.value.cartaDescartada
|
||||
})
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
enviarSolicitudWin,
|
||||
tamano: computed(() => (pH.value * -0.75) + "px"),
|
||||
phx
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass" vars="{tamano, phx}">
|
||||
|
||||
.opcion-mano
|
||||
position: relative
|
||||
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
|
||||
user-select: none
|
||||
&:hover
|
||||
transform: translateY(var(--tamano))
|
||||
|
||||
//
|
||||
</style>
|
||||
|
|
@ -14,3 +14,8 @@ export declare class OportunidadTri implements Oportunidad {
|
|||
nombreOportunidad: string;
|
||||
cartas: {first: number, second: number};
|
||||
}
|
||||
|
||||
export declare class OportunidadWin implements Oportunidad {
|
||||
cartaDescartada: number;
|
||||
nombreOportunidad: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue