From bbb481ea1e3adc95dc2849828f007cecb872f542 Mon Sep 17 00:00:00 2001 From: Araozu Date: Sat, 17 Oct 2020 10:08:08 -0500 Subject: [PATCH] =?UTF-8?q?Las=20cartas=20bonus=20tienen=20una=20animaci?= =?UTF-8?q?=C3=B3n=20para=20indicar=20que=20son=20bonus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/carta.vue | 45 ++++++++++++++++--- src/components/getValorDora.ts | 79 ++++++++++++++++++++++++++++++++++ src/store/index.ts | 12 +++++- src/views/Juego/Juego.vue | 5 ++- 4 files changed, 131 insertions(+), 10 deletions(-) create mode 100644 src/components/getValorDora.ts diff --git a/src/components/carta.vue b/src/components/carta.vue index 5b3dee4..41c209c 100644 --- a/src/components/carta.vue +++ b/src/components/carta.vue @@ -1,14 +1,14 @@ @@ -19,6 +19,7 @@ import {useDimensions} from "@/components/useDimensions"; import { useStore } from "vuex"; import { getEsOscuro } from "@/components/getEsOscuro"; import vImgSimbolo from "./img-cartas/v-img-simbolo.vue"; +import { getClaseDora } from "./getValorDora"; export default defineComponent({ name: "carta", @@ -114,6 +115,9 @@ export default defineComponent({ } }); + const valorR = computed(() => props.valor); + const claseDora = getClaseDora(valorR, store); + const fnDescartar = () => { props.fnDescartar!!(props.valor); } @@ -124,6 +128,7 @@ export default defineComponent({ valorC, nombreSimbolo, colorDragon, + claseDora, fnDescartar, pxesc } @@ -141,8 +146,7 @@ export default defineComponent({ weight: normal family: "Secular One", "Pt Serif", serif display: table-cell - border: solid calc(var(--pxesc) * 0.225 * var(--escala)) var(--color-borde) - border-radius: 0.1rem + border: solid calc(var(--pxesc) * 0.2 * var(--escala)) var(--color-borde) width: calc(var(--pxesc) * 5 * var(--escala)) height: calc(var(--pxesc) * 8.5 * var(--escala)) min-width: calc(var(--pxesc) * 5 * var(--escala)) @@ -152,6 +156,33 @@ export default defineComponent({ transition: transform 50ms, opacity 50ms user-select: none + +.c-carta-bonus + overflow: hidden + + &::after + content: "" + display: inline-block + position: absolute + left: 0 + top: -95% + width: 100% + height: 100% + color: #ffb500 + background-image: linear-gradient(135deg, rgba(220, 220, 220, 0.0) 0%, rgba(220, 220, 220, 0.0) 35%, rgba(220, 220, 220, 0.3) 45%, rgba(220, 220, 220, 0.6) 53%, rgba(220, 220, 220, 0.3) 57%, rgba(220, 220, 220, 0.0) 65%, rgba(220, 220, 220, 0.0) 100%) + transition: transform 500ms + animation-duration: 5s + animation-name: brillocarta + animation-iteration-count: infinite + +@keyframes brillocarta + 35% + transform: translateY(200%) + + to + transform: translateY(200%) + + .c-carta-oculta display: inline-block width: 60% diff --git a/src/components/getValorDora.ts b/src/components/getValorDora.ts new file mode 100644 index 0000000..6f9ff1d --- /dev/null +++ b/src/components/getValorDora.ts @@ -0,0 +1,79 @@ +import { Store } from "vuex"; +import { RiMaJonState } from "@/store"; +import { computed, ComputedRef } from "vue"; + +const valoresNumNegro = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]; +const valoresNumRojo = [34, 36, 38, 40, 42, 44, 46, 48, 50, 52]; +const valoresDragones = [64, 96, 128, 160]; +const valoresReyes = [192, 224, 256]; + +const obtenerCartaBonus = (dora: number, tipo: number) => { + const arr: number[] = (() => { + switch (tipo) { + case 0: return valoresNumNegro + case 1: return valoresNumRojo + case 2: + case 3: + case 4: + case 5: return valoresDragones + case 6: + case 7: + case 8: + return valoresReyes; + default: + return []; + } + })(); + + const posicionDora = arr.findIndex((x) => x === dora); + const posicionBonus = (posicionDora + 1) % arr.length; + return arr[posicionBonus]; +}; + +const verificarTipoCarta = (tipoCartaActual: number, tipoCartaD: number): boolean => { + + let tipoCartaActualF = tipoCartaActual; + if (tipoCartaActual >= 2 && tipoCartaActual <= 5) { + tipoCartaActualF = 5; + } else if (tipoCartaActual >= 6 && tipoCartaActual <= 8) { + tipoCartaActualF = 8; + } + + let tipoCartaDF = tipoCartaD; + if (tipoCartaD >= 2 && tipoCartaD <= 5) { + tipoCartaDF = 5; + } else if (tipoCartaD >= 6 && tipoCartaD <= 8) { + tipoCartaDF = 8; + } + + return tipoCartaActualF !== tipoCartaDF; +}; + +export const getClaseDora = (valor: ComputedRef, store: Store) => computed(() => { + const [dora1, dora2] = store.state.dora; + + const tipoCartaActual = (valor.value << 23) >>> 28; + const numeroCartaActual = (valor.value >>> 1) << 1; + + for (const d of dora1) { + const tipoCartaD = (d << 23) >>> 28; + const vCartaD = (d >>> 1) << 1; + if (verificarTipoCarta(tipoCartaActual, tipoCartaD)) continue; + + const cartaBonus = obtenerCartaBonus(vCartaD, tipoCartaD); + + if (numeroCartaActual === cartaBonus) return "c-carta-bonus"; + } + + for (const d of dora2) { + const tipoCartaD = (d << 23) >>> 28; + const vCartaD = (d >>> 1) << 1; + if (verificarTipoCarta(tipoCartaActual, tipoCartaD)) continue; + + const cartaBonus = obtenerCartaBonus(vCartaD, tipoCartaD); + + if (numeroCartaActual === cartaBonus) return "c-carta-bonus"; + } + + return ""; +}); diff --git a/src/store/index.ts b/src/store/index.ts index b5ca838..986fc9a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -9,7 +9,8 @@ export interface RiMaJonState { idUsuario: string | undefined, nombreUsuario: string | undefined, modoColor: string, - modoColorUsuario: string + modoColorUsuario: string, + dora: [Array, Array] } export default createStore({ @@ -17,7 +18,8 @@ export default createStore({ idUsuario: undefined, nombreUsuario: undefined, modoColor: "auto", - modoColorUsuario: "claro" + modoColorUsuario: "claro", + dora: [[], []] }, mutations: { setIdUsuario(state, id) { @@ -31,6 +33,12 @@ export default createStore({ }, setModoColorUsuario(state, modo) { state.modoColorUsuario = modo; + }, + agregarDora(state, dora) { + state.dora.push(dora); + }, + setDora(state, dora) { + state.dora = dora; } }, actions: {}, diff --git a/src/views/Juego/Juego.vue b/src/views/Juego/Juego.vue index fe4b4cb..94bdbbc 100644 --- a/src/views/Juego/Juego.vue +++ b/src/views/Juego/Juego.vue @@ -111,8 +111,9 @@ export default defineComponent({ const d = info.datos; console.log(info.datos); dora.value = info.datos.dora; - console.log(dora.value); doraOculto.value = info.datos.doraOculto; + store.commit("setDora", [info.datos.dora, info.datos.doraOculto]); + turnosDora.value = info.datos.turnosHastaDora; // Mapear IDS a posiciones @@ -147,6 +148,7 @@ export default defineComponent({ console.log(info.datos); dora.value = info.datos.dora; doraOculto.value = info.datos.doraOculto; + store.commit("setDora", [...info.datos.dora, ...info.datos.doraOculto]); cartaDescartada.value = false; turnosDora.value = info.datos.turnosHastaDora; @@ -231,6 +233,7 @@ export default defineComponent({ width: calc(var(--ph) * 100) height: calc(var(--ph) * 100) perspective: calc(var(--pw) * 10) + transform-style: preserve-3d .cont-2-juego