From 4234c9f965571308bd71a0b13392311daa081e23 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 30 Jul 2023 16:05:08 +0100
Subject: [PATCH] feat(#15): Enable joining a room within the PWA by pasting
 the link into a textbox

---
 src/routes/+page.svelte | 45 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 67f08e4..563a70f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,10 +2,20 @@
 	import { generateId } from './estimation/estimation.js';
 	import { goto } from '$app/navigation';
 
+	let roomId = '';
+
 	function startARoom() {
 		const roomId = generateId();
 		goto(`/estimation/${roomId}`);
 	}
+
+	function joinRoom() {
+		const match = roomId.match(/\/estimation\/(.+)/);
+		if (match) {
+			const roomId = match[1];
+			goto(`/estimation/${roomId}`);
+		}
+	}
 </script>
 
 <div class="container">
@@ -13,6 +23,11 @@
 		Simply start a room and share the URL to everyone else who needs to join the estimation session.
 	</p>
 	<button class="button button-green" on:click={startARoom}>Start a room</button>
+	<div class="join-room-container">
+		<label for="room-id">Join a room:</label>
+		<input type="text" id="room-id" placeholder="Paste a shared room link" bind:value={roomId} />
+		<button class="button button-yellow" on:click={joinRoom}>Join</button>
+	</div>
 </div>
 
 <style>
@@ -29,6 +44,28 @@
 		margin: 0 auto;
 	}
 
+	.join-room-container {
+		margin-top: 50px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.join-room-container label {
+		font-size: 1rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.join-room-container input[type='text'] {
+		font-size: 1.2rem;
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid #ccc;
+		margin-bottom: 0.5rem;
+		width: 100%;
+		max-width: 20rem;
+	}
+
 	.button {
 		appearance: none;
 		border: 1px solid rgba(27, 31, 35, 0.15);
@@ -111,4 +148,12 @@
 		background-color: #ffffff;
 		color: black;
 	}
+
+	.button-yellow {
+		background-color: #eea236;
+	}
+
+	.button-yellow:hover {
+		background-color: #d18f2e;
+	}
 </style>