Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Renamed pan to move and updated docs for 1.8.0

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-02-22 15:32:35 +11:00
parent 525398d2ec
commit ef91e65104
25 changed files with 176 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/map/Map.js
View File

@ -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 })

12
src/components/map/MapControls.js
View File

@ -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: <PanToolIcon />,
title: "Pan Tool (W)",
move: {
id: "move",
icon: <MoveToolIcon />,
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 = [
{

2
src/components/map/MapEditor.js
View File

@ -63,7 +63,7 @@ function MapEditor({ map, onSettingsChange }) {
stageTranslateRef,
mapLayerRef.current,
getGridMaxZoom(map.grid),
"pan",
"move",
preventMapInteraction
);

24
src/components/map/MapInteraction.js
View File

@ -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":

2
src/components/map/MapTokens.js
View File

@ -115,7 +115,7 @@ function MapTokens({
})
}
draggable={
selectedToolId === "pan" &&
selectedToolId === "move" &&
!(tokenState.id in disabledTokens) &&
!tokenState.locked
}

BIN
src/docs/assets/EditingMapsAdvanced.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 162 KiB

BIN
src/docs/assets/Settings.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/docs/assets/UsingFog.mp4
View File

Binary file not shown.

BIN
src/docs/assets/UsingMeasure.mp4
View File

Binary file not shown.

BIN
src/docs/assets/UsingNotes.mp4
View File

Binary file not shown.

BIN
src/docs/assets/UsingPointer.mp4
View File

Binary file not shown.

2
src/docs/assets/index.js
View File

@ -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;

2
src/docs/howTo/gettingStarted.md
View File

@ -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.

14
src/docs/howTo/settings.md Normal file
View File

@ -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.
![Settings](settings)
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.

11
src/docs/howTo/sharingMaps.md
View File

@ -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

63
src/docs/howTo/shortcuts.md Normal file
View File

@ -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 |

28
src/docs/howTo/usingDrawing.md
View File

@ -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 |

24
src/docs/howTo/usingFog.md
View File

@ -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 |

10
src/docs/howTo/usingMeasure.md
View File

@ -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.
![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 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 | |

15
src/docs/howTo/usingNotes.md
View File

@ -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.
![Using Notes](usingNotes)
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.

2
src/docs/howTo/usingPointer.md
View File

@ -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.
![Using Pointer](usingPointer)

2
src/docs/howTo/usingTokens.md
View File

@ -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.

4
src/hooks/useStageInteraction.js
View File

@ -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,

4
src/icons/PanToolIcon.js → src/icons/MoveToolIcon.js
View File

@ -1,6 +1,6 @@
import React from "react";
function PanToolIcon() {
function MoveToolIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -15,4 +15,4 @@ function PanToolIcon() {
);
}
export default PanToolIcon;
export default MoveToolIcon;

18
src/routes/HowTo.js
View File

@ -21,6 +21,8 @@ const sharingAudio = raw("../docs/howTo/sharingAudio.md");
const usingPointer = raw("../docs/howTo/usingPointer.md");
const usingTimer = raw("../docs/howTo/usingTimer.md");
const usingNotes = raw("../docs/howTo/usingNotes.md");
const shortcuts = raw("../docs/howTo/shortcuts.md");
const settings = raw("../docs/howTo/settings.md");
function HowTo() {
const location = useLocation();
@ -128,6 +130,14 @@ function HowTo() {
<Markdown source={usingTimer} assets={assets} />
</Accordion>
</div>
<div id="settings">
<Accordion
heading="Settings"
defaultOpen={location.hash === "#settings"}
>
<Markdown source={settings} assets={assets} />
</Accordion>
</div>
<div id="sharingAudio">
<Accordion
heading="Sharing Audio (Experimental)"
@ -136,6 +146,14 @@ function HowTo() {
<Markdown source={sharingAudio} assets={assets} />
</Accordion>
</div>
<div id="shortcuts">
<Accordion
heading="Shortcuts"
defaultOpen={location.hash === "#shortcuts"}
>
<Markdown source={shortcuts} assets={assets} />
</Accordion>
</div>
</Flex>
<Footer />
</Flex>