From 5a8bbae244e05d292a31b73f3a0087e448246dc9 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 13 May 2025 13:32:22 -0700
Subject: [PATCH] Cape preview

---
 .../src/components/ui/skin/CapeButton.vue     |  9 ++------
 .../src/components/ui/skin/EditSkinModal.vue  |  2 +-
 .../components/ui/skin/SelectCapeModal.vue    | 23 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin/CapeButton.vue b/apps/app-frontend/src/components/ui/skin/CapeButton.vue
index b05b4e3b7..ae05a814c 100644
--- a/apps/app-frontend/src/components/ui/skin/CapeButton.vue
+++ b/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
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 6c65d2285..55b064781 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/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)
diff --git a/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue b/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
index ae750773c..01ce31944 100644
--- a/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
+++ b/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