139 lines
3.0 KiB
Vue
139 lines
3.0 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>
|
|
<circle
|
|
cx="2"
|
|
cy="-1"
|
|
r="1"
|
|
:fill="card.guard ? 'black' : 'lightgray'"
|
|
stroke="white"
|
|
stroke-width="0.2"
|
|
class="champion_small_defense"
|
|
:class="{ active }"
|
|
></circle>
|
|
<text
|
|
text-anchor="middle"
|
|
font-family="Helvetica"
|
|
font-weight="bold"
|
|
class="champion_small_defense"
|
|
font-size="1.5"
|
|
:class="{ active }"
|
|
x="2"
|
|
y="-.5"
|
|
:fill="card.guard ? 'white' : 'black'"
|
|
>
|
|
{{ card.defense }}
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.champion_small {
|
|
z-index: 2;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.champion_small_svg {
|
|
transform: scale(1500%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.champion_small_foreignObject {
|
|
clip-path: polygon(
|
|
58% 62%,
|
|
67% 56%,
|
|
59% 35.8%,
|
|
40% 35.8%,
|
|
31% 55%,
|
|
41% 62%,
|
|
49% 67.77%
|
|
);
|
|
transform: scale(30%) translate(-50%, -50%);
|
|
transition: 0.15s all var(--animation-curve);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.champion_small_defense {
|
|
transition: 0.15s all var(--animation-curve);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.champion_small_defense.active {
|
|
opacity: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.champion_small_foreignObject.active .champion_small_inside {
|
|
z-index: 11;
|
|
}
|
|
</style>
|