Chore : cleanup 2
This commit is contained in:
+255
-26
@@ -1,31 +1,260 @@
|
||||
<script lang="ts">
|
||||
import { cards } from "~/services/loadCards";
|
||||
<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;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
cardId: {
|
||||
required: true,
|
||||
type: Number,
|
||||
},
|
||||
used_effects_indexes: {
|
||||
default: [],
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return { cards };
|
||||
},
|
||||
beforeCreate() {
|
||||
console.log(cards);
|
||||
(this as any).component = () => cards[this.cardId];
|
||||
},
|
||||
};
|
||||
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>
|
||||
<Component
|
||||
:is="cards[cardId]"
|
||||
:cardId="cardId"
|
||||
:used_effects_indexes="used_effects_indexes"
|
||||
/>
|
||||
<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"
|
||||
@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.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>
|
||||
|
||||
Reference in New Issue
Block a user