mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

refactor: migrate to common eslint+prettier configs (#4168)

Browse Source 
* 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
This commit is contained in:
Cal H.
2025-08-14 21:48:38 +01:00
committed by GitHub
parent 82697278dc
commit 2aabcf36ee
702 changed files with 101360 additions and 102020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
packages/ui/src/components/skin/CapeButton.vue
View File

@@ -2,23 +2,23 @@
import { computed } from 'vue'
const emit = defineEmits<{
(e: 'select'): void
(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,
},
defineProps<{
name: string | undefined
id: string
texture: string
isEquipped?: boolean
selected?: boolean
faded?: boolean
}>(),
{
isEquipped: false,
selected: undefined,
faded: false,
},
)
console.log(props)
@@ -27,82 +27,82 @@ 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>
<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;
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;
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%);
// 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%);
// 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%);
// 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;
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%);
}
.highlighted-glow::before {
box-shadow: inset 0 0 2px 4px color-mix(in srgb, var(--color-brand), transparent 10%);
}
}
</style>