From 2f38f228d61453bf4e46a0fcfbc2d54507b03d16 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 23 Jun 2023 17:47:07 -0700
Subject: [PATCH] fix: :bug: non-duplicate skin tone selection

---
 .../src/components/MkEmojiPicker.section.vue  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index 95e761373..ffe891a0b 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -14,7 +14,11 @@
 				<button
 					v-for="skinTone in props.skinTones"
 					class="_button"
-					@click="applySkinTone(props.skinTones.indexOf(skinTone) + 1)"
+					@click.prevent="
+						applyUnicodeSkinTone(
+							props.skinTones.indexOf(skinTone) + 1
+						)
+					"
 				>
 					<i
 						class="ph-circle ph-fill ph-fw ph-lg"
@@ -39,6 +43,7 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted } from "vue";
 import { addSkinTone } from "@/scripts/emojilist";
+import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
 
 const props = defineProps<{
 	emojis: string[];
@@ -49,8 +54,19 @@ const props = defineProps<{
 
 const localEmojis = ref([...props.emojis]);
 
-function applySkinTone(custom?: number) {
+function applyUnicodeSkinTone(custom?: number) {
 	for (let i = 0; i < localEmojis.value.length; i++) {
+		if (
+			[
+				emojiComponents.light_skin_tone,
+				emojiComponents.medium_light_skin_tone,
+				emojiComponents.medium_skin_tone,
+				emojiComponents.medium_dark_skin_tone,
+				emojiComponents.dark_skin_tone,
+			].some((v) => localEmojis.value[i].endsWith(v))
+		) {
+			localEmojis.value[i] = localEmojis.value[i].slice(0, -1);
+		}
 		localEmojis.value[i] = addSkinTone(localEmojis.value[i], custom);
 	}
 }
@@ -63,7 +79,7 @@ const shown = ref(!!props.initialShown);
 
 onMounted(() => {
 	if (props.skinToneSelector) {
-		applySkinTone();
+		applyUnicodeSkinTone();
 	}
 });