front/components/CardPreview.vue

<script setup lang="ts">
import type { Card } from "~/netcode/interfaces";

export interface Props {
  card?: Card;
  card_id?: number;
  locked?: boolean;
  wrapped?: boolean;
  tilted?: boolean;
  interactible?: boolean;
  noEffects?: boolean;
  used_effects_indexes?: number[];
  discardable?: boolean;
}

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

const emit = defineEmits([
  "click",
  "effectClick",
  "drop",
  "move",
  "startMove",
  "stopMove",
]);

const settingsStore = useSettingsStore();

const childCount = ref<number>(0);

const card = ref<HTMLElement>();

const dragStatus = ref<{
  hasClickedDown: boolean;
  dragging: boolean;
  intervalEvent?: ReturnType<typeof setTimeout>;
}>({
  hasClickedDown: false,
  dragging: false,
});
const initialOffsetX = ref(0);
const initialOffsetY = ref(0);

const mousePageX = ref(0);
const mousePageY = ref(0);

const offsetX = ref(0);
const offsetY = ref(0);
const offsetWidth = ref(0);
const offsetHeight = ref(0);

const translateX = ref(0);
const translateY = ref(0);

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 startDrag(e: MouseEvent) {
  emit("startMove");
  dragStatus.value.dragging = true;
  translateX.value = 0;
  translateY.value = 0;
  const cardElement = card.value;
  if (!cardElement) {
    return;
  }
  mousePageX.value = e.pageX;
  mousePageY.value = e.pageY;
  initialOffsetX.value = e.offsetX;
  initialOffsetY.value = e.offsetY;
  offsetX.value = cardElement.offsetLeft + e.offsetX;
  offsetY.value = cardElement.offsetTop + e.offsetY;
  translateX.value = mousePageX.value - offsetX.value;
  translateY.value = mousePageY.value - offsetY.value;
}

function leftClickDown(e: MouseEvent) {
  dragStatus.value.hasClickedDown = true;
  window.addEventListener("mousemove", mouseMove, false);
}

function leftClickUpGlobal(e: MouseEvent) {
  mousePageX.value = e.pageX;
  mousePageY.value = e.pageY;

  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
    dragStatus.value.dragging = false;
    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
    emit("stopMove");
  }
  dragStatus.value.hasClickedDown = false;
  clearTimeout(dragStatus.value.intervalEvent);
  window.removeEventListener("mousemove", mouseMove, false);
}

function leftClickUp(e: MouseEvent) {
  if (dragStatus.value.dragging == false && dragStatus.value.hasClickedDown) {
    dragStatus.value.hasClickedDown = false;
    cardClick();
    return;
  }
}

const sensitivity = 0.5;
function mouseMove(e: MouseEvent) {
  if (
    dragStatus.value.hasClickedDown &&
    !dragStatus.value.dragging &&
    Math.sqrt(Math.abs(e.movementX * e.movementY)) > sensitivity
    && settingsStore.enableDragging
  ) {
    startDrag(e);
  }

  const cardElement = card.value;
  if (!cardElement) {
    return;
  }
  mousePageX.value = e.pageX;
  mousePageY.value = e.pageY;
  // console.log(cardElement.offsetLeft);
  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
  offsetY.value = cardElement.offsetTop + initialOffsetY.value;

  translateX.value = mousePageX.value - offsetX.value;
  translateY.value = mousePageY.value - offsetY.value;

  // emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
}

defineExpose({
  offsetX,
  offsetY,
  offsetWidth,
  offsetHeight,
  uuid: props.card?._id,
});

onMounted(() => {
  window.addEventListener("mouseup", leftClickUpGlobal, false);
  const cardElement = card.value;
  if (!cardElement) {
    return;
  }
  offsetX.value = cardElement.offsetLeft;
  offsetY.value = cardElement.offsetTop;
  offsetWidth.value = cardElement.offsetWidth;
  offsetHeight.value = cardElement.offsetHeight;
  cardElement.offsetWidth;
});

// onRenderTriggered(() => {
//   const cardElement = card.value;
//   if (!cardElement) {
//     return;
//   }
//   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
//   offsetY.value = cardElement.offsetTop + initialOffsetY.value;

//   translateX.value = mousePageX.value - offsetX.value;
//   translateY.value = mousePageY.value - offsetY.value;
// });

onUpdated(() => {
  const cardElement = card.value;
  if (!cardElement) {
    return;
  }
  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
  offsetY.value = cardElement.offsetTop + initialOffsetY.value;

  translateX.value = mousePageX.value - offsetX.value;
  translateY.value = mousePageY.value - offsetY.value;
});

onUnmounted(() => {
  window.removeEventListener("mouseup", leftClickUpGlobal, false);
  // window.addEventListener("mousemove", mouseMove, false);
});
</script>

<template>
  <div ref="card" class="card" :class="{
    dragging: dragStatus.dragging,
    active: childCount > 0,
    wrapped,
    unlocked: !props.locked,
    zoom: isZooming,
    no_effects: noEffects || !props.locked,
    discardable,
  }" @contextmenu.prevent="false" @mousedown.right="rightClickDown" @mouseup.right="rightClickUp"
    @mousedown.left="leftClickDown" @mouseup.left="leftClickUp" @mouseenter="mouseenter" @mouseleave="mouseleave">
    <template v-if="props.card_id">
      <!-- <svg
        width="180"
        height="250"
        
        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> -->
      <CardComponent v-if="settingsStore.cardStyle == CardStyles.SVG && props.card" :card="props.card"
        :used_effects_indexes="used_effects_indexes" @effectClick="emit('effectClick', $event)"></CardComponent>
      <img :class="`card_image`" v-else :src="`/cards/${settingsStore.cardStyle}/` +
        props.card_id.toString().padStart(3, '0') +
        extension
        " draggable="false" />
      <div id="overlay">
        <slot></slot>
      </div>
    </template>

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

<style scoped>
.card.dragging {
  transform: translateX(v-bind("translateX + 'px'")) translateY(v-bind("translateY + 'px'"));
  cursor: grabbing;
  z-index: 999;
}

.card.dragging>svg {
  transform: scale(110%);
}

.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.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.no_effects svg>* {
  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: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg_resource_icon:active {
  animation: none;
}

.svg_resource_icon:hover {
  transform: scale(130%);
}

.used {
  opacity: 0.2;
  filter: grayscale(0.6);
  pointer-events: none;
}

.svg_effect text {
  cursor: pointer;
}

.card {
  --max-height: 250px;
  --max-width: 179px;
  --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.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: all;
  max-height: var(--max-height);
  max-width: var(--max-width);
  /* cursor: grab; */
}

.card:not(svg) {
  cursor: grab;
}

#overlay {
  position: absolute;
  top: 20%;
  width: calc(100% - 8%);
  height: 49%;
}

.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.discardable {
  cursor: not-allowed;
}

.card.discardable svg {
  pointer-events: none;
}
</style>