You've already forked AstralRinth
forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select'): void
|
|
}>()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
name: string | undefined
|
|
id: string
|
|
texture: string
|
|
isEquipped?: boolean
|
|
selected?: boolean
|
|
faded?: boolean
|
|
}>(),
|
|
{
|
|
isEquipped: false,
|
|
selected: undefined,
|
|
faded: false,
|
|
},
|
|
)
|
|
|
|
console.log(props)
|
|
|
|
const highlighted = computed(() => props.selected ?? props.isEquipped)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-tooltip="name"
|
|
class="block border-0 m-0 p-0 bg-transparent group cursor-pointer"
|
|
:aria-label="name"
|
|
@click="emit('select')"
|
|
>
|
|
<span
|
|
:class="
|
|
highlighted
|
|
? `bg-brand highlighted-outer-glow`
|
|
: `bg-button-bg brightness-95 group-hover:brightness-100`
|
|
"
|
|
class="relative block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
|
|
>
|
|
<span
|
|
class="block magical-cape-transform rounded-[5px]"
|
|
:class="{
|
|
'highlighted-inner-shadow': highlighted,
|
|
'brightness-[0.3] contrast-[0.8]': faded,
|
|
}"
|
|
>
|
|
<img :src="texture" alt="" />
|
|
</span>
|
|
<span
|
|
v-if="$slots.default || $slots.icon"
|
|
class="p-4 absolute inset-0 flex items-center justify-center text-primary font-medium"
|
|
>
|
|
<span class="mb-1">
|
|
<slot name="icon"></slot>
|
|
</span>
|
|
<span class="text-xs">
|
|
<slot></slot>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.magical-cape-transform {
|
|
aspect-ratio: 10 / 16;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-sizing: content-box;
|
|
width: 60px;
|
|
min-height: 96px;
|
|
}
|
|
|
|
.magical-cape-transform img {
|
|
position: absolute;
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
|
|
// scales image up so that the target area of the texture (10x16) is 100% of the container
|
|
width: calc(64 / 10 * 100%);
|
|
height: calc(32 / 16 * 100%);
|
|
|
|
// offsets the image so that the target area is in the container
|
|
left: calc(1 / 10 * -100%);
|
|
top: calc(1 / 16 * -100%);
|
|
|
|
// scale the image up a little bit to avoid edges from the surrounding texture due to rounding
|
|
scale: 1.01;
|
|
transform-origin: calc(10 / 2 / 64 * 100%) calc(16 / 2 / 32 * 100%);
|
|
}
|
|
|
|
.highlighted-inner-shadow::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.4);
|
|
z-index: 2;
|
|
}
|
|
|
|
@supports (background-color: color-mix(in srgb, transparent, transparent)) {
|
|
.highlighted-glow::before {
|
|
box-shadow: inset 0 0 2px 4px color-mix(in srgb, var(--color-brand), transparent 10%);
|
|
}
|
|
}
|
|
</style>
|