Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

new Old World RPG character sheet

Browse Source
This commit is contained in:
Craig Garrett
2025-11-24 11:14:28 -05:00
parent 77f04dfc90
commit ab634ac667
4 changed files with 1325 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TheOldWorldRPG/sheet.css
+487
View File
@@ -0,0 +1,487 @@
:root {
--parchment: #f5eeda;
--ink-main: #4a3f35;
--ink-header: #8c1818;
--border-color: #c9b7a3;
--highlight-bg: #eaddc7;
}
.sheet-character {
font-family: 'Merriweather', serif;
background-color: var(--parchment);
color: var(--ink-main);
margin: 0;
padding: 1rem;
font-size: 14px;
}
.header-font {
font-family: 'IM Fell English SC', serif;
font-weight: normal;
letter-spacing: 1px;
}
.container {
max-width: 1200px;
min-width: 905px;
margin: 0 auto;
padding: 1.5rem;
background-color: var(--parchment);
border: 2px solid var(--border-color);
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.main-title {
color: var(--ink-header);
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--ink-header);
padding-bottom: 0.75rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.char-info-box { grid-column: span 5; }
.top-stats-box { grid-column: span 7; display: flex; justify-content: space-between; align-items: stretch; }
.char-skills-box { grid-column: span 6; }
.lore-talents-box { grid-column: span 3; }
.appearance-coin-box { grid-column: span 3; }
.weapons-box { grid-column: span 12; }
.wounds-box { grid-column: span 4; }
.trappings-box { grid-column: span 4; }
.contacts-box { grid-column: span 4; }
.magic-box { grid-column: span 8; }
.other-characters-box { grid-column: span 4; }
.spells-box { grid-column: span 12; }
.grim-portent-box { grid-column: span 6; }
.exacting-test-box { grid-column: span 6; }
.clues-insights-box { grid-column: span 6; }
.favours-owed-box { grid-column: span 6; }
.notes-box { grid-column: span 12; }
.box {
border: 1px solid var(--ink-main);
padding: 0.75rem;
}
.box-title {
font-family: 'IM Fell English SC', serif;
color: var(--ink-header);
text-align: center;
margin-top: 0;
margin-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.25rem;
}
input[type="text"], input[type="number"] {
background-color: transparent;
border: none;
border-bottom: 1px solid var(--ink-main);
font-family: 'Merriweather', serif;
color: var(--ink-main);
width: 100%;
padding: 2px;
box-sizing: border-box;
}
input:focus, select:focus {
outline: none;
border-bottom: 1px solid var(--ink-header);
}
select {
background-color: transparent;
border: none;
border-bottom: 1px solid var(--ink-main);
font-family: 'Merriweather', serif;
color: var(--ink-main);
width: 100%;
padding: 4px 2px;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
padding-right: 2em;
}
.info-line {
display: flex;
align-items: baseline;
margin-bottom: 0.5rem;
}
.info-line label {
font-family: 'IM Fell English SC', serif;
flex-basis: 80px;
}
.stat-box {
border: 1px solid var(--ink-main);
padding: 0.5rem;
text-align: center;
}
.stat-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stat-box .label {
font-family: 'IM Fell English SC', serif;
font-size: 0.9rem;
}
.stat-box input {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
width: 50px;
}
.fate-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-grow: 1;
}
.fate-input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.sub-label {
font-size: 1.0rem;
text-transform: uppercase;
margin-top: 0.25rem;
display: block;
text-align: center;
}
.chars-and-skills-container {
border: 1px solid var(--ink-main);
}
.char-skill-row {
display: flex;
border-bottom: 1px solid var(--ink-main);
}
.char-skill-row:last-child {
border-bottom: none;
}
.char-side {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0.8rem;
border-right: 1px solid var(--ink-main);
}
.char-info {
display: flex;
flex-direction: column;
}
.char-abbr {
font-size: 2rem;
font-weight: bold;
line-height: 1;
color: #222;
}
.char-fullname {
font-size: 0.8rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.char-value-container {
display: flex;
flex-direction: column;
align-items: center;
}
.char-value {
font-size: 1.75rem;
font-weight: bold;
border: none;
width: 50px !important; /* Force width override */
text-align: center;
background: transparent;
}
.char-value-container input[type="checkbox"] {
margin-top: 5px;
}
.skills-side {
flex: 2;
display: flex;
flex-direction: column;
}
.skill-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.8rem;
}
.skill-line:first-child {
border-bottom: 1px dotted var(--border-color);
}
.skill-checkboxes {
display: flex;
gap: 2px;
}
.lore-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 1rem;
}
.lore-inputs input {
width: 100%;
}
.talents-inputs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.talents-inputs input {
width: 100%;
}
.coin-grid-container {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
row-gap: 0.75rem;
column-gap: 1rem;
}
.coin-grid-container label, .coin-box .info-line label {
font-family: 'IM Fell English SC', serif;
text-align: left;
font-size: 16px;
}
.coin-slots-container {
display: flex;
gap: 5px;
justify-self: start; /* Align to the start of the grid cell */
}
.coin-slot {
width: 1.3em;
height: 1.3em;
cursor: pointer;
user-select: none;
-webkit-user-select: none; /* For Safari */
}
.coin-slot .shape {
stroke: var(--ink-main);
stroke-width: 8;
fill: var(--parchment);
}
.coin-slot.owned.brass .shape { fill: #b08d57; }
.coin-slot.owned.silver .shape { fill: #c0c0c0; }
.coin-slot.owned.gold .shape { fill: #ffd700; }
.coin-slot .strikethrough {
display: none;
stroke: var(--ink-header);
stroke-width: 10;
stroke-linecap: round;
}
.coin-slot.spent .strikethrough {
display: block;
}
.weapon-table { width: 100%; }
.weapon-table th { font-family: 'IM Fell English SC', serif; text-align: left; padding-bottom: 0.25rem; }
.wounds-list, .contacts-list { list-style: none; padding: 0; margin: 0; }
.wounds-list li, .contacts-list li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2px; }
.wounds-list input[type="text"] { flex-grow: 1; }
.export-button {
font-family: 'IM Fell English SC', serif;
background-color: var(--highlight-bg);
border: 1px solid var(--border-color);
padding: 0.2rem 0.8rem;
cursor: pointer;
transition: background-color 0.2s;
}
.export-button:hover { background-color: var(--border-color); }
[x-cloak] { display: none !important; }
/* Themed Checkbox Styles */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
background-color: transparent;
margin: 0;
font: inherit;
color: var(--ink-main);
width: 1em;
height: 1em !important;
border: 1px solid var(--ink-main);
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
input[type="checkbox"]:checked::before {
content: 'X';
font-family: 'IM Fell English SC', serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--ink-header);
font-size: 1.2em;
line-height: 0.8;
font-weight: bold;
}
.home-button {
position: absolute;
top: 2rem;
left: 2rem;
padding: 0.4rem 0.8rem;
background-color: var(--highlight-bg);
border: 1px solid var(--border-color);
color: var(--ink-main);
text-decoration: none;
transition: background-color 0.2s;
cursor: pointer;
}
.home-button:hover {
background-color: var(--border-color);
}
.notes-textarea {
width: 100%;
min-height: 200px;
background-color: transparent;
border: 1px solid var(--ink-main);
font-family: 'Merriweather', serif;
color: var(--ink-main);
padding: 4px;
box-sizing: border-box;
resize: none;
overflow-y: hidden;
}
.d10-die {
width: 2em;
height: 2em;
cursor: pointer;
user-select: none;
-webkit-user-select: none; /* For Safari */
}
.d10-die polygon {
stroke: var(--ink-main);
stroke-width: 8;
fill: var(--parchment);
transition: fill 0.2s ease-in-out;
}
.d10-die.active polygon {
fill: var(--ink-main);
}
.d10-die .die-text {
font-family: 'IM Fell English SC', serif;
font-size: 50px;
fill: var(--ink-main);
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
.d10-die.active .die-text {
fill: var(--parchment);
}
.keyword-tooltip {
cursor: help;
}
.tippy-box[data-theme~='parchment'] {
background-color: var(--parchment);
color: var(--ink-main);
border: 1px solid var(--ink-main);
font-family: 'Merriweather', serif;
font-size: 0.9rem;
line-height: 1.4;
}
.tippy-box[data-theme~='parchment'][data-placement^='top'] > .tippy-arrow::before {
border-top-color: var(--ink-main);
}
.tippy-box[data-theme~='parchment'][data-placement^='bottom'] > .tippy-arrow::before {
border-bottom-color: var(--ink-main);
}
.tippy-box[data-theme~='parchment'] .tippy-content {
padding: 8px 12px;
}
.tippy-box[data-theme~='parchment'] .tippy-content strong {
color: var(--ink-header);
}
.site-footer {
max-width: 1200px;
margin: 2rem auto 0;
padding: 1.5rem;
border-top: 1px solid var(--border-color);
text-align: center;
font-size: 0.85rem;
line-height: 1.5;
}
.site-footer a {
color: var(--ink-header);
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
.sheet-rolltemplate-tow1ed {
font-family: 'Merriweather', serif;
background-color: #f5eeda;
color: var(--ink-main);
border: 2px solid var(--ink-main);
padding: 10px;
line-height: 1.7em;
font-size: 14px;
}
.sheet-rolltemplate-tow1ed2 {
font-family: 'Merriweather', serif;
background-color: #f5eeda;
color: var(--ink-main);
border: 2px solid var(--ink-main);
padding: 10px;
line-height: 1.7em;
font-size: 14px;
}
.sheet-title {
font-weight: bold;
}
div.weapons-row {
display: grid;
grid-template-columns: 50px 200px 75px 50px 50px 50px 100px 200px;
column-gap: 5px;
}
div.weapons-row input[type="text"] {
width: 150px;
}
div.weapons-row input[type="number"] {
width: 50px;
}
div.spells-row {
display: grid;
grid-template-columns: 50px 100px 100px 100px 100px 100px 200px;
column-gap: 5px;
}
div.spells-row input[type="text"] {
width: 75px;
}
div.spells-row .effect-input {
width: 220px !important;
}
div.spells-row input[type="number"] {
width: 50px;
}
TheOldWorldRPG/sheet.html
+829
View File
@@ -0,0 +1,829 @@
<div class="sheet-character">
<h1 class="main-title header-font">TOW RPG Character Sheet</h1>
<div class="grid-container">
<div class="char-info-box">
<div class="info-line">
<label for="name">Name</label>
<input type="text" id="character_name" name="attr_character_name">
</div>
<div class="info-line">
<label for="origin">Origin</label>
<input type="text" id="origin" name="attr_origin">
</div>
<div class="info-line">
<label for="career">Career</label>
<input type="text" id="career" name="attr_career">
</div>
</div>
<div class="top-stats-box">
<div class="stat-box">
<div >Fate</div>
<div class="fate-container">
<div class="fate-input-group">
<input type="number" id="fate_max" name="attr_fate_max">
<span class="sub-label">Maximum</span>
</div>
<div class="fate-input-group">
<input type="number" id="fate_current" name="attr_fate_current">
<span class="sub-label">Remaining</span>
</div>
</div>
</div>
<div class="stat-box">
<div >XP</div>
<div class="fate-container">
<input type="number" id="xp" name="attr_xp">
</div>
</div>
<div class="stat-box">
<div >Speed</div>
<div class="fate-container">
<input type="text"
id="speed" name="attr_speed"
style="width: 80px;">
</div>
</div>
<div style="visibility: hidden; display: flex; gap: 0.5rem; justify-content: center;">
<div style="display: flex; flex-direction: column; gap: 0.25rem; justify-content: center;">
<button class="export-button" @click="triggerImport">Import Sheet</button>
<button class="export-button" @click="clearSheet">Clear Sheet</button>
</div>
<div style="display: flex; flex-direction: column; gap: 0.25rem; justify-content: center;">
<button class="export-button" @click="exportSheet">Export Sheet</button>
<button class="export-button" @click="printSheet">Print Sheet</button>
</div>
</div>
<input type="file" id="sheet-import" @change="importSheet($event)" accept=".json" style="display: none;">
</div>
<div class="char-skills-box">
<div class="chars-and-skills-container">
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr">WS</span>
<span class="char-fullname">WEAPON SKILL</span>
</button>
</div>
<div class="char-value-container">
<input type="number" id="attr_ws" name="attr_ws">
<input type="checkbox" id="attr_ws_favoured" name="attr_ws_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_melee" name="attr_skill_melee" style="width: 40px; text-align: center;">
<button type="action" value="ws|melee|skill" name="act_towroll"><span class="skill-name">Melee</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_melee_improvement" name="attr_skill_melee_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_defence" name="attr_skill_defence" style="width: 40px; text-align: center;">
<button type="action" value="ws|defence|skill" name="act_towroll"><span class="skill-name">Defence</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_defence_improvement" name="attr_skill_defence_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >BS</span>
<span class="char-fullname">BALLISTIC SKILL</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_bs" name="attr_bs">
<input type="checkbox" id="attr_bs_favoured" name="attr_bs_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_shooting" name="attr_skill_shooting" style="width: 40px; text-align: center;">
<button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name">Shooting</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_shooting_improvement" name="attr_skill_shooting_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_throwing" name="attr_skill_throwing" style="width: 40px; text-align: center;">
<button type="action" value="bs|throwing|skill" name="act_towroll"><span class="skill-name">Throwing</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_throwing_improvement" name="attr_skill_throwing_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >S</span>
<span class="char-fullname">STRENGTH</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_s" name="attr_s">
<input type="checkbox" id="attr_s_favoured" name="attr_s_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_brawn" name="attr_skill_brawn" style="width: 40px; text-align: center;">
<button type="action" value="s|brawn|skill" name="act_towroll"><span class="skill-name">Brawn</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_brawn_improvement" name="attr_skill_brawn_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_toil" name="attr_skill_toil" style="width: 40px; text-align: center;">
<button type="action" value="s|toil|skill" name="act_towroll"><span class="skill-name">Toil</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_toil_improvement" name="attr_skill_toil_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >T</span>
<span class="char-fullname">TOUGHNESS</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_t" name="attr_t">
<input type="checkbox" id="attr_t_favoured" name="attr_t_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_survival" name="attr_skill_survival" style="width: 40px; text-align: center;">
<button type="action" value="t|survival|skill" name="act_towroll"><span class="skill-name">Survival</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_survival_improvement" name="attr_skill_survival_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_endurance" name="attr_skill_endurance" style="width: 40px; text-align: center;">
<button type="action" value="t|endurance|skill" name="act_towroll"><span class="skill-name">Endurance</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_endurance_improvement" name="attr_skill_endurance_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >I</span>
<span class="char-fullname">Initiative</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_i" name="attr_i">
<input type="checkbox" id="attr_i_favoured" name="attr_i_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_awareness" name="attr_skill_awareness" style="width: 40px; text-align: center;">
<button type="action" value="i|awareness|skill" name="act_towroll"><span class="skill-name">Awareness</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_awareness_improvement" name="attr_skill_awareness_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_dexterity" name="attr_skill_dexterity" style="width: 40px; text-align: center;">
<button type="action" value="i|dexterity|skill" name="act_towroll"><span class="skill-name">Dexterity</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_dexterity_improvement" name="attr_skill_dexterity_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >Ag</span>
<span class="char-fullname">AGILITY</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_ag" name="attr_ag">
<input type="checkbox" id="attr_ag_favoured" name="attr_ag_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_athletics" name="attr_skill_athletics" style="width: 40px; text-align: center;">
<button type="action" value="ag|athletics|skill" name="act_towroll"><span class="skill-name">Athletics</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_athletics_improvement" name="attr_skill_athletics_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_stealth" name="attr_skill_stealth" style="width: 40px; text-align: center;">
<button type="action" value="ag|stealth|skill" name="act_towroll"><span class="skill-name">Stealth</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_stealth_improvement" name="attr_skill_stealth_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >RE</span>
<span class="char-fullname">REASON</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_re" name="attr_re">
<input type="checkbox" id="attr_re_favoured" name="attr_re_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_willpower" name="attr_skill_willpower" style="width: 40px; text-align: center;">
<button type="action" value="re|willpower|skill" name="act_towroll"><span class="skill-name">Willpower</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_willpower_improvement" name="attr_skill_willpower_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_recall" name="attr_skill_recall" style="width: 40px; text-align: center;">
<button type="action" value="re|recall|skill" name="act_towroll"><span class="skill-name">Recall</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_recall_improvement" name="attr_skill_recall_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
<div class="char-skill-row">
<div class="char-side">
<div class="char-info">
<span class="char-abbr" >Fel</span>
<span class="char-fullname">FELLOWSHIP</span>
</div>
<div class="char-value-container">
<input type="number" id="attr_fel" name="attr_fel">
<input type="checkbox" id="attr_fel_favoured" name="attr_fel_favoured">
</div>
</div>
<div class="skills-side">
<div class="skill-line">
<input type="number" id="attr_skill_leadership" name="attr_skill_leadership" style="width: 40px; text-align: center;">
<button type="action" value="fel|leadership|skill" name="act_towroll"><span class="skill-name">Leadership</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_leadershp_improvement" name="attr_skill_leadershp_improvement" style="width: 40px; text-align: center;">
</div>
</div>
<div class="skill-line">
<input type="number" id="attr_skill_charm" name="attr_skill_charm" style="width: 40px; text-align: center;">
<button type="action" value="fel|charm|skill" name="act_towroll"><span class="skill-name">Charm</span></button>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="number" id="attr_skill_charm_improvement" name="attr_skill_charm_improvement" style="width: 40px; text-align: center;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lore-talents-box box">
<h3 class="box-title" x-tooltip="tooltips.lore">Lore</h3>
<div class="lore-inputs">
<input type="text" id="attr_lore1" name="attr_lore1">
<input type="text" id="attr_lore2" name="attr_lore2">
<input type="text" id="attr_lore3" name="attr_lore3">
<input type="text" id="attr_lore4" name="attr_lore4">
<input type="text" id="attr_lore5" name="attr_lore5">
<input type="text" id="attr_lore6" name="attr_lore6">
</div>
<h3 class="box-title" x-tooltip="tooltips.talents">Talents</h3>
<div class="talents-inputs">
<input type="text" id="attr-talent" name="attr_talent">
<fieldset class="repeating_talents">
<input type="text" id="attr-talent" name="attr_talent">
</fieldset>
</div>
</div>
<div class="appearance-coin-box">
<div class="box">
<h3 class="box-title">Appearance</h3>
<div class="talents-inputs">
<input type="text" id="attr_appearance1" name="attr_appearance1">
<input type="text" id="attr_appearance2" name="attr_appearance2">
<input type="text" id="attr_appearance3" name="attr_appearance3">
<input type="text" id="attr_appearance4" name="attr_appearance4">
<input type="text" id="attr_appearance5" name="attr_appearance5">
<input type="text" id="attr_appearance6" name="attr_appearance6">
</div>
</div>
<div class="box" style="margin-top: 1rem;">
<h3 class="box-title">Coin</h3>
<div class="info-line">
<label for="status">Status</label>
<select id="status" name="attr_coin_status">
<option value="brass">Brass</option>
<option value="silver">Silver</option>
<option value="gold">Gold</option>
</select>
</div>
<div class="coin-grid-container" style="margin-top: 1rem;">
<label>Brass</label>
<div class="coin-slots-container">
<input type="text" id="attr_coins_brass" name="attr_coins_brass">
</div>
<label>Silver</label>
<div class="coin-slots-container">
<div class="coin-slots-container">
<input type="text" id="attr_coins_silver" name="attr_coins_silver">
</div>
</div>
<label>Gold</label>
<div class="coin-slots-container">
<input type="text" id="attr_coins_gold" name="attr_coins_gold">
</div>
</div>
</div>
<div class="box" style="margin-top: 1rem; display: flex; gap: 1rem; justify-content: center;">
<div style="text-align: center;">
<h3 class="box-title">Resilience</h3>
<div style="height: 30px; display: flex; align-items: center; justify-content: center;">
<input type="number" id="attr_resilience" name="attr_resilience" style="width: 50px; text-align: center; font-size: 1.5rem;">
</div>
<span class="sub-label" style="font-size: 0.8rem;">Toughness + Armour</span>
</div>
<div style="text-align: center;">
<h3 class="box-title">Protection</h3>
<div style="height: 30px; display: flex; align-items: center; justify-content: center;">
<input type="number" id="attr_protection" name="attr_protection" style="width: 50px; text-align: center; font-size: 1.5rem;">
</div>
<span class="sub-label" style="font-size: 0.8rem;">Armour</span>
</div>
</div>
</div>
<div class="weapons-box box">
<h3 class="box-title">Weapons</h3>
<div class="weapons">
<div class="weapons-row">
<h5>Action</h5>
<h5>Name</h5>
<h5>Range</h5>
<h5>Dice Pool</h5>
<h5>Skill</h5>
<h5>Damage</h5>
<h5>1h/2h</h5>
<h5>Traits</h5>
</div>
<fieldset class="repeating_weapons">
<div class="weapons-row">
<button type="action" value="bs|shooting|skill" name="act_towroll"><span class="skill-name">Roll</span></button>
<input type="text" name="attr_weapon_name">
<input type="text" name="attr_weapon_range">
<input type="number" name="attr_weapon_dice_pool" step="1">
<input type="number" name="attr_weapon_skill_value" step="1">
<input type="number" name="attr_weapon_damage" step="1">
<input type="text" name="attr_weapon_hands">
<input type="text" name="attr_weapon_traits">
</div>
</fieldset>
</div>
</div>
<div class="wounds-box box">
<h3 class="box-title">Wounds</h3>
<ul class="wounds-list">
<li>Treated</li>
<li><input type="checkbox" id="attr_wound_treated1" name="attr_wound_treated1"><input type="text" id="attr_wound_description1" name="attr_wound_description1"></li>
<li><input type="checkbox" id="attr_wound_treated2" name="attr_wound_treated2"><input type="text" id="attr_wound_description2" name="attr_wound_description2"></li>
<li><input type="checkbox" id="attr_wound_treated3" name="attr_wound_treated3"><input type="text" id="attr_wound_description3" name="attr_wound_description3"></li>
<li><input type="checkbox" id="attr_wound_treated4" name="attr_wound_treated4"><input type="text" id="attr_wound_description4" name="attr_wound_description4"></li>
<li><input type="checkbox" id="attr_wound_treated5" name="attr_wound_treated5"><input type="text" id="attr_wound_description5" name="attr_wound_description5"></li>
<li><input type="checkbox" id="attr_wound_treated6" name="attr_wound_treated6"><input type="text" id="attr_wound_description6" name="attr_wound_description6"></li>
<li><input type="checkbox" id="attr_wound_treated7" name="attr_wound_treated7"><input type="text" id="attr_wound_description7" name="attr_wound_description7"></li>
</ul>
<h3 class="box-title" style="margin-top: 1rem;">Conditions</h3>
<ul class="wounds-list">
<li><span ><input type="checkbox" id="attr_staggered" name="attr_staggered"> Staggered</span></li>
<li><input type="text" id="attr_condition1" name="attr_condition1"></li>
<li><input type="text" id="attr_condition2" name="attr_condition2"></li>
<li><input type="text" id="attr_condition3" name="attr_condition3"></li>
<li><input type="text" id="attr_condition4" name="attr_condition4"></li>
</ul>
</div>
<div class="trappings-box box">
<h3 class="box-title" x-tooltip="tooltips.trappings">Trappings</h3>
<div class="talents-inputs">
<input type="text" id="attr_trappings" name="attr_trappings">
<fieldset class="repeating_trappings">
<input type="text" id="attr_trappings" name="attr_trappings">
</fieldset>
</div>
<h3 class="box-title" x-tooltip="tooltips.assets" style="margin-top: 1rem;">Assets</h3>
<div class="talents-inputs">
<input type="text" id="attr_assets" name="attr_assets">
<fieldset class="repeating_assets">
<input type="text" id="attr_assets" name="attr_assets">
</fieldset>
</div>
</div>
<div class="contacts-box box">
<h3 class="box-title">Contacts</h3>
<ul class="contacts-list">
<li><strong>Name</strong><strong style="margin-left: 80px;">Relationship</strong></li>
<li><input type="text" id="attr_contact" name="attr_contact" style="width: 100px;"><input type="text" id="attr_relationship" name="attr_relationship"></li>
<fieldset class="repeating_contacts">
<li><input type="text" id="attr_contact" name="attr_contact" style="width: 100px;"><input type="text" id="attr_relationship" name="attr_relationship"></li>
</fieldset>
</ul>
</div>
<div class="magic-box box">
<h3 class="box-title">Magic</h3>
<div style="display: flex; justify-content: space-around; gap: 1rem; margin-bottom: 1rem;">
<div style="text-align: center;">
<label class="header-font">Wizard Level</label>
<input type="number" id="attr_wizard_level" name="attr_wizard_level" style="width: 80px; text-align: center;">
</div>
<div style="text-align: center;">
<label class="header-font">Roll to Cast</label>
<button type="action" value="re|willpower|spell" name="act_towroll"><span class="skill-name">Cast</span></button>
</div>
</div>
<div style="border: 1px solid var(--ink-main); padding: 0.5rem; text-align: center;">
<h4 class="header-font" style="margin: 0 0 0.5rem 0; color: var(--ink-header);">Miscast Pool</h4>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px;">
<input type="number" id="attr_miscast_pool" name="attr_miscast_pool" style="width: 80px; text-align: center;">
</div>
</div>
<div style="margin-top: 1rem;">
<h4 class="header-font" style="margin: 0 0 0.5rem 0; text-align: center; color: var(--ink-header);">Miscast Effects</h4>
<input type="text" id="attr_miscast_effects" name="attr_miscast_effects" style="margin-bottom: 0.5rem;">
</div>
</div>
<div class="other-characters-box box">
<h3 class="box-title">Other Characters</h3>
<ul class="contacts-list">
<li><strong>Name</strong><strong style="margin-left: 80px;">Relationship</strong></li>
<li><input type="text" id="attr_other_character_name1" name="attr_other_character_name1" style="width: 100px;"><input type="text" id="attr_other_character_relationship1" name="attr_other_character_relationship1" ></li>
<li><input type="text" id="attr_other_character_name2" name="attr_other_character_name2" style="width: 100px;"><input type="text" id="attr_other_character_relationship2" name="attr_other_character_relationship2" ></li>
<li><input type="text" id="attr_other_character_name3" name="attr_other_character_name3" style="width: 100px;"><input type="text" id="attr_other_character_relationship3" name="attr_other_character_relationship3" ></li>
<li><input type="text" id="attr_other_character_name4" name="attr_other_character_name4" style="width: 100px;"><input type="text" id="attr_other_character_relationship4" name="attr_other_character_relationship4" ></li>
<li><input type="text" id="attr_other_character_name5" name="attr_other_character_name5" style="width: 100px;"><input type="text" id="attr_other_character_relationship5" name="attr_other_character_relationship5" ></li>
<li><input type="text" id="attr_other_character_name6" name="attr_other_character_name6" style="width: 100px;"><input type="text" id="attr_other_character_relationship6" name="attr_other_character_relationship6" ></li>
<li><input type="text" id="attr_other_character_name7" name="attr_other_character_name7" style="width: 100px;"><input type="text" id="attr_other_character_relationship7" name="attr_other_character_relationship7" ></li>
</ul>
</div>
<div class="spells-box box">
<h3 class="box-title">Spells</h3>
<div class="spells">
<div class="spells-row">
<h5>CV</h5>
<h5>Target</h5>
<h5>Range</h5>
<h5>Duration</h5>
<h5>Formalised</h5>
<h5>Memorised</h5>
<h5>Effect</h5>
</div>
<fieldset class="repeating_spells">
<div class="spells-row">
<input type="number" id="attr_spell_cv" name="attr_spell_cv">
<input type="text" id="attr_spell_target" name="attr_spell_target">
<input type="text" id="attr_spell_range" name="attr_spell_range">
<input type="text" id="attr_spell_duration" name="attr_spell_duration">
<input type="checkbox" id="attr_spell_formalized" name="attr_spell_formalized">
<input type="checkbox" id="attr_spell_memorized" name="attr_spell_memorized">
<input type="text" id="attr_spell_effect" class="effect-input" name="attr_spell_effect">
</div>
</fieldset>
</div>
</div>
<div class="grim-portent-box box">
<h3 class="box-title" x-tooltip="tooltips.grimPortent">Grim Portent</h3>
<div class="talents-inputs">
<input type="text" id="attr_grim_portent1" name="attr_grim_portent1">
<input type="text" id="attr_grim_portent2" name="attr_grim_portent2">
<input type="text" id="attr_grim_portent3" name="attr_grim_portent3">
<input type="text" id="attr_grim_portent4" name="attr_grim_portent4">
<input type="text" id="attr_grim_portent5" name="attr_grim_portent5">
<input type="text" id="attr_grim_portent6" name="attr_grim_portent6">
</div>
</div>
<div class="exacting-test-box box">
<h3 class="box-title" x-tooltip="tooltips.exactingTest">Exacting Test Progress</h3>
<div class="talents-inputs">
<input type="text" id="attr_exacting_test1" name="attr_exacting_test1">
<input type="text" id="attr_exacting_test2" name="attr_exacting_test2">
<input type="text" id="attr_exacting_test3" name="attr_exacting_test3">
<input type="text" id="attr_exacting_test4" name="attr_exacting_test4">
<input type="text" id="attr_exacting_test5" name="attr_exacting_test5">
<input type="text" id="attr_exacting_test6" name="attr_exacting_test6">
</div>
</div>
<div class="clues-insights-box box">
<h3 class="box-title" x-tooltip="tooltips.cluesAndInsights">Clues and Insights</h3>
<div class="talents-inputs">
<input type="text" id="attr_clues_insights1" name="attr_clues_insights1">
<input type="text" id="attr_clues_insights2" name="attr_clues_insights2">
<input type="text" id="attr_clues_insights3" name="attr_clues_insights3">
<input type="text" id="attr_clues_insights4" name="attr_clues_insights4">
<input type="text" id="attr_clues_insights5" name="attr_clues_insights5">
<input type="text" id="attr_clues_insights6" name="attr_clues_insights6">
</div>
</div>
<div class="favours-owed-box box">
<h3 class="box-title" x-tooltip="tooltips.favoursOwed">Favours Owed</h3>
<div class="talents-inputs">
<input type="text" id="attr_favours_owed1" name="attr_favours_owed1">
<input type="text" id="attr_favours_owed2" name="attr_favours_owed2">
<input type="text" id="attr_favours_owed3" name="attr_favours_owed3">
<input type="text" id="attr_favours_owed4" name="attr_favours_owed4">
<input type="text" id="attr_favours_owed5" name="attr_favours_owed5">
<input type="text" id="attr_favours_owed6" name="attr_favours_owed6">
</div>
</div>
<div class="notes-box box">
<h3 class="box-title" x-tooltip="tooltips.notes">Notes</h3>
<textarea class="notes-textarea" id="attr_notes" name="attr_notes"></textarea>
</div>
</div>
</div>
</div>
<!--Roll Template-->
<rolltemplate class="sheet-rolltemplate-tow1ed">
<table>
<tr>
<th colspan="2" class="sheet-title"><b>{{ Character Name }}</b> {{selected_skill}}</th>
</tr>
<tr>
<td><span class="sheet-tcat">Skill: </span></td>
<td><span class="sheet-inlinerollresult">{{skill}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Dice Pool: </span></td>
<td><span class="sheet-inlinerollresult">{{characteristic}}d + {{modifier}}d</span></td>
</tr>
<tr class="sheet-topline">
<th colspan="2"><span></span></th>
</tr>
<tr>
<td><span class="sheet-tcat">Numbers Rolled:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::numbers_rolled}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Successes:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::successes}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Success Type:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::success_type}}</span></td>
</tr>
</table>
</rolltemplate>
<!--Roll Template-->
<rolltemplate class="sheet-rolltemplate-tow1ed2">
<table>
<tr>
<th colspan="2" class="sheet-title"><b>{{ Character Name }}</b> {{name}}</th>
</tr>
<tr>
<td><span class="sheet-tcat">Skill: </span></td>
<td><span class="sheet-inlinerollresult">{{skill}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Dice Pool: </span></td>
<td><span class="sheet-inlinerollresult">{{dice_pool}}d + {{modifier}}d</span></td>
</tr>
<tr class="sheet-topline">
<th colspan="2"><span></span></th>
</tr>
<tr>
<td><span class="sheet-tcat">Numbers Rolled:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::numbers_rolled}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Successes:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::successes}}</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Weapon Damage:</span></td>
<td><span class="sheet-inlinerollresult">{{computed::damage}} - Opponent SL</span></td>
</tr>
<tr>
<td><span class="sheet-tcat">Traits:</span></td>
<td><span class="sheet-inlinerollresult">{{traits}}</span></td>
</tr>
</table>
</rolltemplate>
<script>
// <script type="text/worker">
function rollattack(roll_string, debug=false) {
if (debug) {
console.log("ROLL STRING:");
console.log(roll_string);
}
startRoll(roll_string, (results) => {
if (debug) {
console.log("ROLL RESULTS:");
console.log(results);
}
let dice_pool = results.results.dice_pool.result;
let damage = results.results.damage.result;
let skill = results.results.skill.result;
let modifier = results.results.modifier.result;
dice_pool = (dice_pool + modifier) > 0 ? (dice_pool + modifier) : 1;
// console.log("DICE POOL: " + dice_pool);
let successes = 0;
let numbers_rolled = [];
for (let i = 0; i < dice_pool; i++) {
let dieRoll = Math.floor(Math.random() * 10) + 1;
numbers_rolled.push(dieRoll);
if (dieRoll <= skill) {
successes += 1;
}
}
damage = damage + successes;
if (debug) {
console.log("NUMBERS ROLLED: " + numbers_rolled);
console.log("SUCCESSES: " + successes);
console.log("Damage: " + damage);
console.log("Skill: " + skill);
}
finishRoll(
results.rollId,
{
modifier: modifier,
skill: skill,
dice_pool: dice_pool,
successes: successes,
numbers_rolled: numbers_rolled,
damage: damage
}
);
if (debug) {
console.log('MODIFIER: '+modifier);
console.log('SKILL: '+skill);
console.log('DICE POOL: '+dice_pool);
console.log('SUCCESSES: '+successes);
console.log('NUMBERS ROLLED: '+numbers_rolled);
console.log(results.results);
}
});
}
const repeating_list = ["repeating_weapons"];
repeating_list.forEach(trigger => {
on(`clicked:${trigger}`, function(eventInfo) {
const source = eventInfo["sourceAttribute"] ? eventInfo["sourceAttribute"] : "";
let reroll = source ? source : "roll";
let key = trigger.replace("repeating_", "");
key = key.slice(0, key.length - 1);
let test_list = [];
getAttrs(test_list.concat([
`${trigger}_${key}_name`,
`${trigger}_${key}_dice_pool`,
`${trigger}_${key}_damage`,
`${trigger}_${key}_traits`,
`${trigger}_${key}_skill_value`,
]), function(values) {
let name = values[`${trigger}_${key}_name`];
let dice_pool = parseInt(values[`${trigger}_${key}_dice_pool`])||0;
let damage = parseInt(values[`${trigger}_${key}_damage`])||0;
let traits = values[`${trigger}_${key}_traits`];
let skill = values[`${trigger}_${key}_skill_value`];
console.log(name + " | " + dice_pool + " | " + damage + " | " + traits + " | " + skill);
let roll_string = "&{template:tow1ed2} [[?{Dice Mod | None,+0 | 1d,+1 | 2d,+2 | 3d,+3 | 4d,+4 | 5d,+5 | -1d,-1 | -2d,-2 | -3d,-3 | -4d,-4 | -5d,-5}]] {{modifier=$[[0]]}}{{name="+name+"}}{{dice_pool=[["+dice_pool+"]]}}{{damage=[["+damage+"]]}}{{traits="+traits+"}}{{skill=[["+skill+"]]}}{{Character Name=@{selected|character_name} }}{{successes=[[d10]]}}{{numbers_rolled=[[d10]]}}";
rollattack(roll_string, true);
//rollTest(reroll, skill_name, skill_total, diff_roll, circ, superiority, dmg, dmg_info, slmod, critfum);
});
});
});
on('clicked:towroll', (info) => {
let characteristic = info.htmlAttributes.value;
const myArray = characteristic.split("|");
const selected_characteristic = myArray[0];
let selected_skill = myArray[1];
const selected_rolltype = myArray[2];
const debug = false;
if (debug) {
console.log("Selected Characteristic: " + selected_characteristic);
console.log("Selected Skill: " + selected_skill);
console.log("Selected Roll Type: " + selected_rolltype);
}
let roll_string = "&{template:tow1ed} [[?{Dice Mod | None,+0 | 1d,+1 | 2d,+2 | 3d,+3 | 4d,+4 | 5d,+5 | -1d,-1 | -2d,-2 | -3d,-3 | -4d,-4 | -5d,-5}]] {{characteristic=[[@{"+selected_characteristic+"}]]}}{{skill=[[@{skill_"+selected_skill+"}]]}}{{modifier=$[[0]]}}{{selected_skill="+selected_skill+"}}{{successes=[[d10]]}}{{numbers_rolled=[[d10]]}}{{success_type=[[d10]]}}{{Character Name=@{selected|character_name} }}";
if (selected_rolltype == 'spell') {
roll_string = "&{template:tow1ed} [[?{Dice Mod | None,+0 | 1d,+1 | 2d,+2 | 3d,+3 | 4d,+4 | 5d,+5 | -1d,-1 | -2d,-2 | -3d,-3 | -4d,-4 | -5d,-5}]] {{characteristic=[[@{"+selected_characteristic+"}]]}}{{skill=[[@{skill_"+selected_skill+"}]]}}{{miscast_pool=[[@{miscast_pool}]]}}{{selected_skill="+selected_skill+"}}{{wizard_level=[[@{wizard_level}]]}}{{modifier=$[[0]]}}{{successes=[[d10]]}}{{numbers_rolled=[[d10]]}}{{success_type=[[d10]]}}{{Character Name=@{selected|character_name} }}";
selected_skill = "magic";
}
rolltest(roll_string, selected_skill, debug);
});
function rolltest(roll_string, selected_skill, debug=false) {
startRoll(roll_string, (results) => {
if (debug) {
console.log("ROLL RESULTS:");
console.log(results);
}
let characteristic = results.results.characteristic.result;
let skill = results.results.skill.result;
let modifier = results.results.modifier.result;
let miscast_pool = results.results.miscast_pool ? results.results.miscast_pool.result : null;
let wizard_level = results.results.wizard_level ? results.results.wizard_level.result : null;
let dice_pool = (characteristic + modifier) > 0 ? (characteristic + modifier) : 1;
// console.log("DICE POOL: " + dice_pool);
let successes = 0;
let numbers_rolled = [];
let nines_rolled = [];
for (let i = 0; i < dice_pool; i++) {
let dieRoll = Math.floor(Math.random() * 10) + 1;
numbers_rolled.push(dieRoll);
if (dieRoll == 9 && selected_skill == "magic") {
nines_rolled.push(dieRoll);
}
if (dieRoll <= skill) {
successes += 1;
}
}
if (debug) {
console.log("NUMBERS ROLLED: " + numbers_rolled);
console.log("SUCCESSES: " + successes);
console.log("Miscast Pool: " + miscast_pool);
console.log("Wizard Level: " + wizard_level);
console.log("Selected Skill: " + selected_skill);
console.log("Nines Rolled: " + nines_rolled.length);
}
if (((nines_rolled.length + miscast_pool) > wizard_level) && selected_skill == "magic") {
successes = 0;
success_type = "Miscast Failure!";
} else if (successes >= 3) {
success_type = "Total Success!";
} else if (successes >= 2) {
success_type = "Success";
} else if (successes >= 1) {
success_type = "Marginal Success";
} else {
success_type = "Failure!";
}
finishRoll(
results.rollId,
{
modifier: modifier,
characteristic: characteristic,
skill: skill,
dice_pool: dice_pool,
successes: successes,
numbers_rolled: numbers_rolled,
success_type: success_type
}
);
if (debug) {
console.log('MODIFIER: '+modifier);
console.log('CHARACTERISTIC: '+characteristic);
console.log('SKILL: '+skill);
console.log('DICE POOL: '+dice_pool);
console.log('SUCCESSES: '+successes);
console.log('NUMBERS ROLLED: '+numbers_rolled);
console.log('SUCCESS_TYPE: '+success_type);
console.log(results.results);
}
});
}
</script>
TheOldWorldRPG/sheet.json
+9
View File
@@ -0,0 +1,9 @@
{
"html": "sheet.html",
"css": "sheet.css",
"authors": "Craig Garrett (@clgarret), mylesmar10",
"roll20userid": "561389",
"preview": "sheet.png",
"instructions": "Minimalistic Sheet for the The Old World RPG. You can roll Skills, Weapons, Magic by pressing the labels. Rolls include an extra modifier if needed. You can contact Craig G if you have any questions. Enjoy.",
"legacy": false
}
TheOldWorldRPG/sheet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB