Refine ISAC selection controls and icons
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user