Segmented Bar
Overwatch-style health bar done using UI Toolkit’s Vector API.
import { h } from "preact"
import { useRandomHealthValues } from "@/comps/vigor/utils"
import { SegmentedBar } from "@/comps/vigor/segmented"
import { LerpNum } from "@/comps/varia/lerpnum"
import { Color } from "UnityEngine"
export const SegmentedDemo = () => {
// Using `useRandomHealthValues()` to mimic random value changes for fast testing
const [health, maxHealth] = useRandomHealthValues(50, 500, 1000, 3000)
return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center">
<div class="text-white font-bold text-4xl mb-4 flex-row">
<LerpNum value={health} />
<div class="px-2">{`/`}</div>
<LerpNum value={maxHealth} />
</div>
<SegmentedBar value={health} maxValue={maxHealth} borderWidth={2} borderColor={Color.white} />
</div>
}
Multi-Value Segmented Bar
Allows you to display multiple values in a single segmented bar, useful for showing different stats like health, shield, and armor.
import { h } from "preact"
import { getSortedRandomIntegers, useRandomHealthValues } from "@/comps/vigor/utils"
import { MultiValueSegmentedBar, SegmentedBar } from "@/comps/vigor/segmented"
import { LerpNum } from "@/comps/varia/lerpnum"
import { Color } from "UnityEngine"
const colors = [
new Color(0.85, 0.25, 0.25), // HP - Crimson Red (#D94141)
new Color(0.27, 0.51, 0.71), // Armor - Steel Blue (#4682B4)
new Color(0.2, 0.84, 0.76) // Shield - Electric Teal (#33D6C1)
]
export const MultiValueSegmentedDemo = () => {
// Using `useRandomHealthValues()` to mimic random value changes for fast testing
const [health, maxHealth] = useRandomHealthValues(250, 500, 1000, 3000)
const values = [...getSortedRandomIntegers(3, maxHealth, 150)]
return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center">
<div class="text-white font-bold text-2xl mb-4 flex-row">
<LerpNum value={values[0]} style={{ color: colors[0] }} />
<div class="px-2">,</div>
<LerpNum value={values[1]} style={{ color: colors[1] }} />
<div class="px-2">,</div>
<LerpNum value={values[2]} style={{ color: colors[2] }} />
<div class="px-2">{`/`}</div>
<LerpNum value={maxHealth} />
</div>
<MultiValueSegmentedBar values={values} maxValue={maxHealth} colors={colors} borderWidth={2} borderColor={Color.white} />
</div>
}