feat(*): Handle emoji throwing on server

src/components/EmojiPicker.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div style="position: relative;">
-	<button bind:this={button} class="emoji-button" on:click={showEmojiPicker}>
+	<button bind:this={button} class="emoji-button button button-white" on:click={showEmojiPicker}>
 		{selectedEmoji} Choose your emoji...
 	</button>
 </div>
@@ -33,4 +33,53 @@
 	.emoji-button {
 		cursor: pointer;
 	}
+
+    .button {
+		appearance: none;
+		border: 1px solid rgba(27, 31, 35, 0.15);
+		border-radius: 6px;
+		box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
+		box-sizing: border-box;
+		color: #fff;
+		cursor: pointer;
+		display: inline-block;
+		font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif,
+			'Apple Color Emoji', 'Segoe UI Emoji';
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+		padding: 6px 16px;
+		position: relative;
+		text-align: center;
+		text-decoration: none;
+		user-select: none;
+		-webkit-user-select: none;
+		touch-action: manipulation;
+		vertical-align: middle;
+		white-space: nowrap;
+	}
+
+	.button:focus:not(:focus-visible):not(.focus-visible) {
+		box-shadow: none;
+		outline: none;
+	}
+
+	.button:disabled {
+		border-color: rgba(27, 31, 35, 0.1);
+		color: rgba(255, 255, 255, 0.8);
+		cursor: default;
+	}
+
+	.button:focus {
+		outline: none;
+	}
+
+    .button-white {
+		background-color: #ffffff;
+		color: black;
+	}
+
+    .button-white:hover {
+		background-color: #E6E6E6;
+	}
 </style>

src/components/UsersList.svelte

@@ -4,6 +4,7 @@
 	export let users: any;
 	export let showEstimates: boolean = false;
 	export let userId: string;
+	export let handleEmojiTrigger: (cardId: string, emoji: string) => void;
 
 	let customEmoji = '🧽'; // default emoji
 	let shieldActive = false;
@@ -13,11 +14,15 @@
 	};
 
 	function handleCardClick(cardId) {
+		handleEmojiTrigger(cardId, customEmoji);
+	}
+
+	export function triggerEmoji(cardId, emoji) {
 		// Get the user from the cardId
 		let user = users.find((user) => `user-card-${user.userId}` === cardId);
 
 		// If the user is Tristan and the selected emoji is poop, activate the shield
-		if (user && user.name === 'Tristan' && customEmoji === '💩') {
+		if (user && user.name === 'Tristan' && emoji === '💩') {
 			shieldActive = true;
 
 			// After 2 seconds, remove the shield
@@ -31,7 +36,7 @@
 		let times = Math.floor(Math.random() * 3) + 3; // Random number between 3 and 5
 		for (let i = 0; i < times; i++) {
 			let timeout = Math.random() * 100 + 100 * i; // Random number between 100 and 200, multiplied by i to stagger the emojis
-			setTimeout(() => addEmojiToElement(cardId, customEmoji), timeout);
+			setTimeout(() => addEmojiToElement(cardId, emoji), timeout);
 		}
 	}