chat: fix vertical overflow

Author: h908714124

src/main/client/src/Game.jsx

@@ -212,7 +212,7 @@ export const Game = () => {
       })
       setGameState(game)
     }, () => navigate(base + "/lobby"))
-  }, [setGameState, queueStatus, auth, gameId])
+  }, [setGameState, queueStatus, auth, gameId, navigate])
 
   useEffect(() => {
     if (initialized.current) {

src/main/client/src/component/Input.jsx

@@ -11,8 +11,9 @@ export const Input = ({
   type,
   ...rest
 }) => {
-  let { register } = useFormContext()
+  let {register} = useFormContext()
   let classes = twJoin(
+    "border border-white rounded-lg p-2 bg-stone-800 text-stone-100",
     className,
   )
   return (

src/main/client/src/feature/GameChat.jsx

@@ -18,17 +18,22 @@ import {
 } from "./../util.js"
 
 export const GameChat = () => {
-  let [messages, setMessages] = useState([]);
-  let divRef = useRef(null)
+  let [messages, setMessages] = useState([])
+  let divRef = useRef()
 
   let stompClient = useContext(StompContext)
-  let { gameId } = useParams()
+  let {gameId} = useParams()
   let auth = useAuthStore(state => state.auth)
 
   useEffect(() => {
-    stompClient.subscribe("/topic/chat/" + gameId, (message) => {
-      let newMessage = JSON.parse(message.body)
-      setMessages(previous => [...previous, newMessage])
+    stompClient.subscribe("/topic/chat/" + gameId, (m) => {
+      let message = JSON.parse(m.body)
+      setMessages(previous => {
+        if (previous.length && previous[previous.length - 1].n === message.n) {
+          return previous
+        }
+        return [...previous, message]
+      })
     })
 
     doTry(async () => {
@@ -44,39 +49,36 @@ export const GameChat = () => {
   }, [stompClient, auth, gameId])
 
   useEffect(() => {
-    divRef.current?.scrollIntoView({behavior: 'smooth'});
-  }, [messages]);
+    divRef.current?.scrollIntoView({behavior: "smooth"})
+  }, [messages])
 
   let onSendMessage = useCallback((event) => doTry(async () => {
     event.preventDefault()
     let data = new FormData(event.target)
-    document.getElementById("sending").reset();
+    event.target.reset()
     stompClient.publish({
       destination: "/app/chat/send/",
       body: JSON.stringify({
         message: data.get("message"),
         id: gameId,
       }),
     })
-  }), [ stompClient, gameId ])
-
-  return (
+  }), [stompClient, gameId])
 
-    <div className="border border-gray-500 bg-gray-900 rounded-lg shadow relative my-1 mr-1">
-      <div>
-        <div className="max-h-80 h-80 px-2 py-1 overflow-auto">
-          {messages.map(message => (
-              <p>{message.user + ": " + message.message}</p>
-          ))}
-          <div ref={divRef} />
-        </div>
-      </div>
-      <form className="px-2 py-1" id="sending" onSubmit={onSendMessage}>
-        <input
-          type="text"
-          name="message"
-        />
-      </form>
+  return <>
+    <div
+      className="grow border border-gray-500 bg-gray-900 rounded-lg p-1 overflow-y-scroll">
+      {messages.map(message => (
+          <p key={message.n}>{message.user + ": " + message.message}</p>
+      ))}
+      <div ref={divRef} />
     </div>
-  );
+    <form className="flex-0 mb-2" onSubmit={onSendMessage}>
+      <input
+        className="w-full rounded-lg p-2 border border-gray-500 bg-stone-800 text-stone-100"
+        type="text"
+        name="message"
+      />
+    </form>
+  </>
 }

src/main/client/src/feature/GamePanel.jsx

@@ -37,8 +37,8 @@ import {
 
 export const GamePanel = ({zoom, setZoom}) => {
   return (
-    <div className="fixed top-0 right-0 h-full bg-slate-800 border-l-2 border-slate-700">
-      <div className="w-64 pr-3 pt-4 pl-4">
+    <div className="fixed top-0 right-0 z-1 h-full bg-slate-800 border-l-2 border-slate-700">
+      <div className="w-80 pr-3 pt-4 pl-2 h-full flex flex-col gap-y-1">
         <Panel zoom={zoom} setZoom={setZoom} />
       </div>
     </div>
@@ -93,7 +93,7 @@ function Panel({zoom, setZoom}) {
   let result = gameHasEnded ? getScore(board) : undefined
   return (
     <>
-      <div className="inline-flex gap-x-2">
+      <div className="flex-none grid w-full grid-cols-[min-content_min-content_min-content_auto] gap-x-2">
         <button
           onClick={() => setZoom(zoom - 1)}>
           <IconContext.Provider value={{
@@ -109,7 +109,9 @@ function Panel({zoom, setZoom}) {
           } else {
             setZoom(0)
           }
-        }}>Zoom: {zoom + 0}</button>
+        }}>
+          <span>Zoom:&nbsp;{zoom + 0}</span>
+        </button>
         <button
           onClick={() => setZoom(zoom + 1)}>
           <IconContext.Provider value={{
@@ -119,23 +121,25 @@ function Panel({zoom, setZoom}) {
             <FaAngleRight />
           </IconContext.Provider>
         </button>
+        <button title="Leave the game" onClick={onExit}
+          className="justify-self-end">
+          <IconContext.Provider value={{
+            size: "1.5em",
+            className: "pr-[4px]",
+          }}>
+            <IoMdExit />
+          </IconContext.Provider>
+        </button>
       </div>
-      <button title="Leave the game" onClick={onExit}
-        className="float-right">
-        <IconContext.Provider value={{
-          size: "1.5em",
-          className: "pr-[4px]",
-        }}>
-          <IoMdExit />
-        </IconContext.Provider>
-      </button>
-      <div className="flex gap-x-1">
+      <div className="flex-none flex gap-x-1">
         <div>{white}</div>
         <div>vs</div>
         <div>{black}</div>
       </div>
-      <div>Move {queueLength}</div>
-      <div className="mt-2">
+      <div className="flex-none">
+        Move {queueLength}
+      </div>
+      <div className="flex-none">
         <Button
           onClick={onPass}
           className="py-1 px-4"
@@ -144,15 +148,15 @@ function Panel({zoom, setZoom}) {
         </Button>
       </div>
       {counting && <>
-        <div className="mt-2">
+        <div className="flex-none">
           <Button
             className="py-1 px-4"
             disabled={gameHasEnded}
             onClick={onResetCounting}>
             Reset Counting
           </Button>
         </div>
-        <div className="mt-2">
+        <div className="flex-none">
           <Button
             disabled={gameHasEnded || !countingComplete()}
             className="py-1 px-4"
@@ -162,7 +166,7 @@ function Panel({zoom, setZoom}) {
         </div>
       </>}
       {result && (
-        <div className="mt-4">
+        <div className="flex-none">
           <div>
             {"w:" + result.w}
           </div>
@@ -174,11 +178,7 @@ function Panel({zoom, setZoom}) {
           </div>
         </div>
       )}
-      {/*
-      <div className="absolute bottom-10 pr-2">
-        <GameChat />
-      </div>
-      */}
+      <GameChat />
     </>
   )
 }

src/main/client/src/index.css

@@ -3,16 +3,9 @@
 @tailwind utilities;
 
 @layer base {
-  body, input {
+  body {
     @apply bg-stone-800;
     @apply font-sans;
     @apply text-stone-100;
   }
-
-  input {
-    @apply border;
-    @apply border-white;
-    @apply rounded-lg;
-    @apply p-2;
-  }
 }

src/main/java/com/bernd/ChatController.java

@@ -6,7 +6,7 @@
 import com.bernd.util.Auth;
 import java.security.Principal;
 import java.util.ArrayList;
-import java.util.List;
+import java.util.concurrent.atomic.AtomicInteger;
 import org.springframework.http.ResponseEntity;
 import org.springframework.messaging.core.MessageSendingOperations;
 import org.springframework.messaging.handler.annotation.MessageMapping;
@@ -31,25 +31,17 @@ public class ChatController {
   @ResponseBody
   @GetMapping("/api/chat/{id}")
   public Chat getChat(@PathVariable String id) {
-    System.out.println("GETCHAT " + id);
     return chats.get(id);
   }
 
   @MessageMapping("/chat/send/")
   public ResponseEntity<?> sendChat(ChatRequest chatRequest, Principal principal) {
     String user = Auth.getPrincipal(principal);
-    ChatMessage message = new ChatMessage(chats.chats().size(), chatRequest.message(), user);
-    Chat chat = chats.get(chatRequest.id());
-    if (chat != null) {
-      chat.messages().add(message);
-    } else {
-      List<ChatMessage> messages = new ArrayList<>();
-      messages.add(message);
-      chat = new Chat(chatRequest.id(), messages);
-    }
-    chats.put(chat);
+    Chat chat = chats.map().computeIfAbsent(chatRequest.id(),
+        id -> new Chat(id, new AtomicInteger(0), new ArrayList<>()));
+    ChatMessage message = new ChatMessage(chat.counter().getAndIncrement(), chatRequest.message(), user);
+    chat.messages().add(message);
     operations.convertAndSend("/topic/chat/" + chat.id(), message);
     return ResponseEntity.ok().build();
   }
-
 }

src/main/java/com/bernd/Chats.java

@@ -2,7 +2,6 @@
 
 import com.bernd.model.Chat;
 import java.util.LinkedHashMap;
-import java.util.List;
 import java.util.Map;
 import org.springframework.stereotype.Component;
 
@@ -19,7 +18,7 @@ Chat put(Chat chat) {
     return chat;
   }
 
-  List<Chat> chats() {
-    return List.copyOf(map.values());
+  Map<String, Chat> map() {
+    return map;
   }
 }

src/main/java/com/bernd/model/Chat.java

@@ -1,8 +1,10 @@
 package com.bernd.model;
 
 import java.util.List;
+import java.util.concurrent.atomic.AtomicInteger;
 
 public record Chat(
     String id,
+    AtomicInteger counter,
     List<ChatMessage> messages) {
 }