107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Card } from "~/netcode/interfaces";
|
|
|
|
export interface Props {
|
|
card: Card;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const active = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="champion_small">
|
|
<svg
|
|
height="50"
|
|
width="50"
|
|
viewBox="-25 -25 50 50"
|
|
class="champion_small_svg"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<defs>
|
|
<clipPath id="guard">
|
|
<path
|
|
d="M 25.03887,48.82869 1.1094102,30.52586 10.249651,0.91124843 H 39.828094 L 48.968331,30.52586 Z"
|
|
fill="black"
|
|
stroke="lightgrey"
|
|
stroke-width="2"
|
|
></path>
|
|
</clipPath>
|
|
<clipPath id="none">
|
|
<path
|
|
d="M 0,246.85146 1.1094102,150 0,-11.33365 187.4845,-14.630353 185.82502,247.01727 Z"
|
|
fill="black"
|
|
stroke="lightgrey"
|
|
stroke-width="2"
|
|
></path>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<foreignObject
|
|
width="100%"
|
|
height="100%"
|
|
class="champion_small_foreignObject"
|
|
:class="{ active }"
|
|
>
|
|
<div class="champion_small_inside">
|
|
<GameCardAtom
|
|
@mousedown.right="active = true"
|
|
@mouseup.right="active = false"
|
|
@mouseleave="active = false"
|
|
width="75"
|
|
height="75"
|
|
:card-id="card.cardId"
|
|
></GameCardAtom>
|
|
</div>
|
|
</foreignObject>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.champion_small {
|
|
z-index: 10;
|
|
width: 100%;
|
|
}
|
|
|
|
.champion_small_svg {
|
|
transform: scale(1500%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.champion_small_foreignObject {
|
|
clip-path: polygon(
|
|
58% 62%,
|
|
67% 56%,
|
|
59% 34%,
|
|
40% 34%,
|
|
31% 55%,
|
|
41% 62%,
|
|
49% 67.77%
|
|
);
|
|
transform: scale(30%) translate(-50%, -50%);
|
|
transition: 0.15s all var(--animation-curve);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.champion_small_foreignObject.active {
|
|
clip-path: polygon(100% 100%, 100% 50%, 100% 0, 0 0, 0 50%, 0 100%, 49% 100%);
|
|
transform: translate(-50%, -50%);
|
|
z-index: 11;
|
|
}
|
|
|
|
.champion_small_foreignObject .champion_small_inside {
|
|
pointer-events: all;
|
|
transform: translate(0, -20%) scale(50%);
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.champion_small_foreignObject.active .champion_small_inside {
|
|
z-index: 11;
|
|
}
|
|
</style>
|