a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
refactor: some code cleanup to use `$derived()` (#94)
authored by
GitHub
3b41caff
a1ce5ec4
+18
-16
+4
-2
app/src/lib/components/Separator/Separator.svelte
+4
-2
app/src/lib/components/Separator/Separator.svelte
···
53
53
isSemiDashed = false,
54
54
class: className,
55
55
}: SeparatorProps = $props()
56
+
const htmlRole = $derived.by(() => isDecorative ? 'none' : 'separator')
57
+
const htmlOrientation = $derived.by(() => !isDecorative ? 'horizontal' : undefined)
56
58
</script>
57
59
58
60
<Separator.Root
59
61
decorative={isDecorative}
60
-
role={isDecorative ? 'none' : 'separator'}
61
-
orientation={!isDecorative ? 'horizontal' : undefined}
62
+
role={htmlRole}
63
+
orientation={htmlOrientation}
62
64
class={cn(root(), className)}
63
65
>
64
66
<div class={outer({isSemiDashed})}></div>
+3
-10
app/src/lib/patterns/BoostedAbility/BoostedAbility.svelte
+3
-10
app/src/lib/patterns/BoostedAbility/BoostedAbility.svelte
···
1
1
<script lang="ts">
2
2
import ChevronsUpIcon from '@lucide/svelte/icons/chevrons-up'
3
-
import type { AbilityShort } from '@starlight/types/dnd'
3
+
import { getAbilityName, type AbilityShort } from '@starlight/types/dnd'
4
4
import type { SvelteHTMLElements } from 'svelte/elements'
5
5
6
6
type BoostedAbilityRootElement = SvelteHTMLElements['div']
···
9
9
}
10
10
11
11
const { ability }: BoostedAbilityProps = $props()
12
-
const abilityMap: Record<AbilityShort, string> = {
13
-
DEX: 'Dexterity',
14
-
CHA: 'Charisma',
15
-
CON: 'Constitution',
16
-
STR: 'Strength',
17
-
INT: 'Intelligence',
18
-
WIS: 'Wisdom',
19
-
}
12
+
const abilityName = $derived(getAbilityName(ability))
20
13
</script>
21
14
22
15
<div class="flex gap-1 flex-row items-center">
23
16
<ChevronsUpIcon size={24} class="stroke-hsr-gold" />
24
17
<div class="flex flex-col leading-tight">
25
18
<div>{ability}</div>
26
-
<div class="text-sm text-zinc-500">{abilityMap[ability]}</div>
19
+
<div class="text-sm text-zinc-500">{abilityName}</div>
27
20
</div>
28
21
</div>
+2
-1
app/src/lib/patterns/Element/ElementChip.svelte
+2
-1
app/src/lib/patterns/Element/ElementChip.svelte
···
13
13
style = 'fill',
14
14
...other
15
15
}: ElementChipProps = $props()
16
+
const elementColor = $derived(getElementColor(element))
16
17
</script>
17
18
18
19
<Chip
19
20
{...other}
20
21
withIcon
21
-
color={getElementColor(element)}
22
+
color={elementColor}
22
23
style={style}
23
24
>
24
25
<ElementText element={element} dark={style === 'fill'} />
+7
-2
app/src/lib/patterns/Element/ElementText.svelte
+7
-2
app/src/lib/patterns/Element/ElementText.svelte
···
18
18
...props
19
19
}: ElementTextProps = $props()
20
20
21
-
let renderedText = $derived.by(() => {
21
+
const renderedText = $derived.by(() => {
22
22
return appendText !== undefined
23
23
? `${getElementName(element)} ${appendText}`
24
24
: `${getElementName(element)}`
25
25
})
26
+
const elementColor = $derived.by(() => {
27
+
return !dark
28
+
? getElementColor(element)
29
+
: undefined
30
+
})
26
31
</script>
27
32
28
-
<Text {...props} color={!dark ? getElementColor(element) : undefined}>
33
+
<Text {...props} color={elementColor}>
29
34
{renderedText}
30
35
</Text>
+2
-1
app/src/lib/patterns/Mechanic/MechanicChip.svelte
+2
-1
app/src/lib/patterns/Mechanic/MechanicChip.svelte
···
23
23
}
24
24
25
25
let { style, size = 'md', mechanic, ...props }: MechanicChipProps = $props()
26
+
const iconColor = $derived(styleMap[style]['iconColor'])
26
27
const mechanicName = $derived(getMechanicName(mechanic))
27
28
</script>
28
29
···
33
34
>
34
35
<MechanicIcon
35
36
mechanic={mechanic}
36
-
color={styleMap[style]['iconColor']}
37
+
color={iconColor}
37
38
size={size} />
38
39
{mechanicName}
39
40
</Chip>