Added first pass for most how to's

src/App.js

@@ -8,6 +8,7 @@ import Game from "./routes/Game";
 import About from "./routes/About";
 import FAQ from "./routes/FAQ";
 import ReleaseNotes from "./routes/ReleaseNotes";
+import HowTo from "./routes/HowTo";
 
 import { AuthProvider } from "./contexts/AuthContext";
 import { DatabaseProvider } from "./contexts/DatabaseContext";
@@ -22,6 +23,9 @@ function App() {
         <AuthProvider>
           <Router>
             <Switch>
+              <Route path="/howTo">
+                <HowTo />
+              </Route>
               <Route path="/releaseNotes">
                 <ReleaseNotes />
               </Route>

src/components/Footer.js

@@ -27,6 +27,9 @@ function Footer() {
       <Link m={2} to="/releaseNotes" variant="footer">
         Release Notes
       </Link>
+      <Link m={2} to="/howTo" variant="footer">
+        How To
+      </Link>
     </Flex>
   );
 }

src/components/map/MapControls.js

@@ -29,7 +29,7 @@ function MapContols({
   disabledControls,
   disabledSettings,
 }) {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);
 
   const toolsById = {
     pan: {

src/docs/howTo/sharingAudio.md

@@ -1 +1 @@
-# Sharing Audio (Experimental)
+TODO

src/docs/howTo/sharingMaps.md

@@ -1,7 +1,45 @@
-# Sharing a Map
+Once you have started a game you can share a map to all other party members by clicking the Select Map button then selecting the desired map to share and clicking the Done button.
 
 ## Default Maps
 
+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:
+
+- Blank
+- Grass
+- Sand
+- Stone
+- Water
+- 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.
+
+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.
+
+`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`
+
 ## 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.
+
+- 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.
+- 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).
+
+## Reseting a Map
+
+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.
+
+## Deleting a Custom Map
+
+To delete a custom map select the map in the Map Select Screen then open the advanced settings by clicking the Show More button lastly click the Delete Button.
+`Warning: This operation cannot be undone`

src/docs/howTo/shortcuts.md

@@ -1 +0,0 @@
-# Keyboard Shortcuts

src/docs/howTo/startingAndJoining.md

@@ -1,5 +1,3 @@
-# Starting and Joining a Game
-
 ## Starting a game
 
 To start a game in Owlbear Rodeo head to the [home page](https://owlbear.rodeo) and click the Start Game button.

src/docs/howTo/usingDice.md

@@ -1,5 +1,22 @@
-# Using Dice
+Owlbear Rodeo supports a physically simulated 3D dice tray and dice. To access these features click the Show Dice Tray icon in the top left of the map view.
 
 ## Rolling and Rerolling
 
+To roll dice with the dice tray open simply click the Add Dice icon for the type of dice you wish to add.
+A running total of how many dice you have added will show up above each dice icon.
+
+Once your dice have been rolled a calculated total of the dice can be seen on the bottom of the dice tray.
+
+To reroll all your dice you can click the Reroll Dice icon in the bottom right of the dice tray if you wish to reroll a single die you can simply grab the dice and throw it in the dice tray.
+
 ## Clearing
+
+To clear the dice in your dice tray you can click the Clear Dice button in the bottom left of the dice tray.
+
+## Styling Your Dice
+
+Owlbear Rodeo has a bunch of varying dice styles to choose from when you roll. To change your dice style click Select Dice Style Button in the top left of the dice tray.
+
+## Expanding Your Dice Tray
+
+The dice tray comes in two different sizes to change the size click the Expand Dice Tray Button in the top right of the dice tray.

src/docs/howTo/usingDrawing.md

@@ -1 +1,18 @@
-# Using the Drawing Tool
+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.
+
+A summary of the Drawing Tool options are listed below.
+
+| Option    | Description                                         | Shortcut         |
+| --------- | --------------------------------------------------- | ---------------- |
+| Color     | Change the color of the drawings                    |                  |
+| Brush     | Draw free form lines                                | B                |
+| Paint     | Draw free form shapes                               | P                |
+| Line      | Draw a single straight line                         | L                |
+| Rectangle | Draw a rectangle                                    | R                |
+| Circle    | Draw a circle                                       | C                |
+| Triangle  | Draw a triangle                                     | T                |
+| Erase     | Click and drag to select drawings, release to erase | E                |
+| Erase All | Erases all drawings on the map                      |                  |
+| Blending  | Enables/Disables alpha blending                     | O                |
+| Undo      | Undo drawing or erasing                             | Ctrl + Z         |
+| Redo      | Redo drawing or erasing                             | Ctrl + Shift + Z |

src/docs/howTo/usingFog.md

@@ -1,7 +1,15 @@
-# Using Fog
+The Fog Tool allows you to add hidden areas to control what the other party members can see on your map. To access the Fog Tool click the Fog Tool Button in the top right of the map view.
 
-## Adding Fog
+A summary of the Fog Tool options are listed below.
 
-## Subtracting Fog
+| Option        | Description                                                          | Shortcut                                       |
-
+| ------------- | -------------------------------------------------------------------- | ---------------------------------------------- |
-## Removing and Toggling Fog
+| Fog Polygon   | Click to add points to a fog shape                                   | P, Enter (Accept Shape), Escape (Cancel Shape) |
+| Fog Brush     | Drag to add a free form fog shape                                    | B                                              |
+| Toggle Fog    | Click a fog shape to hide/show it                                    | T                                              |
+| Remove Fog    | Click a fog shape to erase it                                        | R                                              |
+| Add Fog       | When selected drawing a fog shape will add it to the scene           | Alt (Toggle)                                   |
+| Subtract Fog  | When selected drawing a fog shape will subtract it from other shapes | Alt (Toggle)                                   |
+| Edge Snapping | Enables/Disables edge snapping                                       | S                                              |
+| Undo          | Undo a fog action                                                    | Ctrl + Z                                       |
+| Redo          | Redo a fog action                                                    | Ctrl + Shift + Z                               |

src/docs/howTo/usingMeasure.md

@@ -1,3 +1,9 @@
-# Using the Measure Tool
+The Measure Tool allows you to find how far one point on a map is from another point. To access the Measure Tool click the Measure Tool Button in the top right of the map view.
 
-## Types of Measurement
+A summary of the Measure Tool options are listed below.
+
+| Option              | Description                                                                        | Shortcut |
+| ------------------- | ---------------------------------------------------------------------------------- | -------- |
+| Grid Distance       | This is the distance on a grid and is the metric use in D&D                        | G        |
+| Line Distance       | This is the actual distance between the two points of the measure tool             | L        |
+| City Block Distance | This is the distance when only travelling in the horizontal or vertical directions | C        |

src/docs/howTo/usingTokens.md

@@ -1,5 +1,3 @@
-# Using Tokens
-
 ## Default Tokens
 
 ## Custom Tokens

src/routes/HowTo.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { Flex, Text } from "theme-ui";
+import raw from "raw.macro";
+
+import Footer from "../components/Footer";
+import Markdown from "../components/Markdown";
+import Accordion from "../components/Accordion";
+
+const overview = raw("../docs/howTo/overview.md");
+const startingAndJoining = raw("../docs/howTo/startingAndJoining.md");
+const sharingMaps = raw("../docs/howTo/sharingMaps.md");
+const usingTokens = raw("../docs/howTo/usingTokens.md");
+const usingDrawing = raw("../docs/howTo/usingDrawing.md");
+const usingDice = raw("../docs/howTo/usingDice.md");
+const usingFog = raw("../docs/howTo/usingFog.md");
+const usingMeasure = raw("../docs/howTo/usingMeasure.md");
+const sharingAudio = raw("../docs/howTo/sharingAudio.md");
+
+function ReleaseNotes() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        minHeight: "100%",
+        alignItems: "center",
+      }}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          maxWidth: "564px",
+          flexGrow: 1,
+          width: "100%",
+        }}
+        p={4}
+      >
+        <Text mb={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
+          How To
+        </Text>
+        <div id="overview">
+          <Accordion heading="Overview" defaultOpen>
+            <Markdown source={overview} />
+          </Accordion>
+        </div>
+        <div id="startingAndJoining">
+          <Accordion heading="Starting and Joining a Game">
+            <Markdown source={startingAndJoining} />
+          </Accordion>
+        </div>
+        <div id="sharingMaps">
+          <Accordion heading="Sharing a Map">
+            <Markdown source={sharingMaps} />
+          </Accordion>
+        </div>
+        <div id="usingTokens">
+          <Accordion heading="Using Tokens">
+            <Markdown source={usingTokens} />
+          </Accordion>
+        </div>
+        <div id="usingDrawing">
+          <Accordion heading="Using the Drawing Tool">
+            <Markdown source={usingDrawing} />
+          </Accordion>
+        </div>
+        <div id="usingDice">
+          <Accordion heading="Using Dice">
+            <Markdown source={usingDice} />
+          </Accordion>
+        </div>
+        <div id="usingFog">
+          <Accordion heading="Using the Fog Tool">
+            <Markdown source={usingFog} />
+          </Accordion>
+        </div>
+        <div id="usingMeasure">
+          <Accordion heading="Using the Measure Tool">
+            <Markdown source={usingMeasure} />
+          </Accordion>
+        </div>
+        <div id="sharingAudio">
+          <Accordion heading="Sharing Audio (Experimental)">
+            <Markdown source={sharingAudio} />
+          </Accordion>
+        </div>
+      </Flex>
+      <Footer />
+    </Flex>
+  );
+}
+
+export default ReleaseNotes;