From 526b0f1d9fe46bb408803eccb7b2958e661d2428 Mon Sep 17 00:00:00 2001
From: Riernar <Riernar@users.noreply.github.com>
Date: Thu, 21 Jan 2021 22:53:44 +0100
Subject: [PATCH] Fixed tabs not working on firefox (recoded)

---
 Ars_Magica_5th/Ars_Magica_5th.css    | 195 ++++++++++-----------------
 Ars_Magica_5th/Ars_Magica_5th.html   |  59 ++++++--
 Ars_Magica_5th/Readme.md             |  74 ++++++++--
 Ars_Magica_5th/documentation.md      |   3 +
 Ars_Magica_5th/parts/__init__.py     |  10 ++
 Ars_Magica_5th/parts/translations.py |   3 +-
 Ars_Magica_5th/requirements.txt      |   2 +
 Ars_Magica_5th/template.html         |  54 ++++++--
 Ars_Magica_5th/translation.json      |   3 +
 9 files changed, 242 insertions(+), 161 deletions(-)
 create mode 100644 Ars_Magica_5th/documentation.md
 create mode 100644 Ars_Magica_5th/requirements.txt

diff --git a/Ars_Magica_5th/Ars_Magica_5th.css b/Ars_Magica_5th/Ars_Magica_5th.css
index 440cfc5f38..bcaaf3a9f4 100644
--- a/Ars_Magica_5th/Ars_Magica_5th.css
+++ b/Ars_Magica_5th/Ars_Magica_5th.css
@@ -85,74 +85,77 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0;
 }
 
-
-
 div.sheet-padding {
      padding-left: 5px; 
      padding-right: 5px;
 }
+
+.sheet-buttonbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 5px 0 0 0;
+    background: transparent;
+}
+.sheet-navbuttons,
+.sheet-functions {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+    flex: 1 0 33%;
+}
+.sheet-navbuttons {
+    text-align: left;
+}
+.sheet-functions {
+    text-align: right;
+    justify-content: flex-end;
+}
+
 div.sheet-tab-content { 
-    display: none; 
+    display: none;
 }
 
