front/components/CardPreview.vue

<script setup lang="ts">
export interface Props {
  uuid?: string;
  card_id?: number;
  locked?: boolean;
  wrapped?: boolean;
  tilted?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  wrapped: () => false,
  tilted: () => true,
  locked: () => true,
});

const emit = defineEmits(["click"]);

const settingsStore = useSettingsStore();

const childCount = ref<number>(0);

const card = ref<HTMLElement>();

const extension = computed(() => {
  if (settingsStore.cardStyle == CardStyles.SVG) {
    return ".svg";
  }
  return ".png";
});
function cardClick() {
  if (!props.card_id) return;
  emit("click");
}

const isZooming = ref<boolean>(false);

function mouseenter(e: MouseEvent) {
  // User is Right Clicking
  if ((e.buttons & 2) == 2) {
    isZooming.value = true;
  }

  // goStore.hoveredCard = props.card_id
}
function mouseleave(e: MouseEvent) {
  isZooming.value = false;
}

function rightClickDown(e: MouseEvent) {
  isZooming.value = true;
}

function rightClickUp(e: MouseEvent) {
  isZooming.value = false;
}

function activateEffect(e: CustomEvent) {
  console.log(e.detail, props.uuid);
}

onMounted(() => {
  card.value?.style.setProperty("--random-seed", -Math.random() * 10 + "s");
});
</script>

<template>
  <div
    ref="card"
    class="card"
    :class="{
      active: childCount > 0,
      wrapped,
      unlocked: !props.locked,
      zoom: isZooming,
    }"
    @contextmenu.prevent="false"
    @click.left="cardClick"
    @mousedown.right="rightClickDown"
    @mouseup.right="rightClickUp"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <div
      id="contextMenuButtons"
      :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }"
    >
      <slot></slot>
    </div>
    <template v-if="props.card_id">
      <svg
        width="180"
        height="250"
        v-if="settingsStore.cardStyle == CardStyles.SVG"
        viewBox="0 0 298 417"
      >
        <use
          :xlink:href="
            `/cards/${settingsStore.cardStyle}/` +
            props.card_id.toString().padStart(3, '0') +
            extension +
            '#card' +
            props.card_id
          "
          @activate_effect="activateEffect($event)"
        ></use>
      </svg>
      <img
        :class="`card_image`"
        v-else
        :src="
          `/cards/${settingsStore.cardStyle}/` +
          props.card_id.toString().padStart(3, '0') +
          extension
        "
        draggable="false"
      />
    </template>

    <img
      :class="`card_image`"
      v-else
      :src="'/cards/background.png'"
      draggable="false"
    />
  </div>
</template>

<style scoped>
.card {
  --max-height: 250px;
  --margin-bottom: calc(var(--max-height) * 0.05);
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
  margin-top: var(--margin-bottom);
  transition: all 0.075s cubic-bezier(1, 1.81, 0.59, 1.42);
  pointer-events: all;
  max-height: var(--max-height);
}

.card.active {
  cursor: pointer;
}

.card_image {
  max-height: var(--max-height);
  z-index: 1;
  height: var(--max-height);
}

.card.wrapped {
  height: 1px;
  margin: 0;
}

.card.wrapped .card_image {
  filter: drop-shadow(0.5px 0.5px 0.5px gray)
    drop-shadow(-0.5px -0.5px 0.5px gray);
}

.card.unlocked {
  margin-top: 0px;
  margin-bottom: var(--margin-bottom);
  transform: translateY(calc(var(--margin-bottom) * -0.25));
  filter: drop-shadow(
    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
  );
  cursor: pointer;
}

.card.zoom {
  transform: scale(200%);
  z-index: 10;
}

#contextMenuButtons {
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  word-break: break-word;
  bottom: 0;
  width: 99%;
  transform: translateY(-0px);
  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
}

.card.active:hover #contextMenuButtons {
  transform: translateY(100%);
}
</style>
<style>
.card.unlocked > * {
  pointer-events: none;
}

#contextMenuButtons > * {
  flex: 1;
  border-radius: 12px;
  min-height: 50px;
}

@keyframes gelatine {
  from,
  to {
  }

  25% {
    transform: scale(1, 1.5);
  }

  50% {
    transform: scale(1.5, 1);
  }

  75% {
    transform: scale(1.1, 1.3);
  }
}

.svg_resource_icon {
  cursor: pointer;
  animation: gelatine 0.3s normal;
  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg_resource_icon:active {
  animation: none;
}

.svg_resource_icon:hover {
  transform: scale(130%);
}
</style>