fix: 复用皮肤站逻辑并稳定玩家头像

apps/app-frontend/src/composables/skin-site-session.ts

@@ -3,17 +3,27 @@ import { readonly, ref } from 'vue'
 export const SKIN_SITE_ORIGIN = 'https://skin.starlight.cool'
 export type SkinSiteUser = { uuid: string; username: string }
 export type SkinSiteStatus = 'checking' | 'signed-out' | 'signed-in' | 'error'
-export type SkinSitePlayer = { uuid: string; name: string; isMojang: boolean }
+export type SkinSitePlayer = {
+	uuid: string
+	name: string
+	isMojang: boolean
+	skinState: 'ready' | 'empty' | 'error'
+	headDataUrl?: string
+	skinDataUrl?: string
+	model?: 'default' | 'slim'
+}
 export type SkinSitePlayersStatus = 'idle' | 'checking' | 'ready' | 'error'
 
 const user = ref<SkinSiteUser | null>(null)
 const status = ref<SkinSiteStatus>('signed-out')
 const players = ref<SkinSitePlayer[]>([])
 const playersStatus = ref<SkinSitePlayersStatus>('idle')
+const selectedPlayerId = ref<string | null>(null)
 const frameUrl = ref(`${SKIN_SITE_ORIGIN}/`)
 let connectedFrame: Window | null = null
 let luckRequestSequence = 0
 let playersRequestSequence = 0
