From 5b9bd293826cc50737332096404ec2680d2a0180 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 12 Jul 2023 11:14:05 +0000
Subject: [PATCH] feat(*): Handle emoji throwing on server

---
 README.md                                   |  5 --
 src/components/EmojiPicker.svelte           | 51 +++++++++++++++++-
 src/components/UsersList.svelte             |  9 +++-
 src/routes/estimation/[roomId]/+page.svelte | 58 ++++++++++++++-------
 src/server/websocket.ts                     | 15 +++++-
 5 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index 1dc6d89..af957d9 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,6 @@ There are two components to this:
 1. Frontend, built using SvelteKit
 2. WebSockets server, built using Node.js
 
-## Potential Enhancements
-
-- throw emoji at people
-- add a shield to anyone named 'Tristan' whenever the poop emoji is thrown at them
-
 ## Frontend
 
 For full functionality, ensure there is a copy of the WebSockets server running. 
diff --git a/src/components/EmojiPicker.svelte b/src/components/EmojiPicker.svelte
index 51d8bd0..35cfc9a 100644
--- a/src/components/EmojiPicker.svelte
+++ b/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>
diff --git a/src/components/UsersList.svelte b/src/components/UsersList.svelte
index 49b5fab..eb0c2a1 100644
--- a/src/components/UsersList.svelte
+++ b/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);
 		}
 	}
 
diff --git a/src/routes/estimation/[roomId]/+page.svelte b/src/routes/estimation/[roomId]/+page.svelte
index 32097e6..b226aae 100644
--- a/src/routes/estimation/[roomId]/+page.svelte
+++ b/src/routes/estimation/[roomId]/+page.svelte
@@ -2,6 +2,8 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 
+	let usersList;
+
 	import { onMount } from 'svelte';
 	import UsersList from '../../../components/UsersList.svelte';
 	import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
@@ -10,7 +12,7 @@
 	import Estimates from '../../../components/Estimates.svelte';
 
 	import { connectToWebSocket, sendMessage, generateId } from '../estimation.js';
-	
+
 	class JoinRoomMessage {
 		type: string;
 		roomId: string;
@@ -86,6 +88,14 @@
 		sendMessage(socket, new SelectEstimateMessage(data.roomId, userId, estimate));
 	}
 
+	function handleEmojiTrigger(cardId: string, emoji: string) {
+		sendMessage(socket, {
+			type: 'trigger-emoji',
+			cardId,
+			emoji
+		});
+	}
+
 	function restartEstimation() {
 		sendMessage(socket, { roomId: data.roomId, type: 'restart-estimation' });
 	}
@@ -122,6 +132,10 @@
 			showRestartButton = false;
 			showEstimates = false;
 			sendMessage(socket, { type: 'get-user-estimates' });
+		} else if (message.type === 'trigger-emoji') {
+			if (usersList && typeof usersList.triggerEmoji === 'function') {
+				usersList.triggerEmoji(message.cardId, message.emoji);
+			}
 		}
 	}
 
@@ -130,28 +144,30 @@
 	});
 </script>
 
-<h1>Estimation Page</h1>
-
 {#if showModal}
 	<Modal {closeModal} {joinRoom} />
 {/if}
 
-{#if showRestartButton}
-	<button
-		class="button button-red"
-		on:click={() => restartEstimation()}
-		on:keydown={(event) => {
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				restartEstimation();
-			}
-		}}
-		aria-label={'restart estimation'}
-		tabindex="0">Restart estimation</button
-	>
-{/if}
 
-<UsersList {users} {showEstimates} {userId} />
+
+<UsersList bind:this={usersList} {users} {showEstimates} {userId} {handleEmojiTrigger} />
+
+<div class="button-container">
+	{#if showRestartButton}
+		<button
+			class="button button-red"
+			on:click={() => restartEstimation()}
+			on:keydown={(event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					restartEstimation();
+				}
+			}}
+			aria-label={'restart estimation'}
+			tabindex="0">Restart estimation</button
+		>
+	{/if}
+</div>
 
 <Estimates onEstimateClick={handleEstimateClick} />
 
@@ -161,6 +177,12 @@
 {/if}
 
 <style>
+	.button-container {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1em;
+	}
+	
 	.button {
 		appearance: none;
 		border: 1px solid rgba(27, 31, 35, 0.15);
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index bbe5115..1cbde9b 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -110,7 +110,11 @@ wss.on('connection', (ws: WebSocket, req) => {
 					if (allEstimates.size === room.getUsers().length) {
 						const users = room.getUsers();
 						const average = calculateAverageEstimate(users);
-						broadcastToRoom(room.id, { type: 'estimation-closed', average, groupedEstimates: groupEstimates(users)});
+						broadcastToRoom(room.id, {
+							type: 'estimation-closed',
+							average,
+							groupedEstimates: groupEstimates(users)
+						});
 					}
 				}
 			}
@@ -124,6 +128,15 @@ wss.on('connection', (ws: WebSocket, req) => {
 				const users = room.getUsers();
 				broadcastToRoom(room.id, { type: 'user-estimates', users });
 			}
+		} else if (data.type === 'trigger-emoji') {
+			const { cardId, emoji } = data;
+			if (room) {
+				broadcastToRoom(room.id, {
+					type: 'trigger-emoji',
+					cardId,
+					emoji
+				});
+			}
 		}
 	});