78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { Effect } from "~/netcode/interfaces";
|
|
import { tokens } from "~/services/loadCards";
|
|
import effect_locales from "~/assets/locales/effects.json";
|
|
type Props = {
|
|
token: Effect;
|
|
};
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits(["useToken"]);
|
|
|
|
function onClick(e: MouseEvent) {
|
|
emit("useToken", props.token);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div @click.stop="onClick" @mousedown.left.stop="" class="token_container">
|
|
<Component
|
|
:is="tokens[props.token.effect]"
|
|
v-if="props.token.effect in tokens"
|
|
/>
|
|
<span v-else>{{ props.token.effect }}</span>
|
|
<div class="token_description" v-if="props.token.effect in effect_locales">
|
|
<span
|
|
><b>{{
|
|
effect_locales[props.token.effect as keyof typeof effect_locales]
|
|
.title
|
|
}}</b></span
|
|
>
|
|
<span>{{
|
|
effect_locales[props.token.effect as keyof typeof effect_locales]
|
|
.description
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.token_container {
|
|
margin: 15px;
|
|
/* backdrop-filter: blur(60px); */
|
|
background: rgba(201, 212, 38, 1);
|
|
border: 5px solid black;
|
|
width: min-content;
|
|
cursor: pointer;
|
|
transition: 0.2s all;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
transition: 0.1s all var(--animation-curve);
|
|
position: relative;
|
|
z-index: 50;
|
|
}
|
|
|
|
.token_container:hover {
|
|
border: 5px solid red;
|
|
transform: scale(110%);
|
|
}
|
|
|
|
.token_description {
|
|
min-width: max-content;
|
|
min-height: 45px;
|
|
position: absolute;
|
|
right: -10px;
|
|
transform: translateX(100%);
|
|
display: none;
|
|
flex-direction: column;
|
|
background: rgb(168, 175, 74);
|
|
border: 5px solid red;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.token_container:hover .token_description {
|
|
display: flex;
|
|
}
|
|
</style>
|