From eb595cdc3e4a6953cbde00c0e119e476ef767a52 Mon Sep 17 00:00:00 2001
From: Silcean <157026423+Silcean@users.noreply.github.com>
Date: Wed, 16 Jul 2025 12:43:30 +0200
Subject: [PATCH] Feature/detect skin variant on fileinput (#3999)

* chaged detection algorithm, and added skin variant deteciton on fileinput

* Update skins.ts

removed leftover logs

* removed pnpm lock changes. Simplyfied the transparency check in skin variant detection

* fully reverted lock.yaml. my bad.

---------

Co-authored-by: Bronchiopator <70262842+Bronchiopator@users.noreply.github.com>
---
 .../src/components/ui/skin/EditSkinModal.vue       |  3 ++-
 apps/app-frontend/src/helpers/skins.ts             | 14 ++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index de0ae7132..06b45fd1d 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -118,6 +118,7 @@ import {
   type Cape,
   type SkinModel,
   get_normalized_skin_texture,
+  determineModelType,
 } from '@/helpers/skins.ts'
 import { handleError } from '@/store/notifications'
 import {
@@ -253,7 +254,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
   mode.value = 'new'
   currentSkin.value = null
   uploadedTextureUrl.value = skinTextureUrl
-  variant.value = 'CLASSIC'
+  variant.value = await determineModelType(skinTextureUrl)
   selectedCape.value = undefined
   visibleCapeList.value = []
   initVisibleCapeList()
diff --git a/apps/app-frontend/src/helpers/skins.ts b/apps/app-frontend/src/helpers/skins.ts
index 28a29ba1a..9b5953f53 100644
--- a/apps/app-frontend/src/helpers/skins.ts
+++ b/apps/app-frontend/src/helpers/skins.ts
@@ -62,16 +62,14 @@ export async function determineModelType(texture: string): Promise<'SLIM' | 'CLA
 
       context.drawImage(image, 0, 0)
 
-      const armX = 44
-      const armY = 16
-      const armWidth = 4
+      const armX = 54
+      const armY = 20
+      const armWidth = 2
       const armHeight = 12
-
       const imageData = context.getImageData(armX, armY, armWidth, armHeight).data
-
-      for (let y = 0; y < armHeight; y++) {
-        const alphaIndex = (3 + y * armWidth) * 4 + 3
-        if (imageData[alphaIndex] !== 0) {
+      for (let index = 1; index <= imageData.length; index++) {
+        //every fourth value in RGBA is the alpha channel
+        if (index % 4 == 0 && imageData[index - 1] !== 0) {
           resolve('CLASSIC')
           return
         }