Feat : various fixes, sounds and multiplayer additions
This commit is contained in:
+152
-115
@@ -1,200 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
export interface Props {
|
||||
uuid?: string
|
||||
card_id?: number
|
||||
locked?: boolean
|
||||
wrapped?: boolean
|
||||
tilted?: boolean
|
||||
uuid?: string;
|
||||
card_id?: number;
|
||||
locked?: boolean;
|
||||
wrapped?: boolean;
|
||||
tilted?: boolean;
|
||||
}
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
wrapped: () => false,
|
||||
tilted: () => true,
|
||||
locked: () => true
|
||||
})
|
||||
wrapped: () => false,
|
||||
tilted: () => true,
|
||||
locked: () => true,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["click"])
|
||||
const emit = defineEmits(["click"]);
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const childCount = ref<number>(0)
|
||||
const childCount = ref<number>(0);
|
||||
|
||||
const card = ref<HTMLElement>()
|
||||
const card = ref<HTMLElement>();
|
||||
|
||||
const extension = computed(() => {
|
||||
if (settingsStore.cardStyle == CardStyles.SVG) {
|
||||
return ".svg"
|
||||
}
|
||||
return ".png"
|
||||
})
|
||||
if (settingsStore.cardStyle == CardStyles.SVG) {
|
||||
return ".svg";
|
||||
}
|
||||
return ".png";
|
||||
});
|
||||
function cardClick() {
|
||||
if (!props.card_id) return
|
||||
emit("click")
|
||||
if (!props.card_id) return;
|
||||
emit("click");
|
||||
}
|
||||
|
||||
const isZooming = ref<boolean>(false)
|
||||
const isZooming = ref<boolean>(false);
|
||||
|
||||
function mouseenter(e: MouseEvent) {
|
||||
// User is Right Clicking
|
||||
if ((e.buttons & 2) == 2) {
|
||||
isZooming.value = true
|
||||
}
|
||||
// User is Right Clicking
|
||||
if ((e.buttons & 2) == 2) {
|
||||
isZooming.value = true;
|
||||
}
|
||||
|
||||
// goStore.hoveredCard = props.card_id
|
||||
// goStore.hoveredCard = props.card_id
|
||||
}
|
||||
function mouseleave(e: MouseEvent) {
|
||||
isZooming.value = false
|
||||
isZooming.value = false;
|
||||
}
|
||||
|
||||
function rightClickDown(e: MouseEvent) {
|
||||
isZooming.value = true
|
||||
isZooming.value = true;
|
||||
}
|
||||
|
||||
function rightClickUp(e: MouseEvent) {
|
||||
isZooming.value = false
|
||||
isZooming.value = false;
|
||||
}
|
||||
|
||||
function activateEffect(e: CustomEvent) {
|
||||
console.log(e.detail, props.uuid)
|
||||
console.log(e.detail, props.uuid);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
|
||||
})
|
||||
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
|
||||
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);
|
||||
/* max-width: 256px; */
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 0px;
|
||||
margin-top: var(--margin-bottom);
|
||||
transition: all 0.075s cubic-bezier(1, 1.81, .59, 1.42);
|
||||
isolation: isolate;
|
||||
pointer-events: all;
|
||||
max-height: var(--max-height);
|
||||
--max-height: 250px;
|
||||
--margin-bottom: calc(var(--max-height) * 0.05);
|
||||
/* max-width: 256px; */
|
||||
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);
|
||||
isolation: isolate;
|
||||
pointer-events: all;
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
|
||||
.card.active {
|
||||
cursor: pointer
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card_image {
|
||||
max-height: var(--max-height);
|
||||
z-index: 1;
|
||||
height: var(--max-height);
|
||||
max-height: var(--max-height);
|
||||
z-index: 1;
|
||||
height: var(--max-height);
|
||||
}
|
||||
|
||||
.card.wrapped {
|
||||
height: 6px;
|
||||
margin: 0;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card.wrapped .card_image {
|
||||
filter: drop-shadow(.5px .5px .5px gray) drop-shadow(-.5px -.5px .5px gray);
|
||||
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)*-.25));
|
||||
filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
|
||||
cursor: pointer;
|
||||
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;
|
||||
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, .59, 1.42);
|
||||
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%);
|
||||
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.card.unlocked>* {
|
||||
pointer-events: none;
|
||||
.card.unlocked > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#contextMenuButtons>* {
|
||||
flex: 1;
|
||||
border-radius: 12px;
|
||||
min-height: 50px;
|
||||
#contextMenuButtons > * {
|
||||
flex: 1;
|
||||
border-radius: 12px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
@keyframes gelatine {
|
||||
from,
|
||||
to {
|
||||
}
|
||||
|
||||
from,
|
||||
to {}
|
||||
25% {
|
||||
transform: scale(1, 1.5);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1, 1.5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.5, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1.1, 1.3);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.1, 1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.svg_resource_icon {
|
||||
cursor: pointer;
|
||||
animation: gelatine 0.3s normal;
|
||||
transition: transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
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;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.svg_resource_icon:hover {
|
||||
transform: scale(130%);
|
||||
transform: scale(130%);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user