#AlertStrip

An AlertStrip is a row of alert icons, as in a grand strategy game. Each icon is one kind of alert, such as idle factories or low supply. The icon has a color for its severity, a count badge and a tooltip with the details. A click on the icon goes to the cause. A right click dismisses the alert.

How to add a strip:

<tb:AlertStrip name="alerts" />
<tb:AlertStrip name="cityAlerts" vertical="true" tooltip-placement="Right" />

var alerts = root.Q<AlertStrip>("alerts");

// Add an alert, or change it. The same id changes the same icon.
alerts.Set("supply", crateIcon, Severity.Warning, count: 2,
    title: "Low supply", details: "2 armies have low supply.", priority: 4);

// The count grows, and the alert becomes an error: the icon flashes and the notification sound plays
alerts.Set("supply", crateIcon, Severity.Error, 4, "Low supply", "4 armies have low supply.", 4);

// The cause is gone: the icon slides out
alerts.Remove("supply");

alerts.Clicked += id => ShowRegion(id);
alerts.Dismissed += id => snoozedUntil[id] = day + 5;

The alerts come from code, so the strip is empty in UI Builder. There, it shows a faint dashed outline with the name "AlertStrip".

AlertStripItem is one icon:

Severity is Info, Success, Warning or Error. Alert, NotificationBubble and Callout use the same enum.

• The order is stable. The most severe alert comes first. Then the alert with the highest priority. Then the oldest alert. A change of the count or the text does not move an icon.
• The icon is a picture that the strip tints with the color of the severity. Use a white picture on a transparent background.
• A click on an icon plays the button sound of the workspace. An alert that becomes Error plays the notification sound. The panel must have an WorkspaceAudio.
• The icons are focusable, so the strip works with the keyboard and a gamepad.
• An alert with no details shows its title as the tooltip.

Tips:

• Let the count set the severity. For example: 1 to 3 armies with low supply is a warning, 4 or more is an error.
• Use Dismissed to snooze an alert for some time, so the game does not raise it again at once.
• Use the priority to keep the most important kinds of alerts first in each severity.

#Styling

To make the icons larger:

.tb-alert-strip__item { width: 48px; height: 48px; }
.tb-alert-strip__icon { width: 32px; height: 32px; }

The AlertStripDemo scene shows a grand strategy strip with a day clock and a vertical strip for a city builder.