From 7640f4d3f8d6c65c5ac0357ae2d4ff49c9630fee Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 23 Jun 2023 17:19:26 -0700
Subject: [PATCH] refactor: :recycle: make skin tones modular

Could possibly be for future custom emoji sets that support custom skin tones? (i.e. Mutant Standard)
---
 .../src/components/MkEmojiPicker.section.vue     | 16 ++++------------
 packages/client/src/components/MkEmojiPicker.vue |  2 ++
 packages/client/src/scripts/emojilist.ts         |  9 +++++++++
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index cf5307dfd..95e761373 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -10,11 +10,11 @@
 				"
 			></i>
 			<slot></slot> ({{ emojis.length }})
-			<span v-if="props.skinToneSelector">
+			<span v-if="props.skinToneSelector && props.skinTones">
 				<button
-					v-for="skinTone in skinTones"
+					v-for="skinTone in props.skinTones"
 					class="_button"
-					@click="applySkinTone(skinTones.indexOf(skinTone))"
+					@click="applySkinTone(props.skinTones.indexOf(skinTone) + 1)"
 				>
 					<i
 						class="ph-circle ph-fill ph-fw ph-lg"
@@ -44,17 +44,9 @@ const props = defineProps<{
 	emojis: string[];
 	initialShown?: boolean;
 	skinToneSelector?: boolean;
+	skinTones?: string[];
 }>();
 
-const skinTones = [
-	"#FFDC5E",
-	"#F7DFCF",
-	"#F3D3A3",
-	"#D6AE89",
-	"#B17F56",
-	"#7D523C",
-];
-
 const localEmojis = ref([...props.emojis]);
 
 function applySkinTone(custom?: number) {
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 9e84f2872..260898e6e 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -114,6 +114,7 @@
 						v-for="category in unicodeEmojiCategories"
 						:key="category"
 						:skin-tone-selector="category === 'people'"
+						:skin-tones="unicodeEmojiSkinTones"
 						:emojis="
 							emojilist
 								.filter((e) => e.category === category)
@@ -167,6 +168,7 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
 import {
 	emojilist,
 	unicodeEmojiCategories,
+	unicodeEmojiSkinTones,
 	UnicodeEmojiDef,
 	getNicelyLabeledCategory,
 } from "@/scripts/emojilist";
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index 90e5f56ed..0609600f6 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -35,6 +35,15 @@ export const categoryMapping = {
 	"Flags": "flags",
 } as const;
 
+export const unicodeEmojiSkinTones = [
+	"#FFDC5E",
+	"#F7DFCF",
+	"#F3D3A3",
+	"#D6AE89",
+	"#B17F56",
+	"#7D523C",
+];
+
 export function addSkinTone(emoji: string, skinTone?: number) {
 	const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
 	const skinToneModifiers = [