From 873e4d7f1241c164d999b22df8f4147ba1249155 Mon Sep 17 00:00:00 2001 From: LeoKu Date: Thu, 16 Feb 2023 22:35:10 +0800 Subject: [PATCH] Multiple skin tones supported --- src/assets/widgets/ear/attached.svg | 4 ++-- src/assets/widgets/ear/detached.svg | 4 ++-- src/assets/widgets/face/base.svg | 27 +++++++-------------------- src/components/Configurator.vue | 12 ++++++++++-- src/components/VueColorAvatar.vue | 14 ++++++++++++-- src/enums/index.ts | 2 +- src/types/index.ts | 2 +- src/utils/constant.ts | 5 ++++- src/utils/index.ts | 9 ++++----- 9 files changed, 43 insertions(+), 36 deletions(-) diff --git a/src/assets/widgets/ear/attached.svg b/src/assets/widgets/ear/attached.svg index 5f28ec3..e9072c5 100644 --- a/src/assets/widgets/ear/attached.svg +++ b/src/assets/widgets/ear/attached.svg @@ -14,7 +14,7 @@ /> - \ No newline at end of file + diff --git a/src/assets/widgets/ear/detached.svg b/src/assets/widgets/ear/detached.svg index f2b40dd..6316b8f 100644 --- a/src/assets/widgets/ear/detached.svg +++ b/src/assets/widgets/ear/detached.svg @@ -16,7 +16,7 @@ fill-rule="evenodd" clip-rule="evenodd" d="M42.972 23.984C43.0434 23.3322 43.08 22.6703 43.08 22C43.08 11.7827 33.5734 5 23.08 5C12.5866 5 4.08007 11.5 5.08001 23.5C5.63643 30.1774 8.02584 34.5719 11.7307 37.2171C11.1423 38.2409 10.8848 39.4436 11.0483 40.8167C11.6774 46.0984 16.1862 47.9998 22.5242 47.9998C33.6292 47.9998 42.4159 33.9534 42.972 23.984Z" - fill="#ffcebc" + fill="$fillColor" /> - \ No newline at end of file + diff --git a/src/assets/widgets/face/base.svg b/src/assets/widgets/face/base.svg index 3c8eadb..424f3a6 100644 --- a/src/assets/widgets/face/base.svg +++ b/src/assets/widgets/face/base.svg @@ -9,7 +9,7 @@ face - base @@ -24,24 +24,15 @@ > - + - + - + - \ No newline at end of file + diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue index d078e39..3683958 100644 --- a/src/components/Configurator.vue +++ b/src/components/Configurator.vue @@ -49,14 +49,18 @@
{{ t('label.colors') }}
  • import { ref, toRefs, watchEffect } from 'vue' -import { WrapperShape } from '@/enums' +import { WidgetType, WrapperShape } from '@/enums' import type { AvatarOption } from '@/types' import { getRandomAvatarOption } from '@/utils' import { AVATAR_LAYER, NONE } from '@/utils/constant' @@ -84,9 +84,19 @@ watchEffect(async () => { } ) + let skinColor: string | undefined + const svgRawList = await Promise.all(promises).then((raw) => { return raw.map((svgRaw, i) => { - const widgetFillColor = sortedList[i][1].fillColor + const [widgetType, widget] = sortedList[i] + let widgetFillColor = widget.fillColor + + if (widgetType === WidgetType.Face) { + skinColor = widgetFillColor + } + if (skinColor && widgetType === WidgetType.Ear) { + widgetFillColor = skinColor + } const content = svgRaw .slice(svgRaw.indexOf('>', svgRaw.indexOf(' = { '#FD6F5D', ], + skinColors: ['#F9C9B6', '#E0BB95', '#AC6651'], + get backgroundColor() { return [ ...this.commonColors, @@ -97,7 +99,6 @@ export const SETTINGS: Readonly = { 'transparent', ] }, - skinColor: ['#F9C9B6', '#AC6651'], } export const SCREEN = { @@ -117,6 +118,7 @@ export const SPECIAL_AVATARS: Readonly = [ widgets: { face: { shape: FaceShape.Base, + fillColor: '#F9C9B6', }, tops: { shape: TopsShape.Pixie, @@ -160,6 +162,7 @@ export const SPECIAL_AVATARS: Readonly = [ widgets: { face: { shape: FaceShape.Base, + fillColor: '#F9C9B6', }, tops: { shape: TopsShape.Clean, diff --git a/src/utils/index.ts b/src/utils/index.ts index c05c79d..fbb59c7 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -10,7 +10,7 @@ import type { AvatarOption, None } from '@/types' import { AVATAR_LAYER, NONE, SETTINGS, SPECIAL_AVATARS } from './constant' /** - * get a random value from an array + * Get a random value from an array. */ function getRandomValue( arr: Item[], @@ -34,10 +34,8 @@ function getRandomValue( return randomValue } -export function getRandomFillColor() { - return SETTINGS.commonColors[ - Math.floor(Math.random() * SETTINGS.commonColors.length) - ] +export function getRandomFillColor(colors = SETTINGS.commonColors) { + return colors[Math.floor(Math.random() * colors.length)] } export function getRandomAvatarOption( @@ -82,6 +80,7 @@ export function getRandomAvatarOption( widgets: { face: { shape: getRandomValue(SETTINGS.faceShape), + fillColor: getRandomFillColor(SETTINGS.skinColors), }, tops: { shape: hairShape, -- GitLab