Cape preview

apps/app-frontend/src/components/ui/skin/CapeButton.vue

@@ -1,11 +1,6 @@
 <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()
+import { computed } from 'vue'
+import type { Cape } from '@/helpers/skins.ts'
 
 const emit = defineEmits<{
   (e: 'select'): void

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -4,7 +4,7 @@ import { computed, useTemplateRef } from 'vue'
 
 const modal = useTemplateRef('modal')
 
-const previewSkin = computed(() => `https://vzge.me/full/350/ProspectorDev.png?no=ears&y=180`)
+const previewSkin = computed(() => `https://vzge.me/full/350/ProspectorDev.png?no=ears`)
 
 function show(e: MouseEvent) {
   modal.value?.show(e)

apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue

@@ -20,7 +20,28 @@ const props = defineProps<{
 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)
+const mcUrlRegex = /texture\/([a-fA-F0-9]+)$/
+
+const textureId = computed(() => {
+  if (!currentCape.value) {
+    return undefined
+  }
+
+  const mcTextureMatch = currentCape.value.texture.match(mcUrlRegex)
+
+  if (mcTextureMatch) {
+    return mcTextureMatch[1]
+  } else {
+    return undefined;
+  }
+})
+
+
+const capeParams = computed(() => {
+  return textureId.value ? `&replacecape=${textureId.value}` : ``
+})
+
+const previewSkin = computed(() => currentSkin.value ? `https://vzge.me/full/350/${currentSkin.value}.png?no=ears&y=180${capeParams.value}` : undefined)
 
 function show(e: MouseEvent, skin?: string, selected?: Cape) {
   currentSkin.value = skin