fernando
/
rimajon-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Agregada funcionalidad descartar carta 

Agregados botones para Seq/Tri/Quad/Win
master
Araozu 2020-10-05 21:32:58 -05:00
parent 7b101da416
commit 9641f03cb3
7 changed files with 204 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/carta.vue
View File

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

6
src/views/Ayuda/Ayuda.vue
View File

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

17
src/views/Juego/Juego.vue
View File

@ -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,

80
src/views/Juego/components/contenedor-descartes.vue Normal file
View File

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

82
src/views/Juego/components/mano.vue
View File

@ -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%

10
src/views/Juego/types/Mano.ts Normal file
View File

@ -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[]
}

15
src/views/Juego/types/Oportunidad.ts Normal file
View File

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