Add changelog that is accessible from the title screen

web/components/changelog.mdx

@@ -0,0 +1,15 @@
+[More info on GitHub](https://github.com/albrow/elara/commits/main)
+
+##### October 6, 2023 (version 0.1.4)
+
+- Added a new button on the title screen that opens this changelog.
+- Added new level select button to jump quickly between levels.
+- Fixed new game modal to better fit mobile devices.
+
+##### October 1, 2023 (version 0.1.3)
+
+- Official Public Beta Release 🎉
+- Added a disclaimer over some cutscenes explaining that they are a work in progress.
+- Updated the credits in the final cutscene.
+- Kalina now explains that G.R.O.V.E.R. has been repaired in the dialog for "Unintended Effects".
+- Clicking "About" from the title screen now takes you to the landing page at [elaragame.com](https://elaragame.com).

web/components/title/changelog_modal.tsx

@@ -0,0 +1,63 @@
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalCloseButton,
+  Box,
+} from "@chakra-ui/react";
+
+import { useCallback } from "react";
+import Changelog from "../changelog.mdx";
+
+export interface ChangelogModalProps {
+  visible: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function ChangelogModal(props: ChangelogModalProps) {
+  const onClose = useCallback(() => {
+    props.setVisible(false);
+  }, [props]);
+
+  return (
+    <Modal
+      isOpen={props.visible}
+      onClose={onClose}
+      autoFocus={false}
+      closeOnEsc={false}
+      closeOnOverlayClick={false}
+      scrollBehavior="inside"
+    >
+      <ModalOverlay />
+      <ModalContent
+        w="container.md"
+        maxW="100%"
+        maxH="100%"
+        top={{
+          base: "0px",
+          "2xl": "24px",
+        }}
+        bottom={{
+          base: "0px",
+          "2xl": "24px",
+        }}
+        my={{
+          base: "0px",
+          md: "24px",
+          lg: "48px",
+        }}
+        py="24px"
+        px="12px"
+        position="fixed"
+      >
+        <ModalCloseButton />
+        <ModalBody>
+          <Box className="md-content">
+            <Changelog />
+          </Box>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

web/routes/title.tsx

@@ -6,6 +6,7 @@ import {
   MdSave,
   MdSettings,
   MdOutlineHelp,
+  MdNewspaper,
 } from "react-icons/md";
 
 import { Animate } from "react-simple-animate";
@@ -17,13 +18,15 @@ import staryBgImg from "../images/starry_bg.webp";
 import { useSceneNavigator } from "../hooks/scenes_hooks";
 import logoImg from "../images/logo.webp";
 import { NewGameModal } from "../components/title/new_game_modal";
+import { ChangelogModal } from "../components/title/changelog_modal";
 
 export default function Title() {
   const [saveData, { resetAllSaveData }] = useSaveData();
   const [settingsVisible, setSettingsVisible] = useState(false);
   const [confirmDeleteDataModalVisble, setConfirmDeleteDataModalVisible] =
     useState(false);
   const [newGameModalVisible, setNewGameModalVisible] = useState(false);
+  const [changelogModalVisible, setChangelogModalVisisble] = useState(false);
   const { navigateToHub, navigateToCutscene } = useSceneNavigator();
 
   const hasExistingSave = useMemo(
@@ -65,6 +68,10 @@ export default function Title() {
     setSettingsVisible(true);
   }, []);
 
+  const onChangelog = useCallback(() => {
+    setChangelogModalVisisble(true);
+  }, []);
+
   return (
     <Box
       w="100%"
@@ -83,6 +90,10 @@ export default function Title() {
         setVisible={setConfirmDeleteDataModalVisible}
         onConfirm={onConfirmDeleteData}
       />
+      <ChangelogModal
+        visible={changelogModalVisible}
+        setVisible={setChangelogModalVisisble}
+      />
       <NewGameModal
         visible={newGameModalVisible}
         setVisible={setNewGameModalVisible}
@@ -153,6 +164,10 @@ export default function Title() {
               About
             </Button>
           </a>
+          <Button size="lg" onClick={onChangelog}>
+            <MdNewspaper style={{ marginRight: "0.2em" }} />
+            What&apos;s New
+          </Button>
         </Flex>
       </Container>
       <Text