Added using tokens how to

src/docs/assets/index.js

@@ -10,6 +10,11 @@ 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";
 
 export default {
   audioSharingFaq,
@@ -24,4 +29,9 @@ export default {
   diceTraySize,
   usingFog,
   usingMeasure,
+  defaultTokens,
+  workingWithTokens,
+  deletingTokens,
+  customTokens,
+  customTokensAdvanced,
 };

src/docs/howTo/usingTokens.md

@@ -1,5 +1,60 @@
+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: allow 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 map 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 protrusions and the like.`
+
 ## 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.