feat: expand ISAC content modeling

src/lib/components/DatabaseItemCard.svelte

@@ -6,6 +6,7 @@
 	import type { GameIconName } from '$lib/game-icons';
 	import type { DatabaseItem } from '$lib/database/items';
 	import MarkdownContent from './MarkdownContent.svelte';
+	import WeaponModSlotIcon from './WeaponModSlotIcon.svelte';
 
 	let {
 		item,
@@ -16,9 +17,21 @@
 		hideDiscussionUtility?: boolean;
 		anchor?: boolean;
 	} = $props();
+	let protocolLevel = $state(1);
+	let talentUpgrades = $state(0);
+
+	const number = (value: number) => Number.isInteger(value) ? String(value) : value.toFixed(2).replace(/\.?0+$/, '');
+	const valueWithUnit = (value: number, unit: string) => `${number(value)}${unit ? (unit === '%' ? '%' : ` ${unit}`) : ''}`;
+	const protocolPrimaryValue = () => item.protocolPreview
+		? item.protocolPreview.primaryBaseValue * (1 + (protocolLevel - 1) / 49)
+		: 0;
+	const talentDescription = () => item.protocolPreview?.talentDescription?.replace(/\{(\d+)\}/g, (placeholder, raw) => {
+		const effect = item.protocolPreview?.talentEffects[Number(raw) - 1];
+		return effect ? valueWithUnit(effect.baseValue * (1 + talentUpgrades / 5), effect.unit) : placeholder;
+	});
 </script>
 
-<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'}>
+<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'} class:protocol-quality-standard={item.topBorderTone === 'standard'} class:protocol-quality-specialized={item.topBorderTone === 'specialized'} class:protocol-quality-superior={item.topBorderTone === 'superior'} class:protocol-quality-highend={item.topBorderTone === 'highend'}>
 	<header>
 		{#if item.renderUrl}<img class="database-item-render" src={item.renderUrl} alt="" loading="lazy"/>{/if}
 		<div class="database-item-icon">
@@ -31,13 +44,38 @@
 		{#if item.headerBadges?.length || item.headerBadge || item.headerMetaIcon}
 			<div class="database-header-status">
 				{#if item.headerMetaIcon}<GameIcon name={item.headerMetaIcon}/>{/if}
-				{#each item.headerBadges ?? [] as badge}<span class="database-header-badge">{badge}</span>{/each}
-				{#if item.headerBadge}<span class="database-header-badge">{item.headerBadge}</span>{/if}
+				{#each item.headerBadges ?? [] as badge}<span class="database-header-badge" class:exotic={badge === 'EXOTIC'}>{badge}</span>{/each}
+				{#if item.headerBadge}<span class="database-header-badge" class:protocol-badge-standard={item.headerBadgeTone === 'standard'} class:protocol-badge-specialized={item.headerBadgeTone === 'specialized'} class:protocol-badge-superior={item.headerBadgeTone === 'superior'} class:protocol-badge-highend={item.headerBadgeTone === 'highend'}>{item.headerBadge}</span>{/if}
 			</div>
 		{/if}
 	</header>
 	{#if item.badges?.length}<div class="database-item-badges">{#each item.badges as badge}<span class={badge.tone ?? ''}>{badge.label}</span>{/each}</div>{/if}
-	<DatabaseFacts facts={item.facts} layout={item.factLayout}/>
+	{#if item.protocolPreview}
+		<section class="database-protocol-preview">
+			<div class="database-protocol-primary"><span>{item.protocolPreview.primaryStat}</span><b>{Number.isFinite(protocolPrimaryValue()) ? valueWithUnit(protocolPrimaryValue(), item.protocolPreview.primaryUnit) : 'NOT CONFIGURED'}</b></div>
+			{#if item.protocolPreview.talentDescription}
+				<div class="database-protocol-talent"><p>{talentDescription()}</p></div>
+			{/if}
+			<div class="database-protocol-controls"><label class="database-protocol-level"><span>LVL {protocolLevel}</span><input type="range" min="1" max="50" step="1" bind:value={protocolLevel} aria-label={`${item.name} level`}/></label>{#if item.protocolPreview.talentDescription}<div class="database-protocol-diamonds" role="group" aria-label={`${item.name} talent upgrades`}>{#each [1, 2, 3, 4, 5] as upgrade}<button type="button" class:active={talentUpgrades >= upgrade} aria-label={`Set talent upgrades to ${upgrade}`} aria-pressed={talentUpgrades === upgrade} onclick={() => talentUpgrades = talentUpgrades === upgrade ? 0 : upgrade}>◆</button>{/each}</div>{/if}</div>
+		</section>
+	{:else}
+		<DatabaseFacts facts={item.facts} layout={item.factLayout}/>
+	{/if}
+	{#if item.weaponModSlots}
+		<div class="database-weapon-mod-slots">
+			<div><span>MOD SLOTS</span></div>
+			{#if item.weaponModSlots.length}
+				<ul aria-label={`${item.name} Weapon Mod slots`}>
+					{#each item.weaponModSlots as modSlot}
+						<li class:upgrade-slot={modSlot.unlockedAtTierOne} class:has-slot-icon={Boolean(modSlot.iconUrl)} title={`${modSlot.slot}${modSlot.unlockedAtTierOne ? ' - Unlocked when this weapon upgrades to Tier 1' : ''}`}>
+							{#if modSlot.iconUrl}<WeaponModSlotIcon slot={modSlot.slot} iconUrl={modSlot.iconUrl}/><span class="sr-only">{modSlot.slot}</span>{:else}<span>{modSlot.slot}</span>{/if}
+							{#if modSlot.unlockedAtTierOne}<small>T1+</small>{/if}
+						</li>
+					{/each}
+				</ul>
+			{:else}<p>MOD SLOT DATA NOT CONFIGURED</p>{/if}
+		</div>
+	{/if}
 	{#if item.lines?.length}
 		<div class="database-item-lines">{#each item.lines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>
 	{/if}
@@ -53,7 +91,7 @@
 			<section><span>TIER I</span><p>{item.description ?? 'Description is not available.'}</p></section>
 			<section><span>TIER II</span><p>{item.secondaryDescription ?? 'Description is not available.'}</p></section>
 		</div>
-	{:else}
+	{:else if !item.protocolPreview}
 		{#if item.description}<p class:data-description={item.descriptionStyle === 'data'}>{item.description}</p>{/if}
 		{#if item.secondaryDescription}<p class="secondary-description" class:data-description={item.descriptionStyle === 'data'}>{item.secondaryDescription}</p>{/if}
 	{/if}