front/components/game/Card.vue

<script setup lang="ts">
export interface Props {
  uuid?: string;
  cardId: number | undefined;
  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 extension = computed(() => {
  if (settingsStore.cardStyle == CardStyles.SVG) {
    return ".svg";
  }
  return ".png";
});

function cardClick() {
  if (!props.cardId) 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;
}
</script>

<template>
  <div
    ref="cardHTMLElement"
    class="card"
    :class="{
      active: childCount > 0,
      wrapped,
      unlocked: !props.locked,
      zoom: isZooming,
      no_effects: noEffects || !props.locked,
      discardable,
    }"
    @contextmenu.prevent="false"
    @mousedown.right="rightClickDown"
    @mouseup.right="rightClickUp"
    @click.stop="cardClick"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <template v-if="props.cardId">
      <GameCardAtom
        v-if="settingsStore.cardStyle == CardStyles.SVG"
        :cardId="props.cardId"
        :used_effects_indexes="used_effects_indexes"
        @effectClick="emit('effectClick', $event)"
      ></GameCardAtom>
      <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.05s transform var(--animation-curve);
}

.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 var(--animation-curve);
}

.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 var(--animation-curve);
  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>