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

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

Browse Source
This commit is contained in:
Araozu 2020-10-27 11:58:12 -05:00
parent b0fbc9bbf8
commit 913e8aa6b0
12 changed files with 185 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/global.sass
View File

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

6
src/variables.ts
View File

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

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

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

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

@ -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 mano2 = ref(manoInicial);
const mano3 = ref(manoInicial);
const mano4 = ref(manoInicial);
const mano1 = ref<Mano>(manoInicial);
const mano2 = ref<Mano>(manoInicial);
const mano3 = ref<Mano>(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;
console.log(info.datos);
dora.value = info.datos.dora;
const d: DatosJuego = info.datos;
datosJuego.value = d;
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,

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

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

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

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

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

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

120
src/views/Juego/components/pantalla-ganador.vue Normal file
View File

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

16
src/views/Juego/types/DatosJuego.ts Normal file
View File

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

1
src/views/Juego/types/EstadoJuego.ts Normal file
View File

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

1
src/views/Juego/types/Mano.ts
View File

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

6
src/views/Juego/types/Oportunidad.ts
View File

@ -1,6 +1,6 @@
export declare interface Oportunidad {
cartaDescartada: number
nombreOportunidad: string
cartaDescartada: number;
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[];
}