Begin skins frontend
This commit is contained in:
Prospector authored and Alejandro González committed
1 parent
3587b0a9ce
commit
161dc73d5d
14 files changed
+629
-24
No files matched your search
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, useTemplateRef } from 'vue'
|
||||
import { NewModal as Modal } from '@modrinth/ui'
|
||||
import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
|
||||
import { useTheming } from '@/store/theme.ts'
|
||||
@@ -26,16 +26,16 @@ const props = defineProps({
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
const modal = ref(null)
|
||||
const modal = useTemplateRef('modal')
|
||||
|
||||
defineExpose({
|
||||
show: () => {
|
||||
show: (e: MouseEvent) => {
|
||||
hide_ads_window()
|
||||
modal.value.show()
|
||||
modal.value?.show(e)
|
||||
},
|
||||
hide: () => {
|
||||
onModalHide()
|
||||
modal.value.hide()
|
||||
modal.value?.hide()
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ButtonStyled, commonMessages } from '@modrinth/ui'
|
||||
import { EditIcon } from '@modrinth/assets'
|
||||
import { useVIntl } from '@vintl/vintl'
|
||||
import type { Cape, Skin } from '@/helpers/skins.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select'): void
|
||||
}>()
|
||||
|
||||
const highlighted = computed(() => props.selected ?? props.cape.is_equipped)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
cape: Cape
|
||||
selected?: boolean
|
||||
}>(),
|
||||
{
|
||||
selected: undefined,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button v-tooltip="cape.name" class="block border-0 m-0 p-0 bg-transparent group cursor-pointer" :aria-label="cape.name" @click="emit('select')">
|
||||
<span
|
||||
:class="
|
||||
highlighted
|
||||
? `bg-brand highlighted-outer-glow`
|
||||
: `bg-button-bg opacity-75 group-hover:opacity-100`
|
||||
"
|
||||
class="block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
|
||||
>
|
||||
<span
|
||||
class="block cursed-cape-shit rounded-[5px]"
|
||||
:class="{ 'highlighted-inner-shadow': highlighted }"
|
||||
>
|
||||
<img :src="cape.texture" alt="" />
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.cursed-cape-shit {
|
||||
aspect-ratio: 10 / 16;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.cursed-cape-shit 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.2);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@supports (background-color: color-mix(in srgb, transparent, transparent)) {
|
||||
.highlighted-outer-glow {
|
||||
box-shadow: 0 0 4px 2px color-mix(in srgb, var(--color-brand), transparent 70%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
|
||||
import { computed, useTemplateRef } from 'vue'
|
||||
|
||||
const modal = useTemplateRef('modal')
|
||||
|
||||
const previewSkin = computed(() => `https://vzge.me/full/350/ProspectorDev.png?no=ears&y=180`)
|
||||
|
||||
function show(e: MouseEvent) {
|
||||
modal.value?.show(e)
|
||||
}
|
||||
|
||||
function hide() {
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<ModalWrapper ref="modal">
|
||||
<template #title>
|
||||
<span class="text-lg font-extrabold text-contrast">Edit skin</span>
|
||||
</template>
|
||||
<div class="grid grid-cols-[auto_1fr] gap-6">
|
||||
<div class="flex">
|
||||
<img :src="previewSkin" alt="" class="w-auto my-auto h-60 object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
|
||||
import { useTemplateRef, ref, computed } from 'vue'
|
||||
import CapeButton from '@/components/ui/skin/CapeButton.vue'
|
||||
import type { Cape } from '@/helpers/skins.ts'
|
||||
import { ButtonStyled, ScrollablePanel } from '@modrinth/ui'
|
||||
import { CheckIcon, XIcon} from '@modrinth/assets'
|
||||
|
||||
const modal = useTemplateRef('modal')
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', cape: string | undefined): void
|
||||
}>()
|
||||
|
||||
const props = defineProps<{
|
||||
capes: Cape[];
|
||||
}>()
|
||||
|
||||
|
||||
const currentSkin = ref<string | undefined>()
|
||||
const currentCape = ref<Cape | undefined>()
|
||||
|
||||
const previewSkin = computed(() => currentSkin.value ? `https://vzge.me/full/350/${currentSkin.value}.png?no=ears&y=180` : undefined)
|
||||
|
||||
function show(e: MouseEvent, skin?: string, selected?: Cape) {
|
||||
currentSkin.value = skin
|
||||
currentCape.value = selected
|
||||
modal.value?.show(e)
|
||||
}
|
||||
|
||||
function select() {
|
||||
emit('select', currentCape.value?.id)
|
||||
hide()
|
||||
}
|
||||
|
||||
function hide() {
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<ModalWrapper ref="modal">
|
||||
<template #title>
|
||||
<span class="text-lg font-extrabold text-contrast">Selecting a cape</span>
|
||||
</template>
|
||||
<div class="grid grid-cols-[auto_1fr] gap-6">
|
||||
<div class="flex">
|
||||
<img :src="previewSkin" alt="" class="w-auto my-auto h-60 object-contain" />
|
||||
</div>
|
||||
<div>
|
||||
<ScrollablePanel class="h-[20rem] w-[30rem]">
|
||||
<div class="grid grid-cols-6 gap-2 items-start w-full">
|
||||
<CapeButton v-for="cape in capes" :key="`cape-${cape.id}`" :cape="cape" :selected="currentCape?.id === cape.id" @select="currentCape = cape" />
|
||||
</div>
|
||||
</ScrollablePanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<ButtonStyled color="brand">
|
||||
<button @click="select">
|
||||
<CheckIcon />
|
||||
Select
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled>
|
||||
<button @click="hide">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ButtonStyled, commonMessages } from '@modrinth/ui'
|
||||
import { EditIcon } from '@modrinth/assets'
|
||||
import { useVIntl } from '@vintl/vintl'
|
||||
import type { Cape, Skin } from '@/helpers/skins.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select'): void
|
||||
(e: 'edit', event: MouseEvent): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
skin: Skin
|
||||
selected: boolean
|
||||
defaultCape?: Cape
|
||||
editable?: boolean
|
||||
}>(), {
|
||||
defaultCape: undefined,
|
||||
editable: false,
|
||||
})
|
||||
|
||||
const base64Prefix = 'data:image/png;base64,'
|
||||
const mcUrlRegex = /texture\/([a-fA-F0-9]+)$/
|
||||
|
||||
const texture = computed(() => {
|
||||
const mcTextureMatch = props.skin.texture.match(mcUrlRegex)
|
||||
|
||||
if (mcTextureMatch) {
|
||||
return mcTextureMatch[1]
|
||||
} else if (props.skin.texture.startsWith(base64Prefix)) {
|
||||
return props.skin.texture.split(base64Prefix)[1]
|
||||
} else {
|
||||
return props.skin.texture
|
||||
}
|
||||
})
|
||||
|
||||
const slim = computed(() => props.skin.variant === 'Slim')
|
||||
|
||||
const skinUrl = computed(
|
||||
() => `https://vzge.me/bust/${texture.value}.png?no=ears${slim.value ? '&slim' : ''}`,
|
||||
)
|
||||
const backUrl = computed(() => `${skinUrl.value}&y=130`)
|
||||
|
||||
const pressed = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="skin-button__parent group flex relative border-2 border-solid transform-3d rotate-y-90 transition-all h-40 p-0 bg-transparent rounded-xl overflow-hidden"
|
||||
:class="[
|
||||
selected ? `border-brand` : 'border-transparent',
|
||||
{
|
||||
'scale-95': pressed,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<button
|
||||
class="absolute inset-0 rounded-xl cursor-pointer p-0 border-none group-hover:brightness-125"
|
||||
:class="selected ? `bg-brand-highlight` : 'bg-button-bg'"
|
||||
@mousedown="pressed = true"
|
||||
@mouseup="pressed = false"
|
||||
@mouseleave="pressed = false"
|
||||
@click="emit('select')"
|
||||
></button>
|
||||
<span class="skin-button__image-parent pointer-events-none w-full h-full">
|
||||
<img
|
||||
alt=""
|
||||
:src="skinUrl"
|
||||
class="skin-button__image-facing rounded-xl object-contain object-bottom w-full h-full mt-auto mx-auto"
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
:src="backUrl"
|
||||
class="skin-button__image-away rounded-xl object-contain object-bottom w-full h-full mt-auto mx-auto"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="editable"
|
||||
class="absolute pointer-events-none inset-0 flex items-end p-2 translate-y-4 -translate-x-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
|
||||
>
|
||||
<ButtonStyled color="brand">
|
||||
<button
|
||||
class="pointer-events-auto shadow-black/50 shadow-lg"
|
||||
@mousedown.stop
|
||||
@mouseup.stop
|
||||
@click="(e) => emit('edit', e)"
|
||||
>
|
||||
<EditIcon />
|
||||
{{ formatMessage(commonMessages.editButton) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.skin-button__parent {
|
||||
perspective: 1000px;
|
||||
|
||||
.skin-button__image-parent {
|
||||
transform-style: preserve-3d;
|
||||
display: grid;
|
||||
|
||||
/*
|
||||
Set the images to be in the same position
|
||||
*/
|
||||
.skin-button__image-facing,
|
||||
.skin-button__image-away {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
.skin-button__image-parent {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
.skin-button__image-away {
|
||||
opacity: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
:not(&:hover) {
|
||||
.skin-button__image-parent {
|
||||
.skin-button__image-facing {
|
||||
animation: appear-halfway 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.skin-button__image-away {
|
||||
animation: vanish-halfway 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.skin-button__image-parent {
|
||||
transform: rotateY(180deg);
|
||||
|
||||
.skin-button__image-facing {
|
||||
animation: vanish-halfway 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.skin-button__image-away {
|
||||
animation: appear-halfway 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vanish-halfway {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear-halfway {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
51% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user