diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index 3683958..a1e92dd 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -21,6 +21,28 @@
+
+
+
+
-
+
+
@@ -26,10 +32,11 @@ import { ref, toRefs, watchEffect } from 'vue'
import { WidgetType, WrapperShape } from '@/enums'
import type { AvatarOption } from '@/types'
import { getRandomAvatarOption } from '@/utils'
-import { AVATAR_LAYER, NONE } from '@/utils/constant'
+import { AVATAR_LAYER, NONE, SHAPE_STYLE_SET } from '@/utils/constant'
import { widgetData } from '@/utils/dynamic-data'
import Background from './widgets/Background.vue'
+import Border from './widgets/Border.vue'
interface VueColorAvatarProps {
option: AvatarOption
@@ -58,6 +65,10 @@ function getWrapperShapeClassName() {
}
}
+function getWrapperShapeStyle() {
+ return SHAPE_STYLE_SET[avatarOption.value.wrapperShape]
+}
+
const svgContent = ref('')
watchEffect(async () => {
@@ -133,15 +144,6 @@ watchEffect(async () => {
position: relative;
overflow: hidden;
- &.circle {
- border-radius: 50%;
- }
-
- &.squircle {
- // TODO: Radius should adapt to the avatar size
- border-radius: 25px;
- }
-
.avatar-payload {
position: relative;
z-index: 2;
diff --git a/src/components/widgets/Border.vue b/src/components/widgets/Border.vue
new file mode 100644
index 0000000..e27bdf3
--- /dev/null
+++ b/src/components/widgets/Border.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/src/i18n/locales/en/index.ts b/src/i18n/locales/en/index.ts
index fe25e4b..de4a902 100644
--- a/src/i18n/locales/en/index.ts
+++ b/src/i18n/locales/en/index.ts
@@ -16,6 +16,7 @@ export default {
},
label: {
wrapperShape: 'Avatar Shape',
+ borderColor: 'Border Color',
backgroundColor: 'Background Color',
colors: 'colors',
},
diff --git a/src/i18n/locales/zh/index.ts b/src/i18n/locales/zh/index.ts
index c4b69e6..fe7542d 100644
--- a/src/i18n/locales/zh/index.ts
+++ b/src/i18n/locales/zh/index.ts
@@ -16,6 +16,7 @@ export default {
},
label: {
wrapperShape: '头像形状',
+ borderColor: '边框颜色',
backgroundColor: '背景颜色',
colors: '颜色',
},
diff --git a/src/types/index.ts b/src/types/index.ts
index f81e1fb..f6d4291 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -46,6 +46,7 @@ export interface AvatarOption {
background: {
color: string
+ borderColor: string
}
widgets: Partial
@@ -70,4 +71,5 @@ export interface AvatarSettings {
commonColors: string[]
skinColors: string[]
backgroundColor: string[]
+ borderColor: string[]
}
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index e65a3e8..bae2e08 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -99,6 +99,10 @@ export const SETTINGS: Readonly = {
'transparent',
]
},
+
+ get borderColor() {
+ return [...this.commonColors, 'transparent']
+ },
}
export const SCREEN = {
@@ -114,6 +118,7 @@ export const SPECIAL_AVATARS: Readonly = [
wrapperShape: 'squircle',
background: {
color: 'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
+ borderColor: 'transparent',
},
widgets: {
face: {
@@ -158,6 +163,7 @@ export const SPECIAL_AVATARS: Readonly = [
wrapperShape: 'squircle',
background: {
color: '#fd6f5d',
+ borderColor: 'transparent',
},
widgets: {
face: {
@@ -207,3 +213,16 @@ export const NOT_COMPATIBLE_AGENTS = [
] as const
export const DOWNLOAD_DELAY = 800
+
+export const SHAPE_STYLE_SET = {
+ [WrapperShape.Circle]: {
+ borderRadius: '50%',
+ },
+ [WrapperShape.Square]: {
+ borderRadius: '0',
+ },
+ [WrapperShape.Squircle]: {
+ // TODO: Radius should adapt to the avatar size
+ borderRadius: '25px',
+ },
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index fbb59c7..f2ed191 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -75,6 +75,9 @@ export function getRandomAvatarOption(
hairColor, // Handle special cases and prevent color conflicts.
],
}),
+ borderColor: getRandomValue(SETTINGS.borderColor, {
+ avoid: [useOption.background?.color],
+ }),
},
widgets: {