Added getting started modal to home screen

src/docs/howTo/gettingStarted.md

@@ -0,0 +1,11 @@
+1. Start a game to generate a unique URL that can connect you and
+   your players.
+
+   Each game is recycled after 24 hours so make sure you create a new game when you play your next session.
+
+2. Invite players with your unique URL from step 1.
+3. Share a map, roll dice or share audio with your players.
+
+   All data is saved automatically to your computer so next session simply use the same browser and all your maps and tokens will be ready to go.
+
+That's it, no accounts, no paywalls, no ads, just a virtual tabletop.

src/icons/HelpIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+function HelpIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentcolor"
+      style={{ margin: "0 4px" }}
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z" />
+    </svg>
+  );
+}
+
+export default HelpIcon;

src/modals/GettingStartedModal.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Box, Label, Text } from "theme-ui";
+import raw from "raw.macro";
+
+import Modal from "../components/Modal";
+import Markdown from "../components/Markdown";
+import Link from "../components/Link";
+
+const gettingStarted = raw("../docs/howTo/gettingStarted.md");
+
+function GettingStartedModal({ isOpen, onRequestClose }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={{ maxWidth: "450px" }}
+    >
+      <Box>
+        <Label py={2}>Getting Started</Label>
+        <Markdown source={gettingStarted} />
+        <Text variant="body2" my={2}>
+          For more tutorials visit the <Link to="/how-to">How To</Link> page
+        </Text>
+      </Box>
+    </Modal>
+  );
+}
+
+export default GettingStartedModal;

src/routes/Home.js

@@ -6,6 +6,9 @@ import Footer from "../components/Footer";
 
 import StartModal from "../modals/StartModal";
 import JoinModal from "../modals/JoinModal";
+import GettingStartedModal from "../modals/GettingStartedModal";
+
+import HelpIcon from "../icons/HelpIcon";
 
 import AuthContext from "../contexts/AuthContext";
 
@@ -19,6 +22,9 @@ import owlington from "../images/Owlington.png";
 function Home() {
   const [isStartModalOpen, setIsStartModalOpen] = useState(false);
   const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
+  const [isGettingStartedModalOpen, setIsGettingStartedModalOpen] = useState(
+    false
+  );
 
   // Reset password on visiting home
   const { setPassword } = useContext(AuthContext);
@@ -50,6 +56,18 @@ function Home() {
           Owlbear Rodeo
         </Text>
         <Image src={owlington} m={2} />
+        <Button
+          variant="secondary"
+          m={2}
+          onClick={() => setIsGettingStartedModalOpen(true)}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          Getting Started <HelpIcon />
+        </Button>
         <Button m={2} onClick={() => setIsStartModalOpen(true)}>
           Start Game
         </Button>
@@ -76,6 +94,7 @@ function Home() {
         >
           Donate <DonateIcon />
         </Button>
+
         <Flex mb={4} mt={0} sx={{ justifyContent: "center" }}>
           <Link href="https://www.reddit.com/r/OwlbearRodeo/">
             <IconButton title="Reddit" aria-label="Reddit">
@@ -101,6 +120,10 @@ function Home() {
           isOpen={isStartModalOpen}
           onRequestClose={() => setIsStartModalOpen(false)}
         />
+        <GettingStartedModal
+          isOpen={isGettingStartedModalOpen}
+          onRequestClose={() => setIsGettingStartedModalOpen(false)}
+        />
       </Flex>
       <Footer />
     </Flex>