From f36695ad5c8aba781cdbb3f95832f73ab596a36e Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Sun, 16 Jul 2023 21:16:03 +0200
Subject: [PATCH] introduction selectable

---
 client/src/components/infoview/main.tsx | 2 +-
 client/src/components/level.tsx         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/infoview/main.tsx b/client/src/components/infoview/main.tsx
index 55fabf9..8617438 100644
--- a/client/src/components/infoview/main.tsx
+++ b/client/src/components/infoview/main.tsx
@@ -329,7 +329,7 @@ export function CommandLineInterface(props: {world: string, level: number, data:
 
   // Scroll to element if selection changes
   React.useEffect(() => {
-    if (selectedStep) {
+    if (typeof selectedStep !== 'undefined') {
       Array.from(proofPanelRef.current?.getElementsByClassName(`step-${selectedStep}`)).map((elem) => {
         elem.scrollIntoView({block: "center"})
       })
diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx
index aace273..2b90f59 100644
--- a/client/src/components/level.tsx
+++ b/client/src/components/level.tsx
@@ -109,7 +109,7 @@ function PlayableLevel({worldId, levelId}) {
 
   // Scroll to element if selection changes
   React.useEffect(() => {
-    if (selectedStep) {
+    if (typeof selectedStep !== 'undefined') {
       Array.from(chatRef.current?.getElementsByClassName(`step-${selectedStep}`)).map((elem) => {
         elem.scrollIntoView({block: "center"})
       })
@@ -222,7 +222,7 @@ function PlayableLevel({worldId, levelId}) {
         <div className="chat-panel">
           <div ref={chatRef} className="chat">
             {level?.data?.introduction &&
-              <div className="message information">
+              <div className={`message information step-0${selectedStep === 0 ? ' selected' : ''}`} onClick={toggleSelection(0)}>
                 <Markdown>{level?.data?.introduction}</Markdown>
               </div>
             }