diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 0c38c40..885cbfd 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -50,7 +50,7 @@ function Map({
}) {
const { tokensById } = useTokenData();
- const [selectedToolId, setSelectedToolId] = useState("pan");
+ const [selectedToolId, setSelectedToolId] = useState("move");
const { settings, setSettings } = useSettings();
function handleToolSettingChange(tool, change) {
@@ -113,7 +113,7 @@ function Map({
disabledControls.push("drawing");
}
if (!map) {
- disabledControls.push("pan");
+ disabledControls.push("move");
disabledControls.push("measure");
disabledControls.push("pointer");
}
@@ -301,7 +301,7 @@ function Map({
onNoteMenuOpen={handleNoteMenuOpen}
draggable={
allowNoteEditing &&
- (selectedToolId === "note" || selectedToolId === "pan")
+ (selectedToolId === "note" || selectedToolId === "move")
}
onNoteDragStart={(e, noteId) =>
setNoteDraggingOptions({ dragging: true, noteId, noteGroup: e.target })
diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index 2d2da33..7ecca0e 100644
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@@ -10,7 +10,7 @@ import FogToolSettings from "./controls/FogToolSettings";
import DrawingToolSettings from "./controls/DrawingToolSettings";
import PointerToolSettings from "./controls/PointerToolSettings";
-import PanToolIcon from "../../icons/PanToolIcon";
+import MoveToolIcon from "../../icons/MoveToolIcon";
import FogToolIcon from "../../icons/FogToolIcon";
import BrushToolIcon from "../../icons/BrushToolIcon";
import MeasureToolIcon from "../../icons/MeasureToolIcon";
@@ -39,10 +39,10 @@ function MapContols({
const [fullScreen, setFullScreen] = useSetting("map.fullScreen");
const toolsById = {
- pan: {
- id: "pan",
- icon: ,
- title: "Pan Tool (W)",
+ move: {
+ id: "move",
+ icon: ,
+ title: "Move Tool (W)",
},
fog: {
id: "fog",
@@ -73,7 +73,7 @@ function MapContols({
title: "Note Tool (N)",
},
};
- const tools = ["pan", "fog", "drawing", "measure", "pointer", "note"];
+ const tools = ["move", "fog", "drawing", "measure", "pointer", "note"];
const sections = [
{
diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.js
index 6ff9ef8..57ff6b8 100644
--- a/src/components/map/MapEditor.js
+++ b/src/components/map/MapEditor.js
@@ -63,7 +63,7 @@ function MapEditor({ map, onSettingsChange }) {
stageTranslateRef,
mapLayerRef.current,
getGridMaxZoom(map.grid),
- "pan",
+ "move",
preventMapInteraction
);
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index 03b7ff3..404b52d 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -95,9 +95,9 @@ function MapInteraction({
preventMapInteraction,
{
onPinchStart: () => {
- // Change to pan tool when pinching and zooming
+ // Change to move tool when pinching and zooming
previousSelectedToolRef.current = selectedToolId;
- onSelectedToolChange("pan");
+ onSelectedToolChange("move");
},
onPinchEnd: () => {
onSelectedToolChange(previousSelectedToolRef.current);
@@ -115,24 +115,24 @@ function MapInteraction({
);
function handleKeyDown(event) {
- // Change to pan tool when pressing space
- if (event.key === " " && selectedToolId === "pan") {
- // Stop active state on pan icon from being selected
+ // Change to move tool when pressing space
+ if (event.key === " " && selectedToolId === "move") {
+ // Stop active state on move icon from being selected
event.preventDefault();
}
if (
event.key === " " &&
- selectedToolId !== "pan" &&
- !disabledControls.includes("pan")
+ selectedToolId !== "move" &&
+ !disabledControls.includes("move")
) {
event.preventDefault();
previousSelectedToolRef.current = selectedToolId;
- onSelectedToolChange("pan");
+ onSelectedToolChange("move");
}
// Basic keyboard shortcuts
- if (event.key === "w" && !disabledControls.includes("pan")) {
- onSelectedToolChange("pan");
+ if (event.key === "w" && !disabledControls.includes("move")) {
+ onSelectedToolChange("move");
}
if (event.key === "d" && !disabledControls.includes("drawing")) {
onSelectedToolChange("drawing");
@@ -152,7 +152,7 @@ function MapInteraction({
}
function handleKeyUp(event) {
- if (event.key === " " && selectedToolId === "pan") {
+ if (event.key === " " && selectedToolId === "move") {
onSelectedToolChange(previousSelectedToolRef.current);
}
}
@@ -163,7 +163,7 @@ function MapInteraction({
function getCursorForTool(tool) {
switch (tool) {
- case "pan":
+ case "move":
return "move";
case "fog":
case "drawing":
diff --git a/src/components/map/MapTokens.js b/src/components/map/MapTokens.js
index 33c07a3..3949c30 100644
--- a/src/components/map/MapTokens.js
+++ b/src/components/map/MapTokens.js
@@ -115,7 +115,7 @@ function MapTokens({
})
}
draggable={
- selectedToolId === "pan" &&
+ selectedToolId === "move" &&
!(tokenState.id in disabledTokens) &&
!tokenState.locked
}
diff --git a/src/docs/assets/EditingMapsAdvanced.jpg b/src/docs/assets/EditingMapsAdvanced.jpg
index a888c00..efa71fd 100644
Binary files a/src/docs/assets/EditingMapsAdvanced.jpg and b/src/docs/assets/EditingMapsAdvanced.jpg differ
diff --git a/src/docs/assets/Settings.jpg b/src/docs/assets/Settings.jpg
new file mode 100644
index 0000000..fef4ff7
Binary files /dev/null and b/src/docs/assets/Settings.jpg differ
diff --git a/src/docs/assets/UsingFog.mp4 b/src/docs/assets/UsingFog.mp4
index c1f6fc3..1df5592 100644
Binary files a/src/docs/assets/UsingFog.mp4 and b/src/docs/assets/UsingFog.mp4 differ
diff --git a/src/docs/assets/UsingMeasure.mp4 b/src/docs/assets/UsingMeasure.mp4
index 281921a..ebc1e32 100644
Binary files a/src/docs/assets/UsingMeasure.mp4 and b/src/docs/assets/UsingMeasure.mp4 differ
diff --git a/src/docs/assets/UsingNotes.mp4 b/src/docs/assets/UsingNotes.mp4
index 8e6d159..6786cca 100644
Binary files a/src/docs/assets/UsingNotes.mp4 and b/src/docs/assets/UsingNotes.mp4 differ
diff --git a/src/docs/assets/UsingPointer.mp4 b/src/docs/assets/UsingPointer.mp4
index d0b76ea..7ad4557 100644
Binary files a/src/docs/assets/UsingPointer.mp4 and b/src/docs/assets/UsingPointer.mp4 differ
diff --git a/src/docs/assets/index.js b/src/docs/assets/index.js
index 51c7a1d..9a98574 100644
--- a/src/docs/assets/index.js
+++ b/src/docs/assets/index.js
@@ -26,6 +26,7 @@ import filteringMaps from "./FilteringMaps.mp4";
import groupAndRemovingTokens from "./GroupAndRemovingTokens.mp4";
import filteringTokens from "./FilteringTokens.mp4";
import usingNotes from "./UsingNotes.mp4";
+import settings from "./Settings.jpg";
const assets = {
defaultMaps,
@@ -56,6 +57,7 @@ const assets = {
groupAndRemovingTokens,
filteringTokens,
usingNotes,
+ settings,
};
export default assets;
diff --git a/src/docs/howTo/gettingStarted.md b/src/docs/howTo/gettingStarted.md
index bd26118..79e0503 100644
--- a/src/docs/howTo/gettingStarted.md
+++ b/src/docs/howTo/gettingStarted.md
@@ -1,8 +1,6 @@
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.
diff --git a/src/docs/howTo/settings.md b/src/docs/howTo/settings.md
new file mode 100644
index 0000000..e32094b
--- /dev/null
+++ b/src/docs/howTo/settings.md
@@ -0,0 +1,14 @@
+The Settings screen allows you to control general app settings.
+To Access the settings screen click the Settings button in the bottom left of a game.
+
+
+
+An overview of each setting is listed below:
+
+- Light theme: Enables/disables the light theme.
+- Token label size: Changes the max label size for tokens.
+- Grid snapping sensitivity: Changes how sensitive the grid snapping is. 0 = no grid snapping, 1 = full grid snapping.
+- Clear cache: Clears the apps settings and any maps that other users have sent you. Does not remove any data you have added.
+- Erase all content and reset: Removes all site settings and content. This will remove all maps and tokens you have added.
+- Import/Export Data: Opens the import/export screen for importing/exporting maps and tokens.
+- Storage Used: On available browsers this will show you how much storage you have used and how much you have left. The actual amount available may differ to this value as it depends on how much free storage the computer has.
diff --git a/src/docs/howTo/sharingMaps.md b/src/docs/howTo/sharingMaps.md
index 874693f..a693886 100644
--- a/src/docs/howTo/sharingMaps.md
+++ b/src/docs/howTo/sharingMaps.md
@@ -32,8 +32,6 @@ To get access to these settings you can click the Edit Map button while a map is
The topmost view of the Edit Map Screen is a grid editor. This allows you to visually set up any inset your map's grid may have.
-`Tip: When editing a grid you can use the arrow keys on your keyboard to nudge the grid in the vertical or horizontal direction.`
-
Next there are the Column and Row properties. Columns represent how many grid cells your map has in the horizontal direction while Rows represents the amount of cells in the vertical direction.
Next you can set the name of your map shown in the Map Select Screen.
@@ -49,14 +47,21 @@ To get access to these settings, click the Show More button under the Name input
A brief summary of these settings is listed below.
-- 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.
+- Grid Type: Change the type of grid to use for the map. Either Square, Hex Vertical and Hex Horizontal.
- Draw Grid: When enabled Owlbear Rodeo will draw a grid on top of your map, this is useful if a custom map you have uploaded doesn't include a grid.
- Snap to Grid: When enabled tokens, drawing, fog and measurements will attempt to snap to the grid.
+- Grid Measurement: How measurements should be calculated.
+ - Chessboard (D&D 5e): Distance on a chessboard.
+ - Alternating Diagonal (D&D 3.5e): Distance on a chessboard but diagonals alternate between 1 and 2 squares.
+ - Euclidean: Distance as the crow flies.
+ - Manhattan: Distance while only moving horizontal and vertical.
+- Grid Scale: How large is each grid cell.
- Quality: When uploading a map Owlbear Rodeo will automatically generate various quality options, selecting a lower quality may help speed up map sending in resource constrained environments.
- 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).
+ - Notes: Controls whether others can add or move notes (default enabled).
## Reseting, Removing and Grouping Maps
diff --git a/src/docs/howTo/shortcuts.md b/src/docs/howTo/shortcuts.md
new file mode 100644
index 0000000..2c09145
--- /dev/null
+++ b/src/docs/howTo/shortcuts.md
@@ -0,0 +1,63 @@
+## General
+
+| Shortcut | Description |
+| ---------------- | ------------ |
+| W | Move Tool |
+| Space Bar (Hold) | Move Tool |
+| F | Fog Tool |
+| D | Drawing Tool |
+| M | Measure Tool |
+| Q | Pointer Tool |
+| N | Note Tool |
+
+## Fog Tool
+
+| Shortcut | Description |
+| ---------------- | ---------------------- |
+| P | Fog Polygon |
+| Enter | Accept Fog Polygon |
+| Escape | Cancel Fog Polygon |
+| Backspace | Undo Fog Polygon Point |
+| R | Fog Rectangle |
+| B | Fog Brush |
+| T | Toggle Fog |
+| E | Erase Fog |
+| C | Cut Fog |
+| L | Multilayer Toggle |
+| F | Fog Preview Toggle |
+| Ctrl + Z | Undo |
+| Ctrl + Shift + Z | Redo |
+
+## Drawing Tool
+
+| Shortcut | Description |
+| ---------------- | --------------- |
+| B | Brush |
+| P | Paint |
+| L | Line |
+| R | Rectangle |
+| C | Circle |
+| T | Triangle |
+| E | Erase |
+| O | Blending Toggle |
+| Ctrl + Z | Undo |
+| Ctrl + Shift + Z | Redo |
+
+## Select Map/Token Screen
+
+| Shortcut | Description |
+| -------- | --------------- |
+| Ctrl | Select Multiple |
+| Shift | Select Range |
+| Delete | Delete Selected |
+| Escape | Close Screen |
+
+## Edit Map Grid
+
+| Shortcut | Description |
+| ------------ | -------------------- |
+| Left | Move Grid Left |
+| Up | Move Grid Up |
+| Right | Move Grid Right |
+| Down | Move Grid Down |
+| Shift (Hold) | Increase Move Amount |
diff --git a/src/docs/howTo/usingDrawing.md b/src/docs/howTo/usingDrawing.md
index a58128e..6e25daf 100644
--- a/src/docs/howTo/usingDrawing.md
+++ b/src/docs/howTo/usingDrawing.md
@@ -6,17 +6,17 @@ The Drawing Tool allows you to draw on top of a map. To access the Drawing Tool
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 |
+| Option | Description |
+| --------- | --------------------------------------------------- |
+| Color | Change the color of the drawings |
+| Brush | Draw free form lines |
+| Paint | Draw free form shapes |
+| Line | Draw a single straight line |
+| Rectangle | Draw a rectangle |
+| Circle | Draw a circle |
+| Triangle | Draw a triangle |
+| Erase | Click and drag to select drawings, release to erase |
+| Erase All | Erases all drawings on the map |
+| Blending | Enables/Disables alpha blending |
+| Undo | Undo drawing or erasing |
+| Redo | Redo drawing or erasing |
diff --git a/src/docs/howTo/usingFog.md b/src/docs/howTo/usingFog.md
index 544fc36..70915b5 100644
--- a/src/docs/howTo/usingFog.md
+++ b/src/docs/howTo/usingFog.md
@@ -8,15 +8,15 @@ The Fog Tool allows you to add hidden areas to control what the other party memb
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 Rectangle | Drag to add a rectangle fog shape | R |
-| Fog Brush | Drag to add a free form fog shape | B |
-| Toggle Fog | Click a fog shape to hide/show it | T |
-| Erase Fog | Click a fog shape to remove it | E |
-| Fog Cutting | Enables/Disables fog cutting | C, Alt (Toggle) |
-| Edge Snapping | Enables/Disables edge snapping | S |
-| Fog Preview | Enables/Disables a preview of the final fog shapes | F |
-| Undo | Undo a fog action | Ctrl + Z |
-| Redo | Redo a fog action | Ctrl + Shift + Z |
+| Option | Description |
+| ------------- | -------------------------------------------------- |
+| Fog Polygon | Click to add points to a fog shape |
+| Fog Rectangle | Drag to add a rectangle fog shape |
+| Fog Brush | Drag to add a free form fog shape |
+| Toggle Fog | Click a fog shape to hide/show it |
+| Erase Fog | Click a fog shape to remove it |
+| Fog Cutting | Enables/Disables fog cutting |
+| Layer Toggle | Changes between single layer and multilayer fog |
+| Fog Preview | Enables/Disables a preview of the final fog shapes |
+| Undo | Undo a fog action |
+| Redo | Redo a fog action |
diff --git a/src/docs/howTo/usingMeasure.md b/src/docs/howTo/usingMeasure.md
index 0240663..74de911 100644
--- a/src/docs/howTo/usingMeasure.md
+++ b/src/docs/howTo/usingMeasure.md
@@ -1,13 +1,3 @@
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.
-
-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 used in D&D | G |
-| Alternating Diagonal Distance | This is the distance on a grid with diagonals alternating between 1 square and 2 squares | A |
-| 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 |
-| Scale | This allows you to enter a custom scale and unit value to apply | |
diff --git a/src/docs/howTo/usingNotes.md b/src/docs/howTo/usingNotes.md
index 69fa1cd..6fafa3c 100644
--- a/src/docs/howTo/usingNotes.md
+++ b/src/docs/howTo/usingNotes.md
@@ -1,3 +1,18 @@
The notes tool allows you to write and share notes for other players to see.
+## Working With Notes
+
+Once a note has been placed on a map there are a few settings available for them. To access these settings click a note on the map.
+
+
+An overview of each setting is listed below:
+
+- Text: allows you to write text that is then displayed on the note. Using Shift + Enter will allow you to add a new line.
+- Color: allows you to colour either the background of your note or the text colour of your note depending on whether you are in note mode or text mode.
+- Size: controls the size of the note each notch represents how many grid cells the token takes up in the horizontal direction.
+- Hide / Show (GM Only): toggle the visibility of the note.
+- Lock / Unlock (GM Only): when a note is locked it can't be moved until it is unlocked again.
+- Note Mode / Text Mode (GM Only): toggle whether the note will have a background or just text.
+
+To delete a note drag in into the delete button that appears when dragging.
diff --git a/src/docs/howTo/usingPointer.md b/src/docs/howTo/usingPointer.md
index c252dee..2547345 100644
--- a/src/docs/howTo/usingPointer.md
+++ b/src/docs/howTo/usingPointer.md
@@ -1,3 +1,5 @@
The pointer tool allows you to temporarily highlight parts of the map for other members to see.
+To change the pointer colour select the colour option in the tools settings.
+
diff --git a/src/docs/howTo/usingTokens.md b/src/docs/howTo/usingTokens.md
index 8f271eb..a80eefd 100644
--- a/src/docs/howTo/usingTokens.md
+++ b/src/docs/howTo/usingTokens.md
@@ -21,7 +21,7 @@ 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.
+- Rotation: the direction the token faces, restrained to 15 degree increments.
- Hide / Show (GM Only): toggle the visibility of the token, useful for tracking invisible enemies.
- Lock / Unlock (GM Only): when a token is locked it can't be moved until it is unlocked again.
diff --git a/src/hooks/useStageInteraction.js b/src/hooks/useStageInteraction.js
index 2dcfb3c..353ca40 100644
--- a/src/hooks/useStageInteraction.js
+++ b/src/hooks/useStageInteraction.js
@@ -13,7 +13,7 @@ function useStageInteraction(
stageTranslateRef,
layer,
maxZoom = 10,
- tool = "pan",
+ tool = "move",
preventInteraction = false,
gesture = {}
) {
@@ -152,7 +152,7 @@ function useStageInteraction(
const [dx, dy] = delta;
const stageTranslate = stageTranslateRef.current;
- if (tool === "pan") {
+ if (tool === "move") {
const newTranslate = {
x: stageTranslate.x + dx,
y: stageTranslate.y + dy,
diff --git a/src/icons/PanToolIcon.js b/src/icons/MoveToolIcon.js
similarity index 92%
rename from src/icons/PanToolIcon.js
rename to src/icons/MoveToolIcon.js
index 479d197..04120c8 100644
--- a/src/icons/PanToolIcon.js
+++ b/src/icons/MoveToolIcon.js
@@ -1,6 +1,6 @@
import React from "react";
-function PanToolIcon() {
+function MoveToolIcon() {
return (
+