Add level select button to level screen

Now you can click on the level name to pull up the level select
menu. This makes it much easier to jump back and forth between
levels.

web/components/level/level_title.tsx

@@ -0,0 +1,48 @@
+import { Text, Tooltip, Box } from "@chakra-ui/react";
+import { useState } from "react";
+import { RxDropdownMenu } from "react-icons/rx";
+import { useLevelSelectModal } from "../../hooks/level_select_modal_hooks";
+
+export interface LevelTitleProps {
+  title: string;
+  levelIndex: number;
+}
+
+export default function LevelTitle(props: LevelTitleProps) {
+  const [hoveringOver, setHoveringOver] = useState<boolean>(false);
+  const [showLevelSelectModal] = useLevelSelectModal();
+
+  return (
+    <Tooltip label="Select a different level" hasArrow placement="right">
+      <Box
+        _hover={{ cursor: "pointer" }}
+        onMouseEnter={() => setHoveringOver(true)}
+        onMouseLeave={() => setHoveringOver(false)}
+        border="1px solid"
+        borderColor={hoveringOver ? "gray.500" : "transparent"}
+        bg={hoveringOver ? "gray.200" : "transparent"}
+        borderRadius="md"
+        px="8px"
+        py="2px"
+        onClick={() => showLevelSelectModal()}
+      >
+        <RxDropdownMenu
+          size="1.4em"
+          style={{
+            display: "inline-block",
+            verticalAlign: "middle",
+            marginRight: "0.5em",
+          }}
+        />
+        <Text
+          fontSize="1.4em"
+          fontWeight="bold"
+          as="span"
+          verticalAlign="middle"
+        >
+          Level {props.levelIndex}: {props.title}
+        </Text>
+      </Box>
+    </Tooltip>
+  );
+}

web/routes/level.tsx

@@ -23,6 +23,7 @@ import { useHintsModal } from "../hooks/hints_modal_hooks";
 import { BG_INDEX, NAVBAR_HEIGHT } from "../lib/constants";
 import { useSoundManager } from "../hooks/sound_manager_hooks";
 import { ErrorType } from "../contexts/error_modal";
+import LevelTitle from "../components/level/level_title";
 
 const game = Game.new();
 
@@ -336,18 +337,19 @@ export default function Level() {
         maxW="container.xl"
         mt={`${NAVBAR_HEIGHT}px`}
       >
-        <Box pt="15px">
+        <Box pt="12px">
           <Flex>
-            <Text fontSize="2xl" fontWeight="bold" mb={1}>
-              Level {currScene?.levelIndex}: {currLevel().name}
-            </Text>
+            <LevelTitle
+              title={currLevel().name}
+              levelIndex={currScene?.levelIndex || 0}
+            />
             {currScene?.hints != null && currScene?.hints.length > 0 && (
-              <Box ml="17px" my="auto" mt="3px">
+              <Box ml="8px" my="auto" mt="3px">
                 <ShowHintButton onClick={showHintsModal} />
               </Box>
             )}
             {getDialogTree() !== null && (
-              <Box ml="17px" my="auto" mt="3px">
+              <Box ml="12px" my="auto" mt="3px">
                 <ShowDialogButton onClick={() => setDialogVisible(true)} />
               </Box>
             )}