https://wiki.roll20.net/api.php?action=feedcontributions&user=1540094&feedformat=atomRoll20 Wiki - User contributions [en]2024-03-29T14:37:14ZUser contributionsMediaWiki 1.20.3https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:29:43Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Commands to create, toggle, and reset. <br />
These all work on selected token(s).<br />
<br />
<pre data-language="javascript"><br />
<br />
Create Game Clock !game.clock --create -c <br />
<br />
Stop the clock --toggle -t <br />
<br />
Reset the Clock --reset -re <br />
<br />
Turn on/off rotation --rotation -ro <br />
<br />
Turn on/off status markers --marker -m <br />
<br />
Turn on/off aura --aura -a <br />
<br />
Adjust angle --(number) like --90<br />
<br />
Add word before clock :(word) like :StartFrom2019<br />
</pre><br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:27:09Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Commands to create, toggle, and reset. <br />
These all work on selected token(s).<br />
<br />
{{syntaxbox top|formal=true|Marking Conditions}}<br />
<br />
Create Game Clock !game.clock --create -c <br />
<br />
Stop the clock --toggle -t <br />
<br />
Reset the Clock --reset -re <br />
<br />
Turn on/off rotation --rotation -ro <br />
<br />
Turn on/off status markers --marker -m <br />
<br />
Turn on/off aura --aura -a <br />
<br />
Adjust angle --(number) like --90<br />
<br />
Add word before clock :(word) like :StartFrom2019<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:20:54Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Commands to create, toggle, and reset. <br />
These all work on selected token(s).<br />
<br />
'''Create Game Clock !game.clock --create -c <br />
<br />
Stop the clock --toggle -t <br />
<br />
Reset the Clock --reset -re <br />
<br />
Turn on/off rotation --rotation -ro <br />
<br />
Turn on/off status markers --marker -m <br />
<br />
Turn on/off aura --aura -a <br />
<br />
Adjust angle --(number) like --90<br />
<br />
Add word before clock :(word) like :StartFrom2019'''<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:19:53Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Commands to create, toggle, and reset. <br />
These all work on selected token(s).<br />
<br />
Create Game Clock !game.clock --create -c <br />
<br />
Stop the clock --toggle -t <br />
<br />
Reset the Clock --reset -re <br />
<br />
Turn on/off rotation --rotation -ro <br />
<br />
Turn on/off status markers --marker -m <br />
<br />
Turn on/off aura --aura -a <br />
<br />
Adjust angle --(number) like --90<br />
<br />
Add word before clock :(word) like :StartFrom2019<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:19:31Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Commands to create, toggle, and reset. <br />
These all work on selected token(s).<br />
<br />
Create Game Clock !game.clock --create -c <br />
Stop the clock --toggle -t <br />
Reset the Clock --reset -re <br />
Turn on/off rotation --rotation -ro <br />
Turn on/off status markers --marker -m <br />
Turn on/off aura --aura -a <br />
Adjust angle --(number) like --90<br />
Add word before clock :(word) like :StartFrom2019<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-26T11:02:28Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=Game Timer<br />
|author={{user profile|1540094|SAD}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Red Bar be hours.<br />
<br />
Green Bar be minutes.<br />
<br />
Blue Bar be seconds.<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-25T16:30:17Z<p>1540094: </p>
<hr />
<div><br />
{{script overview<br />
|name=APIHeartBeat<br />
|author={{user profile|1540094|Aaron C. M.}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Red Bar be hours.<br />
<br />
Green Bar be minutes.<br />
<br />
Blue Bar be seconds.<br />
<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Script:Game_TimerScript:Game Timer2019-06-25T16:28:21Z<p>1540094: Created page with "{{script overview |name=APIHeartBeat |author={{user profile|1540094|Aaron C. M.}} |version=1.3.1 |lastmodified=2019-03-05}} {{stub}} This is a simple script to court how long..."</p>
<hr />
<div>{{script overview<br />
|name=APIHeartBeat<br />
|author={{user profile|1540094|Aaron C. M.}}<br />
|version=1.3.1<br />
|lastmodified=2019-03-05}}<br />
{{stub}}<br />
<br />
This is a simple script to court how long does player use the game room.<br />
<br />
Just upload a clock picture on the table and name game.clock.<br />
<br />
Then the picture will court the time.<br />
<br />
API sandbox will shutdown soon when all player exit the room.<br />
<br />
Support for multiple clock at same time.<br />
<br />
Red Bar be hours.<br />
<br />
Green Bar be minutes.<br />
<br />
Blue Bar be seconds.<br />
[[File:https://media.giphy.com/media/p3UdAFAiVPZTo8zDXu/giphy.gif|thumbnail]]<br />
<br clear="all"><br />
<br />
=== Changelog ===<br />
<br />
{{changelog version|1.3.1|2019-03-02|* Release}}</div>1540094https://wiki.roll20.net/Mod:Script_IndexMod:Script Index2019-06-25T16:21:11Z<p>1540094: /* System */</p>
<hr />
<div>{{pro only}}<br />
<br />
<div style="float:left;margin-right:15px">__TOC__</div><br />
{{apibox}}<br />
<br />
<br />
The '''API Script Index''' is a listing of community-contributed API scripts that are available for use on Roll20. If you're interested in contributing to the Roll20 API Community Scripts please visit the [https://github.com/Roll20/roll20-api-scripts API GitHub Repository] and follow the instructions in the README.md file at the bottom of the page.<br />
<br />
<br clear="both"><br />
<br />
== Scripts By Category ==<br />
<br />
=== General Purpose Scripts ===<br />
If your script incorporates ''specific'' game system rules, consider listing the script under that game system instead of one of these general purpose categories.<br />
<br />
==== Combat Scripts ====<br />
Combat scripts assist in making combat flow more easily. This can mean anything from automatically handling initiative to automating exchanges between combatants.<br />
* [[Script:Group Initiative|Group Initiative]] -- Adds the selected tokens to the turn order after rolling their initiative + configurable data.<br />
* [[Script:Initiative Tracker|Initiative Tracker]] -- Round counter and status effect manager with optional announcements to chat.<br />
* [[Script:Random Turnorder|Random Turnorder]] -- Randomly assigns a turn to selected tokens.<br />
* [[Script:TrackerJacker|TrackerJacker]] -- Graphical turnorder tracker, as well as status/condition marker tracking<br />
* [[Script:Turn Marker|Turn Marker]] -- Round counter and a moving marker that shows whose turn it is.<br />
* [[Script: Critical|Critical]] -- Quick method of determining the outcome of a critical hit.<br />
* [[Script: Fumbler|Fumbler]] -- Quick method of determining the outcome of a fumble.<br />
<br />
==== Tokens - Conditions / Status / Health ====<br />
Tokens are used to represent player characters as well as non-player characters. Naturally, both occasionally get punched around a bit. Scripts in this category deal with the changing conditions of tokens, often but not necessarily as a result of combat.<br />
* [[Script:Blood And Honor: Automatic blood spatter, pooling and trail effects|Blood And Honor]] -- Automatic blood spatter, pooling and trail effects<br />
* [[Script:Bloodied and Dead Status Markers|Bloodied and Dead Status Markers]] -- Automatic bloodied and down icons for HP tracking<br />
* [[Script:Conditions and Status Tracker|Conditions and Status Tracker]] -- Tracks the status of tokens and announces them as the duration passes.<br />
* [[Script:Flight|Flight]] -- Mark how high tokens are flying<br />
* [[Script:Flip Tokens|Flip Tokens]] -- Flip graphics horizontally and/or vertically<br />
* [[Script:Mark|Mark]] -- Places a numbered Marker under tokens, clears on turn change/close, and page change.<br />
* [[Script:Marking Conditions|Marking Conditions]] -- Set status markers on targeted on individual tokens<br />
* [[Script:Temp HP and Status|Temp HP and Status]] -- Temp hit point manager and bloodied/dying/dead status markers.<br />
* [[Script:Toggle Status|Toggle Status]] -- Toggle status marker on/off, and update character attribute to match<br />
<br />
==== Tokens - Movement, Rotation, and Size ====<br />
Scripts which are triggered by or change the location of tokens should generally be placed in this category.<br />
* [[Script:Auto Teleporting and Chat Based Teleporting|Auto Teleporting and Chat Based Teleporting]] -- Teleporting based on text commands or token locations.<br />
* [[Script:Change_Token_Image|Change Token Image]] -- Changes displayed image for tokens based on rollable table.<br />
* [[Script:Collision Detection|Collision Detection]] -- Handles collisions between player-controlled tokens and a subset of path objects on the page<br />
* [[Script:KABOOM|KABOOM]] -- Creates explosion effects that move tokens away from or towards a point.<br />
* [[Script:It's a Trap|It's a Trap]] -- Script for setting traps and detecting collisions with them at any point during movement.<br />
* [[Script:Marching Order|Marching Order]] -- Makes tokens follow each other in some specified order.<br />
* [[Script:Move Lighting|Move Lighting]] -- Move dynamic lighting polygon path objects between game layers.<br />
* [[Script:No Token Rotation|No Token Rotation]] -- Prevents tokens from being rotated<br />
* [[Script:Random Depth|Random Depth]] -- Randomly adjusts the depth of selected tokens.<br />
* [[Script:Random Rotate|Random Rotate]] -- Allows the GM to easily rotate all selected tokens to a random angle.<br />
* [[Script:Size Lock|Size Lock]] -- Toggles a state which reverts any size changes automatically.<br />
* [[Script:Slide Tokens|Slide Tokens]] -- Use an API command to move tokens along a waypoint path, instead of dragging the token and hitting space.<br />
* [[Script:Spin Tokens|Spin Tokens]] -- Allows the GM to toggle spinning of selected tokens.<br />
* [[Script:Table Token Sizer|Table Token Sizer]] -- Simple script to scale rollable tokens added to the tabletop to a given size (defaults to 3x3) an set them as not drawings.<br />
* [[Script:Token Path|Token Path]] -- Tracks movement of the token at the top of tracker, displaying its path (and distance traveled) for the round.<br />
* [[Script:Token Lock|Token Lock]] -- Allows GMs to selectively lock the movement of Player Tokens.<br />
* [[Script:Twins|Twins]] -- Links two tokens so that they mirror each other across pages.<br />
<br />
==== Lighting and Revealing ====<br />
Dynamic lighting is a subscriber feature that changes what parts of the map are visible to the players as they move their tokens around. The light-blocking walls are achieved by paths on the <code>walls</code> layer, and tokens are used as point light sources. Scripts which modify either the light emitted by tokens or the walls which block the light belong in this category.<br />
* [[Script:DLEllipseDrawer|DLEllipseDrawer]] -- Draw circles and ellipses on the dynamic lighting layer.<br />
* [[Script:Dynamic Light Recorder|Dynamic Light Recorder]] -- Save dynamic lighting paths for map tiles and automatically regenerate later<br />
* [[Script:Dynamic Lighting Animation|Dynamic Lighting Animation]] -- Animate a sequence of changes to the dynamic lighting layer<br />
* [[Script:The Darkness is Closing In|The Darkness is Closing In]] -- Example script for reducing light on a token every time it moves.<br />
* [[Script:Torch|Torch]] -- A simple script for giving lights to tokens and turning off and on dynamic lighting.<br />
* [[Script:Walls|Walls]] -- Builds dynamic lighting walls with an exported SVG path file.<br />
* [[Script:ShareVision|ShareVision]] -- Allows normal vision and darkvision to be shared.<br />
<br />
==== Jukebox ====<br />
The jukebox is a powerful tool for creating immersive gaming experiences. Make it even more powerful.<br />
* [[Script:Roll20_Audio_Master|Roll20 Audio Master]] -- Comprehensive jukebox control script; play, stop, and loop tracks. Adjust volume of tracks. Create, edit, play, stop, loop, and shuffle playlists.<br />
<br />
==== Characters - Equipment ====<br />
Most game systems have some form of equipment to make characters better. While scripts dealing with that equipment may necessarily be system-specific, there are scripts which handle equipment in a more general fashion.<br />
* [[Script:Ammo|Ammo]] -- Provides inventory management for ammunition stored in an attribute of a character.<br />
* [[Script:Ammunition Tracker|Ammunition Tracker]] -- A bunch of commands to track ammunition.<br />
* [[Script:Inventory Manager|Inventory Manager]] -- Inventory Management<br />
<br />
==== Characters - Attributes ====<br />
Manipulate one or more characters' attributes. Anything that is system-specific should be placed in the system's category below; this section is for system-agnostic attribute manipulation.<br />
* [[Script:Conditions|Conditions]] -- Track attribute-modifying conditions.<br />
* [[Script:Manual Attribute|Manual Attribute]] -- Creates a manual copy of an autocalculated field, and assigns it to the bar of a token.<br />
* [[Script:ChatSetAttr|ChatSetAttr]] -- Create, modify, and delete character attributes via chat commands or macros.<br />
* [[Script:EasyExperience|EasyExperience]] -- Make awarding experience easy and choose your experience progression.<br />
<br />
==== Generators ====<br />
Content generation can extend the reach of your campaign while minimizing the GM's prep time.<br />
* [[Script:CharSheet|CharSheet]] -- Allow players to create their own character sheets.<br />
* [[Script:Dungeon Utils|Dungeon Utils]] -- Generates random dungeons from wall and floor images.<br />
* [[Script:namegen]] -- Generates random names of People, Towns/Cities, and Taverns<br />
* [[Script:Random Dungeon Generator|Random Dungeon Generator]] -- Generates random dungeons with geomorphic tiles.<br />
* [[Script:Terrain Generator|Terrain Generator]] -- Generate simple outdoor maps (forests, deserts, etc)<br />
* [[Script:Tile|Tile]] -- Create tiled arrays of graphics on the map layer.<br />
* [[Script:Token Name Number|Token Name Number]] -- Automatic Numbering of tokens with special placeholder.<br />
<br />
==== Roleplay ====<br />
Scripts which attempt to make the game more immersive belong in this category.<br />
* [[Script:Animation|Animation]] -- Create and display animations.<br />
* [[Script:Languages|Languages]] -- Allows characters & GMs to create and speak any language. This is a rework of What Did He Say<br />
* [[Script:Language Script|Language Script]] -- A script for auto converting text to elven or dwarven.<br />
* [[Script:What Did He Say|What Did He Say?]] -- Language based scripting<br />
* [[Script:Morality|Morality]] -- A dialog prompt that provides morality choices as decisions<br />
<br />
==== System ====<br />
Scripts in this category are a bit more ''meta'' than the ones listed above. These scripts assist with Roll20 itself more than they assist the game you're playing.<br />
* [[Script:Game Timer|Game Timer]] -- This is a simple script to court how long does player use the game room.<br />
* [[Script:API Heart Beat|API Heart Beat]] -- Provides an API Heartbeat by setting the requesting player's color continuously.<br />
* [[Script:cron|cron]] -- Schedule (possibly recurring) commands to run at some point in the future.<br />
* [[Script:DupCharToken|DupCharToken]] -- Duplicate and add identifying number to Character and Token.<br />
* [[Script:emas|emas]] -- Provides player !emas and !as commands.<br />
* [[Script:Extended Expressions|Extended Expressions]] -- Extended roll expression syntax, supporting conditionals, variable references, bitwise operators, and more.<br />
* [[Script:HiddenRolls|HiddenRolls]] -- Various types of roll hiding (unmodified roll only, final result only, only show to GM).<br />
* [[Script:Is Greater|Is Greater]] -- Trivial little script to check if the first value is greater than the second and report it to chat.<br />
* [[Script:Map Lock|Map Lock]] -- Provides locking of graphics to prevent moving/resizing/rotating them. Also highlighting.<br />
* [[Script:Measure|Measure]] -- Measure distances between multiple tokens, both from the corners and the center.<br />
* [[Script:Message of the Day|Message of the Day]] -- Greets players that log in with the contents of a particular note.<br />
* [[Script:Move Players|Move Players]] -- Allows macros to move the player ribbon for players.<br />
* [[Script:MapChange|MapChange]] -- Provides an easy and user friendly way to move players between maps.<br />
* [[Script:Object Properties|Object Properties]] -- Get and set properties of API objects.<br />
* [[Script:Page Navigator|Page Navigator]] -- Easily move players from page to page, and allow players to move to pages by moving their tokens.<br />
* [[Script:Page Size|Page Size]] -- Resizes page, optionally moving and/or scaling its contents.<br />
* [[Script:RollStats|RollStats]] -- Track and display roll statistics.<br />
* [[Script:Rollable_Table_Macros|Rollable Table Macros]] -- Use macros and chat commands with rollable tables<br />
* [[Script:StateBrowser|StateBrowser]] -- View/modify the contents of the state object.<br />
* [[Script:Store Commands|Store Commands]] -- Store a series of commands for repeated execution<br />
* [[Script:Table Export|Table Export]] -- A script for exporting Rollable Tables between accounts.<br />
* [[Script:tokenFate|Token Fate]] -- Let fate decide! Randomly selects a token from the selected group.<br />
* [[Script:Token Mod|Token Mod]] -- An interface to adjusting properties of a token from a macro or the chat area.<br />
* [[Script:TokenSync|TokenSync]] -- Synchronize changes to token with other tokens that represent the same character<br />
* [[Script:TruePageCopy|TruePageCopy]] -- Duplicate page graphics by chat command, or with the Duplicate Page button.<br />
* [[Script:Weighted Dice|Weighted Dice]] -- Automated creation of rollable tables where a minimum value is weighted with values it replaces. (example d6min4 possible values: 4 4 4 4 5 6)<br />
* [[Script:Customizable Roll Listener|Customizable Roll Listener]] -- Customizable responses to API or non API chat messages.<br />
<br />
=== Game Specific Scripts ===<br />
Scripts that deal with ''specific'' rules of a game system should be listed in a sub-heading here. If the appropriate game system is not listed, feel free to create the appropriate heading.<br />
<br />
Scripts under each system below may be designed for any use (in other words, had they been system-agnostic, they might fit under any of the sub-headings in the "General Purpose Scripts" section above).<br />
<br />
==== 13th Age ====<br />
* [[Script:Escalation|Escalation]] -- Simple Escalation Die handling script, using the new custom entries with formulae.<br />
<br />
==== Ars Magica ====<br />
* [[Script:Ars Magica 5e Stress Die|Fifth Edition stress die roller]] -- Roll a stress die with automated printout, with or without modifiers. Botch dice count can be changed in both versions.<br />
<br />
==== BASH! Ultimate Edition ====<br />
* [[Script:Dice (BASH!)|Dice]] -- Rolls the Bash UE Dice format with exploding.<br />
<br />
==== Chronique Oubliées ====<br />
* [[Script:COFantasy|COFantasy]] -- Combats, Skills and Spells support<br />
<br />
==== Cypher System ====<br />
* [[Script:Cypher_System_Sheet|Cypher System Sheet]] -- Enables the applying of stat cost, recovery roll advance, auto calculation of PC state and damage track in the Cypher System Sheet, from the roll template or sheet buttons, for both the [https://github.com/Roll20/roll20-character-sheets/tree/master/CypherSystem "English"] and [https://github.com/Roll20/roll20-character-sheets/tree/master/CypherSystemFrench "French"] versions.<br />
<br />
==== d6 System ====<br />
The "d6 System" includes a number of games from [[wikipedia:West End Games|West End Games]] which utilize the same (or very similar) game mechanics. Scripts which are more specific to a single game than the system as a whole should be categorized there.<br />
* [[Script:Wild Dice|Wild Dice]] -- Implements the Wild Dice rolling mechanic.<br />
<br />
==== d20 System ====<br />
The "d20 System" includes Dungeons & Dragons and the games it spawned which utilize the same (or very similar) game mechanics. Scripts which are more specific to D&D or one of its spinoffs than the system as a whole should be categorized there.<br />
* [[Script:Announce Roll|Announce Roll]] -- Prints an extra announcement of a critical or fumble to the chat when using /roll<br />
* [[Script:Monster Hit Dice|Monster Hit Dice]] -- Set Monster hit points from hit dice on add, usually via drag from journal.<br />
<br />
==== Dogs in the Vineyard ====<br />
* [[Script:Dice in the Vineyard|Dice in the Vineyard]] -- Dice tracker for Dogs in the Vineyard. Stacks poker-chip-styled roll tokens in defined areas for characters to spend.<br />
<br />
==== Dungeons & Dragons 4e ====<br />
* [[Script:Use Power|Use Power]] -- A script for instrumenting and tracking the use of encounter and daily powers.<br />
<br />
==== Dungeons & Dragons 5e ====<br />
* [[Script:5e Shaped Companion Script|5e Shaped Companion]] -- Support script for the 5e Shaped Character Sheet - provides monster import, auto-ammo, auto-HD, auto-death saves, loads of config options and more<br />
* [[Script:5th Edition Greyhawk Initiative|Greyhawk Initiative]] -- Supports the use of Greyhawk Initiative from Wizards of the Coast's Unearthed Arcana.<br />
* [[Script:Spell Level (D&D 5e)|Spell Level]] --<br />
<br />
==== Earthdawn ====<br />
* [[Earthdawn - FASA Official|Earthdawn (FASA Official)]] -- A companion to the Earthdawn (FASA Official) and 1879 (FASA Official) character sheets, this provides many features such as automatically creating token actions and helping with accounting, calculating Target Numbers and checking for number of successes, Etc.<br />
<br />
==== Edge of the Empire ====<br />
* [[Script:Dice Roller (Edge of the Empire)|Dice Roller]] -- A Dice roller for the Edge of the Empire/Age of Rebellion/Force and Destiny Roleplaying Game<br />
<br />
==== Exalted, Second Edition ====<br />
* [[Script:Exalted Successes|Successes]] -- reports successes for d10 rolls per ''Exalted'' rules.<br />
<br />
==== Exalted, Third Edition ====<br />
* [[Script:exaltScript|exaltScript]] -- Adds general utility and automation to Exalted 3rd Edition campaigns.<br />
<br />
==== FATE ====<br />
* [[Script:Fate Dots|Fate Dots]] -- Provides numbered multi dots for Fate stress boxes.<br />
<br />
==== HERO Systems ====<br />
This includes Champions, Star HERO, Fantasy HERO, Traveller HERO, etc.<br />
<br />
==== Numenera ====<br />
* [[Script:Cypher Roller|Cypher Roller]] -- Script to automatically roll Cyphers in Numenera, with full descriptions.<br />
* [[Script:Numenera_Natha|Numenera Natha]] -- Adds Numenera rolls and character update functions to the Natha's Numenera character sheets: [https://github.com/Roll20/roll20-character-sheets/tree/master/Numenera_NathasNumenera_English "Numenera (tabbed)"] and [https://github.com/Roll20/roll20-character-sheets/tree/master/Numenera_NathasNumenera_French "Numenera (French)"].<br />
<br />
==== Pathfinder ====<br />
* [[Script:Creature Gen|Creature Gen]] -- Generate combat ready tokens from PRD and D20PFSRD statblocks (Obsolete - no longer supported)<br />
* [[Script:Skillbook|Skillbook]] -- Generate token action to put API buttons for skills in chat window<br />
* [[Script:HL-Import|HL-Import]] -- Import characters from Hero Lab via XML<br />
* [[Script:Pathfinder_Character_Sheet|Pathfinder_Character_Sheet]] -- Import PCs/NPCs based on the format and text placement<br />
<br />
==== Ryuutama ====<br />
* [[Script:Ryuutama Token Status Markers|Ryuutama Token Status Markers]]<br />
* [[Script:Ryuutama Skill Check Totaler|Ryuutama Skill Check Totaler]]<br />
<br />
==== Savage Worlds ====<br />
* [[Script:Raise Count|Raise Count]] -- Counts raises on a roll against a given target number<br />
<br />
==== Shadowrun 5e ====<br />
* [[Script:SR-RollExtender|SR-RollExtender]] -- Deals with Shadowrun specific rules like glitches and extended rolls.<br />
* [[Script:SR-NextPass|SR-NextPass]] -- GM aid to handle moving on to the next initiative pass<br />
<br />
==== Trail of Cthulhu ====<br />
* [[Script:GUMSHOE|GUMSHOE]] -- A point-spending script for GUMSHOE games. Integrates with supporting character sheets.<br />
<br />
==== Vampire: The Masquerade, 20th Anniversary Edition ====<br />
* [[Script:Track V20 Attributes|Track V20 Attributes]] -- Track character Disciplines, Paths, and Backgrounds for use with macros and other scripts.<br />
<br />
====WFRP2E (Havoc)====<br />
* [[Script:wfrp2e-api|wfrp2e-api]] -- Functions and Roll Templates in support of the Warhammer Fantasy Roleplay 2E Sheet by Paul "Havoc" Stein<br />
<br />
====WFRP4E====<br />
* [[Script:WFRP4e|WFRP4e]] -- Oops!, Critical Hit Location, and Critical Hit result support for Warhammer Fantasy 4th Edition.<br />
<br />
==== Zombie Dice ====<br />
* [[Script:Zombie Dice|Zombie Dice]] -- Rolls canceling Zombie Dice<br />
<br />
=== Utility Scripts ===<br />
These scripts are generally not intended to be used alone, but are often instead required by some of the above scripts. Alone, these scripts will not do anything for your campaign, but rather they create functions to be used by other scripts.<br />
* [[Script:Base64|Base64]] -- Base 64 encoding for Roll20 Scripts. (Adapted from http://www.webtoolkit.info/ )<br />
* [[Script:Command Shell|Command Shell]] -- Framework for marshalling chat commands with POSIX-shell-style arguments, permissions, and duplicate-command checking.<br />
* [[Script:ESRO|Extended Syntax Roll20 Objects]] -- Wraps objects to extend their functionality.<br />
* [[Script:GM Code|GM Code]] -- Generates a unique code to authenticate the GM.<br />
* [[Script:Interpreted sendChat|Interpreted sendChat]] -- Send a message to the chat as the same person or character that triggered a chat event<br />
* [[Script:IsGM Auth Module|IsGM Auth Module]] -- Provides a function isGM() for determining if a player id refers to a gm. Intended for use alongside other scripts.<br />
* [[Script:levenshteinDistance|levenshteinDistance]] -- Measure the difference between strings<br />
* [[Script:splitArgs|splitArgs]] -- Split a string into arguments<br />
* [[Script:Token Collisions|Token Collisions]] -- A library for detecting collisions among tokens during movement.<br />
* [[Script:Vector Math|Vector Math]] -- A library for vector mathematics.<br />
* [[Script:PowerCards|PowerCards]] -- Create nicely formatted output cards for attacks, spells, and other abilities.<br />
* [[Script:PowerCards Macro Helper|PowerCards Macro Helper]] -- Support the automatic generation of PowerCards for 5E OGL character sheet actions.<br />
<br />
=== Special Thanks ===<br />
Roll20 wants to give special thanks to [https://app.roll20.net/users/235259/brian Brian] and [https://app.roll20.net/users/104025/the-aaron Aaron C. M.] for their contributions to the community and this API script index.<br />
<br />
[[Category:API|Script Index]]</div>1540094https://wiki.roll20.net/CSS_WizardryCSS Wizardry2018-08-25T15:31:40Z<p>1540094: </p>
<hr />
<div>Learning CSS and HTML can be daunting. And yet, if you want to [[Building Character Sheets|create a character sheet]] for Roll20, both are required.<br />
<br />
This page gives a number of examples for creative way to leverage the character sheet system. Most of these tips involve CSS and were pulled from the <span class="plainlinks">[https://app.roll20.net/forum/post/882997/css-wizardry/?pagenum=1 CSS Wizardry]</span> thread in the Character Sheets forum, but some tips don't necessarily involve CSS at all.<br />
<br />
Many of these tips also include links to a live demo on [http://jsfiddle.net JSFiddle], so you can see them in action.<br />
<br />
== Four Ways to Use an Attribute ==<br />
=== Standard ===<br />
Create one of: <code><input></code> (with a <code>type</code> attribute of "text", "number", "checkbox", "radio", or "hidden"), <code><select></code>, or <code><textarea></code>, and set the element's <code>name</code> attribute to a value beginning with "attr_"<br />
<pre data-language="html"><input type="text" name="attr_text_example"><br />
<input type="number" name="attr_number_example"><br />
<input type="checkbox" name="attr_checkbox_example"><br />
<input type="radio" name="attr_radio_example"><br />
<input type="hidden" name="attr_hidden_example" value="0"><br />
<select name="attr_select_example"><br />
<option value="1">First option</option><br />
<option value="2">Second option</option><br />
</select><br />
<textarea name="attr_textarea_example"></textarea></pre><br />
The value of the form element will be stored as the value of an attribute with the same name as the form element, except the "attr_" prefix will be removed. So, an element named "attr_example" will be stored in the attribute "example".<br />
<br />
Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the <kbd>[tab]</kbd> key.<br />
<br />
Hidden inputs are, as you might guess, hidden to the user. They cannot be interacted with, and so they are prime candidates for intermediate calculations of [[#Autocalc Fields|autocalc]] or storing things the user doesn't need to see or change for [[Sheet Worker Scripts]].<br />
<br />
If you have multiple radio inputs with the same name, only one of those radios will be checked at any given time. If you have multiple other kinds of elements with the same name, their values will be synchronized. This can be used, for example, if you have a [[#Tabs|tab layout]] with the same field present in two tabs. Give them both the same name, and they will always have the same value.<br />
<br />
=== Autocalc Fields ===<br />
If a field has the <code>disabled</code> attribute, the user will be unable to modify its value and its value will be treated as a mathematical equation (which can reference other attributes of the character). The result of that formula will be what the user sees. Errors in the formula (for example, <code>@{a} + @{b} + @{c}</code> when attribute b has no value) will result in no output.<br />
<br />
When using sheet worker scripts, the value of the autocalc field you get from the <code>getAttrs</code> function will be its formula, and you cannot set its value to something else. See [https://github.com/Lithl/lithl-snippets/tree/master/sheetworker-autocalc sheetworker-autocalc] for a utility to resolve autocalc fields to their calculated value in a sheet worker script. {{note|sheetworker-autocalc has not been tested with repeating fields.}}<br />
<br />
=== Readonly Fields ===<br />
If a field has the <code>readonly</code> attribute, the user will be unable to modify its value, and its default styling will be the same as if it were [[#Autocalc Fields|disabled]]. However, sheet worker scripts will be able to modify its value, and if its value is some kind of equation, it won't be automatically calculated. {{note|If for some reason a readonly field is an equation, sheetworker-autocalc will be able to resolve it to a value just fine.}}<br />
<br />
=== Attribute-Backed &lt;span&gt;s ===<br />
A <code>&lt;span&gt;</code> element can be given an "attr_" name, just like one of the form elements, above. This will cause the span to behave similarly to a readonly field in that the user cannot modify it directly, and sheet worker scripts have no trouble doing so. There are two main differences with an attribute backed span:<br />
<br />
# The default styling: the span will look just like the surrounding text<br />
# When using attribute backed spans in a repeating section, you should always make a hidden input version of the attribute as attribute backed spans in repeating sections cannot be called without the full repeating section syntax (e.g. @{repeating_SECTIONNAME_$X_attribute_name}).<br />
<br />
== Styling Checkboxes and Radio Buttons ==<br />
[http://jsfiddle.net/waNSL/ Live Demo]<br />
<br />
Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span><br />
<input type="radio" name="attr_r"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */<br />
input[type="radio"],<br />
input[type="checkbox"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio/checkbox */<br />
input[type="radio"] + span::before,<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
content: "";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
input[type="radio"]:checked + span::before {<br />
content: "•";<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
}</pre><br />
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.<br />
<br />
{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}<br />
<br />
=== Alternative Checkboxes ===<br />
[http://jsfiddle.net/su9ac/ Live Demo]<br />
<br />
You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.<br />
<pre data-language="css">/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
margin-right: 4px;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
content: "▼";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
}<br />
<br />
input[type="checkbox"]:checked + span::before {<br />
content: "►";<br />
}</pre><br />
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code><br />
<br />
=== Fill Radio Buttons to the Left ===<br />
[http://jsfiddle.net/sqaz6/ Live Demo]<br />
<br />
A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code><br />
<br />
However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.<br />
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span><br />
<input type="radio" name="attr_r" value="2"><span></span><br />
<input type="radio" name="attr_r" value="3"><span></span><br />
<input type="radio" name="attr_r" value="4"><span></span><br />
<input type="radio" name="attr_r" value="5"><span></span></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */<br />
input[type="radio"] {<br />
opacity: 0;<br />
width: 16px;<br />
height: 16px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -10px;<br />
cursor: pointer;<br />
z-index: 1;<br />
}<br />
<br />
/* Fake radio */<br />
input[type="radio"] + span::before {<br />
margin-right: 4px;<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: center;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
content: "•";<br />
width: 12px;<br />
height: 12px;<br />
font-size: 24px;<br />
border-radius: 50%;<br />
}<br />
<br />
/* Remove dot from all radios _after_ selected one */<br />
input[type="radio"]:checked ~ input[type="radio"] + span::before { <br />
content: "";<br />
}</pre><br />
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.<br />
<br />
To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:<br />
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,<br />
input[type="radio"]:checked + span::before</pre><br />
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}<br />
<br />
{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}<br />
<br />
=== Circular Layouts ===<br />
[http://jsfiddle.net/6Uqhd/ Live Demo]<br />
<br />
Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span><br />
<input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span><br />
</div><br />
<div class="sheet-marker">•</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */<br />
input[type="checkbox"] {<br />
position: absolute;<br />
opacity: 0;<br />
width: 15px;<br />
height: 15px;<br />
cursor: pointer;<br />
z-index: 1;<br />
margin-top: 6px;<br />
}<br />
<br />
/* Fake checkbox */<br />
input[type="checkbox"] + span::before {<br />
border: solid 1px #a8a8a8;<br />
line-height: 14px;<br />
text-align: middle;<br />
display: inline-block;<br />
vertical-align: middle;<br />
box-shadow: 0 0 2px #ccc;<br />
background: #f6f6f6;<br />
background: radial-gradient(#f6f6f6, #dfdfdf);<br />
position: relative;<br />
content: "";<br />
width: 14px;<br />
height: 14px;<br />
font-size: 12px;<br />
border-radius: 3px;<br />
}<br />
<br />
/* Styles unique to fake checkbox (checked) */<br />
input[type="checkbox"]:checked + span::before {<br />
content: "✓";<br />
color: #a00;<br />
box-shadow: 0 0 2px transparent;<br />
}<br />
<br />
/* Position checkboxes vertically in circle */<br />
input.sheet-top { margin-top: 5px; }<br />
input.sheet-top + span::before { top: 0px; }<br />
input.sheet-mid-eighth { margin-top: 12px; }<br />
input.sheet-mid-eighth + span::before { top: 7px; }<br />
input.sheet-mid-quarter { margin-top: 27px; }<br />
input.sheet-mid-quarter + span::before { top: 22px; }<br />
input.sheet-mid-three-eighth { margin-top: 45px; }<br />
input.sheet-mid-three-eighth + span::before { top: 40px; }<br />
input.sheet-middle { margin-top: 67px; }<br />
input.sheet-middle + span::before { top: 62px; }<br />
input.sheet-middle-2 { margin-top: 73px; }<br />
input.sheet-middle-2 + span::before { top: 68px; }<br />
input.sheet-mid-five-eighth { margin-top: 95px; }<br />
input.sheet-mid-five-eighth + span::before { top: 90px; }<br />
input.sheet-mid-three-quarter { margin-top: 113px; }<br />
input.sheet-mid-three-quarter + span::before { top: 108px; }<br />
input.sheet-mid-seven-eighth { margin-top: 127px; }<br />
input.sheet-mid-seven-eighth + span::before { top: 122px; }<br />
input.sheet-bottom { margin-top: 135px; }<br />
input.sheet-bottom + span,<br />
input.sheet-bottom + span::before { top: 130px; }<br />
<br />
/* Position checkboxes horizontally in circle */<br />
input.sheet-left-1 { margin-left: 14px; }<br />
input.sheet-left-1 + span::before { left: 14px; }<br />
input.sheet-left-2 { margin-left: 1px; }<br />
input.sheet-left-2 + span::before { left: 1px; }<br />
input.sheet-left-3 { margin-left: -4px; }<br />
input.sheet-left-3 + span::before { left: -4px; }<br />
input.sheet-left-4 { margin-left: -5px; }<br />
input.sheet-left-4 + span::before { left: -5px; }<br />
input.sheet-left-5 { margin-left: -2px; }<br />
input.sheet-left-5 + span::before { left: -2px; }<br />
input.sheet-left-6 { margin-left: 1px; }<br />
input.sheet-left-6 + span::before { left: 1px; }<br />
input.sheet-left-7 { margin-left: 3px; }<br />
input.sheet-left-7 + span::before { left: 3px; }<br />
input.sheet-left-8 { margin-left: 2px; }<br />
input.sheet-left-8 + span::before { left: 2px; }<br />
input.sheet-left-9 { margin-left: -4px; }<br />
input.sheet-left-9 + span::before { left: -4px; }<br />
input.sheet-left-10 { margin-left: -16px; }<br />
input.sheet-left-10 + span::before { left: -16px; }<br />
<br />
/* Rotate checkboxes */<br />
input.sheet-wheel9,<br />
input.sheet-wheel9 + span::before { transform: rotate(9deg); }<br />
input.sheet-wheel27,<br />
input.sheet-wheel27 + span::before { transform: rotate(27deg); }<br />
input.sheet-wheel45,<br />
input.sheet-wheel45 + span::before { transform: rotate(45deg); }<br />
input.sheet-wheel63,<br />
input.sheet-wheel63 + span::before { transform: rotate(63deg); }<br />
input.sheet-wheel81,<br />
input.sheet-wheel81 + span::before { transform: rotate(81deg); }<br />
input.sheet-wheel99,<br />
input.sheet-wheel99 + span::before { transform: rotate(99deg); }<br />
input.sheet-wheel117,<br />
input.sheet-wheel117 + span::before { transform: rotate(117deg); }<br />
input.sheet-wheel135,<br />
input.sheet-wheel135 + span::before { transform: rotate(135deg); }<br />
input.sheet-wheel153,<br />
input.sheet-wheel153 + span::before { transform: rotate(153deg); }<br />
input.sheet-wheel171,<br />
input.sheet-wheel171 + span::before { transform: rotate(171deg); }<br />
<br />
div.sheet-marker {<br />
margin: 36px 0px 0px 5px;<br />
font-size: 20px;<br />
}</pre><br />
<br />
== Styling Select Dropdowns ==<br />
[http://jsfiddle.net/ojvq39oo/ Live Demo]<br />
<br />
<code><select></code> elements are notoriously difficult to apply most styles to. However, using <code>:hover</code> pseudo-selectors and radio buttons, you can create something approximating a dropdown with whatever style you like.<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<div class="sheet-child"><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d4" value="1" checked="true" /><br />
<label>d4</label><br />
<input type="radio" name="attr_radio" class="sheet-select-radio sheet-d8" value="2" /><br />
<label>d8</label><br />
<div class="sheet-d4"></div><br />
<div class="sheet-d8"></div><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-container {<br />
width: 280px;<br />
}<br />
<br />
.sheet-container,<br />
.sheet-child {<br />
display: inline-block;<br />
}<br />
<br />
.sheet-child {<br />
vertical-align: middle;<br />
width: 35px;<br />
height: 35px;<br />
}<br />
<br />
.sheet-child input,<br />
.sheet-child input + label {<br />
display: none;<br />
z-index: 1;<br />
}<br />
<br />
.sheet-child:hover {<br />
background: gray;<br />
position:absolute;<br />
width: 100px;<br />
height: auto;<br />
z-index: 1;<br />
padding: 5px;<br />
}<br />
<br />
.sheet-child:hover > div.sheet-d4 {<br />
display: none;<br />
}<br />
<br />
.sheet-child:hover input,<br />
.sheet-child:hover input + label {<br />
display: inline;<br />
}<br />
<br />
.sheet-child:hover input + label {<br />
margin-right: 50%<br />
}<br />
<br />
.sheet-child:hover label {<br />
display: inline-block;<br />
}<br />
<br />
div.sheet-d4 {<br />
background-position: -411px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
div.sheet-d8 {<br />
background-position: -703px -1px;<br />
width: 35px;<br />
height: 35px;<br />
background-image: url("https://i.imgur.com/zkgyBOi.png");<br />
background-repeat: no-repeat;<br />
color: transparent;<br />
display: none;<br />
}<br />
<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d4:checked ~ div.sheet-d4,<br />
.sheet-child:not(:hover) input.sheet-select-radio.sheet-d8:checked ~ div.sheet-d8 {<br />
display: block;<br />
}</pre><br />
<br />
== Styling Select Dropdowns Text ==<br />
Here's another method to edit text within a select. Use an '''input''' with type="hidden" given the same attribute name as the '''select''' to trigger css styles on the select's option text.<br />
<pre data-language="html" style="margin-bottom: 5px"><br />
<input name="attr_favcolor" type="hidden" class="sheet-color-switch"><br />
<select name="attr_favcolor" class="sheet-color-select1"><br />
<option style="color:red;" value="0" selected>Red</option><br />
<option style="color:yellow;" value="1">Yellow</option><br />
<option style="color:blue;" value="2">Blue</option><br />
</select><br />
</pre><br />
<pre data-language="css"><br />
.sheet-color-switch[value="0"] + .sheet-color-select1 {color: red;}<br />
.sheet-color-switch[value="1"] + .sheet-color-select1 {color: yellow;}<br />
.sheet-color-switch[value="2"] + .sheet-color-select1 {color: blue;}<br />
</pre><br />
<br />
== Custom Progress Bar ==<br />
To create a custom progress bar, i use css and sheet worker to update an hidden field:<br />
<br />
[https://jsfiddle.net/32gt5cvc/ Live Demo]<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-container"><br />
<input type="hidden" value="2" name="attr_Character_overweight" class="sheet-hidden sheet-overweight"><br />
<div class="sheet-overweight"></div><br />
</div><br />
</pre><br />
<br />
<pre data-language="css" style="margin-top: 5px">div.sheet-overweight {<br />
width: 90%;<br />
height: 20px;<br />
border: 1px solid black;<br />
color: black;<br />
text-align: center;<br />
}<br />
input.sheet-overweight[value="0"] ~ div.sheet-overweight {<br />
background: white;<br />
}<br />
input.sheet-overweight[value="1"] ~ div.sheet-overweight {<br />
background: linear-gradient(to left, white 60%, green 75%); <br />
}<br />
input.sheet-overweight[value="2"] ~ div.sheet-overweight {<br />
background: linear-gradient(to left, white 40%, yellow 75%);<br />
}<br />
input.sheet-overweight[value="2"] ~ div.sheet-overweight:before {<br />
content:"Bags half full";<br />
}<br />
input.sheet-overweight[value="3"] ~ div.sheet-overweight {<br />
background: linear-gradient(to left, white 20%, orange 75%);<br />
}<br />
input.sheet-overweight[value="3"] ~ div.sheet-overweight:before {<br />
content: "Bags nearly full";<br />
}<br />
input.sheet-overweight[value="4"] ~ div.sheet-overweight {<br />
background: linear-gradient(to left, white, red 100%);<br />
}<br />
input.sheet-overweight[value="4"] ~ div.sheet-overweight:before {<br />
content: "Bags full !";<br />
}<br />
input.sheet-overweight[value="5"] ~ div.sheet-overweight {<br />
background: black;<br />
color: white;<br />
}<br />
input.sheet-overweight[value="5"] ~ div.sheet-overweight:before {<br />
content: "Bags too heavy !";<br />
}</pre><br />
<br />
== Styling Repeating Sections ==<br />
It's possible to style your repeating sections in a variety of ways. However, you can't just write your CSS as though the <code><fieldset></code> that's in your HTML source is what the user is viewing. After writing the code for your repeating section, here is how it will look when rendered to the user:<br />
<pre data-language="html"><fieldset class="repeating_my-repeating-section" style="display: none;"><br />
<!-- my-repeating-section HTML --><br />
</fieldset><br />
<div class="repcontainer" data-groupname="repeating_my-repeating-section"><br />
<div class="repitem"><br />
<div class="itemcontrol"><br />
<button class="btn btn-danger pictos repcontrol_del">#</button><br />
<a class="btn repcontrol_move">≡</a><br />
</div><br />
<!-- my-repeating-section HTML --><br />
</div><br />
<!-- there will be a div.repitem for each item the user has actually added to the sheet --><br />
</div><br />
<div class="repcontrol" data-groupname="repeating_my-repeating-section"><br />
<button class="btn repcontrol_edit">Modify</button><br />
<button class="btn repcontrol_add">+Add</button><br />
</div></pre><br />
When you click the Modify button, the Add button is is set to <code>display: none</code> and the text of the Modify button is changed to "Done". When you click Done, the Add button is set to <code>display: inline-block</code> and the text of the Done button is changed to "Modify". While modifying repitems, the repcontainer gains the class "editmode".<br />
<br />
Armed with this knowledge, you can do numerous things to alter how your repeating sections are displayed on the final character sheet. For example, you can have multiple repeating items per row:<br />
<pre data-language="css">.repcontainer[data-groupname="repeating_example"] > .repitem {<br />
display: inline-block;<br />
}</pre><br />
{{note|You do '''not''' prefix the rep* classes with <code>sheet-</code>!}}<br />
<br />
Remember to use the <code>[data-groupname="repeating_..."]</code> attribute selector if you want to only apply the style to a single repeating section. Of course, if you want the style to affect all of your repeating sections, that's not needed.<br />
<br />
=== What Can't You Do? ===<br />
You cannot:<br />
* Change the "display" property of the original <code><fieldset></code>.<br />
* Change the text of the Add, Modify/Done, Delete, or Move buttons.<br />
** However, you could set their opacity to 0 and display something in their place, much like [[#Styling Checkboxes and Radio Buttons|styling checkboxes and radios]], as well as add <code>::before</code> or <code>::after</code> pseudo-elements to them.<br />
* Change the "display" property of the Add button after the user has pressed Modify once.<br />
<br />
=== Counting Items ===<br />
[https://jsfiddle.net/7cy6uf2j/ Live Demo]<br />
<br />
CSS can let you count things. This can be applied in multiple contexts for character sheets, but one option is to count how many repeating items are in your repeating section:<br />
<pre data-language="html" style="margin-bottom:5px"><br />
<div class="sheet-repeating-fields"><br />
<fieldset class="repeating_my-repeating-section"><br />
<span class="sheet-counter"></span><br />
<input type="text" name="attr_example"><br />
</fieldset><br />
</div><br />
</pre><br />
<br />
<pre data-language="css" style="margin-top:5px">.sheet-repeating-fields {<br />
counter-reset: sheet-rep-items;<br />
}<br />
<br />
.sheet-counter::before {<br />
counter-increment: sheet-rep-items;<br />
content: counter(sheet-rep-items) '. ';<br />
}</pre><br />
<br />
=== Filter Repeating section displays according to criteria within the repeating items itself ===<br />
<br />
Assume you want a tabbed section to organize/display spells. All the 1st circle spells are displayed under tab 1, all the 2nd circle spells under tab 2, Etc. One way to do this is to duplicate the html code for each spell level. You have 10 lists, and the tabs choose which of the 10 lists to display. The following code shows how to have one list, but to filter the list so it only displays certain spells.<br />
<br />
The HTML looks something like this. <br />
<pre data-language="html" style="margin-bottom:5px"><br />
<span class="sheet-fixed-width" style="width: 11em;"><b> Spell List </b></span><br><br />
<input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab0" value="0" title="All circles" checked style="margin-left:1px;"/><br />
<span class="sheet-tab sheet-spells-tab0">All</span><br />
<input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab1" value="1" title="Circle 1"/><br />
<span class="sheet-tab sheet-spells-tab1">Circle 1</span><br />
<input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab2" value="2" title="Circle 2"/><br />
<span class="sheet-tab sheet-spells-tab2">Circle 2</span><br />
<input type="radio" name="attr_tab-spells" class="sheet-tab sheet-spells-tab3" value="3" title="Circle 3"/><br />
<span class="sheet-tab sheet-spells-tab3">Circle 3</span><br />
<br />
<div class="sheet-section sheet-section-sp-list"><br />
<fieldset class="repeating_spell"><br />
<input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab0" value="0" checked /><br />
<input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab1" value="1"/><br />
<input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab2" value="2"/><br />
<input type="radio" name="attr_SP_Circle" class="sheet-hidden sheet-spells-tab3" value="3"/><br />
<div class="sheet-filtered-box"><br />
<span><select name="attr_SP_Circle" class="sheet-nowrap sheet-label-down" style="width:5em;"><br />
<option value="0" selected title"Please choose the circle for this spell.">-</option><br />
<option value="1">1</option><br />
<option value="2">2</option><br />
<option value="3">3</option><br />
</select>Circle</span><br />
<span class="sheet-nowrap"><br />
<input name="attr_SP_Name" type="text" style="width:12em;" placeholder="Spell Name" ></span><br />
<br />
More fields.<br />
</div><br />
</fieldset><br />
</div><br />
</pre><br />
The relevant part of the css looks like this.<br />
<pre data-language="html" style="margin-bottom:5px"><br />
div.sheet-section-sp-list {<br />
max-height: 999999px;<br />
visibility: visible;<br />
opacity: 1;<br />
transition: opacity 0.5s linear 0s;<br />
overflow: hidden;<br />
}<br />
<br />
.charsheet .repcontainer .repitem, /* A filterbox should look exactly like a repitem. */<br />
.sheet-filtered-box {<br />
padding: 5px 5px 2px 5px;<br />
margin: 5px;<br />
border: 2px solid #CCCCCC;<br />
border-radius: 3px;<br />
}<br />
<br />
.repcontainer .repitem {<br />
overflow: hidden;<br />
}<br />
<br />
.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem { /* A repitem within a spellslist should functionally not exist, it's place is taken by a filterbox. */<br />
padding: 0px;<br />
margin: 0px;<br />
border: none;<br />
border-radius:;<br />
}<br />
<br />
.sheet-filtered-box { /* By default, display no items of a filter box */<br />
display: none;<br />
}<br />
/* Decide which specific repitems to display. */<br />
input.sheet-spells-tab0:checked~.sheet-filtered-box, /* Always display all spells of circle zero. */<br />
.sheet-spells-tab0:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem .sheet-filtered-box, /* When tab0 is checked, display everything no matter what which of the inner boxes are checked. */<br />
.sheet-spells-tab1:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab1:checked~.sheet-filtered-box,<br />
.sheet-spells-tab2:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab2:checked~.sheet-filtered-box,<br />
.sheet-spells-tab3:checked~.sheet-section-sp-list>fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab3:checked~.sheet-filtered-box {<br />
display: block;<br />
} <br />
</pre><br />
<br />
So basically what this does is it makes a filterbox look exactly like a repitem.<br />
By default, no filterboxes are displayed. <br />
The last css entries basically say where tab X above the repeating field is checked, and the same radio button inside a specific repitem is checked, then display that item.<br />
<br />
=== Duplicate a repeating section name to display the same data on more than one tab.or present a summary of the data elsewhere ===<br />
<br />
I am not certain that this trick is recommended by the developers, but as of this writing, it works. <br />
<br />
You can put the same repeating section name in your html more than once in order to display the same information in multiple styles. You can have individual items displayed one way in one instance of the section (for example as a list of select/options) and a different way (for example as a read only text field) elsewhere. It is extremely useful to combine this trick with the previous section (filtering), so that only a select subset are displayed in different places, but you can do this with the convenience of having the data stored once in one list.<br />
<br />
For example, on one tab you can have lots of fiddly options and choices, but on another tab you can display the same list of data pared down to it's minimalist essentials. If the user needs the full list, he can go to the details tab. But the items he uses most frequently fit compactly in a section of another tab. In ether case he is looking at, and manipulating the same list of data, not a list and a separate copy. <br />
<br />
Here are the rules:<br />
* You can repeat repeating section names. Each repeated section will share the same rows and items, but each can present the data in a different way. For example : <fieldset class="repeating_weapons sheet-filtershortlist sheet-filtersummarylist"> the additional class tags can be used to differentiate how this section is to be styled as opposed to other repeating_weapons lists display the data.<br />
* Not all items must be present or displayed in all lists. However each item must be present in every list in which it is used. For example, if you have an auto-calc field, or a button that uses a field, All the fields used in the autocalc, or passed by the button, must be present in the same instance of the repeating section, it will not go looking for it in other instances of the repeating section. The referenced field may be hidden, but must be present. <br />
* You can change how fields are presented. For example they can be editable in one instance, but readonly in another. <br />
* If you change repitem to inline-block, it will float "rows" up so that it can display more than one per line.<br />
<pre data-language="css" style="margin-bottom:5px"><br />
fieldset.sheet-filtersummarylist+.repcontainer .repitem {<br />
display: inline-block;<br />
margin-right: 2em;<br />
}<br />
</pre><br />
* If you want the user to only add or modify items in one place, you can get rid of the Add/Modify buttons in the other places by simply adding display: none: to a set of tags similar to this: fieldset.sheet-filtershortlist~.repcontrol where of course the .sheet tag is whatever tag you specify in your html.<br />
<br />
== Hide Areas ==<br />
[http://jsfiddle.net/LTnd7/ Live Demo]<br />
<br />
You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).<br />
<pre data-language="html" style="margin-bottom: 5px"><div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Stuff and Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_name"><br><br />
<input type="text" placeholder="Description" name="attr_description"><br />
<input type="number" min="0" max="20" value="0" name="attr_level"><br><br />
<textarea placeholder="Fulltext" name="attr_bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>More Stuff</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_alternative-name"><br><br />
<input type="text" placeholder="Description" name="attr_alternative-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br><br />
<textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea><br />
</div><br />
</div><br />
<div><br />
<input type="checkbox" class="sheet-arrow"><br />
<h4>Other Things</h4><br />
<div class="sheet-body"><br />
<input type="text" placeholder="Name" name="attr_class-name"><br><br />
<input type="text" placeholder="Description" name="attr_class-description"><br />
<input type="number" min="0" max="20" value="0" name="attr_class-level"><br><br />
<textarea placeholder="Fulltext" name="class-bio"></textarea><br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {<br />
float: left;<br />
}<br />
<br />
input.sheet-arrow:checked ~ div.sheet-body {<br />
display: none;<br />
}</pre><br />
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.<br />
<br />
=== Swap Visible Areas ===<br />
[http://jsfiddle.net/yodb4b5w/ Live Demo]<br />
<br />
You can apply the [[#Hide Areas|hide areas]] logic to multiple elements based on the same checkbox, and get swappable behavior:<br />
<pre data-language="html" style="margin-bottom:5px"><div><br />
<input type="checkbox" class="sheet-block-switch"><br />
<div class="sheet-block-a"><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<div class="sheet-block-b"><br />
consectetur adipiscing elit<br />
</div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-block-a,<br />
.sheet-block-switch:checked ~ .sheet-block-b {<br />
display: block;<br />
}<br />
<br />
.sheet-block-b,<br />
.sheet-block-switch:checked ~ .sheet-block-a {<br />
display: none;<br />
}</pre><br />
<br />
=== Tabs ===<br />
[http://jsfiddle.net/z866duoa/ Live demo]<br />
<br />
A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.<br />
<pre data-language="html" style="margin-bottom: 5px"><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span><br />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span><br />
<br />
<div class="sheet-tab-content sheet-tab1"><br />
<h1>Tab 1</h1><br />
Lorem ipsum dolor sit amet<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab2"><br />
<h1>Tab the Second</h1><br />
consectetur adipisicing elit<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab3"><br />
<h1>3rd Tab</h1><br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br />
</div><br />
<br />
<div class="sheet-tab-content sheet-tab4"><br />
<h1>Fourth Tab</h1><br />
Ut enim ad minim veniam<br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }<br />
<br />
input.sheet-tab1:checked ~ div.sheet-tab1,<br />
input.sheet-tab2:checked ~ div.sheet-tab2,<br />
input.sheet-tab3:checked ~ div.sheet-tab3,<br />
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }<br />
<br />
input.sheet-tab {<br />
width: 150px;<br />
height: 20px;<br />
position: relative;<br />
top: 5px;<br />
left: 6px;<br />
margin: -1.5px;<br />
cursor: pointer;<br />
z-index: 1;<br />
opacity: 0;<br />
}<br />
<br />
input.sheet-tab + span::before {<br />
content: attr(title);<br />
border: solid 1px #a8a8a8;<br />
border-bottom-color: black;<br />
text-align: center;<br />
display: inline-block;<br />
background: #fff;<br />
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);<br />
width: 150px;<br />
height: 20px;<br />
font-size: 18px;<br />
position: absolute;<br />
top: 12px;<br />
left: 13px;<br />
}<br />
<br />
input.sheet-tab:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);<br />
border-bottom-color: #fff;<br />
}<br />
<br />
input.sheet-tab:not(:first-child) + span::before { border-left: none; }<br />
<br />
input.sheet-tab2 + span::before {<br />
background: #fee;<br />
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);<br />
left: 163px;<br />
}<br />
<br />
input.sheet-tab2:checked + span::before {<br />
background: #dcdcdc;<br />
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);<br />
border-bottom-color: #fcecec;<br />
}<br />
<br />
input.sheet-tab3 + span::before { left: 313px; }<br />
<br />
input.sheet-tab4 + span::before { left: 463px; }<br />
<br />
div.sheet-tab-content {<br />
border: 1px solid #a8a8a8;<br />
border-top-color: #000;<br />
margin: 2px 0 0 5px;<br />
padding: 5px;<br />
}<br />
<br />
div.sheet-tab2 { background-color: #fcecec; }</pre><br />
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.<br />
<br />
The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.<br />
<br />
== Hexagons ==<br />
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]<br />
<br />
<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px"> <br />
<div class="sheet-inner"><br />
<h4>Stat</h4><br />
<input type="number" style="width: 50%"><br />
</div> <br />
<div class="sheet-corner-1"></div><br />
<div class="sheet-corner-2"></div> <br />
</div></pre><br />
<pre data-language="css" style="margin-top: 5px">.sheet-hex {<br />
width: 100px;<br />
height: 57px;<br />
background-color: #ccc;<br />
background-repeat: no-repeat;<br />
background-position: 50% 50%; <br />
background-size: auto 173px; <br />
position: relative;<br />
float: left;<br />
margin: 25px 5px;<br />
text-align: center;<br />
zoom: 1;<br />
}<br />
<br />
.sheet-hex.sheet-hex-gap {<br />
margin-left: 86px;<br />
}<br />
<br />
.sheet-hex a {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
text-indent: -9999em;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-1,<br />
.sheet-hex .sheet-corner-2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: inherit; <br />
z-index: -2; <br />
overflow: hidden; <br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1 {<br />
z-index:-1;<br />
transform: rotate(60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-2 {<br />
transform: rotate(-60deg);<br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before,<br />
.sheet-hex .sheet-corner-2::before {<br />
width: 173px;<br />
height: 173px;<br />
content: '';<br />
position: absolute;<br />
background: inherit;<br />
top: 0;<br />
left: 0;<br />
z-index: 1;<br />
background: inherit;<br />
background-repeat: no-repeat;<br />
backface-visibility: hidden; <br />
}<br />
<br />
.sheet-hex .sheet-corner-1::before {<br />
transform: rotate(-60deg) translate(-87px, 0px); <br />
transform-origin: 0 0;<br />
}<br />
<br />
.sheet-hex .sheet-corner-2::before {<br />
transform: rotate(60deg) translate(-48px, -11px); <br />
bottom: 0;<br />
}<br />
<br />
/* Custom styles*/<br />
.sheet-hex .sheet-inner { color: #eee; }<br />
<br />
.sheet-hex h4 {<br />
font-family: 'Josefin Sans', sans-serif; <br />
margin: 0; <br />
}<br />
<br />
.sheet-hex hr {<br />
border: 0;<br />
border-top: 1px solid #eee;<br />
width: 60%;<br />
margin: 15px auto;<br />
}<br />
<br />
.sheet-hex p {<br />
font-size: 16px;<br />
font-family: 'Kotta One', serif;<br />
width: 80%;<br />
margin: 0 auto;<br />
}<br />
<br />
.sheet-hex.sheet-hex-1 { background: #74cddb; }<br />
.sheet-hex.sheet-hex-2 { background: #f5c53c; }<br />
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre><br />
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}<br />
<br />
== Clocks ==<br />
[http://jsfiddle.net/m2atx752/ Live Demo]<br />
<br />
CSS gradients can do all kinds of interesting things. Here's an example of creating a clock-shaped representation of a value:<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-harm-section"><br />
<input type="radio" value="0" name="attr_harm" class="sheet-harm-checkbox sheet-harm-0" checked>0<br />
<input type="radio" value="1" name="attr_harm" class="sheet-harm-checkbox sheet-harm-3">3<br />
<input type="radio" value="2" name="attr_harm" class="sheet-harm-checkbox sheet-harm-6">6<br />
<input type="radio" value="3" name="attr_harm" class="sheet-harm-checkbox sheet-harm-9">9<br />
<input type="radio" value="4" name="attr_harm" class="sheet-harm-checkbox sheet-harm-10">10<br />
<input type="radio" value="5" name="attr_harm" class="sheet-harm-checkbox sheet-harm-11">11<br />
<input type="radio" value="6" name="attr_harm" class="sheet-harm-checkbox sheet-harm12">12<br />
<hr><br />
<div class="sheet-clock"></div><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">.sheet-harm-section {<br />
display: inline-block;<br />
text-align: center;<br />
}<br />
<br />
.sheet-clock {<br />
width: 5em;<br />
height: 5em;<br />
display: inline-block;<br />
border-radius: 50%;<br />
background: black;<br />
border: 2px solid black;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-clock {<br />
background: white;<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, white 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-clock {<br />
background-image: linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-clock {<br />
background-image: linear-gradient(180deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-clock {<br />
background-image: linear-gradient(210deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-clock {<br />
background-image: linear-gradient(240deg, transparent 50%, black 50%),<br />
linear-gradient(90deg, white 50%, transparent 50%);<br />
}<br />
<br />
.sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-clock {<br />
background-color: black;<br />
}</pre><br />
<br />
== Cycling Button ==<br />
[http://jsfiddle.net/ecttk61s/ Live Demo]<br />
<br />
You can't make a button that rotates through a list, changing a displayed value. However, you can ''fake'' it!<br />
<br />
The trick lies in layering the radio buttons on top of one another, and changing the z-index based on which input is checked.<br />
* First, set all of the inputs to some baseline z-index.<br />
* Set the first radio input of the group to a z-index higher than the rest.<br />
* For each input, when it is checked, set the z-index of the ''next'' input to something higher than the first input. You don't need to do anything for when the last input is selected, as they'll all be back at their default z-index (which means the first one is on top).<br />
<br />
When the first input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on. The user can also navigate back and forth using arrow keys, or a combination of the tab key (or shift+tab) and the space bar.<br />
<pre data-language="html" style="margin-bottom:5px"><div class="sheet-damage-box"><br />
<input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked><br />
<input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1"><br />
<input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2"><br />
<input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3"><br />
<br />
<span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span><br />
<span class="sheet-damage-box sheet-bashing-damage">&amp;nbsp;/&amp;nbsp; (bashing damage)</span><br />
<span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span><br />
<span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span><br />
</div></pre><br />
<pre data-language="css" style="margin-top:5px">div.sheet-damage-box {<br />
width: 195px;<br />
height: 30px;<br />
position: relative;<br />
}<br />
<br />
input.sheet-damage-box {<br />
width: 30px;<br />
height: 30px;<br />
position: absolute;<br />
z-index: 1;<br />
}<br />
<br />
span.sheet-damage-box {<br />
margin: 10px 0 0 40px;<br />
display: none;<br />
}<br />
<br />
input.sheet-no-damage { z-index: 2; }<br />
<br />
input.sheet-no-damage:checked + input.sheet-bashing-damage,<br />
input.sheet-bashing-damage:checked + input.sheet-lethal-damage,<br />
input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; }<br />
<br />
input.sheet-no-damage:checked ~ span.sheet-no-damage,<br />
input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage,<br />
input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage,<br />
input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }</pre><br />
As you can see, this uses the [[#Hide Areas|show/hide areas]] technique to display a span with some text for each radio input. You could also display an image, an input field, an entire section of the charactersheet, whatever you like.<br />
<br />
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with <code>opacity: 0</code>, and display an image in the same location as the radio button (make sure the image is at a lower z-index than the invisible buttons!) so that the user is apparently clicking on the displayed image to change it.<br />
<br />
<br />
== Sheet Settings ==<br />
<br />
Many official sheets like [https://wiki.roll20.net/GUMSHOE_Official_Sheet GUMSHOE] have a "Sheet Settings" that can be accessed through a cog icon, which have many options to introduce changes to the sheet at will.<br />
<br />
The options are [https://github.com/Roll20/roll20-character-sheets/blob/master/Gumshoe%20Official/sheet.json documented] in the game's .json file under "useroptions" tag and the rest of course in html/css.<br />
<br />
More info can be found in [https://app.roll20.net/forum/post/4364848/slug%7D this forum post]<br />
<br />
== Icon Fonts ==<br />
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example, something like:<br />
<pre data-language="html" style="margin-bottom:5px"><p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p></pre><br />
Would produce:<br />
:<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p><br />
<br />
=== Pictos ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|Pictos|!}}<br />
||{{icon character|Pictos|:}}<br />
||{{icon character|Pictos|S}}<br />
||{{icon character|Pictos|l}}<br />
|-<br />
{{icon character|Pictos|"}}<br />
||{{icon character|Pictos|;}}<br />
||{{icon character|Pictos|T}}<br />
||{{icon character|Pictos|m}}<br />
|-<br />
{{icon character|Pictos|#}}<br />
||{{icon character|Pictos|<}}<br />
||{{icon character|Pictos|U}}<br />
||{{icon character|Pictos|n}}<br />
|-<br />
{{icon character|Pictos|$}}<br />
||{{icon character|Pictos|2==}}<br />
||{{icon character|Pictos|V}}<br />
||{{icon character|Pictos|o}}<br />
|-<br />
{{icon character|Pictos|%}}<br />
||{{icon character|Pictos|>}}<br />
||{{icon character|Pictos|W}}<br />
||{{icon character|Pictos|p}}<br />
|-<br />
{{icon character|Pictos|&}}<br />
||{{icon character|Pictos|?}}<br />
||{{icon character|Pictos|X}}<br />
||{{icon character|Pictos|q}}<br />
|-<br />
{{icon character|Pictos|'}}<br />
||{{icon character|Pictos|@}}<br />
||{{icon character|Pictos|Y}}<br />
||{{icon character|Pictos|r}}<br />
|-<br />
{{icon character|Pictos|(}}<br />
||{{icon character|Pictos|A}}<br />
||{{icon character|Pictos|Z}}<br />
||{{icon character|Pictos|s}}<br />
|-<br />
{{icon character|Pictos|)}}<br />
||{{icon character|Pictos|B}}<br />
||{{icon character|Pictos|[}}<br />
||{{icon character|Pictos|t}}<br />
|-<br />
{{icon character|Pictos|*}}<br />
||{{icon character|Pictos|C}}<br />
||{{icon character|Pictos|\}}<br />
||{{icon character|Pictos|u}}<br />
|-<br />
{{icon character|Pictos|+}}<br />
||{{icon character|Pictos|D}}<br />
||{{icon character|Pictos|]}}<br />
||{{icon character|Pictos|v}}<br />
|-<br />
{{icon character|Pictos|,}}<br />
||{{icon character|Pictos|E}}<br />
||{{icon character|Pictos|^}}<br />
||{{icon character|Pictos|w}}<br />
|-<br />
{{icon character|Pictos|-}}<br />
||{{icon character|Pictos|F}}<br />
||{{icon character|Pictos|_}}<br />
||{{icon character|Pictos|x}}<br />
|-<br />
{{icon character|Pictos|.}}<br />
||{{icon character|Pictos|G}}<br />
||{{icon character|Pictos|`}}<br />
||{{icon character|Pictos|y}}<br />
|-<br />
{{icon character|Pictos|/}}<br />
||{{icon character|Pictos|H}}<br />
||{{icon character|Pictos|a}}<br />
||{{icon character|Pictos|z}}<br />
|-<br />
{{icon character|Pictos|0}}<br />
||{{icon character|Pictos|I}}<br />
||{{icon character|Pictos|b}}<br />
||{{icon character|Pictos|{}}<br />
|-<br />
{{icon character|Pictos|1}}<br />
||{{icon character|Pictos|J}}<br />
||{{icon character|Pictos|c}}<br />
||{{icon character|Pictos|{{!}}}}<br />
|-<br />
{{icon character|Pictos|2}}<br />
||{{icon character|Pictos|K}}<br />
||{{icon character|Pictos|d}}<br />
||{{icon character|Pictos|{{)}}}}<br />
|-<br />
{{icon character|Pictos|3}}<br />
||{{icon character|Pictos|L}}<br />
||{{icon character|Pictos|e}}<br />
||{{icon character|Pictos|~}}<br />
|-<br />
{{icon character|Pictos|4}}<br />
||{{icon character|Pictos|M}}<br />
||{{icon character|Pictos|f}}<br />
|-<br />
{{icon character|Pictos|5}}<br />
||{{icon character|Pictos|N}}<br />
||{{icon character|Pictos|g}}<br />
|-<br />
{{icon character|Pictos|6}}<br />
||{{icon character|Pictos|O}}<br />
||{{icon character|Pictos|h}}<br />
|-<br />
{{icon character|Pictos|7}}<br />
||{{icon character|Pictos|P}}<br />
||{{icon character|Pictos|i}}<br />
|-<br />
{{icon character|Pictos|8}}<br />
||{{icon character|Pictos|Q}}<br />
||{{icon character|Pictos|j}}<br />
|-<br />
{{icon character|Pictos|9}}<br />
||{{icon character|Pictos|R}}<br />
||{{icon character|Pictos|k}}<br />
|}<br />
<br />
=== Pictos Custom ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Custom|[}}<br />
|-<br />
{{icon character|Pictos Custom|a}}<br />
|-<br />
{{icon character|Pictos Custom|e}}<br />
|-<br />
{{icon character|Pictos Custom|i}}<br />
|-<br />
{{icon character|Pictos Custom|o}}<br />
|-<br />
{{icon character|Pictos Custom|p}}<br />
|-<br />
{{icon character|Pictos Custom|q}}<br />
|-<br />
{{icon character|Pictos Custom|r}}<br />
|-<br />
{{icon character|Pictos Custom|t}}<br />
|-<br />
{{icon character|Pictos Custom|u}}<br />
|-<br />
{{icon character|Pictos Custom|w}}<br />
|-<br />
{{icon character|Pictos Custom|y}}<br />
|}<br />
<br />
=== Pictos Three ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character|Pictos Three|a}}<br />
|-<br />
{{icon character|Pictos Three|b}}<br />
|-<br />
{{icon character|Pictos Three|c}}<br />
|-<br />
{{icon character|Pictos Three|d}}<br />
|-<br />
{{icon character|Pictos Three|e}}<br />
|-<br />
{{icon character|Pictos Three|f}}<br />
|-<br />
{{icon character|Pictos Three|g}}<br />
|-<br />
{{icon character|Pictos Three|h}}<br />
|-<br />
{{icon character|Pictos Three|i}}<br />
|-<br />
{{icon character|Pictos Three|j}}<br />
|-<br />
{{icon character|Pictos Three|k}}<br />
|-<br />
{{icon character|Pictos Three|l}}<br />
|}<br />
<br />
=== dicefontd4 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd4|0|font-size:200%}}<br />
||{{icon character|dicefontd4|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|@|font-size:200%}}<br />
||{{icon character|dicefontd4|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|A|font-size:200%}}<br />
||{{icon character|dicefontd4|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|B|font-size:200%}}<br />
||{{icon character|dicefontd4|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|C|font-size:200%}}<br />
||{{icon character|dicefontd4|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|D|font-size:200%}}<br />
||{{icon character|dicefontd4|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|E|font-size:200%}}<br />
||{{icon character|dicefontd4|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|F|font-size:200%}}<br />
||{{icon character|dicefontd4|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|G|font-size:200%}}<br />
||{{icon character|dicefontd4|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|H|font-size:200%}}<br />
||{{icon character|dicefontd4|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|I|font-size:200%}}<br />
||{{icon character|dicefontd4|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|J|font-size:200%}}<br />
||{{icon character|dicefontd4|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|K|font-size:200%}}<br />
||{{icon character|dicefontd4|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|L|font-size:200%}}<br />
||{{icon character|dicefontd4|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|M|font-size:200%}}<br />
||{{icon character|dicefontd4|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|N|font-size:200%}}<br />
||{{icon character|dicefontd4|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|O|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd4|P|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd6 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd6|0}}<br />
||{{icon character|dicefontd6|a}}<br />
|-<br />
{{icon character|dicefontd6|@}}<br />
||{{icon character|dicefontd6|b}}<br />
|-<br />
{{icon character|dicefontd6|A}}<br />
||{{icon character|dicefontd6|c}}<br />
|-<br />
{{icon character|dicefontd6|B}}<br />
||{{icon character|dicefontd6|d}}<br />
|-<br />
{{icon character|dicefontd6|C}}<br />
||{{icon character|dicefontd6|e}}<br />
|-<br />
{{icon character|dicefontd6|D}}<br />
||{{icon character|dicefontd6|f}}<br />
|-<br />
{{icon character|dicefontd6|E}}<br />
||{{icon character|dicefontd6|g}}<br />
|-<br />
{{icon character|dicefontd6|F}}<br />
||{{icon character|dicefontd6|h}}<br />
|-<br />
{{icon character|dicefontd6|G}}<br />
||{{icon character|dicefontd6|i}}<br />
|-<br />
{{icon character|dicefontd6|H}}<br />
||{{icon character|dicefontd6|j}}<br />
|-<br />
{{icon character|dicefontd6|I}}<br />
||{{icon character|dicefontd6|k}}<br />
|-<br />
{{icon character|dicefontd6|J}}<br />
||{{icon character|dicefontd6|l}}<br />
|-<br />
{{icon character|dicefontd6|K}}<br />
||{{icon character|dicefontd6|m}}<br />
|-<br />
{{icon character|dicefontd6|L}}<br />
||{{icon character|dicefontd6|n}}<br />
|-<br />
{{icon character|dicefontd6|M}}<br />
||{{icon character|dicefontd6|o}}<br />
|-<br />
{{icon character|dicefontd6|N}}<br />
||{{icon character|dicefontd6|p}}<br />
|-<br />
{{icon character|dicefontd6|O}}<br />
||{{icon character|dicefontd6|q}}<br />
|-<br />
{{icon character|dicefontd6|P}}<br />
||{{icon character|dicefontd6|r}}<br />
|-<br />
{{icon character|dicefontd6|Q}}<br />
|-<br />
{{icon character|dicefontd6|R}}<br />
|}<br />
<br />
=== dicefontd8 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd8|0|font-size:200%}}<br />
||{{icon character|dicefontd8|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|@|font-size:200%}}<br />
||{{icon character|dicefontd8|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|A|font-size:200%}}<br />
||{{icon character|dicefontd8|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|B|font-size:200%}}<br />
||{{icon character|dicefontd8|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|C|font-size:200%}}<br />
||{{icon character|dicefontd8|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|D|font-size:200%}}<br />
||{{icon character|dicefontd8|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|E|font-size:200%}}<br />
||{{icon character|dicefontd8|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|F|font-size:200%}}<br />
||{{icon character|dicefontd8|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|G|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd8|H|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd10 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd10|0|font-size:200%}}<br />
||{{icon character|dicefontd10|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|@|font-size:200%}}<br />
||{{icon character|dicefontd10|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|A|font-size:200%}}<br />
||{{icon character|dicefontd10|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|B|font-size:200%}}<br />
||{{icon character|dicefontd10|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|C|font-size:200%}}<br />
||{{icon character|dicefontd10|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|D|font-size:200%}}<br />
||{{icon character|dicefontd10|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|E|font-size:200%}}<br />
||{{icon character|dicefontd10|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|F|font-size:200%}}<br />
||{{icon character|dicefontd10|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|G|font-size:200%}}<br />
||{{icon character|dicefontd10|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|H|font-size:200%}}<br />
||{{icon character|dicefontd10|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|I|font-size:200%}}<br />
||{{icon character|dicefontd10|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|J|font-size:200%}}<br />
||{{icon character|dicefontd10|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|K|font-size:200%}}<br />
||{{icon character|dicefontd10|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|L|font-size:200%}}<br />
||{{icon character|dicefontd10|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|M|font-size:200%}}<br />
||{{icon character|dicefontd10|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|N|font-size:200%}}<br />
||{{icon character|dicefontd10|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|O|font-size:200%}}<br />
||{{icon character|dicefontd10|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|P|font-size:200%}}<br />
||{{icon character|dicefontd10|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|Q|font-size:200%}}<br />
||{{icon character|dicefontd10|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|R|font-size:200%}}<br />
||{{icon character|dicefontd10|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd10|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd12 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd12|0|font-size:200%}}<br />
||{{icon character|dicefontd12|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|@|font-size:200%}}<br />
||{{icon character|dicefontd12|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|A|font-size:200%}}<br />
||{{icon character|dicefontd12|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|B|font-size:200%}}<br />
||{{icon character|dicefontd12|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|C|font-size:200%}}<br />
||{{icon character|dicefontd12|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|D|font-size:200%}}<br />
||{{icon character|dicefontd12|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|E|font-size:200%}}<br />
||{{icon character|dicefontd12|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|F|font-size:200%}}<br />
||{{icon character|dicefontd12|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|G|font-size:200%}}<br />
||{{icon character|dicefontd12|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|H|font-size:200%}}<br />
||{{icon character|dicefontd12|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|I|font-size:200%}}<br />
||{{icon character|dicefontd12|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|J|font-size:200%}}<br />
||{{icon character|dicefontd12|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|K|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd12|L|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd20 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd20|0|font-size:200%}}<br />
||{{icon character|dicefontd20|a|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|@|font-size:200%}}<br />
||{{icon character|dicefontd20|b|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|A|font-size:200%}}<br />
||{{icon character|dicefontd20|c|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|B|font-size:200%}}<br />
||{{icon character|dicefontd20|d|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|C|font-size:200%}}<br />
||{{icon character|dicefontd20|e|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|D|font-size:200%}}<br />
||{{icon character|dicefontd20|f|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|E|font-size:200%}}<br />
||{{icon character|dicefontd20|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|F|font-size:200%}}<br />
||{{icon character|dicefontd20|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|G|font-size:200%}}<br />
||{{icon character|dicefontd20|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|H|font-size:200%}}<br />
||{{icon character|dicefontd20|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|I|font-size:200%}}<br />
||{{icon character|dicefontd20|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|J|font-size:200%}}<br />
||{{icon character|dicefontd20|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|K|font-size:200%}}<br />
||{{icon character|dicefontd20|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|L|font-size:200%}}<br />
||{{icon character|dicefontd20|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|M|font-size:200%}}<br />
||{{icon character|dicefontd20|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|N|font-size:200%}}<br />
||{{icon character|dicefontd20|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|O|font-size:200%}}<br />
||{{icon character|dicefontd20|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|P|font-size:200%}}<br />
||{{icon character|dicefontd20|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|Q|font-size:200%}}<br />
||{{icon character|dicefontd20|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|R|font-size:200%}}<br />
||{{icon character|dicefontd20|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|S|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd20|T|font-size:200%}}<br />
|}<br />
<br />
=== dicefontd30 ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon !! !! Character !! Icon !! !! Character !! Icon<br />
|-<br />
{{icon character|dicefontd30|0|font-size:200%}}<br />
||{{icon character|dicefontd30|L|font-size:200%}}<br />
||{{icon character|dicefontd30|g|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|1|font-size:200%}}<br />
||{{icon character|dicefontd30|M|font-size:200%}}<br />
||{{icon character|dicefontd30|h|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|2|font-size:200%}}<br />
||{{icon character|dicefontd30|N|font-size:200%}}<br />
||{{icon character|dicefontd30|i|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|3|font-size:200%}}<br />
||{{icon character|dicefontd30|O|font-size:200%}}<br />
||{{icon character|dicefontd30|j|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|4|font-size:200%}}<br />
||{{icon character|dicefontd30|P|font-size:200%}}<br />
||{{icon character|dicefontd30|k|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|5|font-size:200%}}<br />
||{{icon character|dicefontd30|Q|font-size:200%}}<br />
||{{icon character|dicefontd30|l|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|6|font-size:200%}}<br />
||{{icon character|dicefontd30|R|font-size:200%}}<br />
||{{icon character|dicefontd30|m|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|7|font-size:200%}}<br />
||{{icon character|dicefontd30|S|font-size:200%}}<br />
||{{icon character|dicefontd30|n|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|8|font-size:200%}}<br />
||{{icon character|dicefontd30|T|font-size:200%}}<br />
||{{icon character|dicefontd30|o|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|@|font-size:200%}}<br />
||{{icon character|dicefontd30|U|font-size:200%}}<br />
||{{icon character|dicefontd30|p|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|A|font-size:200%}}<br />
||{{icon character|dicefontd30|V|font-size:200%}}<br />
||{{icon character|dicefontd30|q|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|B|font-size:200%}}<br />
||{{icon character|dicefontd30|W|font-size:200%}}<br />
||{{icon character|dicefontd30|r|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|C|font-size:200%}}<br />
||{{icon character|dicefontd30|X|font-size:200%}}<br />
||{{icon character|dicefontd30|s|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|D|font-size:200%}}<br />
||{{icon character|dicefontd30|Y|font-size:200%}}<br />
||{{icon character|dicefontd30|t|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|E|font-size:200%}}<br />
||{{icon character|dicefontd30|Z|font-size:200%}}<br />
||{{icon character|dicefontd30|u|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|F|font-size:200%}}<br />
||{{icon character|dicefontd30|a|font-size:200%}}<br />
||{{icon character|dicefontd30|v|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|G|font-size:200%}}<br />
||{{icon character|dicefontd30|b|font-size:200%}}<br />
||{{icon character|dicefontd30|w|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|H|font-size:200%}}<br />
||{{icon character|dicefontd30|c|font-size:200%}}<br />
||{{icon character|dicefontd30|x|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|I|font-size:200%}}<br />
||{{icon character|dicefontd30|d|font-size:200%}}<br />
||{{icon character|dicefontd30|y|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|J|font-size:200%}}<br />
||{{icon character|dicefontd30|e|font-size:200%}}<br />
||{{icon character|dicefontd30|z|font-size:200%}}<br />
|-<br />
{{icon character|dicefontd30|K|font-size:200%}}<br />
||{{icon character|dicefontd30|f|font-size:200%}}<br />
|}<br />
<br />
=== fontello ===<br />
{| class="wikitable" style="text-align:center"<br />
|-<br />
! Character !! Icon<br />
|-<br />
{{icon character extended|fontello|&#xe800;|&amp;#xe800;}}<br />
|-<br />
{{icon character extended|fontello|&#xe801;|&amp;#xe801;}}<br />
|-<br />
{{icon character extended|fontello|&#xe802;|&amp;#xe802;}}<br />
|-<br />
{{icon character extended|fontello|&#xe803;|&amp;#xe803;}}<br />
|-<br />
{{icon character extended|fontello|&#xe804;|&amp;#xe804;}}<br />
|-<br />
{{icon character extended|fontello|&#xe805;|&amp;#xe805;}}<br />
|-<br />
{{icon character extended|fontello|&#xe806;|&amp;#xe806;}}<br />
|-<br />
{{icon character extended|fontello|&#xe807;|&amp;#xe807;}}<br />
|-<br />
{{icon character extended|fontello|&#xe808;|&amp;#xe808;}}<br />
|-<br />
{{icon character extended|fontello|&#xe809;|&amp;#xe809;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80a;|&amp;#xe80a;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80b;|&amp;#xe80b;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80c;|&amp;#xe80c;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80d;|&amp;#xe80d;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80e;|&amp;#xe80e;}}<br />
|-<br />
{{icon character extended|fontello|&#xe80f;|&amp;#xe80f;}}<br />
|-<br />
{{icon character extended|fontello|&#xe810;|&amp;#xe810;}}<br />
|-<br />
{{icon character extended|fontello|&#xe811;|&amp;#xe811;}}<br />
|-<br />
{{icon character extended|fontello|&#xe812;|&amp;#xe812;}}<br />
|-<br />
{{icon character extended|fontello|&#xe813;|&amp;#xe813;}}<br />
|-<br />
{{icon character extended|fontello|&#xf008;|&amp;#xf008;}}<br />
|}<br />
<br />
== Styling Roll Buttons ==<br />
Want a roll button that doesn't have a d20 image in it? Simple!<br />
<pre data-language="css">button[type=roll].sheet-blank-roll-button::before { content: ''; }</pre><br />
The d20 is a single character with the [[#dicefontd20|dicefontd20]] font-family in the button's <code>::before</code> pseudo-element. Setting the content to an empty string removes it. If you want to put something other than a d20 in its place, you'll have to change the font-family as well.<br />
<br />
== Replicating the JavaScript Math Library ==<br />
{{note|With the advent of [[Sheet Worker Scripts]], the value of these tricks is diminished, as you can use the Math library directly with a sheet worker. However, they are kept here for legacy purposes, and because they still work.}}<br />
<br />
It is possible to replicate most of the functionality of JavaScript's Math library with autocalc fields. While this isn't technically ''CSS'' Wizardry, it is included in this article for ease of discovery. Functions with an asterisk (*) produce approximate results; you can increase their accuracy by adding iterations to the computation.<br />
<br />
Some functions below may reference other functions below.<br />
<br />
=== Constants ===<br />
The following are constants in JavaScript, so there's no reason to not have them as constants if you happen to need them.<br />
<br />
==== E ====<br />
E is Euler's constant, the base for the [[wikipedia:natural logarithm|natural logarithm]]. The exact value is <code>Sum[1 / n!, {n, 0, Infinity}]</code>. <code>Math.log(Math.E)</code> is 1.<br />
<pre data-language="html"><input type="hidden" name="attr_cE" value="2.718281828459045"></pre><br />
<br />
==== LN2 ====<br />
LN2 is the value of <code>Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN2" value="0.6931471805599453"></pre><br />
<br />
==== LN10 ====<br />
LN10 is the value of <code>Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLN10" value="2.302585092994046"></pre><br />
<br />
==== LOG2E ====<br />
LOG2E is the base-2 logarithm of E. In other words, the value of <code>Math.log2(Math.E)</code>, or <code>1 / Math.log(2)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG2E" value="1.4426950408889634"></pre><br />
<br />
==== LOG10E ====<br />
LOG10E is the base-10 logarithm of E. In other words, the value of <code>Math.log10(Math.E)</code>, or <code>1 / Math.log(10)</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cLOG10E" value="0.4342944819032518"></pre><br />
<br />
==== PI ====<br />
PI is the radio between the circumference and diameter of a circle.<br />
<pre data-language="html"><input type="hidden" name="attr_cPI" value="3.141592653589793"></pre><br />
<br />
==== SQRT1_2 ====<br />
SQRT1_2 is the square root of 1/2 (0.5).<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT1_2" value="0.7071067811865476"></pre><br />
<br />
==== SQRT2 ====<br />
SQRT2 is the square root of 2.<br />
<pre data-language="html"><input type="hidden" name="attr_cSQRT2" value="1.4142135623730951"></pre><br />
<br />
=== Trivially Represented ===<br />
The following functions you can use in autocalc fields easily, either because they're simple or because they're directly available.<br />
<br />
==== abs(x) ====<br />
If <code>x < 0</code>, the result is <code>-1 * x</code>. Otherwise, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_abs" value="abs(@{x})" disabled></pre><br />
<br />
==== cbrt(x) ====<br />
Cube root: <code>cbrt(x)^3 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_cbrt" value="(@{x}**(1/3))" disabled></pre><br />
<br />
==== ceil(x) ====<br />
Rounds towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_ceil" value="ceil(@{x})" disabled></pre><br />
<br />
==== exp(x) ====<br />
E^x.<br />
<pre data-language="html"><input type="hidden" name="attr_exp" value="(@{cE}**@{x})" disabled></pre><br />
<br />
==== floor(x) ====<br />
Rounds towards negative infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_floor" value="floor(@{x})" disabled></pre><br />
<br />
==== hypot(x, y, z, ...) ====<br />
Hypotenuse: <code>sqrt(x^2 + y^2 + z^2 + ...)</code>.<br />
<pre data-language="html"><!-- include as many values as you need --><br />
<input type="hidden" name="attr_hypot" value="((@{x}**2 + @{y}**2 + @{z}**2)**0.5)" disabled></pre><br />
<br />
==== max(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>x</code>, while if <code>x < y</code>, the result is <code>y</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_max_xy" value="(((@{x} + @{y}) + abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyz" value="(((@{max_xy} + @{z}) + abs(@{max_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_max_xyzw" value="(((@{max_xyz} + @{w}) + abs(@{max_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== min(x, y, z, ...) ====<br />
If <code>x > y</code>, the result is <code>y</code>, while if <code>x < y</code>, the result is <code>x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_min_xy" value="(((@{x} + @{y}) - abs(@{x} - @{y})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyz" value="(((@{min_xy} + @{z}) - abs(@{min_xy} - @{z})) / 2)" disabled><br />
<input type="hidden" name="attr_min_xyzw" value="(((@{min_xyz} + @{w}) - abs(@{min_xyz} - @{w})) / 2)" disabled></pre><br />
<br />
==== pow(x, y) ====<br />
<code>x^y</code>, this is <code>x</code> multiplied by itself <code>y</code> times; fractional values for <code>y</code> are permissible.<br />
<pre data-language="html"><input type="number" name="attr_pow" value="(@{x}**@{y})" disabled></pre><br />
<br />
==== round(x) ====<br />
Round towards the nearest integer. If the fractional part is 0.5, it will round towards positive infinity.<br />
<pre data-language="html"><input type="hidden" name="attr_round" value="round(@{x})" disabled></pre><br />
<br />
==== sign(x) ====<br />
If <code>x < 0</code>, the result is -1, while if <code>x > 0</code>, the result is 1 and if <code>x = 0</code>, the result is 0. Unfortunately, because of the nature of the calculation, we cannot correctly calculate the final possibility. This works for all values of <code>x</code> other than 0, however.<br />
<pre data-language="html"><input type="hidden" name="attr_sign" value="(@{x} / abs(@{x}))" disabled></pre><br />
<br />
==== sqrt(x) ====<br />
Square root: <code>sqrt(x)^2 = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_sqrt" value="(@{x}**0.5)" disabled></pre><br />
<br />
==== trunc(x) ====<br />
Round towards 0.<br />
<pre data-language="html"><input type="hidden" name="attr_trunc" value="(@{sign} * floor(abs(@{x})))" disabled></pre><br />
<br />
=== Trigonometric Functions ===<br />
Trigonometric functions deal with angles and the relations between the sides of a triangle.<br />
<br />
==== *acos(x) ====<br />
Inverse function of <code>cos</code>; <code>acos(cos(x)) = x</code>, and if <code>abs(x) <= 1</code>, <code>cos(acos(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_acos" value="(@{cPI} / 2 - @{asin})" disabled></pre><br />
<br />
==== *acosh(x) ====<br />
Hyperbolic arccosine.<br />
<br />
{{note|See [[#*log(x)|log(x)]] for the definition of <code>@{log_2x}</code>}}<br />
<pre data-language="html"><input type="hidden" name="attr_acosh" value="(@{log_2x} - (1 / (4 * @{x}**2) + 3 / (32 * @{x}**4) + 15 / (288 * @{x}**6) + 105 / (384 * @{x}**8)))" disabled></pre><br />
<br />
==== *asin(x) ====<br />
Inverse function of <code>sin</code>; <code>asin(sin(x))</code> = x, and if <code>abs(x) <= 1</code>, <code>sin(asin(x)) = x</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_asin" value="(@{x} + @{x}**3 / 6 + (3 * @{x}**5) / 40 + (15 * @{x}**7) / 336)" disabled></pre><br />
<br />
==== *asinh(x) ====<br />
Hyperbolic arcsine.<br />
<pre data-language="html"><input type="hidden" name="attr_asinh" value="(@{x} - @{x}**3 / 6 + 3 * @{x}**5 / 40 - 15 * @{x}**7 / 336)" disabled></pre><br />
<br />
==== *atan(x) ====<br />
Inverse function of <code>tan</code>; <code>atan(tan(x)) = x = tan(atan(x))</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} - @{x}**3 / 3 + @{x}**5 / 5 - @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atanh(x) ====<br />
Hyperbolic arctangent.<br />
<pre data-language="html"><input type="hidden" name="attr_atan" value="(@{x} + @{x}**3 / 3 + @{x}**5 / 5 + @{x}**7 / 7)" disabled></pre><br />
<br />
==== *atan2(y, x) ====<br />
The same as <code>atan(y / x)</code>, although the actual Math library function gracefully handles <code>x = 0</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_atan2" value="((@{y} / @{x}) - (@{y} / @{x})**3 / 3 + (@{y} / @{x})**5 / 5 - (@{y} / @{x})**7 / 7)" disabled></pre><br />
<br />
==== *cos(x) ====<br />
The ratio of the adjacent side of a triganle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_cos" value="(1 - @{x}**2 / 2 + @{x}**4 / 24 - @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *cosh(x) ====<br />
Hyperbolic cosine.<br />
<pre data-language="html"><input type="hidden" name="attr_cosh" value="(1 + @{x}**2 / 2 + @{x}**4 / 24 + @{x}**6 / 720 + @{x}**8 / 40320)" disabled></pre><br />
<br />
==== *sin(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the hypotenuse.<br />
<pre data-language="html"><input type="hidden" name="attr_sin" value="(@{x} - @{x}**3 / 6 + @{x}**5 / 120 - @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *sinh(x) ====<br />
Hyperbolic sine.<br />
<pre data-language="html"><input type="hidden" name="attr_sinh" value="(@{x} + @{x}**3 / 6 + @{x}**5 / 120 + @{x}**7 / 5040)" disabled></pre><br />
<br />
==== *tan(x) ====<br />
The ratio of the opposite side of a triangle from the given angle (on a right triangle) to the adjacent side.<br />
<pre data-language="html"><input type="hidden" name="attr_tan" value="(@{sin} / @{cos})" disabled></pre><br />
<br />
==== *tanh(x) ====<br />
Hyperbolic tangent.<br />
<pre data-language="html"><input type="hidden" name="attr_tanh" value="(@{sinh} / @{cosh})" disabled></pre><br />
<br />
=== Other Transcendental Functions ===<br />
Transcendental functions cannot be expressed with a finite number of algebraic operations. The [[#Trigonometric Functions|trigonometric functions]] are transcendental as well.<br />
<br />
==== *log(x) ====<br />
Natural logarithm (log base E) of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log" value="(@{x} - @{x}**2 / 2 + @{x}**3 / 3 - @{x}**4 / 4 + @{x}**5 / 5 - @{x}**6 / 6 + @{x}**7 / 7)" disabled><br />
<!-- used for acosh, above --><br />
<input type="hidden" name="attr_log_2x" value="(@{cLN2} + @{log})" disabled></pre><br />
<br />
==== *log1p(x) ====<br />
<code>log(1 + x)</code><br />
<pre data-language="html"><input type="hidden" name="attr_log1p" value="((1 + @{x}) - (1 + @{x})**2 / 2 + (1 + @{x})**3 / 3 - (1 + @{x})**4 / 4 + (1 + @{x})**5 / 5 - (1 + @{x})**6 / 6 + (1 + @{x})**7 / 7)" disabled></pre><br />
<br />
==== *log10(x) ====<br />
Log base 10 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log10" value="(@{log} / @{cLN10})" disabled></pre><br />
<br />
==== *log2(x) ====<br />
Log base 2 of x.<br />
<pre data-language="html"><input type="hidden" name="attr_log2" value="(@{log} / @{cLN2})" disabled></pre><br />
<br />
=== Other Functions ===<br />
The following functions don't really have a mathematical categorization.<br />
<br />
==== *clz32(x) ====<br />
The number of leading zero bits in a 32-bit number. For example, the number 64 is represented in binary as <code>00000000000000000000000001000000</code>, so <code>clz32(64) = 25</code>.<br />
<pre data-language="html"><input type="hidden" name="attr_clz32" value="(32 - ceil(@{log1p} / @{cLN2}))" disabled></pre><br />
<br />
=== Impossible to Implement ===<br />
Some functions cannot be implemented with autocalc fields.<br />
<br />
==== fround(x) ====<br />
Rounds a number to the nearest 32-bit representable floating point number.<br />
<br />
==== imul(x, y) ====<br />
Perform 32-bit multiplication. This is functionally equivalent to <code>trunc(x * y)</code>, except when large numbers get involved.<br />
<br />
==== random() ====<br />
Generate a random number in the range [0, 1). While this can't be done with autocalc fields, you ''can'' roll dice!<br />
<br />
[[Category:Tips]]<br />
[[Category:User content]]</div>1540094