Slightly better chat (send with enter)

src/layout/pages/Room.tsx

@@ -1,5 +1,5 @@
 import useWebSocket from "react-use-websocket";
-import React from "react";
+import React, {FormEvent} from "react";
 import {useNavigate, useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
@@ -91,11 +91,13 @@ const Room = () => {
         });
     }
 
-    const handleChat = (message: string) => {
+    const handleChat = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
         handleSend({
             Type: "CHAT",
-            Payload: message
+            Payload: chatInput
         });
+        setChatInput('');
     }
 
     return (
@@ -103,8 +105,10 @@ const Room = () => {
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw} handleChoice={handleChoice}/>
-            <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
-            <button onClick={() => handleChat(chatInput)}>Send</button>
+            <form onSubmit={handleChat}>
+                <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
+                <GHButton type={"submit"}>Send</GHButton>
+            </form>
             <ul>
                 {chatMessages.map((message, index) => (
                     <li key={index}>{message.PlayerName}: {message.Message}</li>