Merge pull request #14 from mitchemmc/feature/how-to

v1.4.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owlbear-rodeo",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": true,
   "dependencies": {
     "@msgpack/msgpack": "^1.12.1",

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/Accordion.js

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Box, Flex, Text, IconButton, Divider } from "theme-ui";
+
+import ExpandMoreIcon from "../icons/ExpandMoreIcon";
+
+function Accordion({ heading, children, defaultOpen }) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Flex
+        sx={{ justifyContent: "space-between" }}
+        onClick={() => setOpen(!open)}
+        my={1}
+      >
+        <Text as="h1" variant="heading" sx={{ fontSize: 5 }}>
+          {heading}
+        </Text>
+        <IconButton
+          title={open ? "Show Less" : "Show More"}
+          aria-label={open ? "Show Less" : "Show More"}
+          sx={{ transform: open ? "rotate(0deg)" : "rotate(180deg)" }}
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+      </Flex>
+      {open && children}
+      <Divider bg="text" sx={{ opacity: 0.25 }} />
+    </Box>
+  );
+}
+
+Accordion.defaultProps = {
+  defaultOpen: false,
+};
+
+export default Accordion;

src/components/Banner.js

@@ -13,6 +13,7 @@ function Banner({ isOpen, onRequestClose, children, allowClose }) {
         overlay: { bottom: "0", top: "initial" },
         content: {
           backgroundColor: theme.colors.highlight,
+          color: "hsl(210, 50%, 96%)",
           top: "initial",
           left: "50%",
           right: "initial",

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/Markdown.js

@@ -1,9 +1,15 @@
 import React from "react";
-import { Text, Image as UIImage, Link } from "theme-ui";
+import {
+  Text,
+  Image as UIImage,
+  Link as UILink,
+  Message,
+  Embed,
+} from "theme-ui";
 import ReactMarkdown from "react-markdown";
 
 function Paragraph(props) {
-  return <Text as="p" variant="body2" {...props} />;
+  return <Text variant="body2" {...props} />;
 }
 
 function Heading({ level, ...props }) {
@@ -11,6 +17,7 @@ function Heading({ level, ...props }) {
   return (
     <Text
       mt={2}
+      mb={1}
       as={`h${level}`}
       sx={{ fontSize }}
       variant="heading"
@@ -20,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} />;
 }
 
@@ -27,15 +48,113 @@ function ListItem(props) {
   return <Text as="li" variant="body2" {...props} />;
 }
 
-function Markdown({ source }) {
+function Code({ children, value }) {
+  let variant = "";
+  if (value.startsWith("Warning:")) {
+    variant = "warning";
+  } else if (value.startsWith("Note:")) {
+    variant = "note";
+  }
+  return (
+    <Message
+      variant={variant}
+      color="hsl(210, 50%, 96%)"
+      my={2}
+      as="span"
+      sx={{ display: "block" }}
+    >
+      {children}
+    </Message>
+  );
+}
+
+function Table({ children }) {
+  return (
+    <Text
+      as="table"
+      my={4}
+      style={{ borderCollapse: "collapse", width: "100%" }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function TableHead(props) {
+  return (
+    <Text
+      as="thead"
+      variant="heading"
+      sx={{ textAlign: "left", "& > tr": { borderBottomWidth: "2px" } }}
+      {...props}
+    />
+  );
+}
+
+function TableBody(props) {
+  return (
+    <Text
+      as="tbody"
+      variant="body2"
+      sx={{ borderBottomWidth: "1px", "& > tr": { borderBottomWidth: "1px" } }}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ children }) {
+  return (
+    <Text
+      as="tr"
+      sx={{
+        borderBottomStyle: "solid",
+        borderBottomColor: "border",
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function TableCell({ children }) {
+  return (
+    <Text as="td" p={2}>
+      {children}
+    </Text>
+  );
+}
+
+function Link({ href, children }) {
+  const linkText = children[0].props.value;
+  if (linkText === "embed:") {
+    return <Embed src={href} my={2} />;
+  } else {
+    console.log(href);
+    return <UILink href={href}>{children}</UILink>;
+  }
+}
+
+function Markdown({ source, assets }) {
   const renderers = {
     paragraph: Paragraph,
     heading: Heading,
     image: Image,
     link: Link,
     listItem: ListItem,
+    inlineCode: Code,
+    table: Table,
+    tableHead: TableHead,
+    tableBody: TableBody,
+    tableRow: TableRow,
+    tableCell: TableCell,
   };
-  return <ReactMarkdown source={source} renderers={renderers} />;
+  return (
+    <ReactMarkdown
+      source={source}
+      renderers={renderers}
+      transformImageUri={(uri) => assets[uri]}
+    />
+  );
 }
 
 export default Markdown;

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/components/map/MapSettings.js

@@ -1,5 +1,13 @@
 import React from "react";
-import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
+import {
+  Flex,
+  Box,
+  Label,
+  Input,
+  Checkbox,
+  IconButton,
+  Select,
+} from "theme-ui";
 
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 
@@ -73,19 +81,30 @@ function MapSettings({
               my={1}
             />
           </Box>
-          <Box my={2}>
-            <Label>
+          <Flex my={2} sx={{ alignItems: "center" }}>
+            <Box sx={{ width: "50%" }}>
+              <Label>Grid Type</Label>
+              <Select
+                defaultValue="Square"
+                my={1}
+                disabled={mapEmpty || map.type === "default"}
+              >
+                <option>Square</option>
+                <option disabled>Hex (Coming Soon)</option>
+              </Select>
+            </Box>
+            <Label sx={{ width: "50%" }} ml={2}>
               <Checkbox
-                checked={map && map.showGrid}
+                checked={!mapEmpty && map.showGrid}
                 disabled={mapEmpty || map.type === "default"}
                 onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
               />
               Show Grid
             </Label>
-          </Box>
+          </Flex>
           <Divider fill />
           <Box my={2} sx={{ flexGrow: 1 }}>
-            <Label>Allow others to edit</Label>
+            <Label>Allow Others to Edit</Label>
             <Flex my={1}>
               <Label>
                 <Checkbox

src/components/party/StartStreamButton.js

@@ -22,7 +22,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Browser not supported for audio sharing.
         <br />
         <br />
-        See <Link to="/faq#radio">FAQ</Link> for more information.
+        See <Link to="/howTo#sharingAudio">How To</Link> for more information.
       </Text>
     </Box>
   );
@@ -35,7 +35,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Ensure "Share audio" is selected when sharing.
         <br />
         <br />
-        See <Link to="/faq#radio">FAQ</Link> for more information.
+        See <Link to="/howTo#sharingAudio">How To</Link> for more information.
       </Text>
     </Box>
   );

src/components/token/TokenTile.js

@@ -61,8 +61,8 @@ function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
       {isSelected && !isDefault && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>
           <IconButton
-            aria-label="Remove Map"
-            title="Remove Map"
+            aria-label="Remove Token"
+            title="Remove Token"
             onClick={() => {
               onTokenRemove(token.id);
             }}

src/docs/assets/index.js

@@ -0,0 +1,43 @@
+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";
+import openDiceTray from "./OpenDiceTray.mp4";
+import diceRolling from "./DiceRolling.mp4";
+import diceStyles from "./DiceStyles.mp4";
+import diceTraySize from "./DiceTraySize.mp4";
+import usingFog from "./UsingFog.mp4";
+import usingMeasure from "./UsingMeasure.mp4";
+import defaultTokens from "./DefaultTokens.mp4";
+import workingWithTokens from "./WorkingWithTokens.mp4";
+import deletingTokens from "./DeletingTokens.mp4";
+import customTokens from "./CustomTokens.mp4";
+import customTokensAdvanced from "./CustomTokensAdvanced.jpg";
+import addPartyMember from "./AddPartyMember.mp4";
+import changeNickname from "./ChangeNickname.mp4";
+import sharingAudio from "./SharingAudio.mp4";
+import startGame from "./StartGame.mp4";
+
+export default {
+  defaultMaps,
+  customMaps,
+  customMapsAdvanced,
+  resetingAndRemovingMaps,
+  usingDrawing,
+  openDiceTray,
+  diceRolling,
+  diceStyles,
+  diceTraySize,
+  usingFog,
+  usingMeasure,
+  defaultTokens,
+  workingWithTokens,
+  deletingTokens,
+  customTokens,
+  customTokensAdvanced,
+  addPartyMember,
+  changeNickname,
+  sharingAudio,
+  startGame,
+};

src/docs/faq/radio.md

@@ -1,12 +0,0 @@
-## Using Radio (experimental)
-
-### No audio found in screen share.
-
-When using audio sharing you must select the **Share audio** option when choosing the browser tab or screen to share. Support for sharing audio depends on browser and operating system. Currently Google Chrome on Windows allows you to share the audio of any tab or an entire screen while on MacOS you can only share the audio of a tab. For an example of selecting the **Share audio** option for a tab on MacOS see Figure 1.
-
-![Figure 1 Using Audio Sharing](/docs/AudioSharingFAQ.png)
-**Figure 1 Using Audio Sharing.** First select what type of content you would like to share. Second select the content. Third select Share audio. Fourth select Share.
-
-### Browser not supported for audio sharing.
-
-Using audio sharing relies on the browser supporting the audio capture feature of the Screen Capture API. Currently the two browsers that support this are Google Chrome and Microsoft Edge. To see if your browser is supported see the [Browser Compatibility chart](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility) on the Mozilla Developer Network.

src/docs/howTo/overview.md

@@ -0,0 +1 @@
+[embed:](https://www.youtube.com/embed/KLUsOZA-SHI)

src/docs/howTo/sharingAudio.md

@@ -0,0 +1,13 @@
+While using Owlbear Rodeo you can share your computers audio to other party memebers.
+
+To accomplish this Owlbear Rodeo uses the audio portion of a browsers screen share support. This means that sharing audio relies on a browser that supports this functionality (currently this is Google Chrome and the new Microsoft Edge). What kind of audio you can share depends on the operating system you are using. Currently Google Chrome on Windows allows you to share the audio of any tab or an entire screen while on MacOS you can only share the audio of a tab. The limited support is why this feature is marked as experimental.
+
+`Note: Even though sharing audio requires a supported browser, receiving audio works on all browsers`
+
+To use audio sharing click the Start Radio Stream button in the bottom left to open the Radio Screen then click Start Radio. The browser will then ask to share your screen, click on the Chrome Tab option and select your tab. Insure to select the Share Audio Checkbox and finally click Share.
+
+![Sharing Audio](sharingAudio)
+
+`Note: Although Owlbear Rodeo uses the screen sharing functionality, only your audio is sent to the other players in the party`
+
+To stop sharing your audio you can either click Stop on the share banner at the top of the screen or open the Radio Screen and click Stop Radio.

src/docs/howTo/sharingMaps.md

@@ -0,0 +1,55 @@
+[embed:](https://www.youtube.com/embed/ztLDznOpmsg)
+
+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.
+
+![Default Maps](defaultMaps)
+
+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.
+
+![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.
+
+`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`
+
+`Note: 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.
+
+![Custom Maps Advanced](customMapsAdvanced)
+
+A brief summary of these settings is listed below.
+
+- Name: The name of the map shown in the Map Select Screen.
+- 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 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 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 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/startingAndJoining.md

@@ -0,0 +1,24 @@
+## Starting a game
+
+To start a game in Owlbear Rodeo head to the [home page](https://owlbear.rodeo) and click the Start Game button.
+
+![Start Game](startGame)
+
+`Tip: When starting a game you can add a password to protect your session from unwanted guests`
+
+Once a game has been started you can invite players by clicking the Add Party Member button in the bottom left of the screen and sharing either the Game ID or the link to the game.
+
+![Add Party Member](addPartyMember)
+
+## Joining a game
+
+Joining a game can be done in two ways.
+
+1. Visiting the same link as someone already in the game.
+2. Clicking the Join Game button on the [home page](https://owlbear.rodeo) and entering the ID of the game.
+
+## Creating a Nickname
+
+Whether you're starting your first game or joining a game for the first time you will most likely want to set a nickname. To do so once in a game select the Change Nickname button on the bottom left of the screen.
+
+![Change Nickname](changeNickname)

src/docs/howTo/usingDice.md

@@ -0,0 +1,34 @@
+[embed:](https://www.youtube.com/embed/Er_grVmqpk0)
+
+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.
+
+![Open Dice Tray](openDiceTray)
+
+## 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.
+
+![Dice Rolling](diceRolling)
+
+## 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.
+To change your dice style click Select Dice Style button in the top left of the dice tray.
+
+![Dice Styles](diceStyles)
+
+## 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.
+
+![Dice Tray Size](diceTraySize)

src/docs/howTo/usingDrawing.md

@@ -0,0 +1,22 @@
+[embed:](https://www.youtube.com/embed/2e07DtB-Xrc)
+
+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         |
+| --------- | --------------------------------------------------- | ---------------- |
+| 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

@@ -0,0 +1,21 @@
+[embed:](https://www.youtube.com/embed/AMLmyaXMyYA)
+
+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.
+
+![Using Fog](usingFog)
+
+`Note: When using the Fog Tool the fog will be transparent, this is to make it easier to align your fog with the map below. When the Fog Tool is no longer in use the fog will be opaque. This extends to other party members meaning if others are denied fog editing permissions they can not see under the fog until you reveal what's underneath.`
+
+A summary of the Fog Tool options are listed below.
+
+| Option        | Description                                                          | Shortcut                                       |
+| ------------- | -------------------------------------------------------------------- | ---------------------------------------------- |
+| 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 remove 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

@@ -0,0 +1,11 @@
+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.
+
+![Using Measure](usingMeasure)
+
+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

@@ -0,0 +1,64 @@
+[embed:](https://www.youtube.com/embed/j-9X9CF7_UY)
+
+Once you have a map shared between a party all players can drag tokens from the Token List on the right hand side of the screen. Tokens can then be used to represent players, monsters or any other object that needs to be moved around the map.
+
+## Default Tokens
+
+Owlbear Rodeo comes with a variety of default tokens that represent various player classes and monsters in a fantasy setting.
+
+![Default Tokens](defaultTokens)
+
+Currently there are default tokens representing these types: Barbarian, Bard, Cleric, Druid, Fighter, Monk, Paladin, Ranger, Rouge, Sorcerer, Warlock, Wizard, Artificer, Blood Hunder, Aberration, Beast, Celestial, Construct, Dragon, Elemental, Fey, Fiend, Giant, Goblinoid, Humanoid, Monstrosity, Ooze, Plant, Shapechanger, Titan and Undead.
+
+## Working With Tokens
+
+Once a token has been placed on a map there are a few settings available for them. To access these settings click a token on the map.
+
+![Working With Tokens](workingWithTokens)
+
+An overview of each setting is listed below:
+
+- Label: allows you to write text that is then displayed at the bottom of the token.
+- Status: allows you to overlay a coloured ring on top of the token, these can be useful for showing status effects.
+- Size: controls the size of the token each notch represents how many grid cells the token takes up in the horizontal direction.
+- Rotation: the direction the token faces, restrained to 45 degree angles.
+
+To delete a token drag in into the delete button that appears when dragging.
+
+![Deleting Tokens](deletingTokens)
+
+## Custom Tokens
+
+When you need more then the default tokens Owlbear Rodeo allows you to upload a custom token. Custom tokens are similar to custom maps and can be uploaded in a similar way.
+
+![Custom Tokens](customTokens)
+
+To upload a custom token select the Edit Tokens Button at the bottom of the Token List. This will open the Edit Token Screen which allows you to upload and edit tokens.
+
+To upload a new token either click the Add Token Button or drag an image into the Edit Token Screen.
+
+Once a token has been uploaded you can adjust the default size that is used when adding the token to the map by adjusting the Default Size Input.
+
+`Note: The size input for a non-square image represents the number of grid cells a token takes up on the horizontal axis. The number of cells in the vertical axis is determined by the aspect ratio of the uploaded image.`
+
+`Tip: Owlbear Rodeo has full transparancy support for tokens. This means that players can only interact with visible parts of a token so feel free to upload creatures that might have large extended areas like wings.`
+
+## Custom Tokens (Advanced)
+
+When uploading a custom token there are a couple of more advanced options that may come in handy.
+
+To get access to these settings select the desired token in the Edit Token Screen and click the Show More Button under the Deafult Size Input.
+
+![Custom Tokens Advanced](customTokensAdvanced)
+
+A brief summary of these settings is listed below.
+
+- Name: The name of the custom token.
+- Vehicle / Mount: When enabled all other tokens will be displayed on top of this token and when this token is moved any token on top of it will be moved as well.
+- Hide in Sidebar: When enabled the token will not show up in the Token List on the right side of the screen.
+
+## Removing a Custom Token
+
+To remove a custom token open the Token Edit Screen, select the desired token and click the Remove Token Button on the token tile.
+
+`Warning: This operation cannot be undone`

src/docs/releaseNotes/v1.1.0.md

@@ -1,4 +1,4 @@
-# v1.1.0
+[embed:](https://www.youtube.com/embed/aOTvQOrpNo4)
 
 ## Major Changes
 
@@ -21,3 +21,7 @@ To access options for the brush with the brush tool selected click it once more
 - With the added colours for map drawing the token status rings have more colour options
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/g5d00w/beta_v110_release_drawing_and_fog_of_war/)
+
+---
+
+Apr 22 2020

src/docs/releaseNotes/v1.2.0.md

@@ -1,4 +1,4 @@
-# v1.2.0
+[embed:](https://www.youtube.com/embed/IhSS24d4zlM)
 
 ## Major Changes
 
@@ -36,3 +36,7 @@ The third tool is a new shape tool, hopefully this should be more precise then t
 - Fixed a bug that would prevent maps from being sent to others, hopefully this should fix blank screen issues for some. I'm still trying to track these issues down but this should help some cases.
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/gavu2g/beta_v120_release_saved_maps_and_reworked_drawing/)
+
+---
+
+May 01 2020

src/docs/releaseNotes/v1.2.1.md

@@ -1,5 +1,3 @@
-# v1.2.1
-
 ## Minor Changes
 
 - Changed the way maps are stored and sent to other players which should fix a few of the issues with maps not sending properly.
@@ -8,3 +6,7 @@
 - Added a new release notes page on the site which shows all the release notes in one place.
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/ggyiz8/beta_v121_release_connection_issues_and_map/)
+
+---
+
+May 11 2020

src/docs/releaseNotes/v1.3.0.md

@@ -1,4 +1,4 @@
-# v1.3.0
+[embed:](https://www.youtube.com/embed/Y7sEgoopz4E)
 
 ## Major Changes
 
@@ -39,3 +39,7 @@ Map, tokens, drawing and fog have all been unified into one system which leads t
 - A new visual display and method for deleting tokens from the map.
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/gshfrz/beta_v130_release_dice_rolling_and_custom_tokens/)
+
+---
+
+May 29 2020

src/docs/releaseNotes/v1.3.1.md

@@ -1,5 +1,3 @@
-# v1.3.1
-
 ## Minor Changes
 
 - Fixed a bug where tokens that were placed on the map then removed from the token select screen could no longer be deleted from the map.
@@ -9,3 +7,7 @@
 - Added the ability to erase multiple shapes at a time by dragging over a shape with the eraser tool. This works for fog erase and toggle as well.
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/gtvwh9/beta_v131_release_bug_fixes_and_map_grids/)
+
+---
+
+Jun 01 2020

src/docs/releaseNotes/v1.3.2.md

@@ -1,7 +1,9 @@
-# v1.3.2
-
 ## Minor Changes
 
 - Fixed a bug when loading a large amount of stored maps.
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/gy3st9/beta_v132_release_bug_fix/)
+
+---
+
+Jun 07 2020

src/docs/releaseNotes/v1.3.3.md

@@ -1,5 +1,3 @@
-# v1.3.3
-
 ## Minor Changes
 
 - Fixed a bug that would cause the game to crash when a player would lose internet connection.
@@ -7,3 +5,7 @@
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/ha301n/beta_v133_release_bug_fix_and_auto_reconnect/)
 [Twitter](https://twitter.com/OwlbearRodeo/status/1272868031014727680?s=20)
+
+---
+
+Jun 17 2020

src/docs/releaseNotes/v1.4.0.md

@@ -1,4 +1,4 @@
-# v1.4.0
+[embed:](https://www.youtube.com/embed/vtNpj-449B8)
 
 ## Major Changes
 
@@ -71,3 +71,7 @@ When interacting with the map we now support keyboard shortcuts for quickly swit
 
 [Reddit](https://www.reddit.com/r/OwlbearRodeo/comments/hhbezp/beta_v140_release_new_fog_tools_and_shortcuts/)
 [Twitter](https://twitter.com/OwlbearRodeo/status/1277169108958629888?s=20)
+
+---
+
+Jun 29 2020

src/docs/releaseNotes/v1.4.1.md

@@ -0,0 +1,15 @@
+## Minor Changes
+
+- Added all new [How To](https://owlbear.rodeo/howTo) page with detailed tutorials on how to use Owlbear Rodeo.
+- Along with text tutorials there are also video tutorials on our new [YouTube Channel](https://www.youtube.com/channel/UCePe1wJC53_7fbBbSECG7YQ)
+- Added a grid type option for custom maps, this will be used in a future release to set the grid to hex.
+- Release notes can now be minimized and their video content viewed on the site.
+- The map tools are now shown by default, this should hopefully lead to greater discoverability for new users.
+- Fixed a bug with map setting changes being carried to a new map when the old map is deleted.
+
+[Reddit]()
+[Twitter]()
+
+---
+
+Jul 12 2020

src/icons/SocialRedditIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialRedditIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm5 4.75c-.491 0-.912.286-1.116.698l-2.908-.619a.312.312 0 00-.37.24l-.891 4.186c-1.863.052-3.537.61-4.749 1.483a1.75 1.75 0 10-1.926 2.858c-.027.174-.042.35-.042.529 0 2.692 3.134 4.875 7 4.875s7-2.183 7-4.875c0-.178-.014-.353-.041-.526a1.75 1.75 0 10-1.923-2.858c-1.196-.863-2.844-1.42-4.68-1.485l.797-3.75 2.605.553A1.247 1.247 0 0018.25 6c0-.69-.56-1.25-1.25-1.25zM9.492 16.095c.538.538 1.688.728 2.51.728.821 0 1.972-.19 2.51-.728a.324.324 0 01.458.458c-.853.852-2.488.918-2.969.918-.48 0-2.115-.066-2.967-.918a.324.324 0 01.458-.458zM14.75 12c.69 0 1.25.561 1.25 1.25 0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25c0-.689.56-1.25 1.25-1.25zm-5.5 0c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25c-.689 0-1.25-.56-1.25-1.25S8.561 12 9.25 12z" />
+    </svg>
+  );
+}
+
+export default SocialRedditIcon;

src/icons/SocialTwitterIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialTwitterIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M24 12c0 6.63-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0s12 5.37 12 12zM9.804 18.33c5.322 0 8.232-4.41 8.232-8.232 0-.126 0-.252-.006-.372a5.927 5.927 0 001.446-1.5 5.872 5.872 0 01-1.662.456c.6-.36 1.056-.924 1.272-1.602-.558.33-1.176.57-1.836.702a2.894 2.894 0 00-4.926 2.64A8.208 8.208 0 016.36 7.398c-.246.426-.39.924-.39 1.452 0 1.002.51 1.89 1.29 2.406a2.842 2.842 0 01-1.308-.36v.036c0 1.404.996 2.568 2.322 2.838a2.884 2.884 0 01-1.308.048 2.889 2.889 0 002.7 2.01 5.816 5.816 0 01-4.284 1.194 8.06 8.06 0 004.422 1.308" />
+    </svg>
+  );
+}
+
+export default SocialTwitterIcon;

src/icons/SocialYouTubeIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialYouTubeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M12 0c6.63 0 12 5.37 12 12s-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0zm.28 6.001h-.56c-1.073.006-4.902.047-5.971.336A2.01 2.01 0 004.334 7.76c-.297 1.117-.33 3.31-.334 3.785v.183c.004.474.037 2.668.334 3.784a2.01 2.01 0 001.415 1.424c1.105.298 5.156.332 6.068.336h.366c.912-.004 4.963-.038 6.068-.336a2.01 2.01 0 001.415-1.424C20 14.257 20 11.636 20 11.636s0-2.62-.334-3.876a2.01 2.01 0 00-1.415-1.423c-1.07-.289-4.898-.33-5.97-.336zm-1.916 3.256l4.181 2.38-4.181 2.378V9.257z" />
+    </svg>
+  );
+}
+
+export default SocialYouTubeIcon;

src/modals/SelectMapModal.js

@@ -142,6 +142,8 @@ function SelectMapModal({
   async function handleMapRemove(id) {
     await removeMap(id);
     setSelectedMapId(null);
+    setMapSettingChanges({});
+    setMapStateSettingChanges({});
     // Removed the map from the map screen if needed
     if (currentMap && currentMap.id === selectedMapId) {
       onMapChange(null, null);

src/modals/SelectTokensModal.js

@@ -96,6 +96,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
   async function handleTokenRemove(id) {
     await removeToken(id);
     setSelectedTokenId(null);
+    setTokenSettingChanges({});
   }
 
   /**

src/routes/FAQ.js

@@ -5,8 +5,9 @@ import raw from "raw.macro";
 import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
 
+import assets from "../docs/assets";
+
 const connection = raw("../docs/faq/connection.md");
-const radio = raw("../docs/faq/radio.md");
 const saving = raw("../docs/faq/saving.md");
 
 function FAQ() {
@@ -31,13 +32,10 @@ function FAQ() {
           Frequently Asked Questions
         </Text>
         <div id="connection">
-          <Markdown source={connection} />
-        </div>
-        <div id="radio">
-          <Markdown source={radio} />
+          <Markdown source={connection} assets={assets} />
         </div>
         <div id="saving">
-          <Markdown source={saving} />
+          <Markdown source={saving} assets={assets} />
         </div>
       </Flex>
       <Footer />

src/routes/Home.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from "react";
-import { Flex, Button, Image, Text } from "theme-ui";
+import { Flex, Button, Image, Text, IconButton, Link } from "theme-ui";
 
 import Footer from "../components/Footer";
 
@@ -9,6 +9,10 @@ import DonateModal from "../modals/DonationModal";
 
 import AuthContext from "../contexts/AuthContext";
 
+import RedditIcon from "../icons/SocialRedditIcon";
+import TwitterIcon from "../icons/SocialTwitterIcon";
+import YouTubeIcon from "../icons/SocialYouTubeIcon";
+
 import owlington from "../images/Owlington.png";
 
 function Home() {
@@ -51,7 +55,7 @@ function Home() {
           Join Game
         </Button>
         <Text variant="caption" as="p" sx={{ textAlign: "center" }}>
-          Beta v1.4.0
+          Beta v1.4.1
         </Text>
         <Button
           m={2}
@@ -60,6 +64,23 @@ function Home() {
         >
           Support Us
         </Button>
+        <Flex sx={{ justifyContent: "center" }}>
+          <Link href="https://www.reddit.com/r/OwlbearRodeo/">
+            <IconButton title="Reddit" aria-label="Reddit">
+              <RedditIcon />
+            </IconButton>
+          </Link>
+          <Link href="https://twitter.com/OwlbearRodeo">
+            <IconButton title="Twitter" aria-label="Twitter">
+              <TwitterIcon />
+            </IconButton>
+          </Link>
+          <Link href="https://www.youtube.com/channel/UCePe1wJC53_7fbBbSECG7YQ">
+            <IconButton title="YouTube" aria-label="YouTube">
+              <YouTubeIcon />
+            </IconButton>
+          </Link>
+        </Flex>
         <JoinModal
           isOpen={isJoinModalOpen}
           onRequestClose={() => setIsJoinModalOpen(false)}

src/routes/HowTo.js

@@ -0,0 +1,118 @@
+import React from "react";
+import { Flex, Text } from "theme-ui";
+import raw from "raw.macro";
+import { useLocation } from "react-router-dom";
+
+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");
+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 HowTo() {
+  const location = useLocation();
+  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">
+          <Markdown source={overview} assets={assets} />
+        </div>
+        <div id="startingAndJoining">
+          <Accordion
+            heading="Starting and Joining a Game"
+            defaultOpen={location.hash === "#startingAndJoining"}
+          >
+            <Markdown source={startingAndJoining} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="sharingMaps">
+          <Accordion
+            heading="Sharing a Map"
+            defaultOpen={location.hash === "#sharingMaps"}
+          >
+            <Markdown source={sharingMaps} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="usingTokens">
+          <Accordion
+            heading="Using Tokens"
+            defaultOpen={location.hash === "#usingTokens"}
+          >
+            <Markdown source={usingTokens} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="usingDrawing">
+          <Accordion
+            heading="Using the Drawing Tool"
+            defaultOpen={location.hash === "#usingDrawing"}
+          >
+            <Markdown source={usingDrawing} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="usingDice">
+          <Accordion
+            heading="Using Dice"
+            defaultOpen={location.hash === "#usingDice"}
+          >
+            <Markdown source={usingDice} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="usingFog">
+          <Accordion
+            heading="Using the Fog Tool"
+            defaultOpen={location.hash === "#usingFog"}
+          >
+            <Markdown source={usingFog} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="usingMeasure">
+          <Accordion
+            heading="Using the Measure Tool"
+            defaultOpen={location.hash === "#usingMeasure"}
+          >
+            <Markdown source={usingMeasure} assets={assets} />
+          </Accordion>
+        </div>
+        <div id="sharingAudio">
+          <Accordion
+            heading="Sharing Audio (Experimental)"
+            defaultOpen={location.hash === "#sharingAudio"}
+          >
+            <Markdown source={sharingAudio} assets={assets} />
+          </Accordion>
+        </div>
+      </Flex>
+      <Footer />
+    </Flex>
+  );
+}
+
+export default HowTo;

src/routes/ReleaseNotes.js

@@ -4,6 +4,7 @@ import raw from "raw.macro";
 
 import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
+import Accordion from "../components/Accordion";
 
 const v110 = raw("../docs/releaseNotes/v1.1.0.md");
 const v120 = raw("../docs/releaseNotes/v1.2.0.md");
@@ -13,6 +14,7 @@ const v131 = raw("../docs/releaseNotes/v1.3.1.md");
 const v132 = raw("../docs/releaseNotes/v1.3.2.md");
 const v133 = raw("../docs/releaseNotes/v1.3.3.md");
 const v140 = raw("../docs/releaseNotes/v1.4.0.md");
+const v141 = raw("../docs/releaseNotes/v1.4.1.md");
 
 function ReleaseNotes() {
   return (
@@ -27,37 +29,59 @@ function ReleaseNotes() {
       <Flex
         sx={{
           flexDirection: "column",
-          maxWidth: "500px",
+          maxWidth: "564px",
           flexGrow: 1,
+          width: "100%",
         }}
-        m={4}
+        p={4}
       >
         <Text mb={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
           Release Notes
         </Text>
+        <div id="v141">
+          <Accordion heading="v1.4.1" defaultOpen>
+            <Markdown source={v141} />
+          </Accordion>
+        </div>
         <div id="v140">
-          <Markdown source={v140} />
+          <Accordion heading="v1.4.0" defaultOpen>
+            <Markdown source={v140} />
+          </Accordion>
         </div>
         <div id="v133">
-          <Markdown source={v133} />
+          <Accordion heading="v1.3.3">
+            <Markdown source={v133} />
+          </Accordion>
         </div>
         <div id="v132">
-          <Markdown source={v132} />
+          <Accordion heading="v1.3.2">
+            <Markdown source={v132} />
+          </Accordion>
         </div>
         <div id="v131">
-          <Markdown source={v131} />
+          <Accordion heading="v1.3.1">
+            <Markdown source={v131} />
+          </Accordion>
         </div>
         <div id="v130">
-          <Markdown source={v130} />
+          <Accordion heading="v1.3.0">
+            <Markdown source={v130} />
+          </Accordion>
         </div>
         <div id="v121">
-          <Markdown source={v121} />
+          <Accordion heading="v1.2.1">
+            <Markdown source={v121} />
+          </Accordion>
         </div>
         <div id="v120">
-          <Markdown source={v120} />
+          <Accordion heading="v1.2.0">
+            <Markdown source={v120} />
+          </Accordion>
         </div>
         <div id="v110">
-          <Markdown source={v110} />
+          <Accordion heading="v1.1.0">
+            <Markdown source={v110} />
+          </Accordion>
         </div>
       </Flex>
       <Footer />

src/theme.js

@@ -9,6 +9,7 @@ export default {
     muted: "hsla(230, 20%, 0%, 20%)",
     gray: "hsl(0, 0%, 70%)",
     overlay: "hsla(230, 25%, 18%, 0.8)",
+    border: "hsla(210, 50%, 96%, 0.5)",
     modes: {
       light: {
         text: "hsl(10, 20%, 20%)",
@@ -18,6 +19,7 @@ export default {
         highlight: "hsl(260, 20%, 40%)",
         muted: "hsla(230, 20%, 60%, 20%)",
         overlay: "hsla(230, 100%, 97%, 0.8)",
+        border: "hsla(10, 20%, 20%, 0.5)",
       },
     },
   },
@@ -133,28 +135,6 @@ export default {
       color: "secondary",
       bg: "muted",
     },
-    table: {
-      width: "100%",
-      my: 4,
-      borderCollapse: "separate",
-      borderSpacing: 0,
-      "th,td": {
-        textAlign: "left",
-        py: "4px",
-        pr: "4px",
-        pl: 0,
-        borderColor: "muted",
-        borderBottomStyle: "solid",
-      },
-    },
-    th: {
-      verticalAlign: "bottom",
-      borderBottomWidth: "2px",
-    },
-    td: {
-      verticalAlign: "top",
-      borderBottomWidth: "1px",
-    },
     hr: {
       border: 0,
       borderBottom: "1px solid",
@@ -284,4 +264,14 @@ export default {
       },
     },
   },
+  messages: {
+    warning: {
+      backgroundColor: "#d65c64",
+      borderLeftColor: "#ff939b",
+    },
+    note: {
+      backgroundColor: "#ca871e",
+      borderLeftColor: "#ebd2ac",
+    },
+  },
 };