From 24eed37f89a814a8369777410fb6fb1a360d26aa Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Sun, 8 Oct 2023 00:46:03 +0200
Subject: [PATCH] split intro text consistently into bubbles #100

---
 client/src/components/level.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx
index 320a4d5..04450ff 100644
--- a/client/src/components/level.tsx
+++ b/client/src/components/level.tsx
@@ -136,13 +136,14 @@ function ChatPanel({lastLevel}) {
   //   // chatRef.current!.scrollTo(0,0)
   // }, [gameId, worldId, levelId])
 
+  let introText: Array<string> = level?.data?.introduction.split(/\n(\s*\n)+/)
+
   return <div className="chat-panel">
     <div ref={chatRef} className="chat">
-      {level?.data?.introduction &&
-        <div className={`message information step-0${selectedStep === 0 ? ' selected' : ''}`} onClick={toggleSelection(0)}>
-          <Markdown>{level?.data?.introduction}</Markdown>
-        </div>
-      }
+      {introText?.filter(t => t.trim()).map(((t, i) =>
+        <Hint key={`intro-p-${i}`}
+          hint={{text: t, hidden: false}} step={0} selected={null} toggleSelection={undefined} />
+      ))}
       {proof.map((step, i) => {
         // It the last step has errors, it will have the same hints
         // as the second-to-last step. Therefore we should not display them.
@@ -421,10 +422,6 @@ function Introduction({impressum, setImpressum}) {
 
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
-  const closeImpressum = () => {
-    setImpressum(false)
-  }
-
   const toggleImpressum = () => {
     setImpressum(!impressum)
   }