diff --git a/src/components/carta.vue b/src/components/carta.vue
index 9c2fe86..6f1a97f 100644
--- a/src/components/carta.vue
+++ b/src/components/carta.vue
@@ -1,14 +1,19 @@
-div.cont-carta(@click="fnDescartar" style="display: inline-block")
- div.c-carta(v-if="valor === 0" :class="claseDora")
+div.cont-carta(
+ @click="fnDescartar"
+ style="display: inline-block"
+ @mouseenter="aplicarResaltadoCarta"
+ @mouseleave="quitarResaltadoCarta"
+ )
+ div.c-carta(v-if="valor === 0" :class="[claseDora, claseResaltado]")
div.c-carta-oculta(v-html="' '")
- div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="['carta-' + tipoCarta, claseDora]")
+ div.c-carta(v-else-if="tipo === 0 || tipo === 1" :class="['carta-' + tipoCarta, claseResaltado, 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, claseDora]")
+ div.c-carta(v-else-if="tipo === 2 || tipo === 3 || tipo === 4 || tipo === 5" :class="['carta-' + tipoCarta, claseResaltado, claseDora]")
img.img-dragon(:src="'/img/Dragon_' + colorDragon + '.webp'" :alt="'Dragon ' + colorDragon")
- div.c-carta(v-else :class="['carta-' + tipoCarta, claseDora]" v-html="valorC")
+ div.c-carta(v-else :class="['carta-' + tipoCarta, claseDora, claseResaltado]" v-html="valorC")
//
@@ -40,16 +45,21 @@ export default defineComponent({
escala: {
type: Number,
default: 1
+ },
+ resaltarCarta: {
+ type: Boolean,
+ default: true
}
},
setup(props) {
const {pH} = useDimensions();
const store = useStore();
const pxesc = computed(() => pH.value + "px");
+ const valorR = computed(() => props.valor);
const {esOscuro} = getEsOscuro(store);
- const tipo = computed( () => (props.valor << 23) >>> 28);
+ const tipo = computed( () => (valorR.value << 23) >>> 28);
const tipoCarta = computed(() => {
switch (tipo.value) {
case 0:
@@ -77,7 +87,7 @@ export default defineComponent({
switch (tipo.value) {
case 0:
case 1: {
- const valor = (props.valor << 27) >>> 28;
+ const valor = (valorR.value << 27) >>> 28;
return valor === 1? "A": valor;
}
case 6:
@@ -93,9 +103,9 @@ export default defineComponent({
const nombreSimbolo = computed(() => {
if (tipo.value === 0) {
- return (((props.valor << 31) >>> 31) === 1)? "trebol": "pica";
+ return (((valorR.value << 31) >>> 31) === 1)? "trebol": "pica";
} else if (tipo.value === 1) {
- return (((props.valor << 31) >>> 31) === 1)? "corazon": "diamante";
+ return (((valorR.value << 31) >>> 31) === 1)? "corazon": "diamante";
} else {
return "";
}
@@ -115,7 +125,6 @@ export default defineComponent({
}
});
- const valorR = computed(() => props.valor);
const claseDora = ref("");
const claseDoraWatcher = getClaseDora(valorR, store);
watchEffect(() => {
@@ -127,10 +136,28 @@ export default defineComponent({
}
});
+ const claseResaltado = computed(() => {
+ if (!props.resaltarCarta) return "";
+ const valorPar = (valorR.value >>> 1) << 1;
+ return (valorPar === store.state.cartaResaltada)? "c-carta-resaltada": "";
+ });
+
const fnDescartar = () => {
- props.fnDescartar!!(props.valor);
+ props.fnDescartar!!(valorR.value);
}
+ const aplicarResaltadoCarta = () => {
+ if (!props.resaltarCarta) return;
+ if (valorR.value <= 1) return;
+ const valorCarta = (valorR.value >>> 1) << 1;
+ store.commit("setCartaResaltada", valorCarta);
+ };
+
+ const quitarResaltadoCarta = () => {
+ if (!props.resaltarCarta) return;
+ store.commit("setCartaResaltada", -2);
+ };
+
return {
tipo,
tipoCarta,
@@ -138,7 +165,10 @@ export default defineComponent({
nombreSimbolo,
colorDragon,
claseDora,
+ claseResaltado,
fnDescartar,
+ aplicarResaltadoCarta,
+ quitarResaltadoCarta,
pxesc
}
}
@@ -148,6 +178,9 @@ export default defineComponent({