Added video support to markdown and added videos to map and drawing docs

src/components/Markdown.js

@@ -27,6 +27,20 @@ function Heading({ level, ...props }) {
 }
 
 function Image(props) {
+  if (props.src.endsWith(".mp4")) {
+    return (
+      <video
+        style={{ width: "100%", margin: "8px 0" }}
+        autoPlay
+        muted
+        playsInline
+        loop
+        controls
+        {...props}
+      />
+    );
+  }
+
   return <UIImage mt={2} sx={{ borderRadius: "4px" }} {...props} />;
 }
 
@@ -37,7 +51,7 @@ function ListItem(props) {
 function Code({ children, value }) {
   const variant = value.startsWith("Warning:") ? "warning" : "";
   return (
-    <Message variant={variant} my={1} as="span" sx={{ display: "block" }}>
+    <Message variant={variant} my={2} as="span" sx={{ display: "block" }}>
       {children}
     </Message>
   );

src/docs/assets/index.js

@@ -1,5 +1,15 @@
 import audioSharingFaq from "./AudioSharingFAQ.png";
+import defaultMaps from "./DefaultMaps.mp4";
+import customMaps from "./CustomMaps.mp4";
+import customMapsAdvanced from "./CustomMapsAdvanced.jpg";
+import resetingAndRemovingMaps from "./ResetingAndRemovingMaps.mp4";
+import usingDrawing from "./UsingDrawing.mp4";
 
 export default {
   audioSharingFaq,
+  defaultMaps,
+  customMaps,
+  customMapsAdvanced,
+  resetingAndRemovingMaps,
+  usingDrawing,
 };

src/docs/howTo/sharingMaps.md

@@ -4,42 +4,49 @@ Once you have started a game you can share a map to all other party members by c
 
 Owlbear Rodeo comes with a selection of default maps that allow you to quickly get up and running by picking an environment.
 
-Currently the default maps are:
+![Default Maps](defaultMaps)
 
-- Blank
-- Grass
-- Sand
-- Stone
-- Water
-- Wood
+Currently the default maps are: Blank, Grass, Sand, Stone, Water and Wood.
 
 ## Custom Maps
 
-When the default maps don't suit your needs you can upload a custom map. To do this open the Map Select Screen and then either click the Add Map button in the top left or simply drag an image from your computer into the list of maps.
+When the default maps don't suit your needs you can upload a custom map.
+
+![Custom Maps](customMaps)
+
+To do this open the Map Select Screen and then either click the Add Map button in the top left or simply drag an image from your computer into the list of maps.
 
 Once a custom map has been added you must configure the size of the map.
 
 To do this there is the Column and Row properties. Columns represents how many grid cells your map has in the horizontal direction while Rows represents the amount of cells in the vertical direction.
 
-TODO: Add bit on map size
-
 `Tip: Owlbear Rodeo can automatically fill the Column and Row properties for you if you include them in the file name of the uploaded map. E.g. River [10x15] will create a map named River with 10 columns and 15 rows`
 
+`Warning: When uploading a custom map keep the file size in mind. Maps are shared between users in Owlbear Rodeo so if a map is taking too long to load for other party members consider lowering the file size.`
+
 ## Custom Maps (Advanced)
 
-Once a custom map has been uploaded there are a few advanced settings available. To get access to these settings, with the desired map selected, click the Show More button under the Rows and Columns in the Map Select Screen. A brief summary of these settings is listed below.
+Once a custom map has been uploaded there are a few advanced settings available.
+
+![Custom Maps Advanced](customMapsAdvanced)
+
+To get access to these settings, with the desired map selected, click the Show More button under the Rows and Columns in the Map Select Screen. A brief summary of these settings is listed below.
 
 - Name: The name of the map shown in the Map Select Screen.
-- Show Grid: When true Owlbear Rodeo will draw a grid on top of your map, this is useful if a custom map you have uploaded does't include a grid.
-- Grid Type: Change the type of grid to use for the map. Currently only the Grid type is supported however Hex Vertical and Hex Horizontal will be added in a future release.
+- Grid Type: Change the type of grid to use for the map. Currently only the Square type is supported however Hex will be added in a future release.
+- Show Grid: When enabled Owlbear Rodeo will draw a grid on top of your map, this is useful if a custom map you have uploaded does't include a grid.
 - Allow others to edit: These properties control what other party members can edit when viewing your map.
-  - Fog: Controls whether others can edit the maps fog (default false).
-  - Drawings: Controls whether others can add drawings to the map (default true).
-  - Tokens: Controls whether others can move tokens that they have not placed themselves (default true).
+  - Fog: Controls whether others can edit the maps fog (default disabled).
+  - Drawings: Controls whether others can add drawings to the map (default enabled).
+  - Tokens: Controls whether others can move tokens that they have not placed themselves (default enabled).
 
-## Reseting and Deleting a Map
+## Reseting and Removing a Map
+
+With a map selected there are a couple of actions you can perform on them.
+
+![Reseting and Removing Maps](resetingAndRemovingMaps)
 
 Once a map has been used you can clear away all the tokens, fog and drawings by selecting the map in the Select Map Screen and then on the selected tile click the Reset Map Button.
 
-To delete a custom map select the map in the Map Select Screen then on the selected tile click the Delete Map Button.
+To remove a custom map select the map in the Map Select Screen then on the selected tile click the Remove Map Button.
 `Warning: This operation cannot be undone`

src/docs/howTo/usingDrawing.md

@@ -1,5 +1,7 @@
 The Drawing Tool allows you to draw on top of a map. To access the Drawing Tool click the Drawing Tool Button in the top right of the map view.
 
+![Using Drawing](usingDrawing)
+
 A summary of the Drawing Tool options are listed below.
 
 | Option    | Description                                         | Shortcut         |

src/routes/HowTo.js

@@ -6,6 +6,8 @@ import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
 import Accordion from "../components/Accordion";
 
+import assets from "../docs/assets";
+
 const overview = raw("../docs/howTo/overview.md");
 const startingAndJoining = raw("../docs/howTo/startingAndJoining.md");
 const sharingMaps = raw("../docs/howTo/sharingMaps.md");
@@ -40,47 +42,47 @@ function ReleaseNotes() {
         </Text>
         <div id="overview">
           <Accordion heading="Overview" defaultOpen>
-            <Markdown source={overview} />
+            <Markdown source={overview} assets={assets} />
           </Accordion>
         </div>
         <div id="startingAndJoining">
           <Accordion heading="Starting and Joining a Game">
-            <Markdown source={startingAndJoining} />
+            <Markdown source={startingAndJoining} assets={assets} />
           </Accordion>
         </div>
         <div id="sharingMaps">
-          <Accordion heading="Sharing a Map">
-            <Markdown source={sharingMaps} />
+          <Accordion heading="Sharing a Map" defaultOpen>
+            <Markdown source={sharingMaps} assets={assets} />
           </Accordion>
         </div>
         <div id="usingTokens">
           <Accordion heading="Using Tokens">
-            <Markdown source={usingTokens} />
+            <Markdown source={usingTokens} assets={assets} />
           </Accordion>
         </div>
         <div id="usingDrawing">
           <Accordion heading="Using the Drawing Tool">
-            <Markdown source={usingDrawing} />
+            <Markdown source={usingDrawing} assets={assets} />
           </Accordion>
         </div>
         <div id="usingDice">
           <Accordion heading="Using Dice">
-            <Markdown source={usingDice} />
+            <Markdown source={usingDice} assets={assets} />
           </Accordion>
         </div>
         <div id="usingFog">
           <Accordion heading="Using the Fog Tool">
-            <Markdown source={usingFog} />
+            <Markdown source={usingFog} assets={assets} />
           </Accordion>
         </div>
         <div id="usingMeasure">
           <Accordion heading="Using the Measure Tool">
-            <Markdown source={usingMeasure} />
+            <Markdown source={usingMeasure} assets={assets} />
           </Accordion>
         </div>
         <div id="sharingAudio">
           <Accordion heading="Sharing Audio (Experimental)">
-            <Markdown source={sharingAudio} />
+            <Markdown source={sharingAudio} assets={assets} />
           </Accordion>
         </div>
       </Flex>