From 90062a217c02f4cba19adf1d831041df681cc6ad Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Thu, 30 Mar 2023 18:56:32 +0200
Subject: [PATCH] do not show empty introductions/conclusions

---
 client/src/components/Level.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx
index 4fa29b3..c4abd1f 100644
--- a/client/src/components/Level.tsx
+++ b/client/src/components/Level.tsx
@@ -86,6 +86,7 @@ function PlayableLevel({worldId, levelId}) {
 
   const theme = useTheme();
 
+
   useEffect(() => {
     // Scroll to top when loading a new level
     introductionPanelRef.current!.scrollTo(0,0)
@@ -180,9 +181,11 @@ function PlayableLevel({worldId, levelId}) {
     <Split minSize={0} snapOffset={200} sizes={[50, 25, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
       <div className="exercise-panel">
         <div ref={introductionPanelRef} className="introduction-panel">
-          <div className="message info">
-            <Markdown>{level?.data?.introduction}</Markdown>
-          </div>
+          {level?.data?.introduction &&
+            <div className="message info">
+              <Markdown>{level?.data?.introduction}</Markdown>
+            </div>
+          }
         </div>
         <div className="exercise">
           {/* <h4>Aufgabe:</h4> */}
@@ -206,9 +209,11 @@ function PlayableLevel({worldId, levelId}) {
         </EditorContext.Provider>
 
         {completed && <div className="conclusion">
-          <div className="message info">
-            <Markdown>{level?.data?.conclusion}</Markdown>
-          </div>
+          {level?.data?.conclusion &&
+            <div className="message info">
+              <Markdown>{level?.data?.conclusion}</Markdown>
+            </div>
+          }
           {levelId >= gameInfo.data?.worldSize[worldId] ?
           <Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
           <Button to={`/game/${gameId}/world/${worldId}/level/${levelId + 1}`}>
@@ -238,11 +243,13 @@ function Introduction({worldId}) {
     <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Einführung" worldId={worldId} levelId={0} />
     <div style={gameInfo.isLoading ? {display: "none"} : null} className="exercise-panel">
       <div className="introduction-panel">
-        <div className="message info">
-          <Markdown>
-            {gameInfo.data?.worlds.nodes[worldId].introduction}
-          </Markdown>
-        </div>
+        { gameInfo.data?.worlds.nodes[worldId].introduction &&
+          <div className="message info">
+            <Markdown>
+              {gameInfo.data?.worlds.nodes[worldId].introduction}
+            </Markdown>
+          </div>
+        }
       </div>
       <div className="conclusion">
         {0 == gameInfo.data?.worldSize[worldId] ?