From 21351cee22fad4e13daab7d2931105f1f136bd5f Mon Sep 17 00:00:00 2001 From: Jan Wille Date: Sun, 23 Mar 2025 19:29:18 +0100 Subject: [PATCH] example: styling data-values via CSS --- .../snippets/meta-bind-customization.css | 33 ++++++++++++++++++- .../DnD 5e Ability Scores and Modifiers.md | 19 +++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/exampleVault/.obsidian/snippets/meta-bind-customization.css b/exampleVault/.obsidian/snippets/meta-bind-customization.css index e131de9c..3a1e73dc 100644 --- a/exampleVault/.obsidian/snippets/meta-bind-customization.css +++ b/exampleVault/.obsidian/snippets/meta-bind-customization.css @@ -6,4 +6,35 @@ /* A snippet that turns a button green */ .mb-button.green-button > button { background: var(--color-green); -} \ No newline at end of file +} + +/* A snippets that adds icons after an inlineSelector */ +.mb-input .dnd5e-skill-prof { + &::after { + content: ''; + display: inline-block; + margin-left: 0.2em; + width: 1.5em; + aspect-ratio: 1; + vertical-align: middle; + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + } + &[data-internal-value~="0"]::after { + mask-image: url('data:image/svg+xml,'); + background-color: var(--text-faint); + } + &[data-internal-value~="0.5"]::after { + mask-image: url('data:image/svg+xml,'); + background-color: var(--text-normal); + } + &[data-internal-value~="1"]::after { + mask-image: url('data:image/svg+xml,'); + background-color: var(--color-accent); + } + &[data-internal-value~="2"]::after { + mask-image: url('data:image/svg+xml,'); + background-color: var(--color-accent); + } +} diff --git a/exampleVault/Advanced Examples/DnD 5e Ability Scores and Modifiers.md b/exampleVault/Advanced Examples/DnD 5e Ability Scores and Modifiers.md index 13849680..fd0eb0ef 100644 --- a/exampleVault/Advanced Examples/DnD 5e Ability Scores and Modifiers.md +++ b/exampleVault/Advanced Examples/DnD 5e Ability Scores and Modifiers.md @@ -5,6 +5,11 @@ CON: 11 INT: 12 WIS: 14 CHR: 11 +PROF_mod: 5 +proficiency: + acrobatics: 2 + arcana: 1 + deception: 0.5 --- This example calculates a DnD character's ability modifiers from the ability scores and displays it all in a list. @@ -39,3 +44,17 @@ VIEW[ floor(({CHR} - 10) / 2) ][math(hidden):memory^CHR_mod] - INT: `VIEW[**{INT}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^INT_mod}) ? '+' : '', string({memory^INT_mod})) ][math]`) - WIS: `VIEW[**{WIS}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^WIS_mod}) ? '+' : '', string({memory^WIS_mod})) ][math]`) - CHR: `VIEW[**{CHR}**][text(renderMarkdown)]` (`VIEW[ concat(isPositive({memory^CHR_mod}) ? '+' : '', string({memory^CHR_mod})) ][math]`) + +## Skill modifiers + +If we want to calculate the skill modifiers for a character, while also taking into account it's proficiency, we can leverage the `inlineSelect` Input to map the proficiency types to numerical values while still having a nice, editable interface. +We can additionally style the input depending on the currently selected value, to get helpful visual indicators. + +#### Here you can see an example of how it could work + +First we need to set the proficiency modifier: `INPUT[number:PROF_mod]` + +`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.acrobatics]` Acrobatics (DEX) `VIEW[floor({proficiency.acrobatics}*{PROF_mod})+{memory^DEX_mod}]` +`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.arcana]` Arcana (INT) `VIEW[floor({proficiency.arcana}*{PROF_mod})+{memory^INT_mod}]` +`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.deception]` Deception (CHR) `VIEW[floor({proficiency.deception}*{PROF_mod})+{memory^CHR_mod}]` +`INPUT[inlineSelect(option(0,not proficienct), option(0.5,half proficienct), option(1,proficient), option(2,experties), defaultValue(0), class(dnd5e-skill-prof)):proficiency.perception]` Perception (WIS) `VIEW[floor({proficiency.perception}*{PROF_mod})+{memory^WIS_mod}]`