diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx index 468acd0..aa3cf78 100644 --- a/client/src/components/Level.tsx +++ b/client/src/components/Level.tsx @@ -105,7 +105,7 @@ function Level() { const codeviewRef = useRef(null) const infoviewRef = useRef(null) - const messagePanelRef = useRef(null) + const introductionPanelRef = useRef(null) const [showSidePanel, setShowSidePanel] = useState(true) @@ -117,7 +117,7 @@ function Level() { useEffect(() => { // Scroll to top when loading a new level - messagePanelRef.current!.scrollTo(0,0) + introductionPanelRef.current!.scrollTo(0,0) }, [levelId]) const connection = React.useContext(ConnectionContext) @@ -165,7 +165,7 @@ function Level() { -
+
{level?.data?.introduction}
diff --git a/client/src/components/level.css b/client/src/components/level.css index 8fed3d6..5d70d46 100644 --- a/client/src/components/level.css +++ b/client/src/components/level.css @@ -15,7 +15,7 @@ flex-flow: column; } -.message-panel { +.introduction-panel { width: 100%; } @@ -56,12 +56,12 @@ mjx-container[jax="CHTML"][display="true"] { /* Styling tables for Markdown */ -.message-panel table, .message-panel th, .message-panel td { +.introduction-panel table, .introduction-panel th, .introduction-panel td { /* border: 1px solid rgb(0, 0, 0, 0.12); */ border-collapse: collapse; } -.message-panel th, .message-panel td { +.introduction-panel th, .introduction-panel td { padding-left: .5em; padding-right: .5em; } @@ -97,7 +97,7 @@ td code { border: 1px solid rgb(230, 122, 0); } -.message-panel { +.introduction-panel { border: 1px solid rgb(192, 18, 178); }