+let skinUpdateRequestSequence = 0
 
 type PendingLuckRequest = {
 	resolve: (luck: number) => void
@@ -28,11 +38,36 @@ type PendingPlayersRequest = {
 	timeout: ReturnType<typeof setTimeout>
 }
 const pendingPlayersRequests = new Map<string, PendingPlayersRequest>()
+type PendingSkinUpdateRequest = {
+	resolve: () => void
+	reject: (error: Error) => void
+	timeout: ReturnType<typeof setTimeout>
+}
+const pendingSkinUpdateRequests = new Map<string, PendingSkinUpdateRequest>()
+
+function isSafePngDataUrl(value: unknown, maxLength: number) {
+	return (
+		typeof value === 'string' &&
+		value.length <= maxLength &&
+		/^data:image\/png;base64,[a-z0-9+/]+={0,2}$/i.test(value)
+	)
+}
+
+function hasSafeSkinHead(player: SkinSitePlayer) {
+	if (!['ready', 'empty', 'error'].includes(player.skinState)) return false
+	if (player.skinState !== 'ready') return player.headDataUrl === undefined
+	return (
+		isSafePngDataUrl(player.headDataUrl, 100_000) &&
+		(player.skinDataUrl === undefined || isSafePngDataUrl(player.skinDataUrl, 2_000_000)) &&
+		(player.model === undefined || player.model === 'default' || player.model === 'slim')
+	)
+}
 
 export const skinSiteUser = readonly(user)
 export const skinSiteStatus = readonly(status)
 export const skinSitePlayers = readonly(players)
 export const skinSitePlayersStatus = readonly(playersStatus)
+export const selectedSkinSitePlayerId = readonly(selectedPlayerId)
 export const skinSiteFrameUrl = readonly(frameUrl)
 
 function rejectPendingLuckRequests(message: string) {
@@ -51,13 +86,30 @@ function rejectPendingPlayersRequests(message: string) {
 	pendingPlayersRequests.clear()
 }
 
+function rejectPendingSkinUpdateRequests(message: string) {
+	for (const request of pendingSkinUpdateRequests.values()) {
+		clearTimeout(request.timeout)
+		request.reject(new Error(message))
+	}
+	pendingSkinUpdateRequests.clear()
+}
+
 export function setSkinSiteFrame(frame: Window | null) {
 	if (connectedFrame === frame) return
 	rejectPendingLuckRequests('The skin site connection changed.')
 	rejectPendingPlayersRequests('The skin site connection changed.')
+	rejectPendingSkinUpdateRequests('The skin site connection changed.')
 	connectedFrame = frame
 }
 
+export function selectSkinSitePlayer(playerId: string | null) {
+	if (playerId === null) {
+		selectedPlayerId.value = null
+		return
+	}
+	if (players.value.some((player) => player.uuid === playerId)) selectedPlayerId.value = playerId
+}
+
 export function openSkinSiteLogin() {
 	frameUrl.value = `${SKIN_SITE_ORIGIN}/login`
 }
@@ -65,10 +117,54 @@ export function openSkinSiteLogin() {
 export function resetSkinSiteSession() {
 	rejectPendingLuckRequests('The skin site session ended.')
 	rejectPendingPlayersRequests('The skin site session ended.')
+	rejectPendingSkinUpdateRequests('The skin site session ended.')
 	user.value = null
 	status.value = 'signed-out'
 	players.value = []
 	playersStatus.value = 'idle'
+	selectedPlayerId.value = null
+}
+
+export function requestSkinSiteSkinUpdate(
+	playerId: string,
+	textureDataUrl: string,
+	model: 'default' | 'slim',
+) {
+	const player = players.value.find((candidate) => candidate.uuid === playerId)
+	if (!connectedFrame || status.value !== 'signed-in' || !user.value) {
+		return Promise.reject(new Error('Sign in to the skin site before changing a skin.'))
+	}
+	if (!player || player.isMojang) {
+		return Promise.reject(new Error('This skin site player cannot be changed.'))
+	}
+	if (!isSafePngDataUrl(textureDataUrl, 2_000_000)) {
+		return Promise.reject(new Error('The selected skin texture is invalid or too large.'))
+	}
+
+	const requestId = `skin-update-${Date.now()}-${++skinUpdateRequestSequence}`
+	return new Promise<void>((resolve, reject) => {
+		const timeout = setTimeout(() => {
+			pendingSkinUpdateRequests.delete(requestId)
+			reject(new Error('The skin site update timed out.'))
+		}, 20_000)
+		pendingSkinUpdateRequests.set(requestId, { resolve, reject, timeout })
+		try {
+			connectedFrame?.postMessage(
+				{
+					type: 'starlight-skin-update-request',
+					requestId,
+					playerId,
+					textureDataUrl,
+					model,
+				},
+				SKIN_SITE_ORIGIN,
+			)
+		} catch (error) {
+			clearTimeout(timeout)
+			pendingSkinUpdateRequests.delete(requestId)
+			reject(error instanceof Error ? error : new Error(String(error)))
+		}
+	})
 }
 
 export function requestSkinSitePlayers() {
@@ -83,7 +179,7 @@ export function requestSkinSitePlayers() {
 			pendingPlayersRequests.delete(requestId)
 			playersStatus.value = 'error'
 			reject(new Error('The skin site player request timed out.'))
-		}, 12_000)
+		}, 30_000)
 		pendingPlayersRequests.set(requestId, { resolve, reject, timeout })
 		try {
 			connectedFrame?.postMessage(
@@ -145,11 +241,24 @@ export function receiveSkinSiteMessage(event: MessageEvent, frame: Window | null
 					typeof (player as SkinSitePlayer).name === 'string' &&
 					(player as SkinSitePlayer).name.length > 0 &&
 					(player as SkinSitePlayer).name.length <= 64 &&
-					typeof (player as SkinSitePlayer).isMojang === 'boolean',
+					typeof (player as SkinSitePlayer).isMojang === 'boolean' &&
+					hasSafeSkinHead(player as SkinSitePlayer),
 			)
-			players.value = nextPlayers
+			const previousPlayers = new Map(players.value.map((player) => [player.uuid, player]))
+			players.value = nextPlayers.map((player) => {
+				const previous = previousPlayers.get(player.uuid)
+				return player.skinState === 'error' && previous?.skinState === 'ready'
+					? { ...player, ...previous, name: player.name, isMojang: player.isMojang }
+					: player
+			})
+			if (
+				selectedPlayerId.value &&
+				!nextPlayers.some((player) => player.uuid === selectedPlayerId.value)
+			) {
+				selectedPlayerId.value = null
+			}
 			playersStatus.value = 'ready'
-			pending.resolve(nextPlayers)
+			pending.resolve(players.value)
 		} else {
 			playersStatus.value = 'error'
 			pending.reject(
@@ -189,6 +298,25 @@ export function receiveSkinSiteMessage(event: MessageEvent, frame: Window | null
 		return true
 	}
 
+	if (data.type === 'starlight-skin-update-result') {
+		if (typeof data.requestId !== 'string') return false
+		const pending = pendingSkinUpdateRequests.get(data.requestId)
+		if (!pending) return false
+		clearTimeout(pending.timeout)
+		pendingSkinUpdateRequests.delete(data.requestId)
+		if (data.ok === true) pending.resolve()
+		else {
+			pending.reject(
+				new Error(
+					typeof data.error === 'string' && data.error
+						? data.error.slice(0, 300)
+						: 'The skin site rejected the skin update.',
+				),
+			)
+		}
+		return true
+	}
+
 	if (data.type !== 'starlight-skin-session') return false
 	if (!['checking', 'signed-out', 'signed-in', 'error'].includes(data.status)) return false
 	let refreshPlayers = false
@@ -204,8 +332,10 @@ export function receiveSkinSiteMessage(event: MessageEvent, frame: Window | null
 			return false
 		if (user.value?.uuid && user.value.uuid !== data.user.uuid) {
 			rejectPendingPlayersRequests('The skin site account changed.')
+			rejectPendingSkinUpdateRequests('The skin site account changed.')
 			players.value = []
 			playersStatus.value = 'idle'
+			selectedPlayerId.value = null
 		}
 		user.value = { uuid: data.user.uuid, username: data.user.username }
 		if ([`${SKIN_SITE_ORIGIN}/`, `${SKIN_SITE_ORIGIN}/login`].includes(frameUrl.value)) {
@@ -215,9 +345,11 @@ export function receiveSkinSiteMessage(event: MessageEvent, frame: Window | null
 	} else {
 		rejectPendingLuckRequests('The skin site session is unavailable.')
 		rejectPendingPlayersRequests('The skin site session is unavailable.')
+		rejectPendingSkinUpdateRequests('The skin site session is unavailable.')
 		user.value = null
 		players.value = []
 		playersStatus.value = 'idle'
+		selectedPlayerId.value = null
 	}
 	status.value = data.status
 	if (refreshPlayers) void requestSkinSitePlayers().catch(() => {})