Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ♻️ make skin tones modular

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/components/MkEmojiPicker.section.vue
View File

@ -10,11 +10,11 @@
" "
></i> ></i>
<slot></slot> ({{ emojis.length }}) <slot></slot> ({{ emojis.length }})
<span v-if="props.skinToneSelector"> <span v-if="props.skinToneSelector && props.skinTones">
<button <button
v-for="skinTone in skinTones" v-for="skinTone in props.skinTones"
class="_button" class="_button"
@click="applySkinTone(skinTones.indexOf(skinTone))" @click="applySkinTone(props.skinTones.indexOf(skinTone) + 1)"
> >
<i <i
class="ph-circle ph-fill ph-fw ph-lg" class="ph-circle ph-fill ph-fw ph-lg"
@ -44,17 +44,9 @@ const props = defineProps<{
emojis: string[]; emojis: string[];
initialShown?: boolean; initialShown?: boolean;
skinToneSelector?: boolean; skinToneSelector?: boolean;
skinTones?: string[];
}>(); }>();
const skinTones = [
"#FFDC5E",
"#F7DFCF",
"#F3D3A3",
"#D6AE89",
"#B17F56",
"#7D523C",
];
const localEmojis = ref([...props.emojis]); const localEmojis = ref([...props.emojis]);
function applySkinTone(custom?: number) { function applySkinTone(custom?: number) {

2
packages/client/src/components/MkEmojiPicker.vue
View File

@ -114,6 +114,7 @@
v-for="category in unicodeEmojiCategories" v-for="category in unicodeEmojiCategories"
:key="category" :key="category"
:skin-tone-selector="category === 'people'" :skin-tone-selector="category === 'people'"
:skin-tones="unicodeEmojiSkinTones"
:emojis=" :emojis="
emojilist emojilist
.filter((e) => e.category === category) .filter((e) => e.category === category)
@ -167,6 +168,7 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
import { import {
emojilist, emojilist,
unicodeEmojiCategories, unicodeEmojiCategories,
unicodeEmojiSkinTones,
UnicodeEmojiDef, UnicodeEmojiDef,
getNicelyLabeledCategory, getNicelyLabeledCategory,
} from "@/scripts/emojilist"; } from "@/scripts/emojilist";

9
packages/client/src/scripts/emojilist.ts
View File

@ -35,6 +35,15 @@ export const categoryMapping = {
"Flags": "flags", "Flags": "flags",
} as const; } as const;
export const unicodeEmojiSkinTones = [
"#FFDC5E",
"#F7DFCF",
"#F3D3A3",
"#D6AE89",
"#B17F56",
"#7D523C",
];
export function addSkinTone(emoji: string, skinTone?: number) { export function addSkinTone(emoji: string, skinTone?: number) {
const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone; const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
const skinToneModifiers = [ const skinToneModifiers = [