From da5363f5787f45a50bc978a61b908a371e5b091b Mon Sep 17 00:00:00 2001
From: DarrenZal <zaldarren@gmail.com>
Date: Mon, 15 Jan 2024 13:58:10 -0800
Subject: [PATCH] direct user to create a username if they don't have one
 before chatting

---
 src/components/chat/chat.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/chat/chat.svelte b/src/components/chat/chat.svelte
index 2b1647f..de97a1a 100644
--- a/src/components/chat/chat.svelte
+++ b/src/components/chat/chat.svelte
@@ -114,6 +114,7 @@ async function sendFeedback() {
 }
 </script>
 
+{#if username}
 <section class="chat-container">
   <div class="messages">
     {#each $messages as message}
@@ -142,6 +143,12 @@ async function sendFeedback() {
   <textarea placeholder="Leave your feedback..." bind:value={feedbackMessage} rows="3"></textarea>
   <button on:click={sendFeedback}>Submit Feedback</button>
 </div>
+{:else}
+<!-- Prompt to Connect and Create Username -->
+<div class="connect-prompt">
+  <p>Please connect to create a username before chatting.</p>
+</div>
+{/if}
 
 <style>
   .chat-container {
@@ -203,4 +210,9 @@ async function sendFeedback() {
   font-size: 16px;
   padding: 5px 10px;
 }
+.connect-prompt {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 18px;
+  }
 </style>