mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
feat: Converts stat and avatar to collapsible area
- Shows the stats without the avatar when collapsed and the avatar and stats when expanded - Refactors non-repeating section attribute changes to use a single function - Resolves small issue with mobile companion overflow
This commit is contained in:
Ian Merryweather
@@ -753,7 +753,8 @@ p {
|
||||
|
||||
.sheet-character-image-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
grid-row-gap: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
margin-bottom: 32px;
|
||||
@@ -761,10 +762,10 @@ p {
|
||||
|
||||
.sheet-character-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sheet-below-stats {
|
||||
@@ -2041,7 +2042,8 @@ input.sheet-capitalize {
|
||||
@media only screen and (max-width: 480px) {
|
||||
.sheet-wrapper {
|
||||
min-width: 320px;
|
||||
font-size: 1.1em
|
||||
font-size: 1.1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sheet-2col-centered {
|
||||
@@ -2051,11 +2053,7 @@ input.sheet-capitalize {
|
||||
.sheet-configuration-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sheet-character-stat-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
|
||||
.sheet-character-skill-labels {
|
||||
grid-template-columns: 1fr 5fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- Background coloring strategy inspired by the GURPS sheet -->
|
||||
<input class="sheet-color-setting" name="attr_active_type1" type="hidden" value="typeless" />
|
||||
<input class="sheet-form-setting" name="attr_display-form" type="hidden" value="" />
|
||||
<div class="sheet-wrapper sheet-color-background">
|
||||
<div class="sheet-wrapper">
|
||||
<div class="sheet-page-selection">
|
||||
<button class="sheet-page-selection-option" name="act_character-page" type="action">Character</button>
|
||||
<button class="sheet-page-selection-option" name="act_configuration-page" type="action">Configuration</button>
|
||||
@@ -344,66 +344,132 @@
|
||||
<br />
|
||||
|
||||
<div class="sheet-tab-trainer sheet-tab-pokemon sheet-tab-hybrid">
|
||||
<div class="sheet-character-image-stats-grid">
|
||||
<div class="sheet-character-avatar">
|
||||
<img class="sheet-avatar-image" name="attr_character_avatar">
|
||||
<div class="sheet-feature-container" style="position: relative;">
|
||||
<input checked class="sheet-options-flag" name="attr_avatar_options_flag" type="checkbox" />
|
||||
<span name="attr_avatar_flag">-</span>
|
||||
<div class="sheet-display">
|
||||
<div class="sheet-character-stat-grid">
|
||||
<div class="sheet-ball sheet-hp-ball">
|
||||
<b>Current HP</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP" title="Attribute: HP" type="number" /><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP_max" title="Attribute: HP_max" type="number" /><br />
|
||||
<p>Max HP</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-atk-ball">
|
||||
<b>Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_ATK" title="Attribute: ATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=atk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Attack Check}} {{skill-roll=[[ 1d20 + [[ @{ATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_ATKMOD" title="Attribute: ATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>ATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-def-ball">
|
||||
<b>Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_DEF" title="Attribute: DEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=def}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Defense Check}} {{skill-roll=[[ 1d20 + [[ @{DEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_DEFMOD" title="Attribute: DEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>DEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spatk-ball">
|
||||
<b>Special Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPATK" title="Attribute: SPATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spatk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Attack Check}} {{skill-roll=[[ 1d20 + [[ @{SPATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPATKMOD" title="Attribute: SPATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spdef-ball">
|
||||
<b>Special Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPDEF" title="Attribute: SPDEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spdef}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Defense Check}} {{skill-roll=[[ 1d20 + [[ @{SPDEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDEFMOD" title="Attribute: SPDEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPDEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spd-ball">
|
||||
<b>Speed</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPD" title="Attribute: SPD" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_speed_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spd}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Speed Check}} {{skill-roll=[[ 1d20 + [[ @{SPDMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDMOD" title="Attribute: SPDMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPD mod</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-character-stat-grid">
|
||||
<div class="sheet-ball sheet-hp-ball">
|
||||
<b>Current HP</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP" title="Attribute: HP" type="number" /><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP_max" title="Attribute: HP_max" type="number" /><br />
|
||||
<p class="sheet-hide-on-mobile">Max HP</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-atk-ball">
|
||||
<b>Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_ATK" title="Attribute: ATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=atk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Attack Check}} {{skill-roll=[[ 1d20 + [[ @{ATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_ATKMOD" title="Attribute: ATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p class="sheet-hide-on-mobile">ATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-def-ball">
|
||||
<b>Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_DEF" title="Attribute: DEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=def}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Defense Check}} {{skill-roll=[[ 1d20 + [[ @{DEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_DEFMOD" title="Attribute: DEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p class="sheet-hide-on-mobile">DEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spatk-ball">
|
||||
<b>Special Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPATK" title="Attribute: SPATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spatk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Attack Check}} {{skill-roll=[[ 1d20 + [[ @{SPATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPATKMOD" title="Attribute: SPATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p class="sheet-hide-on-mobile">SPATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spdef-ball">
|
||||
<b>Special Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPDEF" title="Attribute: SPDEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spdef}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Defense Check}} {{skill-roll=[[ 1d20 + [[ @{SPDEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDEFMOD" title="Attribute: SPDEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p class="sheet-hide-on-mobile">SPDEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spd-ball">
|
||||
<b>Speed</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPD" title="Attribute: SPD" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_speed_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spd}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Speed Check}} {{skill-roll=[[ 1d20 + [[ @{SPDMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDMOD" title="Attribute: SPDMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p class="sheet-hide-on-mobile">SPD mod</p>
|
||||
<div class="sheet-options">
|
||||
<div class="sheet-character-image-stats-grid">
|
||||
<div class="sheet-character-avatar">
|
||||
<img class="sheet-avatar-image" name="attr_character_avatar">
|
||||
</div>
|
||||
<div class="sheet-character-stat-grid">
|
||||
<div class="sheet-ball sheet-hp-ball">
|
||||
<b>Current HP</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP" title="Attribute: HP" type="number" /><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_HP_max" title="Attribute: HP_max" type="number" /><br />
|
||||
<p>Max HP</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-atk-ball">
|
||||
<b>Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_ATK" title="Attribute: ATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=atk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Attack Check}} {{skill-roll=[[ 1d20 + [[ @{ATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_ATKMOD" title="Attribute: ATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>ATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-def-ball">
|
||||
<b>Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_DEF" title="Attribute: DEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=def}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Defense Check}} {{skill-roll=[[ 1d20 + [[ @{DEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_DEFMOD" title="Attribute: DEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>DEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spatk-ball">
|
||||
<b>Special Attack</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPATK" title="Attribute: SPATK" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_attack_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spatk}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Attack Check}} {{skill-roll=[[ 1d20 + [[ @{SPATKMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPATKMOD" title="Attribute: SPATKMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPATK mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spdef-ball">
|
||||
<b>Special Defense</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPDEF" title="Attribute: SPDEF" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_special_defense_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spdef}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Special Defense Check}} {{skill-roll=[[ 1d20 + [[ @{SPDEFMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDEFMOD" title="Attribute: SPDEFMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPDEF mod</p>
|
||||
</div>
|
||||
<div class="sheet-ball sheet-spd-ball">
|
||||
<b>Speed</b><br />
|
||||
<input class="sheet-stat-ball-color" name="attr_SPD" title="Attribute: SPD" type="number" readonly /><br />
|
||||
<button class="sheet-stat-roller" name="roll_speed_check" type="roll"
|
||||
value="@{publicity_roll} &{template:skill-roll} {{base-attribute=spd}} {{character-id=@{character_id}}} {{character-name=@{character_name}}} {{skill-name=Generic Speed Check}} {{skill-roll=[[ 1d20 + [[ @{SPDMOD} + ?{Temp Modifier|0} ]] ]]}}">
|
||||
<span name="attr_SPDMOD" title="Attribute: SPDMOD"></span>
|
||||
</button>
|
||||
<br />
|
||||
<p>SPD mod</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4251,35 +4317,42 @@
|
||||
|
||||
// Collapsing Blocks
|
||||
on("change:repeating_features:options_flag", function (eventInfo) {
|
||||
// Not using updateFlagAttr because then we'd have to retrieve the repeating row ID to build the attribute key to set
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ repeating_features_flag: flag });
|
||||
});
|
||||
|
||||
on("change:repeating_moves:options_flag", function (eventInfo) {
|
||||
// Not using updateFlagAttr because then we'd have to retrieve the repeating row ID to build the attribute key to set
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ repeating_moves_flag: flag });
|
||||
});
|
||||
|
||||
on("change:avatar_options_flag", function(eventInfo) {
|
||||
updateFlagAttr("avatar_flag", eventInfo.newValue);
|
||||
});
|
||||
|
||||
on("change:origin_options_flag", function (eventInfo) {
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ origin_flag: flag });
|
||||
updateFlagAttr("origin_flag", eventInfo.newValue);
|
||||
});
|
||||
|
||||
on("change:class_features_options_flag", function (eventInfo) {
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ class_features_flag: flag });
|
||||
updateFlagAttr("class_features_flag", eventInfo.newValue);
|
||||
});
|
||||
|
||||
on("change:options_stat_flag", function (eventInfo) {
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ stat_flag: flag });
|
||||
updateFlagAttr("stat_flag", eventInfo.newValue);
|
||||
});
|
||||
|
||||
on("change:options_afflictions_flag", function (eventInfo) {
|
||||
const flag = eventInfo.newValue == "on" ? "-" : "+";
|
||||
setAttrs({ afflictions_flag: flag });
|
||||
updateFlagAttr("afflictions_flag", eventInfo.newValue);
|
||||
});
|
||||
|
||||
function updateFlagAttr(targetAttr, flagValue) {
|
||||
const attrValue = flagValue == "on" ? "-" : "+";
|
||||
setAttrs({ [targetAttr]: attrValue });
|
||||
}
|
||||
|
||||
// Changing Skill Ability Modifiers
|
||||
let skills = ["acrobatics", "athletics", "bluff", "concentration", "constitution", "diplomacy", "engineering", "history", "insight"];
|
||||
skills.push("investigate", "medicine", "nature", "perception", "perform", "handling", "programming", "sleight", "stealth");
|
||||
|
||||
@@ -23,6 +23,10 @@ Things we want to add to the character sheet, presented in no particular order o
|
||||
|
||||
## Changelog
|
||||
|
||||
### Apr 10, 2024
|
||||
- Added support for collapsing the character avatar/stat grid section to show only the stat grid when collapsed
|
||||
- Resolved a small issue with the background when the sheet scrolled sideways for the mobile app
|
||||
|
||||
### Apr 5, 2024
|
||||
- Added support for collapsing the entire trainer features section
|
||||
- Added support for showing the character avatar in the stat grid section
|
||||
|
||||
Reference in New Issue
Block a user