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 @@
-div(@click="fnDescartar" style="display: inline-block")
- div.c-carta(v-if="valor === 0")
+div.cont-carta(@click="fnDescartar" style="display: inline-block")
+ div.c-carta(v-if="valor === 0" :class="claseDora")
div.c-carta-oculta(v-html="' '")
- div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="'carta-' + tipoCarta")
+ div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="['carta-' + tipoCarta, claseDora]")
span.c-carta-numero {{ valorC }}
div.c-carta-img
v-img-simbolo(:tipo="nombreSimbolo")
- div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="'carta-' + tipoCarta")
+ div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="['carta-' + tipoCarta, claseDora]")
img.img-dragon(:src="'/img/Dragon_' + colorDragon + '.webp'" :alt="'Dragon ' + colorDragon")
- div.c-carta(v-else :class="'carta-' + tipoCarta" v-html="valorC")
+ div.c-carta(v-else :class="['carta-' + tipoCarta, claseDora]" v-html="valorC")
//
@@ -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