-input.sheet-tab1:checked ~ div.sheet-tab1,
-input.sheet-tab2:checked ~ div.sheet-tab2,
-input.sheet-tab3:checked ~ div.sheet-tab3,
-input.sheet-tab4:checked ~ div.sheet-tab4,
-input.sheet-tab5:checked ~ div.sheet-tab5,
-input.sheet-tab6:checked ~ div.sheet-tab6,
-input.sheet-tab7:checked ~ div.sheet-tab7 {
-    display:block;
+.sheet-tabstoggle[value="character"] ~ div.sheet-tab1,
+.sheet-tabstoggle[value="abilities"] ~ div.sheet-tab2,
+.sheet-tabstoggle[value="magic"] ~ div.sheet-tab3,
+.sheet-tabstoggle[value="combat"] ~ div.sheet-tab4,
+.sheet-tabstoggle[value="spells"] ~ div.sheet-tab5,
+.sheet-tabstoggle[value="doc"] ~ div.sheet-tab6 {
+    display: block;
 }
 
-input.sheet-tab {
-    width: 130px;
-    height: 20px;
-    position: relative;
-    left: 6px; 
-    margin: 0px ;
-    cursor: pointer;
-    z-index: 1;
-    border-radius: 5px 5px 5px 5px;
-    
-}
-
-input.sheet-tab:before
-{
-    content: attr(title);
+.sheet-tabbutton {
     font-family: 'Uncial Antiqua', cursive;
     color:white;
     text-shadow:0px 0px 0.5em black;
-
     text-align: center;
-    display:block;
-    
-    background: #fff;
-    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ars_Magica_5th/images/metalbar.jpg');
-
-    
-    width: 130px;
-    height: 20px;
     font-size: 16px;
     font-weight:700;
+
+    background: transparent;
+    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ars_Magica_5th/images/metalbar.jpg');
+
+    padding: 1px 12px 1px;
+    height: 20px;
     border-radius: 5px 5px 0px 0px ;
-    
     border:1px solid black;
-    
 }
 
-input.sheet-tab:checked:before
-{
+.sheet-tabbutton:hover,
+.sheet-tabstoggle[value="character"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_character"],
+.sheet-tabstoggle[value="abilities"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_abilities"],
+.sheet-tabstoggle[value="magic"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_magic"],
+.sheet-tabstoggle[value="combat"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_combat"],
+.sheet-tabstoggle[value="spells"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_spells"],
+.sheet-tabstoggle[value="doc"] ~ .sheet-buttonbar > .sheet-navbuttons > button.sheet-tabbutton[name="act_doc"] {
     background: #dcdcdc;
     background-image:url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ars_Magica_5th/images/metalbar_dark.jpg);
     text-shadow:0px 0px 0.5em black,0px 0px 0.5em black;
 }
 
-input.sheet-tab:not(:first-child):before
-{
-    border-left: none;
-}
-
 div.sheet-tab-content {
 	font-size: 14px;
     width: 835px;
@@ -174,6 +177,7 @@ div.sheet-top_bar {
     margin-right:auto;
     margin-left:auto;
     }
+
 /*=======================End of tabs=======================*/
 /*----------- End of Font Face -------------*/
 /*----------- Banner -------------*/
@@ -968,101 +972,55 @@ button.sheet-critical:before {
     display: none;
 }
 
-button.sheet-botch[type=roll] {
+.charsheet button.sheet-reroll[type=roll], 
+.charsheet button.sheet-botch[type=roll],
+.charsheet button.sheet-critical[type=roll] 
+{
     font-family: 'Uncial Antiqua', cursive;
     color:white;
     text-shadow:0px 0px 0.5em black;
 
     text-align: center;
     display: inline-block;
-    
-    background: #fff;
-    background: -moz-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
-    background: -webkit-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
-    background: -ms-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
-    background: -o-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
-    background: linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
-    
+
     width: 70px;
     height: 20px;
     font-size: 16px;
     line-height:18px;
     font-weight:700;
     border-radius: 8px 8px 2px 2px;
-	margin-right: 0px;
-	margin-left: 8px;
+	margin: 0px;
     
     border:2px solid black;
 }
-button.sheet-reroll[type=roll] {
-    font-family: 'Uncial Antiqua', cursive;
-    color:white;
-    text-shadow:0px 0px 0.5em black;
 
-    text-align: center;
-    display: inline-block;
-    
+
+button.sheet-reroll[type=roll] {
     background: #fff;
     background: -moz-linear-gradient(to top, #356e7A, #205a66, #169E9C);
     background: -webkit-linear-gradient(to top, #356e7A, #205a66, #169E9C);
     background: -ms-linear-gradient(to top, #356e7A, #205a66, #169E9C);
     background: -o-linear-gradient(to top, #356e7A, #205a66, #169E9C);
     background: linear-gradient(to top, #356e7A, #205a66, #169E9C);
-    
-    width: 70px;
-    height: 20px;
-    font-size: 16px;
-    line-height:18px;
-    font-weight:700;
-    border-radius: 8px 8px 2px 2px;
-	margin-left: 0px;
-    
-    border:2px solid black;
+}
+button.sheet-botch[type=roll] {    
+    background: #fff;
+    background: -moz-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
+    background: -webkit-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
+    background: -ms-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
+    background: -o-linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
+    background: linear-gradient(to top, #651f1f, #651f1f, #ee3f2f);
 }
 button.sheet-critical[type=roll] {
-    font-family: 'Uncial Antiqua', cursive;
-    color:white;
-    text-shadow:0px 0px 0.5em black;
-
-    text-align: center;
-    display: inline-block;
-    
     background: #fff;
     background: -moz-linear-gradient(to top, #916a08, #785807, #DAA520);
     background: -webkit-linear-gradient(to top, #916a08, #785807, #DAA520);
     background: -ms-linear-gradient(to top, #916a08, #785807, #DAA520);
     background: -o-linear-gradient(to top, #916a08, #785807, #DAA520);
     background: linear-gradient(to top, #916a08, #785807, #DAA520);
-    
-    width: 70px;
-    height: 20px;
-    font-size: 16px;
-    line-height:18px;
-    font-weight:700;
-    border-radius: 8px 8px 2px 2px;
-	margin-left: 0px;
-    
-    border:2px solid black;
 }
 
-button.sheet-botch:hover {
-    background: #fff;
-    background: -moz-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -webkit-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -ms-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -o-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-}
-button.sheet-botch:active {
-    background: #fff;
-    background: -moz-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -webkit-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -ms-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: -o-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-    background: linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
-}
-
-button.sheet-reroll:hover {
+button.sheet-reroll:hover, button.sheet-reroll:active {
     background: #fff;
     background: -moz-linear-gradient(to top, #0e969e, #297080, #2ebaee);
     background: -webkit-linear-gradient(to top, #0e969e, #297080, #2ebaee);
@@ -1070,24 +1028,15 @@ button.sheet-reroll:hover {
     background: -o-linear-gradient(to top, #0e969e, #297080, #2ebaee);
     background: linear-gradient(to top, #0e969e, #297080, #2ebaee);
 }
-button.sheet-reroll:active {
+button.sheet-botch:hover, button.sheet-botch:active {
     background: #fff;
-    background: -moz-linear-gradient(to top, #0e969e, #297080, #2ebaee);
-    background: -webkit-linear-gradient(to top, #0e969e, #297080, #2ebaee);
-    background: -ms-linear-gradient(to top, #0e969e, #297080, #2ebaee);
-    background: -o-linear-gradient(to top, #0e969e, #297080, #2ebaee);
-    background: linear-gradient(to top, #0e969e, #297080, #2ebaee);
+    background: -moz-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
+    background: -webkit-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
+    background: -ms-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
+    background: -o-linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
+    background: linear-gradient(to top, #a00e0e, #bb1a11, #ec2513);
 }
-
-button.sheet-critical:hover {
-    background: #fff;
-    background: -moz-linear-gradient(to top, #daa520, #B8860B, #FFD700);
-    background: -webkit-linear-gradient(to top, #daa520, #B8860B, #FFD700);
-    background: -ms-linear-gradient(to top, #daa520, #B8860B, #FFD700);
-    background: -o-linear-gradient(to top, #daa520, #B8860B, #FFD700);
-    background: linear-gradient(to top, #daa520, #B8860B, #FFD700);
-}
-button.sheet-critical:active {
+button.sheet-critical:hover, button.sheet-critical:active {
     background: #fff;
     background: -moz-linear-gradient(to top, #daa520, #B8860B, #FFD700);
     background: -webkit-linear-gradient(to top, #daa520, #B8860B, #FFD700);
diff --git a/Ars_Magica_5th/Ars_Magica_5th.html b/Ars_Magica_5th/Ars_Magica_5th.html
index c88d741fd3..97af7727c6 100644
--- a/Ars_Magica_5th/Ars_Magica_5th.html
+++ b/Ars_Magica_5th/Ars_Magica_5th.html
@@ -45,17 +45,27 @@
         </div>
     </div>
 </div>
+
+<div class="sheet-tab-br"></div>
+<div class="sheet-buttonbar">
+    <div class="sheet-navbuttons">
+        <button type="action" name="act_character" class="sheet-tabbutton" data-i18n="character" >Character</button>
+        <button type="action" name="act_abilities" class="sheet-tabbutton"  data-i18n="abilities" >Abilities</button>
+        <button type="action" name="act_magic" class="sheet-tabbutton"  data-i18n="magic" >Magic</button>
+        <button type="action" name="act_combat" class="sheet-tabbutton"  data-i18n="combat" >Combat</button>
+        <button type="action" name="act_spells" class="sheet-tabbutton"  data-i18n="spells" >Spells</button>
+        <button type="action" name="act_doc" class="sheet-tabbutton" data-i18n="doc">Doc</button>
+    </div>
+    <div class="sheet-functions">
+        <button type="roll" class="sheet-reroll" name="roll_reroll" title="Reroll" value="&{template:reroll} {{roll= [[1d10]]}}" data-i18n="roll">Roll</button>
+        <button type="roll" class="sheet-botch" name="roll_botch" title="Botch" value="&{template:botch} {{roll= ?{@{query_i18n}|1 Die,[[1d10]]|2 Dice,[[1d10]] [[1d10]]|3 Dice,[[1d10]] [[1d10]] [[1d10]]|4 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]]|5 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|6 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|7 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|8 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|9 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|10 Dice,[[1d10]] [[1d10]][[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]} }}" data-i18n="botch" >Botch</button>
+        <button type="roll" class="sheet-critical" name="roll_critical" title="Critical" value="&{template:critical} {{roll=[[2*2**floor(1d10!!10 / 10)*(1d9+1)]]}}" data-i18n="critical">Critical</button>
+    </div>
+</div>
+<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character"/>
 <div class="sheet-tab-br"></div> 
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" data-i18n-title="character" title="Character" checked="checked" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" data-i18n-title="abilities" title="Abilities" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" data-i18n-title="magical-arts" title="Magical Arts" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" data-i18n-title="combat" title="Combat" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="5" data-i18n-title="spells" title="Spells" /><span></span>
-<button type="roll" class="sheet-reroll" name="roll_reroll" title="Reroll" value="&{template:reroll} {{roll= [[1d10]]}}" data-i18n="roll">Roll</button>
-<button type="roll" class="sheet-botch" name="roll_botch" title="Botch" value="&{template:botch} {{roll= ?{@{query_i18n}|1 Die,[[1d10]]|2 Dice,[[1d10]] [[1d10]]|3 Dice,[[1d10]] [[1d10]] [[1d10]]|4 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]]|5 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|6 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|7 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|8 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|9 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|10 Dice,[[1d10]] [[1d10]][[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]} }}" data-i18n="botch" >Botch</button>
-<button type="roll" class="sheet-critical" name="roll_critical" title="Critical" value="&{template:critical} {{roll=[[2*2**floor(1d10!!10 / 10)*(1d9+1)]]}}" data-i18n="critical">Critical</button>
-<div class="sheet-tab-br"></div> 
-    <!-- 1 Details -->
+
+<!-- 1 Details -->
 <div class="sheet-tab-content sheet-tab1">
     <div>
         <div class='sheet-2colrow'>
@@ -382,7 +392,8 @@
         </fieldset>
     </div>
 </div>
-    <!-- 2 Characteristics & Abilities -->
+
+<!-- 2 Characteristics & Abilities -->
 <div class="sheet-tab-content sheet-tab2">
     <div>
         <div class='sheet-2colrow' style="margin-top:10px;">
@@ -528,7 +539,8 @@
         </div>
     </div>
 </div>
-    <!-- 3 Magic -->
+
+<!-- 3 Magic -->
 <div class="sheet-tab-content sheet-tab3">
     <div>
         <div class="sheet-3colrow" style="margin-top:10px;">
@@ -1039,7 +1051,8 @@
         </div>
     </div>
 </div>
-    <!-- 4 Combat -->
+
+<!-- 4 Combat -->
 <div class="sheet-tab-content sheet-tab4" >
     <div style="margin-top:10px;">
         <div class='sheet-col'>
@@ -1302,7 +1315,8 @@
         </fieldset>
     </div>
 </div>
-    <!-- 5  Spells -->
+
+<!-- 5  Spells -->
 <div class="sheet-tab-content sheet-tab5">
     <table class="sheet-table_2" style="width:400px;">
         <tr>
@@ -1386,6 +1400,15 @@
     </fieldset>
 </div>
 
+<div class="sheet-tab-content sheet-tab6">
+    <h1>
+     Sheet Documentation
+    </h1>
+    <p>
+     TODO
+    </p>
+</div>
+
 <!-- Roll Templates -->
 <div class="sheet-hidden">
     <!-- melee -->
@@ -1710,6 +1733,14 @@
 
 <!-- Sheet Worker Scripts -->
 <script type="text/worker">
+    const buttonlist = ["character", "abilities", "magica", "combat", "spells", "doc"];
+    buttonlist.forEach(button => {
+        on(`clicked:${button}`, function() {
+            setAttrs({
+                sheetTab: button
+            });
+        });
+    });
 
 // Ability Experience Calculations
 
diff --git a/Ars_Magica_5th/Readme.md b/Ars_Magica_5th/Readme.md
index 334c6d3a94..f479540574 100644
--- a/Ars_Magica_5th/Readme.md
+++ b/Ars_Magica_5th/Readme.md
@@ -1,20 +1,76 @@
 # Ars Magica 5th
 
+
 ## Usage
-The final sheet file `Ars_Magica_5th.html` is generated from a template. To modify it:
-- Modify `template.html`
-    - You can use python code to generate repeating parts. See `generate.py` and `parts/__init__.py` and below for details and helper code
-- Run `generate.py` (requires python 3.8+)
+This sheet uses python integration to make some code section easier.
+The final sheet file `Ars_Magica_5th.html` is generated from a template.
+**Do not modify it direclty**, as changes will be overwritten.
+To contibute:
+1. Modify `template.html`. You can use python integration to make things easier, see below
+2. Run `generate.py` (requires python 3.8+ and some packages, see below)
+3. commit your changes
 
-### Using `generate.py`
-The script will read `template.html` and replace parts of the form `$$identifier$$` by the value found under that identifier in the dictionary `part` defined in `parts/__init__.py`. This makes it possible to use python code to generate repeating parts of the sheet. You can find examples in `__init__.py`.
 
-It is not necessary to put all code in `parts/__init__.py`. You can use other files, import the helpers you need from `parts/helpers.py`, and then import the final value in `parts/__init__.py` and assign it to an identifier.
 
-If you are unfamiliar with python, you can write everythin manually in `template.html`, though modifying what is already python-generated will require looking at the code.
+
+
+## Python Integration
+The python integration in this sheets allows to use python code to generate some parts of the sheet. It useful for repeating section, and integrating the markdown documentation directly into the sheet.
+
+
+### Installation
+You will need Python version 3.8 or higher to run the script. You can install it from [Python Website](https://www.python.org/), or using your system package manager, such as `apt`, or other managers such as Conda.
+
+The script requires some additional package to convert the markdown documentation to HTML. To install them, use the `pip` commands that comes with python. Navigates to this directory and execute:
+
+```
+pip3 -r requirements.txt
+```
+
+Pip will read the `requirements.txt` file that is right alongside this Readme, and install all required packages from there.
+
+
+### Usage
+The python integration reads the template file `template.html`, add some code-generated HTML into it and writes the result to `Ars_Magica_5th.html`. To place python-generated HTML into the read template, it must detect where to put it, and what to put.
+
+Where to put the generated HTML is found by looking for identifier written in `template.html` as `$$name$$`. The `name` is retain to find what to fill in (see below), and must contain only alphanumeric characters or `_`. If the replacement spans multiple lines, and the `$$name$$` marker was at the beginning of a line, the identation before the marker is added to each line of the replacement. This properly preserves indentation.
+
+To find what to put in place of the marker, the script will load the package `parts` that is right alongside this Readme. (If you are unfamiliar with python, that means executing the file `parts.__init__.py` and keeping whatever was defined in there). When replacing `$$name$$`, it will look for `name` (without the dollar signs) in the dictionary names `parts` in `parts.__init__.py`, and copy the string it finds there.
+
+This means you can use python howerver you want to programmatically generate HTML, put the result in the `parts` dictionary, and include that into the sheet. You will find some examples in the various files in the `parts/` directory alongside this Readme.
+
+
+### Advanced Usage
+Since most of the python code consist of generating highly similar parts of the sheet automatically (e.g. all the choices in a dropdown for the arts, the characteristics etc.), you will find some helper functions in `parts/herlpers.py` that you can use. Refer to there docstring and examples in other files on how to use them.
+
+
+### Running `generate.py`
+If you are on unix, the file is executable and uses the `python3` command so
+```
+$ ./generate.py
+```
+should do the work.
+
+If that is not the case, or you are on windows, you can use:
+```
+> python3 generate.py
+```
+
+>**Warning**
+>
+> Be careful to execute the command inside this directory, it write the final sheet in the directory it was run
+
+
+
+
+
+
+## Documentation
+This sheet includes a documentation to explain how it works and obscure parts in the file `documenation.md`. When you generate the final sheet with `generate.py`, it is converted to HTML and embedded into the sheet, so that players can easily access it in-game.
+
+
 
 ## Translation Notes
-
 Some of the translation tag name have suffixes to indicate where they are used. If a particular tag is used in several places, I haven't added any suffixes.
 
 - `-rt` : Used in a roll template. Example: "defend-rt"
diff --git a/Ars_Magica_5th/documentation.md b/Ars_Magica_5th/documentation.md
new file mode 100644
index 0000000000..d389ccd3f7
--- /dev/null
+++ b/Ars_Magica_5th/documentation.md
@@ -0,0 +1,3 @@
+# Sheet Documentation
+
+TODO
\ No newline at end of file
diff --git a/Ars_Magica_5th/parts/__init__.py b/Ars_Magica_5th/parts/__init__.py
index fd6bf89622..f575e9f555 100644
--- a/Ars_Magica_5th/parts/__init__.py
+++ b/Ars_Magica_5th/parts/__init__.py
@@ -1,4 +1,9 @@
 """Module for providing the parts in the template.html file"""
+from pathlib import Path
+
+import markdown
+from bs4 import BeautifulSoup as soup
+
 from .helpers import (
     CHARACTERISTICS,
     FORMS,
@@ -115,3 +120,8 @@ parts["form_enumerated_options"] = repeat_template(
     enumerate_helper(FORMS, [str.capitalize], start=1),
     tuple_keys=("index", "form", "Form"),
 )
+
+# Documentation
+with open(Path(__file__).parents[1] / "documentation.md") as f:
+    html = markdown.markdown("\n".join(f.readlines()))
+parts["documentation"] = soup(html, "html.parser").prettify()
\ No newline at end of file
diff --git a/Ars_Magica_5th/parts/translations.py b/Ars_Magica_5th/parts/translations.py
index 656f3d1186..15616125b9 100644
--- a/Ars_Magica_5th/parts/translations.py
+++ b/Ars_Magica_5th/parts/translations.py
@@ -1,5 +1,6 @@
 from .helpers import CHARACTERISTICS, FORMS, TECHNIQUES
 
+# list of (attr, default, translation_key)
 TRANSLATION_ATTRS = (
     [
         ("ability", "Abiliy", "ability"),
@@ -8,6 +9,7 @@ TRANSLATION_ATTRS = (
         ("attack", "Attack", "attack"),
         ("aura", "Aura", "aura"),
         ("bonus", "Bonus", "bonus"),
+        ("botch_num", "Number of botch dice", "botch-num"),
         ("circumstances", "Circumstances", "circumstances-m"),
         ("circumstantial", "Circumstancial", "circumstantial"),
         ("damage", "Damage", "damage"),
@@ -18,7 +20,6 @@ TRANSLATION_ATTRS = (
         ("initiative", "Initiative", "initiative"),
         ("modifiers", "Modifiers", "modifiers"),
         ("philos", "Philos.", "philos-"),
-        ("query", "Name of Query", "query"),
         ("technique", "Technique", "technique"),
         ("wounds", "Wounds", "wounds"),
     ]
diff --git a/Ars_Magica_5th/requirements.txt b/Ars_Magica_5th/requirements.txt
new file mode 100644
index 0000000000..b4ce385c7a
--- /dev/null
+++ b/Ars_Magica_5th/requirements.txt
@@ -0,0 +1,2 @@
+markdown
+bs4
\ No newline at end of file
diff --git a/Ars_Magica_5th/template.html b/Ars_Magica_5th/template.html
index 5a5584b34d..9687ed72f8 100644
--- a/Ars_Magica_5th/template.html
+++ b/Ars_Magica_5th/template.html
@@ -45,17 +45,27 @@ $$header$$
         </div>
     </div>
 </div>
+
+<div class="sheet-tab-br"></div>
+<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character"/>
+<div class="sheet-buttonbar">
+    <div class="sheet-navbuttons">
+        <button type="action" name="act_character" class="sheet-tabbutton" data-i18n="character" >Character</button>
+        <button type="action" name="act_abilities" class="sheet-tabbutton"  data-i18n="abilities" >Abilities</button>
+        <button type="action" name="act_magic" class="sheet-tabbutton"  data-i18n="magic" >Magic</button>
+        <button type="action" name="act_combat" class="sheet-tabbutton"  data-i18n="combat" >Combat</button>
+        <button type="action" name="act_spells" class="sheet-tabbutton"  data-i18n="spells" >Spells</button>
+        <button type="action" name="act_doc" class="sheet-tabbutton" data-i18n="doc">Doc</button>
+    </div>
+    <div class="sheet-functions">
+        <button type="roll" class="sheet-reroll" name="roll_reroll" title="Reroll" value="&{template:reroll} {{roll= [[1d10]]}}" data-i18n="roll">Roll</button>
+        <button type="roll" class="sheet-botch" name="roll_botch" title="Botch" value="&{template:botch} {{roll= ?{@{botch_num_i18n}|1 Die,[[1d10]]|2 Dice,[[1d10]] [[1d10]]|3 Dice,[[1d10]] [[1d10]] [[1d10]]|4 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]]|5 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|6 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|7 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|8 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|9 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|10 Dice,[[1d10]] [[1d10]][[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]} }}" data-i18n="botch" >Botch</button>
+        <button type="roll" class="sheet-critical" name="roll_critical" title="Critical" value="&{template:critical} {{roll=[[2*2**floor(1d10!!10 / 10)*(1d9+1)]]}}" data-i18n="critical">Critical</button>
+    </div>
+</div>
 <div class="sheet-tab-br"></div> 
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" data-i18n-title="character" title="Character" checked="checked" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" data-i18n-title="abilities" title="Abilities" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" data-i18n-title="magical-arts" title="Magical Arts" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" data-i18n-title="combat" title="Combat" /><span></span>
-<input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="5" data-i18n-title="spells" title="Spells" /><span></span>
-<button type="roll" class="sheet-reroll" name="roll_reroll" title="Reroll" value="&{template:reroll} {{roll= [[1d10]]}}" data-i18n="roll">Roll</button>
-<button type="roll" class="sheet-botch" name="roll_botch" title="Botch" value="&{template:botch} {{roll= ?{@{query_i18n}|1 Die,[[1d10]]|2 Dice,[[1d10]] [[1d10]]|3 Dice,[[1d10]] [[1d10]] [[1d10]]|4 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]]|5 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|6 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|7 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|8 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|9 Dice,[[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]|10 Dice,[[1d10]] [[1d10]][[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]] [[1d10]]} }}" data-i18n="botch" >Botch</button>
-<button type="roll" class="sheet-critical" name="roll_critical" title="Critical" value="&{template:critical} {{roll=[[2*2**floor(1d10!!10 / 10)*(1d9+1)]]}}" data-i18n="critical">Critical</button>
-<div class="sheet-tab-br"></div> 
-    <!-- 1 Details -->
+
+<!-- 1 Details -->
 <div class="sheet-tab-content sheet-tab1">
     <div>
         <div class='sheet-2colrow'>
@@ -318,7 +328,8 @@ $$header$$
         </fieldset>
     </div>
 </div>
-    <!-- 2 Characteristics & Abilities -->
+
+<!-- 2 Characteristics & Abilities -->
 <div class="sheet-tab-content sheet-tab2">
     <div>
         <div class='sheet-2colrow' style="margin-top:10px;">
@@ -402,7 +413,8 @@ $$header$$
         </div>
     </div>
 </div>
-    <!-- 3 Magic -->
+
+<!-- 3 Magic -->
 <div class="sheet-tab-content sheet-tab3">
     <div>
         <div class="sheet-3colrow" style="margin-top:10px;">
@@ -835,7 +847,8 @@ $$header$$
         </div>
     </div>
 </div>
-    <!-- 4 Combat -->
+
+<!-- 4 Combat -->
 <div class="sheet-tab-content sheet-tab4" >
     <div style="margin-top:10px;">
         <div class='sheet-col'>
@@ -1098,7 +1111,8 @@ $$header$$
         </fieldset>
     </div>
 </div>
-    <!-- 5  Spells -->
+
+<!-- 5  Spells -->
 <div class="sheet-tab-content sheet-tab5">
     <table class="sheet-table_2" style="width:400px;">
         <tr>
@@ -1169,6 +1183,10 @@ $$header$$
     </fieldset>
 </div>
 
+<div class="sheet-tab-content sheet-tab6">
+    $$documentation$$
+</div>
+
 <!-- Roll Templates -->
 <div class="sheet-hidden">
     <!-- melee -->
@@ -1452,6 +1470,14 @@ $$translation_attrs$$
 
 <!-- Sheet Worker Scripts -->
 <script type="text/worker">
+    const buttonlist = ["character", "abilities", "magica", "combat", "spells", "doc"];
+    buttonlist.forEach(button => {
+        on(`clicked:${button}`, function() {
+            setAttrs({
+                sheetTab: button
+            });
+        });
+    });
 
 // Ability Experience Calculations
 
diff --git a/Ars_Magica_5th/translation.json b/Ars_Magica_5th/translation.json
index 87fbfe61aa..56c6a59dce 100644
--- a/Ars_Magica_5th/translation.json
+++ b/Ars_Magica_5th/translation.json
@@ -24,6 +24,7 @@
     "birth-name": "Birth Name",
     "bonus": "Bonus",
     "botch": "Botch",
+    "botch-num": "Number of botch dice",
     "botch-roll": "Botch Roll",
     "casting": "Casting",
     "casts-rt": "casts",
@@ -59,6 +60,7 @@
     "dfn": "Dfn",
     "dfn-u": "DFN",
     "divine-might": "Divine Might",
+    "doc": "Doc",
     "domus-magna": "Domus Magna",
     "duration": "Duration",
     "effect": "Effect",
@@ -105,6 +107,7 @@
     "leverages-rt": "leverages",
     "light-wounds": "Light Wounds",
     "load": "Load",
+    "magic": "Magic",
     "magic-might": "Magic Might",
     "magical-arts": "Magical Arts",
     "magus-background": "Magus Background",