From 15e961609c0609bf781f42be7bafc9a7eddf0dc9 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 11 Jul 2023 21:22:12 +0000
Subject: [PATCH] feat(*): Add emoji picker

---
 package.json                      |  1 +
 src/components/EmojiPicker.svelte | 36 +++++++++++++++++++++++++++++++
 src/components/UsersList.svelte   | 12 ++++++++---
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/components/EmojiPicker.svelte

diff --git a/package.json b/package.json
index f34da14..a9c4526 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@joeattardi/emoji-button": "^4.6.4",
 		"uuid": "^9.0.0",
 		"ws": "^8.13.0"
 	}
diff --git a/src/components/EmojiPicker.svelte b/src/components/EmojiPicker.svelte
new file mode 100644
index 0000000..51d8bd0
--- /dev/null
+++ b/src/components/EmojiPicker.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	let selectedEmoji = '🧻';
+	let picker, button;
+
+	const showEmojiPicker = () => {
+		picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button);
+	};
+
+	if (browser) {
+		onMount(async () => {
+			const { EmojiButton } = await import('@joeattardi/emoji-button');
+			picker = new EmojiButton();
+			picker.on('emoji', (selection) => {
+				selectedEmoji = selection.emoji;
+				dispatch('emojiSelected', { emoji: selection.emoji });
+			});
+		});
+	}
+
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+</script>
+
+<div style="position: relative;">
+	<button bind:this={button} class="emoji-button" on:click={showEmojiPicker}>
+		{selectedEmoji} Choose your emoji...
+	</button>
+</div>
+
+<style>
+	.emoji-button {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/components/UsersList.svelte b/src/components/UsersList.svelte
index d4f2bba..2311d96 100644
--- a/src/components/UsersList.svelte
+++ b/src/components/UsersList.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
+	import EmojiPicker from './EmojiPicker.svelte';
+
 	export let users: any;
 	export let showEstimates: boolean = false;
 	export let userId: string;
 
-	let customEmoji = '💩';
+	let customEmoji = '🧽'; // default emoji
 	let shieldActive = false;
 
+	const handleEmojiSelected = (event) => {
+        customEmoji = event.detail.emoji;
+    };
+
 	function handleCardClick(cardId) {
 		// Get the user from the cardId
 		let user = users.find((user) => `user-card-${user.userId}` === cardId);
@@ -92,6 +98,8 @@
 	}
 </script>
 
+<EmojiPicker on:emojiSelected="{handleEmojiSelected}" />
+
 <div id="users-list">
 	<div class="users-container">
 		{#each users as user (user.userId)}
@@ -114,8 +122,6 @@
 	</div>
 </div>
 
-<!-- <input type="text" bind:value={customEmoji} placeholder="Enter your custom emoji" /> -->
-
 <style>
 	#users-list {
 		display: flex;