[Quest] new sheet submission (#7557)
* [Quest] new sheet submission * [Quest] v.1.1
This commit is contained in:
Andreas J
@@ -0,0 +1,13 @@
|
||||
# Quest RPG Roll20 Character Sheet
|
||||
UnofficialCharacter Sheet Template for T.C. Sottek's tabletop game, [Quest](https://www.adventure.game/).
|
||||
|
||||
|
||||
## Version 1.1
|
||||
(Andreas J.) 0ct. 2020
|
||||
|
||||
Made sheet more compact, updated the roll template, added button for rolls, minor fixes & adjustments.
|
||||
|
||||
## Version 1.0
|
||||
(Andrew S.)
|
||||
|
||||
It works, but it ain't particularly pretty. I tried to model it after the Quest RPG character profile and worksheet, but I tweaked a few things based on my experiences with how Roll20 is used. I will jazz up the formatting in the future, but we may never have complete parity with the visuals of the official Quest character handouts since there are limitations to what kind of font families Roll20 let's you use in a custom character sheet.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -0,0 +1,318 @@
|
||||
/*----------- Logo -------------*/
|
||||
|
||||
img.sheet-logo {
|
||||
max-width: 96px;
|
||||
filter: invert(100%);
|
||||
float: right;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.charsheet ::placeholder{
|
||||
color: #9FA8A1;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*----------- Tabs Setup -------------*/
|
||||
|
||||
/*this hides the contents of each tab by default*/
|
||||
.charsheet div[class^="sheet-section"]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*this shows the tab content when the appropriate input field is selected*/
|
||||
.charsheet input.sheet-tab1:checked ~ div.sheet-section-profile,
|
||||
.charsheet input.sheet-tab2:checked ~ div.sheet-section-inv,
|
||||
.charsheet input.sheet-tab3:checked ~ div.sheet-section-abilities,{
|
||||
display: block;
|
||||
width: 540px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"]{
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
|
||||
.charsheet input.sheet-tab {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
||||
.charsheet span.sheet-tab {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
background: #c7c3b0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin-left: -101px;/*originally 91px*/
|
||||
}
|
||||
|
||||
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
||||
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
|
||||
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
|
||||
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
|
||||
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
|
||||
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
|
||||
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
|
||||
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
|
||||
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
|
||||
.charsheet input.sheet-tab99:checked + span.sheet-tab99{
|
||||
background: #2c424e;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*----------- Profile Section -------------*/
|
||||
.charsheet .sheet-section-profile{
|
||||
background-color: #ffffff;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.charsheet div.sheet-section-profile{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.charsheet .sheet-section-profile p{
|
||||
font-family: 'Ovo', serif;
|
||||
font-size: 17px;
|
||||
margin-left: 20px;
|
||||
line-height: 1.6;
|
||||
width: 545px;
|
||||
}
|
||||
|
||||
|
||||
input[type=text],
|
||||
input[type=number] {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid black;
|
||||
-moz-appearance:textfield;
|
||||
font-size: 17px;
|
||||
margin-top: -5px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-name-field {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-pronoun {
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-age {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-height {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-role {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-attribute {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-attribute2 {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-clothes {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-background {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-background2 {
|
||||
width: 410px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-ethos {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-goal {
|
||||
width: 410px;
|
||||
}
|
||||
|
||||
.charsheet textarea.sheet-notes {
|
||||
width: 470px;
|
||||
height: 130px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.charsheet div.sheet-profile-notes {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*----------- Abilities Section -------------*/
|
||||
|
||||
div.sheet-section-abilities {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
div.sheet-section-abilities p {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
span.sheet-ap {
|
||||
float: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
span.sheet-hp,
|
||||
input.sheet-ap,
|
||||
input.sheet-hp{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
h3.sheet-ability-header {
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background-color: #2c424e;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 510px;
|
||||
}
|
||||
|
||||
input.sheet-ability-name {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
input.sheet-ability-cost {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
div.repcontrol{
|
||||
width: 510px;
|
||||
}
|
||||
|
||||
textarea.sheet-ability-description {
|
||||
font-size: 18px;
|
||||
resize: none;
|
||||
width: 575px;
|
||||
height: 90px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
||||
/*----------- Inventory Section -------------*/
|
||||
|
||||
div.sheet-2colrow.sheet-2colrow-top {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
div.sheet-2colrow.sheet-2colrow-top div.sheet-col,
|
||||
div.sheet-2colrow.sheet-invbottom div.sheet-col{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.sheet-section-inv textarea {
|
||||
font-size: 18px;
|
||||
resize: none;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------*\
|
||||
#ROLL TEMPLATES
|
||||
\*------------------------------------*/
|
||||
|
||||
/* Smaller margins - remove these if you want the huge default left margin */
|
||||
.sheet-rolltemplate-quest {
|
||||
margin-left: -37px;
|
||||
}
|
||||
.withoutavatars .sheet-rolltemplate-quest {
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-quest .sheet-container {
|
||||
border: 3px solid var(--quest-blue);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Header formatting - title and subtitle */
|
||||
.sheet-rolltemplate-quest .sheet-header {
|
||||
background-color: var(--quest-blue);
|
||||
color: white;
|
||||
text-align: left;
|
||||
text-transform: capitalize;
|
||||
padding: 5px;
|
||||
border-bottom: 2px solid var(--quest-blue);
|
||||
}
|
||||
.sheet-rolltemplate-quest .sheet-title {
|
||||
font-size:1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-rolltemplate-quest .sheet-subtitle {
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
|
||||
.sheet-rolltemplate-quest .sheet-container {
|
||||
--quest-blue: #2c424e;
|
||||
}
|
||||
|
||||
/* Allprops part */
|
||||
.sheet-rolltemplate-quest .sheet-content {
|
||||
display: grid;
|
||||
background: #FFF;
|
||||
/* Header formatting - modify the column layout below */
|
||||
grid-template-columns: auto auto;
|
||||
/* Line height to match default roll template */
|
||||
line-height:1.4em;
|
||||
}
|
||||
.sheet-rolltemplate-quest .sheet-content > div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Left column */
|
||||
.sheet-rolltemplate-quest .sheet-content .sheet-key {
|
||||
font-weight: bold;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Make even-numbered rows grey */
|
||||
.sheet-rolltemplate-quest .sheet-content :nth-child(4n+3),
|
||||
.sheet-rolltemplate-quest .sheet-content :nth-child(4n) {
|
||||
background:#EEE;
|
||||
}
|
||||
|
||||
/* Wide Description field */
|
||||
.sheet-rolltemplate-quest .sheet-desc {
|
||||
grid-column: span 2;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
<div>
|
||||
<!-- Set up the Tabs -->
|
||||
<input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="profile" checked="checked"/>
|
||||
<span class="sheet-tab sheet-tab1" style="line-height: 40px;">Profile</span>
|
||||
<input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="3" title="abilities" />
|
||||
<span class="sheet-tab sheet-tab3" style="line-height: 40px;">Abilities</span>
|
||||
<input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="inv" />
|
||||
<span class="sheet-tab sheet-tab2" style="line-height: 40px;">Inventory</span>
|
||||
<button type="roll" name="roll_d20" value="&{template:quest} {{title=Roll}} {{subtitle=@{character_name}}} {{Result=[[1d20cs>11cf<5]]}} {{_20=Triumph}} {{_11-19=Success}} {{_6-10=Tough Choice}} {{_2-5=Failure}} {{_1=Catastrophe}}"></button>
|
||||
<span>v.1.1</span>
|
||||
<img class="logo" src="https://raw.githubusercontent.com/asimone/questrpg-roll20-character-sheet-template/master/images/quest.png">
|
||||
<!-- End Tab setup -->
|
||||
|
||||
<!-- Profile Tab -->
|
||||
<div class="sheet-section-profile">
|
||||
<div class="profile-text">
|
||||
<p>Hello,</p>
|
||||
<p>My name is <input class="name-field" type="text" placeholder="name" name="attr_character_name"> (<input class="pronoun" type="text" placeholder="Pronouns" name="attr_pronouns">)</p>
|
||||
<p>I'm <input class="age" type="text" name="attr_age" placeholder="age"> years old, and stand <input class="height" type="text" name="attr_height"> tall.</p>
|
||||
<p>I'm the party's <input class="role" type="text" name="attr_role" placeholder="role">.</p>
|
||||
<p>When people see me, they first notice my <input class="attribute" type="text" name="attr_dis_feature1" placeholder="distinctive feature">, <input class="attribute" type="text" name="attr_dis_feature2">, and <input class="attribute2" type="text" name="attr_dis_feature3">.</p>
|
||||
<p>I wear <input class="clothes" name="attr_style1" type="text" placeholder="style">, <input class="clothes" name="attr_style2" type="text">,</p>
|
||||
<p>and move with <input class="attribute2" name="attr_style3" type="text">.</p>
|
||||
<p>I'm from <input class="background" type="text" name="attr_home" placeholder="home">, where my people are</p>
|
||||
<p>known for <input class="background2" type="text" name="attr_community" placeholder="community">.</p>
|
||||
<p>I believe in <input class="ethos" type="text" name="attr_ideal" placeholder="ideal">, but my <input class="ethos" placeholder="flaw" type="text" name="attr_flaw"> side can get in my way.</p>
|
||||
<p>I dream of <input class="goal" type="text" name="attr_dream" placeholder="dream">.<p>
|
||||
</div>
|
||||
<div class="profile-notes">
|
||||
<p><textarea class="notes" placeholder="Notes" name="attr_notes"></textarea></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Abilities Tab -->
|
||||
<div class="sheet-section-abilities">
|
||||
<p>
|
||||
<span class="hp">Hit Points: <input class="hp" type="number" name="attr_hp"> / 10</span>
|
||||
<span class="ap">Adventure Points: <input class="ap" type="number" name="attr_ap"></span>
|
||||
</p>
|
||||
|
||||
<h3 class="ability-header">Abilities</h3>
|
||||
<fieldset class="repeating_skills">
|
||||
<button class="sheet-text-button" type='roll' value='&{template:quest} {{title=@{ability}}} {{subtitle=@{character_name}}} {{cost=@{cost}}} {{desc=@{abilitydesc}}}' name="roll_ability"></button>
|
||||
<input type="text" class="ability-name" name="attr_ability" placeholder="Ability Name" />
|
||||
<input type="text" class="ability-cost" name="attr_cost" placeholder="AP Cost" />
|
||||
<textarea class="ability_description" name="attr_abilitydesc" placeholder="Ability Description" style="height:90px;width: 500px;"></textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Worksheet Tab -->
|
||||
<div class="sheet-section-inv">
|
||||
<div class='sheet-2colrow 2colrow-top'>
|
||||
<div class='sheet-col'>
|
||||
<textarea class="inv" name="attr_item1"></textarea><br>
|
||||
<textarea class="inv" name="attr_item2"></textarea><br>
|
||||
<textarea class="inv" name="attr_item3"></textarea>
|
||||
</div>
|
||||
<div class='sheet-col'>
|
||||
<textarea class="inv" name="attr_item4"></textarea><br>
|
||||
<textarea class="inv" name="attr_item5"></textarea><br>
|
||||
<textarea class="inv" name="attr_item6"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sheet-2colrow invbottom'>
|
||||
<div class='sheet-col'>
|
||||
<textarea class="inv" name="attr_item7"></textarea><br>
|
||||
<textarea class="inv" name="attr_item8"></textarea><br>
|
||||
<textarea class="inv" name="attr_item9"></textarea>
|
||||
</div>
|
||||
<div class='sheet-col'>
|
||||
<textarea class="inv" name="attr_item10"></textarea><br>
|
||||
<textarea class="inv" name="attr_item11"></textarea><br>
|
||||
<textarea class="inv" name="attr_item12"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ROLL TEMPLATES -->
|
||||
<rolltemplate class="sheet-rolltemplate-ability">
|
||||
<table>
|
||||
<tr><th>{{name}}</th></tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>AP Cost:</b> {{cost}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="desc">{{desc}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</rolltemplate>
|
||||
|
||||
<rolltemplate class="sheet-rolltemplate-quest">
|
||||
<div class="sheet-container sheet-color-{{color}}">
|
||||
<div class="sheet-header">
|
||||
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
|
||||
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
|
||||
</div>
|
||||
<div class="sheet-content">
|
||||
{{#allprops() title subtitle desc}}
|
||||
<div class="sheet-key">{{key}}</div>
|
||||
<div class="sheet-value">{{value}}</div>
|
||||
{{/allprops() title subtitle desc}}
|
||||
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"html": "quest.html",
|
||||
"css": "quest.css",
|
||||
"authors": "Andrew Simone, Andreas J.",
|
||||
"roll20userid": "849188, 1223200",
|
||||
"preview": "quest-preview.png",
|
||||
"instructions": "Unofficial Character Sheet for the '[Quest](https://www.adventure.game/)' RPG(by The Adventure Guild/T.C. Sottek).\n\n* The roll button shows the roll table alongside the result.\n\nSheet created by Andrew S., and Andreas J. updated it a bit as well as made it avaiable in Roll20."
|
||||
}
|
||||
Reference in New Issue
Block a user