Las cartas bonus tienen una animación para indicar que son bonus

src/components/carta.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
-div(@click="fnDescartar" style="display: inline-block")
+div.cont-carta(@click="fnDescartar" style="display: inline-block")
-    div.c-carta(v-if="valor === 0")
+    div.c-carta(v-if="valor === 0" :class="claseDora")
         div.c-carta-oculta(v-html="'&nbsp;'")
-    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")
 
 //
 </template>
@@ -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: solid calc(var(--pxesc) * 0.2 * var(--escala)) var(--color-borde)
-    border-radius: 0.1rem
     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%

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<number>, store: Store<RiMaJonState>) => computed<string>(() => {
+    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 "";
+});

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<number>, Array<number>]
 }
 
 export default createStore<RiMaJonState>({
@@ -17,7 +18,8 @@ export default createStore<RiMaJonState>({
         idUsuario: undefined,
         nombreUsuario: undefined,
         modoColor: "auto",
-        modoColorUsuario: "claro"
+        modoColorUsuario: "claro",
+        dora: [[], []]
     },
     mutations: {
         setIdUsuario(state, id) {
@@ -31,6 +33,12 @@ export default createStore<RiMaJonState>({
         },
         setModoColorUsuario(state, modo) {
             state.modoColorUsuario = modo;
+        },
+        agregarDora(state, dora) {
+            state.dora.push(dora);
+        },
+        setDora(state, dora) {
+            state.dora = dora;
         }
     },
     actions: {},

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