From 5b04bdac51fbdb7d6afc037ad8b405f68514ced9 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 30 Jun 2020 19:19:33 +1000 Subject: [PATCH] Added first pass for most how to's --- src/App.js | 4 ++ src/components/Footer.js | 3 + src/components/map/MapControls.js | 2 +- src/docs/howTo/sharingAudio.md | 2 +- src/docs/howTo/sharingMaps.md | 40 +++++++++++- src/docs/howTo/shortcuts.md | 1 - src/docs/howTo/startingAndJoining.md | 2 - src/docs/howTo/usingDice.md | 19 +++++- src/docs/howTo/usingDrawing.md | 19 +++++- src/docs/howTo/usingFog.md | 18 ++++-- src/docs/howTo/usingMeasure.md | 10 ++- src/docs/howTo/usingTokens.md | 2 - src/routes/HowTo.js | 92 ++++++++++++++++++++++++++++ 13 files changed, 197 insertions(+), 17 deletions(-) delete mode 100644 src/docs/howTo/shortcuts.md create mode 100644 src/routes/HowTo.js diff --git a/src/App.js b/src/App.js index 3cac500..80455d7 100644 --- a/src/App.js +++ b/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() { + + + diff --git a/src/components/Footer.js b/src/components/Footer.js index 03e54d8..dc7b32b 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -27,6 +27,9 @@ function Footer() { Release Notes + + How To + ); } diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js index 983bd0e..55450e9 100644 --- a/src/components/map/MapControls.js +++ b/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: { diff --git a/src/docs/howTo/sharingAudio.md b/src/docs/howTo/sharingAudio.md index e9c0737..1333ed7 100644 --- a/src/docs/howTo/sharingAudio.md +++ b/src/docs/howTo/sharingAudio.md @@ -1 +1 @@ -# Sharing Audio (Experimental) +TODO diff --git a/src/docs/howTo/sharingMaps.md b/src/docs/howTo/sharingMaps.md index 5cc4d4a..a220cd2 100644 --- a/src/docs/howTo/sharingMaps.md +++ b/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` diff --git a/src/docs/howTo/shortcuts.md b/src/docs/howTo/shortcuts.md deleted file mode 100644 index c7978b2..0000000 --- a/src/docs/howTo/shortcuts.md +++ /dev/null @@ -1 +0,0 @@ -# Keyboard Shortcuts diff --git a/src/docs/howTo/startingAndJoining.md b/src/docs/howTo/startingAndJoining.md index 5f2a163..677e418 100644 --- a/src/docs/howTo/startingAndJoining.md +++ b/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. diff --git a/src/docs/howTo/usingDice.md b/src/docs/howTo/usingDice.md index 9d0b138..081cd59 100644 --- a/src/docs/howTo/usingDice.md +++ b/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. diff --git a/src/docs/howTo/usingDrawing.md b/src/docs/howTo/usingDrawing.md index 938ea1f..1c5f6cb 100644 --- a/src/docs/howTo/usingDrawing.md +++ b/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 | diff --git a/src/docs/howTo/usingFog.md b/src/docs/howTo/usingFog.md index 19c56f7..0ea8d64 100644 --- a/src/docs/howTo/usingFog.md +++ b/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 - -## Removing and Toggling Fog +| 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 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 | diff --git a/src/docs/howTo/usingMeasure.md b/src/docs/howTo/usingMeasure.md index 49ba0d9..d58bb03 100644 --- a/src/docs/howTo/usingMeasure.md +++ b/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 | diff --git a/src/docs/howTo/usingTokens.md b/src/docs/howTo/usingTokens.md index 8cbf7e2..c114b8c 100644 --- a/src/docs/howTo/usingTokens.md +++ b/src/docs/howTo/usingTokens.md @@ -1,5 +1,3 @@ -# Using Tokens - ## Default Tokens ## Custom Tokens diff --git a/src/routes/HowTo.js b/src/routes/HowTo.js new file mode 100644 index 0000000..73177ce --- /dev/null +++ b/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 ( + + + + How To + +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ +