Refine ISAC selection controls and icons

This commit is contained in:
JB
2026-07-25 18:14:17 -04:00
parent 9f295e4321
commit cef3e6e78b
32 changed files with 159 additions and 35 deletions
+6 -3
View File
@@ -7,6 +7,7 @@
label: string;
className?: string;
icon?: GameIconName;
iconOnly?: boolean;
};
let {
@@ -18,6 +19,7 @@
selected = $bindable([]),
columns = options.length,
required = false,
showIndicator = true,
onchange
}: {
legend: string;
@@ -28,6 +30,7 @@
selected?: string[];
columns?: number;
required?: boolean;
showIndicator?: boolean;
onchange?: (values: string[]) => void;
} = $props();
@@ -55,9 +58,9 @@
{required}
onchange={(event) => change(option.value, event.currentTarget.checked)}
/>
<span class={option.className ?? ''}>
{#if option.icon}<GameIcon name={option.icon} decorative/>{:else}<i aria-hidden="true"></i>{/if}
<b>{option.label}</b>
<span class:icon-only={option.iconOnly} class={option.className ?? ''} title={option.iconOnly ? option.label : undefined}>
{#if option.icon}<GameIcon name={option.icon} decorative/>{:else if showIndicator}<i aria-hidden="true"></i>{/if}
<b class:sr-only={option.iconOnly}>{option.label}</b>
</span>
</label>
{/each}
+7 -1
View File
@@ -11,7 +11,13 @@ export const gameIcons = {
tech_operator: { src: '/tech_operator.png', label: 'Tech Operator specialization' },
vanguard: { src: '/vanguard.png', label: 'Vanguard specialization' },
legendary: { src: '/legendary.png', label: 'Legendary difficulty' },
shd_ticket: { src: '/shd_ticket.png', label: 'SHD ticket' }
shd_ticket: { src: '/shd_ticket.png', label: 'SHD ticket' },
holster: { src: '/holster.png', label: 'Holster gear slot' },
gloves: { src: '/gloves.png', label: 'Gloves gear slot' },
backpack: { src: '/backpack.png', label: 'Backpack gear slot' },
knee_pads: { src: '/knee_pads.png', label: 'Knee Pads gear slot' },
body_armor: { src: '/body_armor.png', label: 'Body Armor gear slot' },
mask: { src: '/mask.png', label: 'Mask gear slot' }
} as const;
export type GameIconName = keyof typeof gameIcons;