mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
refactor: Updates skills for trainers
- Adds collapsible section for skills
- Adds collapsible skills
- Adds collapsing functionality to skills section as a whole
- Adds new design for the skills in the trainer sheet
- Adds collapsing functionality to individual skills
- Consolidates individual skill configuration into the character page
- Fixes bug with skills not updating the roll template colour based on the attribute selected to roll for that skill
- Updates capture pokemon to new skill visuals
- Updates visuals of the capture pokemon field to match the new skill visuals
- Updates configuration of the capture pokemon field to surface the selected pokeball name
- Displays the selected pokeball in the capture pokemon button to indicate which is used when collapsed
- Updates the calculation of the modifier to parse in the custom ball value if the default is a number
- Updates the total field to indicate the current total capture modifier instead of the skill bonus
- Adds a configuration option to not make the skill roll to hit a target pokémon
- Adds the selected ball to the capture roll title for easy checking after an attempt is thrown
- Removes the now-unnecessary skill attribute selection from the configuration page
- Resolves bug with trainer stats and natures
- Resolves a bug where trainer stats would be affected by a selected nature if the character sheet has any pokémon configuration
- Adds a sheet-worker to recalculate the stats when the character-type is changed
This commit is contained in:
Ian Merryweather
@@ -585,6 +585,66 @@ div.sheet-pokemon-move span.sheet-readonly-field input[type="number"] {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.sheet-collapsible-skill {
|
||||
background-color: var(--background-color);
|
||||
display: grid;
|
||||
grid-template-columns: 12fr 3fr 1fr;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.sheet-collapsible-skill > input.sheet-options-flag,
|
||||
div.sheet-collapsible-skill > input.sheet-options-flag + span {
|
||||
display: block;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
div.sheet-3col-centered {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.sheet-skills-column > .sheet-collapsible-skill > div.sheet-options,
|
||||
.sheet-collapsible-skill.sheet-capture > div.sheet-options {
|
||||
background: #0001;
|
||||
border: 1px solid var(--foreground-color);
|
||||
grid-area: 2 / 1 / 2 / 4;
|
||||
padding: 0 8px;
|
||||
padding-bottom: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.sheet-collapsible-skill.sheet-capture > div.sheet-options {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
.sheet-collapsible-skill > .sheet-options > span > select {
|
||||
width: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.sheet-collapsible-skill > .sheet-options > span + span + span {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.sheet-collapsible-skill.sheet-capture > .sheet-options > span + span + span {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.sheet-skills-column > .sheet-collapsible-skill > input.sheet-skill-total,
|
||||
.sheet-collapsible-skill.sheet-capture > input.sheet-skill-total {
|
||||
height: 24px;
|
||||
width: 80%;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
div.sheet-collapsible-feature,
|
||||
div.sheet-feature-container,
|
||||
div.sheet-pokemon-move,
|
||||
@@ -687,10 +747,10 @@ div.sheet-skill-selection .sheet-no-dropdown {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sheet-2col-centered {
|
||||
.sheet-two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.sheet-move-modifiers {
|
||||
@@ -804,11 +864,6 @@ label.sheet-afflictions-text {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.charsheet input.sheet-total-display.sheet-tiny-number[type="text"] {
|
||||
width: 25px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sheet-damage-dice {
|
||||
width: 52px;
|
||||
text-align: left;
|
||||
@@ -1110,28 +1165,83 @@ input.sheet-character-type[value="hybrid"] ~ div.sheet-tab-hybrid {
|
||||
}
|
||||
|
||||
input.sheet-skill-color-setting[value="ATK"] + input[type="number"].sheet-skill-total,
|
||||
input.sheet-skill-color-setting[value="ATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover {
|
||||
input.sheet-skill-color-setting[value="ATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="ATK"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="ATK"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
background-color: var(--stat-ro-atk);
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
input.sheet-skill-color-setting[value="DEF"] + input[type="number"].sheet-skill-total,
|
||||
input.sheet-skill-color-setting[value="DEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover {
|
||||
input.sheet-skill-color-setting[value="DEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="DEF"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="DEF"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
background-color: var(--stat-ro-def);
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
input.sheet-skill-color-setting[value="SPATK"] + input[type="number"].sheet-skill-total,
|
||||
input.sheet-skill-color-setting[value="SPATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover {
|
||||
input.sheet-skill-color-setting[value="SPATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPATK"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPATK"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
background-color: var(--stat-ro-spatk);
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
input.sheet-skill-color-setting[value="SPDEF"] + input[type="number"].sheet-skill-total,
|
||||
input.sheet-skill-color-setting[value="SPDEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover {
|
||||
input.sheet-skill-color-setting[value="SPDEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPDEF"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPDEF"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
background-color: var(--stat-ro-spdef);
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
input.sheet-skill-color-setting[value="SPD"] + input[type="number"].sheet-skill-total,
|
||||
input.sheet-skill-color-setting[value="SPD"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover {
|
||||
input.sheet-skill-color-setting[value="SPD"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPD"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
input.sheet-skill-color-setting[value="SPD"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
background-color: var(--stat-ro-spd);
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="ATK"] + input[type="number"].sheet-skill-total,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="ATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="ATK"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="ATK"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
border-color: var(--stat-atk);
|
||||
color: var(--stat-atk);
|
||||
}
|
||||
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="DEF"] + input[type="number"].sheet-skill-total,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="DEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="DEF"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="DEF"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
border-color: var(--stat-def);
|
||||
color: var(--stat-def);
|
||||
}
|
||||
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPATK"] + input[type="number"].sheet-skill-total,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPATK"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPATK"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPATK"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
border-color: var(--stat-spatk);
|
||||
color: var(--stat-spatk);
|
||||
}
|
||||
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPDEF"] + input[type="number"].sheet-skill-total,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPDEF"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPDEF"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPDEF"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
border-color: var(--stat-spdef);
|
||||
color: var(--stat-spdef);
|
||||
}
|
||||
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPD"] + input[type="number"].sheet-skill-total,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPD"] + .sheet-skill-total + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPD"] + button[type="roll"].sheet-skill-roller:hover,
|
||||
.sheet-darkmode input.sheet-skill-color-setting[value="SPD"] + button[type="roll"].sheet-skill-roller + .sheet-skill-total {
|
||||
border-color: var(--stat-spd);
|
||||
color: var(--stat-spd);
|
||||
}
|
||||
|
||||
input.sheet-skill-total {
|
||||
@@ -1317,53 +1427,53 @@ button[type="roll"].sheet-stat-roller:hover {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-atk-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-ATK-skill {
|
||||
--border-color: var(--poke-all-dark-background);
|
||||
--header-bg: var(--atk-gradient);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-def-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-DEF-skill {
|
||||
--border-color: var(--poke-all-dark-background);
|
||||
--header-bg: var(--def-gradient);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-spatk-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-SPATK-skill {
|
||||
--border-color: var(--poke-all-dark-background);
|
||||
--header-bg: var(--spatk-gradient);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-spdef-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-SPDEF-skill {
|
||||
--border-color: var(--poke-all-dark-background);
|
||||
--header-bg: var(--spdef-gradient);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-spd-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll .sheet-rolltemplate-color-setting-SPD-skill {
|
||||
--border-color: var(--poke-all-dark-background);
|
||||
--header-bg: var(--spd-gradient);
|
||||
}
|
||||
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-atk-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-ATK-skill {
|
||||
--border-color: var(--atk-gradient);
|
||||
--header-bg: var(--atk-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-def-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-DEF-skill {
|
||||
--border-color: var(--def-gradient);
|
||||
--header-bg: var(--def-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spatk-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPATK-skill {
|
||||
--border-color: var(--spatk-gradient);
|
||||
--header-bg: var(--spatk-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spdef-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPDEF-skill {
|
||||
--border-color: var(--spdef-gradient);
|
||||
--header-bg: var(--spdef-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spd-skill {
|
||||
.sheet-rolltemplate-inline-skill-roll.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPD-skill {
|
||||
--border-color: var(--spd-gradient);
|
||||
--header-bg: var(--spd-header-dark);
|
||||
}
|
||||
@@ -1513,31 +1623,31 @@ button[type="roll"].sheet-stat-roller:hover {
|
||||
--header-bg: var(--poke-water);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-color-setting-atk-skill {
|
||||
.sheet-rolltemplate-color-setting-ATK-skill {
|
||||
--border-color: var(--atk-gradient);
|
||||
--box-bg: linear-gradient(var(--header-bg), var(--border-color));
|
||||
--header-bg: var(--atk-header);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-color-setting-def-skill {
|
||||
.sheet-rolltemplate-color-setting-DEF-skill {
|
||||
--border-color: var(--def-gradient);
|
||||
--box-bg: linear-gradient(var(--header-bg), var(--border-color));
|
||||
--header-bg: var(--def-header);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-color-setting-spatk-skill {
|
||||
.sheet-rolltemplate-color-setting-SPATK-skill {
|
||||
--border-color: var(--spatk-gradient);
|
||||
--box-bg: linear-gradient(var(--header-bg), var(--border-color));
|
||||
--header-bg: var(--spatk-header);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-color-setting-spdef-skill {
|
||||
.sheet-rolltemplate-color-setting-SPDEF-skill {
|
||||
--border-color: var(--spdef-gradient);
|
||||
--box-bg: linear-gradient(var(--header-bg), var(--border-color));
|
||||
--header-bg: var(--spdef-header);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-color-setting-spd-skill {
|
||||
.sheet-rolltemplate-color-setting-SPD-skill {
|
||||
--border-color: var(--spd-gradient);
|
||||
--box-bg: linear-gradient(var(--header-bg), var(--border-color));
|
||||
--header-bg: var(--spd-header);
|
||||
@@ -1621,23 +1731,23 @@ button[type="roll"].sheet-stat-roller:hover {
|
||||
--header-bg: var(--poke-water-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-atk-skill {
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-ATK-skill {
|
||||
--header-bg: var(--atk-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-def-skill {
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-DEF-skill {
|
||||
--header-bg: var(--def-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spatk-skill {
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPATK-skill {
|
||||
--header-bg: var(--spatk-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spdef-skill {
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPDEF-skill {
|
||||
--header-bg: var(--spdef-header-dark);
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-spd-skill {
|
||||
.sheet-rolltemplate-darkmode .sheet-rolltemplate-color-setting-SPD-skill {
|
||||
--header-bg: var(--spd-header-dark);
|
||||
}
|
||||
|
||||
@@ -2230,7 +2340,11 @@ input.sheet-capitalize {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sheet-2col-centered {
|
||||
.sheet-two-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sheet-3col-centered {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -2317,18 +2431,6 @@ input.sheet-capitalize {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.sheet-capture-pokemon-skill-m1 {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 6fr 1fr;
|
||||
}
|
||||
|
||||
.sheet-capture-pokemon-skill-m2 {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.sheet-move-modifiers {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
+1035
-367
File diff suppressed because it is too large
Load Diff
@@ -23,6 +23,12 @@ Things we want to add to the character sheet, presented in no particular order o
|
||||
|
||||
## Changelog
|
||||
|
||||
### Jul 14, 2025
|
||||
- Added a collapsing section for skills
|
||||
- Fixed an issue where pokémon nature would affect trainer stats
|
||||
- Updated skill and capture pokémon visuals, for trainers only (for now)
|
||||
- Removed now-unneeded configuration page entry for skill attribute selection
|
||||
|
||||
### Jun 28, 2025
|
||||
- Reinstated 1/combat frequency option to accommodate homebrew
|
||||
|
||||
|
||||
Reference in New Issue
Block a user