refactor: ♻️ make skin tones modular

Could possibly be for future custom emoji sets that support custom skin tones? (i.e. Mutant Standard)
This commit is contained in:
ThatOneCalculator 2023-06-23 17:19:26 -07:00
parent 3a17ef6d42
commit 7640f4d3f8
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
3 changed files with 15 additions and 12 deletions

View File

@ -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) {

View File

@ -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";

View File

@ -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 = [