682 lines
50 KiB
Svelte
682 lines
50 KiB
Svelte
<script lang="ts">
|
||
import { onMount, untrack } from 'svelte';
|
||
import GameIcon from '$lib/components/GameIcon.svelte';
|
||
import type { GameIconName } from '$lib/game-icons';
|
||
import BuilderPicker from '$lib/components/BuilderPicker.svelte';
|
||
import BuilderRadioGrid from '$lib/components/BuilderRadioGrid.svelte';
|
||
import RangeValueControl from '$lib/components/RangeValueControl.svelte';
|
||
import SegmentedChoice from '$lib/components/SegmentedChoice.svelte';
|
||
import PendingForm from '$lib/components/PendingForm.svelte';
|
||
import ItemIcon from '$lib/components/ItemIcon.svelte';
|
||
import BuildShareControl from '$lib/components/BuildShareControl.svelte';
|
||
import LoadoutMatrix, { type MatrixCell } from '$lib/components/builder/LoadoutMatrix.svelte';
|
||
import LoadoutStatsSummary from '$lib/components/builder/LoadoutStatsSummary.svelte';
|
||
import PlannedCombatModel from '$lib/components/builder/PlannedCombatModel.svelte';
|
||
import TalentTierChoice from '$lib/components/builder/TalentTierChoice.svelte';
|
||
import { summarizeLoadout } from '$lib/builder/loadout-summary';
|
||
import { toast } from '$lib/toast';
|
||
import {
|
||
blankRoll, clamp, createDraft, gearBaseStatRange, gearSlots, levelScaledRange, migrateLoadoutDraftV5, parseLoadoutDraft, remapRangeValue, scaled, skillChipQualities, skillChipSecondaryCapacity, weaponBaseRange,
|
||
type LoadoutDraft, type Roll, type SkillChipQuality, type TalentTier
|
||
} from '$lib/builder/loadout';
|
||
|
||
let { data, form } = $props();
|
||
let draft = $state<LoadoutDraft>(untrack(() => parseLoadoutDraft(data.initialBuild?.loadout) ?? createDraft()));
|
||
let active = $state('specialization:focus');
|
||
let saved = $state(false);
|
||
let message = $state('');
|
||
let persistedBuildId = $state(untrack(() => data.initialBuild?.id ?? ''));
|
||
let persistedSlug = $state(untrack(() => data.initialBuild?.slug ?? ''));
|
||
type BuildVisibility = 'private' | 'unlisted' | 'public';
|
||
let persistedVisibility = $state<BuildVisibility>(untrack(() => (data.initialBuild?.visibility ?? 'private') as BuildVisibility));
|
||
let savedBuildVisibility = $state<BuildVisibility>(untrack(() => (data.initialBuild?.visibility ?? 'private') as BuildVisibility));
|
||
let savedBuildTitle = $state(untrack(() => draft.buildName));
|
||
let handledBuildToken = '';
|
||
const weaponRangeKeys = ['damage','firepower','toughness','engineering'] as const;
|
||
const coreKeys = ['firepower','toughness','engineering'] as const;
|
||
const gearAttributes = $derived(data.attributes.filter((item) => item.gear_min !== null).map((item) => ({ ...item, category: `${item.type} · ${item.unit || 'FLAT'}` })));
|
||
const weaponAttributes = $derived(data.attributes.filter((item) => item.weapon_min !== null).map((item) => ({ ...item, category: `${item.type} · ${item.unit || 'FLAT'}` })));
|
||
const attribute = (id: string) => data.attributes.find((item) => item.id === id);
|
||
const chipPrimaryAttributes = $derived(data.skillChipProfile.primaryOptions.map((option: any) => attribute(option.statId)).filter(Boolean).map((item: any) => ({ ...item, category: `${item.type} · ${item.unit || 'FLAT'}` })));
|
||
const chipSecondaryAttributes = $derived(data.skillChipProfile.secondaryOptions.map((option: any) => attribute(option.statId)).filter(Boolean).map((item: any) => ({ ...item, category: `${item.type} · ${item.unit || 'FLAT'}` })));
|
||
const chipRange = (kind: 'primary' | 'secondary', statId: string, quality: SkillChipQuality) =>
|
||
data.skillChipProfile[`${kind}Options`].find((option: any) => option.statId === statId)?.ranges?.[quality] ?? null;
|
||
type ChipRange = { min: number; max: number };
|
||
const validChipRange = (range: any): range is ChipRange => Number.isFinite(Number(range?.min)) && Number.isFinite(Number(range?.max)) && Number(range.max) >= Number(range.min);
|
||
const chipRangeMin = (kind: 'primary' | 'secondary', statId: string, quality: SkillChipQuality) => Number(chipRange(kind, statId, quality)?.min ?? 0);
|
||
const chipRangeMax = (kind: 'primary' | 'secondary', statId: string, quality: SkillChipQuality) => Number(chipRange(kind, statId, quality)?.max ?? 0);
|
||
const chipProfileConfigured = $derived(
|
||
data.skillChipProfile.primaryOptions.length === 4
|
||
&& chipPrimaryAttributes.length === data.skillChipProfile.primaryOptions.length
|
||
&& data.skillChipProfile.primaryOptions.every((option: any) => skillChipQualities.every((quality) => validChipRange(option.ranges?.[quality])))
|
||
&& data.skillChipProfile.secondaryOptions.length >= 2
|
||
&& chipSecondaryAttributes.length === data.skillChipProfile.secondaryOptions.length
|
||
&& data.skillChipProfile.secondaryOptions.every((option: any) => ['Specialized','Superior','High-end'].every((quality) => validChipRange(option.ranges?.[quality])))
|
||
);
|
||
const gearItem = (slot: string) => data.gear.find((item) => item.id === draft.gear[slot].itemId);
|
||
const weaponItem = (index: number) => data.weapons.find((item) => item.id === draft.weapons[index].itemId);
|
||
const chipItem = (index: number) => data.chipSets.find((item) => item.id === draft.chips[index].setId);
|
||
const chipSupportsAbility = (item: any, abilityId: string) =>
|
||
item?.compatibleAbilityIds?.includes(abilityId)
|
||
?? item?.specialization_ability_id === abilityId;
|
||
const protocolItem = () => data.protocols.find((item) => item.id === draft.protocol.itemId);
|
||
const allFocuses = $derived(data.specializations.flatMap((specialization: any) =>
|
||
specialization.focuses.map((focus: any) => ({ ...focus, specialization }))
|
||
));
|
||
const selectedFocus = $derived(allFocuses.find((focus: any) => focus.id === draft.specialization.focusId));
|
||
const specializationItems = $derived(allFocuses.map((focus: any) => ({
|
||
id: focus.id,
|
||
name: `${focus.specialization.name} · ${focus.name}`,
|
||
category: `${focus.primary_attribute} · ${Number(focus.builder_ready) === 1 ? 'BUILDER READY' : 'INCOMPLETE DATA'}`,
|
||
iconUrl: focus.specialization.iconUrl
|
||
})));
|
||
const selectedNodeRanks = $derived(selectedFocus?.nodes.flatMap((node: any) => {
|
||
const selectedRank = Number(draft.specialization.nodeRanks[node.id] ?? 0);
|
||
return selectedRank ? [{ node, rank: node.ranks.find((entry: any) => Number(entry.rank) === selectedRank) }] : [];
|
||
}) ?? []);
|
||
const talent = (id: string) => data.talents.find((item) => item.id === id);
|
||
const supportedTalentTier = (id: string, tier: TalentTier): TalentTier =>
|
||
talent(id)?.tiers.some((entry: any) => entry.tier === (tier === 2 ? 'II' : 'I')) ? tier : 1;
|
||
const brand = (id: string) => data.brands.find((item) => item.id === id);
|
||
const unitValue = (value: unknown, statId: string) => {
|
||
const numeric = Number(value);
|
||
const rendered = Number.isInteger(numeric) ? String(numeric) : numeric.toFixed(2).replace(/\.?0+$/, '');
|
||
const unit = attribute(statId)?.unit ?? '';
|
||
return unit === 'Shots' ? `${rendered} ${unit}` : `${rendered}${unit}`;
|
||
};
|
||
const scaledRange = (minimum: unknown, maximum: unknown, level: unknown, referenceLevel: unknown, source: 'gear' | 'weapon') =>
|
||
levelScaledRange(minimum, maximum, level, referenceLevel ?? 50, source);
|
||
const gearBaseRange = (item: any, key: 'health' | 'armor', level: number) =>
|
||
gearBaseStatRange(item?.[`base_${key}_min`], item?.[`base_${key}_max`], level);
|
||
const weaponStatRange = (range: any, key: typeof weaponRangeKeys[number], level: number) =>
|
||
key === 'damage'
|
||
? weaponBaseRange(range?.damage_min, range?.damage_max, level)
|
||
: scaledRange(range?.[`${key}_min`], range?.[`${key}_max`], level, range?.reference_level ?? 50, 'weapon');
|
||
const coreAllocationRange = (tier: number, level: number, source: 'gear' | 'weapon') => {
|
||
const profile = data.coreRanges.find((item) => Number(item.tier) === Number(tier));
|
||
const nominal = scaledRange(profile?.nominal_min, profile?.nominal_max, level, profile?.reference_level ?? 50, source);
|
||
return { ...nominal, poolMin: nominal.min * 3, poolMax: nominal.max * 3 };
|
||
};
|
||
const coreTotal = (selection: { firepower: number; toughness: number; engineering: number }) =>
|
||
coreKeys.reduce((total, key) => total + Number(selection[key] ?? 0), 0);
|
||
const attributeRange = (stat: any, source: 'gear' | 'weapon', level: number) =>
|
||
scaledRange(stat?.[`${source}_min`], stat?.[`${source}_max`], level, stat?.[`${source}_reference_level`], source);
|
||
const setRollStat = (roll: Roll, id: string, source: 'gear' | 'weapon', level = 50) => {
|
||
roll.statId = id;
|
||
const stat = attribute(id);
|
||
roll.value = Number(attributeRange(stat, source, level).min ?? 0);
|
||
};
|
||
const setChipRoll = (roll: Roll, id: string, kind: 'primary' | 'secondary', quality: SkillChipQuality) => {
|
||
roll.statId = id;
|
||
const range = chipRange(kind, id, quality);
|
||
roll.value = validChipRange(range) ? Number(range.min) : 0;
|
||
};
|
||
const chipRollConfigured = (roll: Roll, kind: 'primary' | 'secondary', quality: SkillChipQuality) => {
|
||
const options = data.skillChipProfile[`${kind}Options`];
|
||
const range = chipRange(kind, roll.statId, quality);
|
||
const value = Number(roll.value);
|
||
return options.some((option: any) => option.statId === roll.statId)
|
||
&& validChipRange(range)
|
||
&& Number.isFinite(value)
|
||
&& value >= Number(range.min)
|
||
&& value <= Number(range.max);
|
||
};
|
||
const chipSelectionConfigured = (chip: LoadoutDraft['chips'][number], abilityId: string) => {
|
||
const capacity = skillChipSecondaryCapacity[chip.quality];
|
||
const secondaryIds = chip.secondary.map((roll) => roll.statId);
|
||
const definition = data.chipSets.find((item: any) => item.id === chip.setId);
|
||
return Boolean(definition && chipSupportsAbility(definition, abilityId))
|
||
&& chipProfileConfigured
|
||
&& chipRollConfigured(chip.primary, 'primary', chip.quality)
|
||
&& chip.secondary.length === capacity
|
||
&& new Set(secondaryIds).size === secondaryIds.length
|
||
&& chip.secondary.every((roll) => chipRollConfigured(roll, 'secondary', chip.quality));
|
||
};
|
||
const rankPointCost = (rank: number) => Number(data.specializationProgression.rankProfiles.find((profile: any) => Number(profile.rank) === rank)?.point_cost ?? rank);
|
||
const selectedSpecializationPoints = $derived(selectedFocus?.nodes.reduce((total: number, node: any) => {
|
||
const selectedRank = Number(draft.specialization.nodeRanks[node.id] ?? 0);
|
||
return total + Array.from({ length: selectedRank }, (_, index) => rankPointCost(index + 1)).reduce((sum, value) => sum + value, 0);
|
||
}, 0) ?? 0);
|
||
const selectedSpecializationCosts = $derived.by(() => {
|
||
let credits = 0;
|
||
const resources = new Map<string, number>();
|
||
for (const { node, rank } of selectedNodeRanks) {
|
||
for (let current = 1; current <= Number(rank.rank); current += 1) {
|
||
const profile = data.specializationProgression.rankProfiles.find((item: any) => Number(item.rank) === current);
|
||
credits += Number(profile?.credit_cost ?? 0);
|
||
const rankRecord = node.ranks.find((item: any) => Number(item.rank) === current);
|
||
for (const cost of rankRecord?.costs ?? []) resources.set(String(cost.resource_id), (resources.get(String(cost.resource_id)) ?? 0) + Number(cost.quantity));
|
||
}
|
||
}
|
||
return { credits, resources: [...resources] };
|
||
});
|
||
const canSelectNodeRank = (node: any, rank: number) => {
|
||
if (rank === 0) return true;
|
||
const pointsWithoutNode = selectedSpecializationPoints - Array.from(
|
||
{ length: Number(draft.specialization.nodeRanks[node.id] ?? 0) },
|
||
(_, index) => rankPointCost(index + 1)
|
||
).reduce((sum, value) => sum + value, 0);
|
||
const candidatePoints = Array.from({ length: rank }, (_, index) => rankPointCost(index + 1)).reduce((sum, value) => sum + value, 0);
|
||
if (pointsWithoutNode + candidatePoints > Number(data.specializationProgression.availablePoints)) return false;
|
||
if (Number(node.row_number) <= 1) return true;
|
||
return selectedFocus.nodes
|
||
.filter((previous: any) => Number(previous.row_number) < Number(node.row_number))
|
||
.every((previous: any) => Number(draft.specialization.nodeRanks[previous.id] ?? 0) >= Math.min(2, Number(previous.max_rank)));
|
||
};
|
||
const setNodeRank = (node: any, rank: number) => {
|
||
if (!canSelectNodeRank(node, rank)) return;
|
||
draft.specialization.nodeRanks = { ...draft.specialization.nodeRanks, [node.id]: rank };
|
||
};
|
||
const selectFocus = (focusId: string) => {
|
||
const next = allFocuses.find((focus: any) => focus.id === focusId);
|
||
if (!next) return;
|
||
const displaced: LoadoutDraft['chips'][number][] = [];
|
||
for (let index = 0; index < draft.chips.length; index += 1) {
|
||
const chip = draft.chips[index];
|
||
const ability = next.abilities[Math.floor(index / 3)];
|
||
const definition = data.chipSets.find((item: any) => item.id === chip.setId);
|
||
if (chip.setId && (!ability || !chipSupportsAbility(definition, ability.id))) {
|
||
displaced.push(structuredClone(chip));
|
||
draft.chips[index] = createDraft().chips[index];
|
||
}
|
||
}
|
||
for (const chip of displaced) {
|
||
const definition = data.chipSets.find((item: any) => item.id === chip.setId);
|
||
const abilityIndex = next.abilities.findIndex((ability: any) => chipSupportsAbility(definition, ability.id));
|
||
if (abilityIndex < 0) continue;
|
||
const targetIndex = [0, 1, 2].map((slot) => abilityIndex * 3 + slot).find((slot) => !draft.chips[slot].setId);
|
||
if (targetIndex === undefined) continue;
|
||
draft.chips[targetIndex] = structuredClone(chip);
|
||
}
|
||
draft.specialization = {
|
||
...draft.specialization,
|
||
focusId,
|
||
nodeRanks: {}
|
||
};
|
||
active = 'specialization:focus';
|
||
};
|
||
const talentTier = (talentId: string, tier: number) => {
|
||
const item = talent(talentId);
|
||
return item?.tiers.find((entry: any) => entry.tier === (tier >= 2 ? 'II' : 'I')) ?? item?.tiers[0];
|
||
};
|
||
const talentDescription = (talentId: string, tier: number) => {
|
||
const item = talent(talentId), configured = talentTier(talentId, tier);
|
||
if (!item || !configured) return '';
|
||
const template = item.template || configured.description;
|
||
return template.replace(/\{(\d+)\}/g, (placeholder: string, raw: string) => {
|
||
const effect = configured.effects[Number(raw) - 1];
|
||
return effect ? unitValue(effect.value, effect.stat_attribute_id) : placeholder;
|
||
});
|
||
};
|
||
const configureGear = (slot: string, id: string) => {
|
||
const selection = draft.gear[slot], item = data.gear.find((entry) => entry.id === id);
|
||
selection.itemId = id;
|
||
selection.level = 50;
|
||
selection.brandId = item?.brandIds[0] ?? '';
|
||
selection.talentId = item?.talentIds[0] ?? '';
|
||
selection.talentTier = supportedTalentTier(selection.talentId, Number(item?.tier) >= 2 ? 2 : 1);
|
||
selection.health = Number(item?.base_health_min ?? 0);
|
||
selection.armor = Number(item?.base_armor_min ?? 0);
|
||
const core = coreAllocationRange(Number(item?.tier ?? 0), selection.level, 'gear');
|
||
for (const key of coreKeys) selection[key] = core.min;
|
||
selection.rolls = [blankRoll(), blankRoll()];
|
||
selection.augmentSlots = [];
|
||
};
|
||
const changeGearLevel = (slot: string, rawLevel: unknown) => {
|
||
const selection = draft.gear[slot], item = gearItem(slot);
|
||
const nextLevel = Math.round(clamp(rawLevel, Number(item?.tier) === 2 ? 40 : 1, 50));
|
||
if (!item || nextLevel === selection.level) {
|
||
selection.level = nextLevel;
|
||
return;
|
||
}
|
||
selection.health = remapRangeValue(
|
||
selection.health,
|
||
gearBaseRange(item, 'health', selection.level),
|
||
gearBaseRange(item, 'health', nextLevel)
|
||
);
|
||
if (item.base_armor_min !== null) selection.armor = remapRangeValue(
|
||
selection.armor,
|
||
gearBaseRange(item, 'armor', selection.level),
|
||
gearBaseRange(item, 'armor', nextLevel)
|
||
);
|
||
const previousCore = coreAllocationRange(Number(item.tier), selection.level, 'gear');
|
||
const nextCore = coreAllocationRange(Number(item.tier), nextLevel, 'gear');
|
||
for (const key of coreKeys) selection[key] = remapRangeValue(selection[key], { ...previousCore, min: 0, max: previousCore.poolMax }, { ...nextCore, min: 0, max: nextCore.poolMax });
|
||
for (const roll of selection.rolls) {
|
||
const stat = attribute(roll.statId);
|
||
if (!stat) continue;
|
||
roll.value = remapRangeValue(
|
||
roll.value,
|
||
attributeRange(stat, 'gear', selection.level),
|
||
attributeRange(stat, 'gear', nextLevel)
|
||
);
|
||
}
|
||
selection.level = nextLevel;
|
||
};
|
||
const configureWeapon = (index: number, id: string) => {
|
||
const selection = draft.weapons[index], item = data.weapons.find((entry) => entry.id === id);
|
||
selection.itemId = id;
|
||
selection.level = 50;
|
||
selection.tier = Number(item?.native_tier ?? 0);
|
||
const range = item?.ranges.find((entry: any) => Number(entry.tier) === selection.tier);
|
||
selection.damage = weaponStatRange(range, 'damage', selection.level).min;
|
||
const core = coreAllocationRange(selection.tier, selection.level, 'weapon');
|
||
for (const key of coreKeys) selection[key] = core.min;
|
||
selection.talent1Id = item?.talent1Ids[0] ?? '';
|
||
selection.talent1Tier = supportedTalentTier(selection.talent1Id, selection.tier >= 2 ? 2 : 1);
|
||
selection.talent2Id = item?.talent2Ids[0] ?? '';
|
||
selection.talent2Tier = supportedTalentTier(selection.talent2Id, selection.tier >= 2 ? 2 : 1);
|
||
selection.exoticTalentTier = supportedTalentTier(item?.exotic_talent_id ?? '', selection.tier >= 2 ? 2 : 1);
|
||
selection.rolls = [blankRoll(), blankRoll()];
|
||
};
|
||
const configureChip = (index: number, id: string) => {
|
||
const chip = draft.chips[index];
|
||
chip.setId = id;
|
||
chip.primary = blankRoll();
|
||
chip.secondary = [];
|
||
changeChipQuality(index, chip.quality);
|
||
};
|
||
const changeChipQuality = (index: number, quality: SkillChipQuality) => {
|
||
if (!skillChipQualities.includes(quality)) return;
|
||
const chip = draft.chips[index];
|
||
chip.quality = quality;
|
||
const primaryOption = data.skillChipProfile.primaryOptions.find((option: any) => option.statId === chip.primary.statId && validChipRange(option.ranges?.[quality]))
|
||
?? data.skillChipProfile.primaryOptions.find((option: any) => validChipRange(option.ranges?.[quality]));
|
||
if (primaryOption) {
|
||
const range = primaryOption.ranges[quality];
|
||
chip.primary = {
|
||
statId: primaryOption.statId,
|
||
value: clamp(chip.primary.statId === primaryOption.statId ? chip.primary.value : range.min, range.min, range.max)
|
||
};
|
||
} else chip.primary = blankRoll();
|
||
const capacity = skillChipSecondaryCapacity[quality];
|
||
const next: Roll[] = [];
|
||
for (const roll of chip.secondary) {
|
||
if (next.length >= capacity || next.some((entry) => entry.statId === roll.statId)) continue;
|
||
const range = chipRange('secondary', roll.statId, quality);
|
||
if (!validChipRange(range)) continue;
|
||
next.push({ statId: roll.statId, value: clamp(roll.value, range.min, range.max) });
|
||
}
|
||
for (const option of data.skillChipProfile.secondaryOptions) {
|
||
if (next.length >= capacity) break;
|
||
if (next.some((entry) => entry.statId === option.statId)) continue;
|
||
const range = option.ranges?.[quality];
|
||
if (validChipRange(range)) next.push({ statId: option.statId, value: Number(range.min) });
|
||
}
|
||
while (next.length < capacity) next.push(blankRoll());
|
||
chip.secondary = next;
|
||
};
|
||
const changeWeaponTier = (index: number, tier: number) => {
|
||
const selection = draft.weapons[index], item = weaponItem(index);
|
||
selection.tier = tier;
|
||
if (tier === 2 && selection.level < 40) selection.level = 40;
|
||
const range = item?.ranges.find((entry: any) => Number(entry.tier) === tier);
|
||
selection.damage = weaponStatRange(range, 'damage', selection.level).min;
|
||
const core = coreAllocationRange(tier, selection.level, 'weapon');
|
||
for (const key of coreKeys) selection[key] = core.min;
|
||
};
|
||
const changeWeaponLevel = (index: number, rawLevel: unknown) => {
|
||
const selection = draft.weapons[index], item = weaponItem(index);
|
||
const nextLevel = Math.round(clamp(rawLevel, selection.tier === 2 ? 40 : 1, 50));
|
||
const range = item?.ranges.find((entry: any) => Number(entry.tier) === selection.tier);
|
||
if (!range || nextLevel === selection.level) {
|
||
selection.level = nextLevel;
|
||
return;
|
||
}
|
||
selection.damage = remapRangeValue(selection.damage, weaponStatRange(range, 'damage', selection.level), weaponStatRange(range, 'damage', nextLevel));
|
||
const previousCore = coreAllocationRange(selection.tier, selection.level, 'weapon');
|
||
const nextCore = coreAllocationRange(selection.tier, nextLevel, 'weapon');
|
||
for (const key of coreKeys) selection[key] = remapRangeValue(selection[key], { ...previousCore, min: 0, max: previousCore.poolMax }, { ...nextCore, min: 0, max: nextCore.poolMax });
|
||
for (const roll of selection.rolls) {
|
||
const stat = attribute(roll.statId);
|
||
if (!stat) continue;
|
||
roll.value = remapRangeValue(
|
||
roll.value,
|
||
attributeRange(stat, 'weapon', selection.level),
|
||
attributeRange(stat, 'weapon', nextLevel)
|
||
);
|
||
}
|
||
selection.level = nextLevel;
|
||
};
|
||
const activeParts = $derived(active.split(':'));
|
||
const summary = $derived(summarizeLoadout(draft, data));
|
||
const rollSummary = (rolls: Roll[]) => rolls
|
||
.filter((roll) => roll.statId)
|
||
.map((roll) => `${attribute(roll.statId)?.name ?? 'Attribute'} ${unitValue(roll.value, roll.statId)}`)
|
||
.join(' · ');
|
||
const gearIcon = (slot: string) => `/${({
|
||
Holster: 'holster.png',
|
||
Gloves: 'gloves.png',
|
||
Backpack: 'backpack.png',
|
||
'Knee Pads': 'knee_pads.png',
|
||
'Body Armor': 'body_armor.png',
|
||
Mask: 'mask.png'
|
||
} as Record<string, string>)[slot] ?? 'backpack.png'}`;
|
||
const weaponIcon = (category: unknown) => {
|
||
const value = String(category ?? '').toLowerCase();
|
||
if (value.includes('shotgun')) return '/shotgun.png';
|
||
if (value.includes('smg') || value.includes('submachine')) return '/smg.png';
|
||
if (value.includes('mmr') || value.includes('marksman')) return '/mmr.png';
|
||
if (value.includes('lmg') || value.includes('light machine')) return '/lmg.png';
|
||
if (value.includes('ar') || value.includes('assault')) return '/ar.png';
|
||
return '/rifle.png';
|
||
};
|
||
const doctrineCell = $derived<MatrixCell>({
|
||
id: 'specialization:focus',
|
||
label: 'FOCUS',
|
||
name: selectedFocus ? `${selectedFocus.specialization.name} · ${selectedFocus.name}` : 'SELECT FOCUS',
|
||
meta: selectedFocus?.primary_attribute ?? '',
|
||
summary: selectedFocus
|
||
? `${selectedFocus.primary_attribute} · ${selectedSpecializationPoints} / ${data.specializationProgression.availablePoints} POINTS`
|
||
: 'SETS 3 ABILITIES',
|
||
iconUrl: selectedFocus?.specialization.iconUrl,
|
||
issue: !selectedFocus ? 'Select a focus.' : selectedFocus.abilities.length !== 3 ? 'Focus needs 3 abilities.' : undefined
|
||
});
|
||
const abilityCells = $derived.by((): MatrixCell[] => [0, 1, 2].map((index) => {
|
||
const ability = selectedFocus?.abilities[index];
|
||
const abilityChips = draft.chips.slice(index * 3, index * 3 + 3);
|
||
const configuredChips = abilityChips.filter((chip) => chip.setId);
|
||
const chipNames = configuredChips.map((chip) => data.chipSets.find((item) => item.id === chip.setId)?.name).filter(Boolean);
|
||
return {
|
||
id: `ability:${index}`,
|
||
label: `ABILITY ${index + 1}`,
|
||
name: ability?.name ?? 'UNASSIGNED',
|
||
meta: ability?.attack?.damage_type ?? '',
|
||
summary: chipNames.length ? chipNames.join(' · ') : `${configuredChips.length} / 3 SKILL CHIPS`,
|
||
iconUrl: ability?.iconUrl,
|
||
issue: !ability ? 'Ability required.' : configuredChips.length < 3 ? `${3 - configuredChips.length} chip${configuredChips.length === 2 ? '' : 's'} required.` : abilityChips.some((chip) => !chipSelectionConfigured(chip, ability.id)) ? 'Chip setup required.' : undefined
|
||
};
|
||
}));
|
||
const weaponCells = $derived.by((): MatrixCell[] => draft.weapons.map((selection, index) => {
|
||
const item = weaponItem(index);
|
||
const talents = [[selection.talent1Id, selection.talent1Tier], [selection.talent2Id, selection.talent2Tier]].map(([id,tier]) => id ? `${talent(String(id))?.name ?? 'Talent'} T${tier}` : '').filter(Boolean);
|
||
const details = [...talents, rollSummary(selection.rolls)].filter(Boolean).join(' · ');
|
||
return {
|
||
id: `weapon:${index}`,
|
||
label: index ? 'SECONDARY' : 'PRIMARY',
|
||
name: item?.name ?? 'EMPTY',
|
||
meta: item?.category ?? '',
|
||
summary: item ? details || `T${selection.tier} · ${unitValue(selection.damage, '')} DAMAGE` : 'CHOOSE WEAPON',
|
||
iconUrl: weaponIcon(item?.category),
|
||
issue: item ? undefined : 'Choose a weapon.'
|
||
};
|
||
}));
|
||
const gearCells = $derived.by((): MatrixCell[] => gearSlots.map((slot) => {
|
||
const selection = draft.gear[slot];
|
||
const item = gearItem(slot);
|
||
const details = [
|
||
brand(selection.brandId)?.name,
|
||
selection.talentId ? `${talent(selection.talentId)?.name ?? 'Talent'} T${selection.talentTier}` : '',
|
||
rollSummary(selection.rolls)
|
||
].filter(Boolean).join(' · ');
|
||
return {
|
||
id: `gear:${slot}`,
|
||
label: slot.toUpperCase(),
|
||
name: item?.name ?? 'EMPTY',
|
||
meta: item ? `T${item.tier}` : '',
|
||
summary: item ? details || `T${item.tier} · LEVEL ${selection.level}` : 'CHOOSE GEAR',
|
||
iconUrl: gearIcon(slot),
|
||
issue: item ? undefined : 'Choose gear.'
|
||
};
|
||
}));
|
||
const protocolCell = $derived<MatrixCell>({
|
||
id: 'protocol:0',
|
||
label: 'PROTOCOL',
|
||
name: protocolItem()?.name ?? 'EMPTY',
|
||
meta: protocolItem()?.quality ?? '',
|
||
summary: protocolItem()
|
||
? `LEVEL ${draft.protocol.level} · ${draft.protocol.talentUpgrades} / 5 TALENT UPGRADES`
|
||
: 'CHOOSE PROTOCOL',
|
||
iconUrl: protocolItem()?.iconUrl,
|
||
issue: protocolItem() ? undefined : 'Choose a protocol.'
|
||
});
|
||
const loadoutConfigured = $derived(Boolean(
|
||
selectedFocus
|
||
&& selectedFocus.abilities.length === 3
|
||
&& draft.weapons.every((item) => item.itemId)
|
||
&& gearSlots.every((slot) => draft.gear[slot].itemId)
|
||
&& draft.chips.every((chip, index) => chipSelectionConfigured(
|
||
chip,
|
||
selectedFocus.abilities[Math.floor(index / 3)]?.id ?? ''
|
||
))
|
||
&& draft.protocol.itemId
|
||
));
|
||
|
||
onMount(() => {
|
||
localStorage.removeItem('shd-build-loadout-draft-v3');
|
||
localStorage.removeItem('shd-build-loadout-draft-v4');
|
||
if (data.initialBuild) return;
|
||
const current = localStorage.getItem('shd-build-loadout-draft-v6');
|
||
const legacy = current ? null : localStorage.getItem('shd-build-loadout-draft-v5');
|
||
const stored = current ?? legacy;
|
||
if (!stored) return;
|
||
try {
|
||
const raw = JSON.parse(stored);
|
||
const parsed = current ? parseLoadoutDraft(raw) : migrateLoadoutDraftV5(raw, data);
|
||
if (parsed) {
|
||
draft = parsed;
|
||
if (legacy) {
|
||
localStorage.setItem('shd-build-loadout-draft-v6', JSON.stringify(parsed));
|
||
localStorage.removeItem('shd-build-loadout-draft-v5');
|
||
}
|
||
if (weaponItem(0) && weaponItem(1) && Number(weaponItem(0).is_exotic) && Number(weaponItem(1).is_exotic)) draft.weapons[1].itemId = '';
|
||
saved = true;
|
||
} else localStorage.removeItem(current ? 'shd-build-loadout-draft-v6' : 'shd-build-loadout-draft-v5');
|
||
} catch {
|
||
localStorage.removeItem(current ? 'shd-build-loadout-draft-v6' : 'shd-build-loadout-draft-v5');
|
||
}
|
||
});
|
||
$effect(() => {
|
||
if (!form?.buildSaved || !form?.buildToken || form.buildToken === handledBuildToken) return;
|
||
handledBuildToken = form.buildToken;
|
||
persistedBuildId = form.savedBuild.id;
|
||
persistedSlug = form.savedBuild.slug;
|
||
persistedVisibility = form.savedBuild.visibility as BuildVisibility;
|
||
savedBuildVisibility = form.savedBuild.visibility as BuildVisibility;
|
||
savedBuildTitle = form.savedBuild.title;
|
||
message = form.savedBuild.visibility === 'private'
|
||
? 'Private build saved to your account.'
|
||
: form.savedBuild.visibility === 'unlisted'
|
||
? 'Unlisted build saved. Anyone with the link can view it.'
|
||
: 'Build published to the SHD archive.';
|
||
});
|
||
function saveDraft() {
|
||
localStorage.setItem('shd-build-loadout-draft-v6', JSON.stringify(draft));
|
||
saved = true;
|
||
toast.success('Draft saved locally', 'This loadout is available on this device.');
|
||
}
|
||
</script>
|
||
|
||
<svelte:head><title>Build a loadout — SHD.build</title></svelte:head>
|
||
<main class="app-page builder-page">
|
||
<div class="builder-command">
|
||
<div class="page-title">
|
||
<div><p class="eyebrow"><span></span> BUILDER / LOADOUT 01</p><input id="builder-build-name" name="builder-build-name" bind:value={draft.buildName} aria-label="Build name" maxlength="100"/></div>
|
||
<div class="actions">
|
||
<span class:visible={saved}>LOCAL SAVED</span>
|
||
<button class="secondary" onclick={saveDraft}>SAVE</button>
|
||
{#if data.viewer}
|
||
<PendingForm action="?/save" class="builder-save-form">
|
||
{#snippet children(pending)}
|
||
<input type="hidden" name="id" value={persistedBuildId}/>
|
||
<input type="hidden" name="loadout" value={JSON.stringify(draft)}/>
|
||
<button class="primary" type="submit" name="visibility" value={persistedVisibility} aria-label="Save build to account">{pending ? 'SAVING…' : 'SAVE TO ACCOUNT'}</button>
|
||
{/snippet}
|
||
</PendingForm>
|
||
{:else}
|
||
<a class="primary" href="/sign-in?returnTo=%2Fbuilder">SIGN IN TO SHARE</a>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{#if data.viewer}
|
||
<div class="builder-persistence">
|
||
<SegmentedChoice legend="VISIBILITY" name="build-visibility" options={[
|
||
{ value:'private', label:'PRIVATE' },
|
||
{ value:'unlisted', label:'UNLISTED' },
|
||
{ value:'public', label:'PUBLIC' }
|
||
]} value={persistedVisibility} onchange={(values) => persistedVisibility = values[0] as BuildVisibility} required/>
|
||
<p>{persistedVisibility === 'private' ? 'Private to you.' : persistedVisibility === 'unlisted' ? 'Direct link only.' : 'Public listing and link.'}</p>
|
||
{#if persistedSlug && savedBuildVisibility !== 'private'}<a class="builder-share-link" href={`/builds/${persistedSlug}`}>VIEW SHARE PAGE →</a>{/if}
|
||
</div>
|
||
{/if}
|
||
<div class="builder-status"><span><i></i> STATS ONLINE</span></div>
|
||
</div>
|
||
{#if message}<p class="success" role="status">{message}</p>{/if}
|
||
{#if form?.buildError}<p class="error" role="alert">{form.buildError}</p>{/if}
|
||
{#if data.viewer && persistedSlug}<BuildShareControl title={savedBuildTitle} slugOrUrl={new URL(`/builds/${encodeURIComponent(persistedSlug)}`, data.publicOrigin).toString()} visibility={savedBuildVisibility}/>{/if}
|
||
{#if !data.gear.length && !data.weapons.length && !data.chipSets.length && !data.protocols.length}<div class="builder-empty-data"><strong>NO BUILDER DATA</strong><span>Add active items in ISAC.</span></div>{/if}
|
||
<div class="loadout-workspace">
|
||
<LoadoutMatrix
|
||
{active}
|
||
doctrine={doctrineCell}
|
||
abilities={abilityCells}
|
||
weapons={weaponCells}
|
||
gear={gearCells}
|
||
protocol={protocolCell}
|
||
configured={loadoutConfigured}
|
||
onselect={(id) => active = id}
|
||
/>
|
||
|
||
<section class="loadout-editor">
|
||
{#if activeParts[0] === 'specialization'}
|
||
<div class="loadout-editor-head"><div><span>SPECIALIZATION</span><h2>FOCUS</h2></div><b>{selectedFocus ? `${selectedSpecializationPoints} / ${data.specializationProgression.availablePoints} POINTS` : 'UNASSIGNED'}</b></div>
|
||
<BuilderPicker items={specializationItems} value={draft.specialization.focusId} onchange={selectFocus} label="FOCUS"/>
|
||
{#if selectedFocus}
|
||
<div class="builder-specialization-layout">
|
||
<div class="builder-editor-lane">
|
||
<div class="builder-specialization-identity"><span class="focus-composite-icon"><ItemIcon src={selectedFocus.specialization.iconUrl} alt=""/><GameIcon name={selectedFocus.primary_attribute.toLocaleLowerCase() as GameIconName} decorative/></span><div><small>{selectedFocus.specialization.name}</small><h3>{selectedFocus.name}</h3><p>{selectedFocus.description || 'No focus description.'}</p></div><b class:configured={Number(selectedFocus.builder_ready) === 1}>{Number(selectedFocus.builder_ready) === 1 ? 'READY' : 'NEEDS DATA'}</b></div>
|
||
<div class="builder-focus-abilities" aria-label="Assigned abilities">
|
||
{#each [0,1,2] as abilityIndex}
|
||
{@const ability = selectedFocus.abilities[abilityIndex]}
|
||
<button type="button" onclick={() => active = `ability:${abilityIndex}`}><ItemIcon src={ability?.iconUrl} alt="" className="builder-ability-icon"/><span><small>ABILITY {abilityIndex + 1}</small><strong>{ability?.name ?? 'UNASSIGNED'}</strong></span><b>{draft.chips.slice(abilityIndex * 3, abilityIndex * 3 + 3).filter((chip) => chip.setId).length} / 3</b></button>
|
||
{/each}
|
||
</div>
|
||
<div class="builder-specialization-telemetry"><span>POINTS <b>{selectedSpecializationPoints} / {data.specializationProgression.availablePoints}</b></span><span>CREDITS <b>{selectedSpecializationCosts.credits.toLocaleString()}</b></span>{#each selectedSpecializationCosts.resources as resource}<span>{String(resource[0]).replace('resource-electronics-','').replaceAll('-',' ').toUpperCase()} <b>× {resource[1]}</b></span>{/each}</div>
|
||
</div>
|
||
<div class="builder-focus-tree builder-editor-lane">
|
||
<div class="builder-section-title"><div><span>UPGRADE TREE</span><small>UNLOCK IN ORDER</small></div><b>{selectedFocus.nodes.length} NODES</b></div>
|
||
{#each [...new Set(selectedFocus.nodes.map((node: any) => Number(node.row_number)))] as row}
|
||
<section><header><span>ROW {String(row).padStart(2, '0')}</span><b>{row === 1 ? 'START' : 'PRIOR ROWS'}</b></header><div>
|
||
{#each selectedFocus.nodes.filter((node: any) => Number(node.row_number) === row) as node}
|
||
<article><ItemIcon src={node.iconUrl} alt={node.name}/><div><strong>{node.name}</strong><small>{node.description_template}</small></div><SegmentedChoice legend={`${node.name} rank`} name={`specialization-node-${node.id}`} options={[{value:'0',label:'OFF'},...Array.from({length:Number(node.max_rank)},(_,index)=>({value:String(index+1),label:`R${index+1}`,className:canSelectNodeRank(node,index+1)?'':'unavailable',disabled:!canSelectNodeRank(node,index+1)}))]} value={String(draft.specialization.nodeRanks[node.id] ?? 0)} onchange={(values) => setNodeRank(node,Number(values[0]))}/></article>
|
||
{/each}
|
||
</div></section>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{:else if activeParts[0] === 'ability'}
|
||
{@const abilityIndex = Number(activeParts[1])}
|
||
{@const ability = selectedFocus?.abilities[abilityIndex]}
|
||
<div class="loadout-editor-head"><div><span>ABILITY {abilityIndex + 1}</span><h2>{ability?.name?.toUpperCase() ?? 'UNASSIGNED'}</h2></div><b>{draft.chips.slice(abilityIndex * 3, abilityIndex * 3 + 3).filter((chip) => chip.setId).length} / 3 CHIPS</b></div>
|
||
<button class="builder-return-link" type="button" onclick={() => active = 'specialization:focus'}>← BACK TO FOCUS</button>
|
||
{#if ability}
|
||
<div class="builder-specialization-identity ability-identity"><ItemIcon src={ability.iconUrl} alt="" className="ability-icon"/><div><small>{selectedFocus.specialization.name} · {selectedFocus.name}</small><h3>{ability.name}</h3><p>{ability.description || 'No ability description.'}</p></div><b>{ability.attack ? `${ability.attack.delivery.toUpperCase()} · ${ability.attack.damage_type}` : 'ATTACK DATA NEEDED'}</b></div>
|
||
<div class="builder-section-title"><div><span>SKILL CHIPS</span><small>3 SETS</small></div><b>{draft.chips.slice(abilityIndex * 3, abilityIndex * 3 + 3).filter((chip) => chip.setId).length} / 3</b></div>
|
||
<div class="builder-ability-chip-panels single">
|
||
<section>
|
||
<div>{#each [0,1,2] as chipSlot}{@const chipIndex = abilityIndex * 3 + chipSlot}{@const item = chipItem(chipIndex)}<button type="button" onclick={() => active = `chip:${chipIndex}`}><ItemIcon src={item?.iconUrl} alt="" className="builder-chip-icon"/><span><small>CHIP {chipSlot + 1}</small><strong>{item?.name ?? 'EMPTY'}</strong><em>{item ? `${draft.chips[chipIndex].quality} · ${attribute(draft.chips[chipIndex].primary.statId)?.name ?? 'NO PRIMARY'}` : 'SELECT SET'}</em></span></button>{/each}</div>
|
||
</section>
|
||
</div>
|
||
{:else}
|
||
<p class="error">Choose a focus with 3 abilities first.</p>
|
||
{/if}
|
||
{:else if activeParts[0] === 'gear'}
|
||
{@const slot = activeParts[1]}{@const selection = draft.gear[slot]}{@const item = gearItem(slot)}
|
||
<div class="loadout-editor-head"><div><span>GEAR</span><h2>{slot.toUpperCase()}</h2></div><b>{item ? `T${item.tier} · LV ${selection.level}` : 'UNASSIGNED'}</b></div>
|
||
<BuilderPicker items={data.gear.filter((entry) => entry.slot === slot)} bind:value={selection.itemId} onchange={(id) => configureGear(slot,id)} label="GEAR ITEM"/>
|
||
{#if item}
|
||
{@const healthRange = gearBaseRange(item, 'health', selection.level)}
|
||
{@const armorRange = item.base_armor_min !== null ? gearBaseRange(item, 'armor', selection.level) : null}
|
||
{@const gearCore = coreAllocationRange(Number(item.tier), selection.level, 'gear')}
|
||
{@const augments = data.gearAugments.filter((entry) => entry.gear_slot === slot)}
|
||
<div class="builder-editor-columns">
|
||
<section class="builder-editor-lane" aria-label="Gear identity and base values">
|
||
<div class="builder-equipment-controls">
|
||
<RangeValueControl label="GEAR LEVEL" min={Number(item.tier) === 2 ? 40 : 1} max={50} value={selection.level} onchange={(value) => changeGearLevel(slot,value)}/>
|
||
<BuilderRadioGrid label="BRAND SET" name={`gear-${slot}-brand`} items={item.brandIds.map((id: string) => brand(id)).filter(Boolean)} bind:value={selection.brandId} columns={Math.min(item.brandIds.length,4)} iconOnly required/>
|
||
{#if item.talentIds.length}<BuilderRadioGrid label="EQUIPPED TALENT" name={`gear-${slot}-talent`} items={item.talentIds.map((id: string) => talent(id)).filter(Boolean)} value={selection.talentId} onchange={(id) => { selection.talentId = id; selection.talentTier = supportedTalentTier(id, selection.talentTier); }} columns={Math.min(item.talentIds.length,4)} searchable={item.talentIds.length > 6} required/>{/if}
|
||
{#if selection.talentId && talent(selection.talentId)}<TalentTierChoice name={`gear-${slot}-talent-tier`} talent={talent(selection.talentId)} bind:value={selection.talentTier}/>{/if}
|
||
</div>
|
||
<p class:provisional={healthRange.provisional} class="builder-scaling-note">{healthRange.provisional ? 'Estimated range: levels 1–9 remain provisional.' : 'Base values scale with item level and use game-matching truncated display values.'}</p>
|
||
<div class="builder-range-grid"><RangeValueControl label="BASE HEALTH" min={healthRange.min} max={healthRange.max} provisional={healthRange.provisional} bind:value={selection.health}/>{#if armorRange}<RangeValueControl label="BASE ARMOR" min={armorRange.min} max={armorRange.max} provisional={armorRange.provisional} bind:value={selection.armor}/>{/if}</div>
|
||
</section>
|
||
<section class="builder-editor-lane" aria-label="Gear attributes and augments">
|
||
<div class="builder-section-title"><div><span>CORE ALLOCATION</span><small>SHARED T{item.tier} POOL</small></div><b class:restricted={coreTotal(selection) < gearCore.poolMin || coreTotal(selection) > gearCore.poolMax}>{coreTotal(selection)} / {gearCore.poolMin}–{gearCore.poolMax}</b></div>
|
||
<div class="builder-core-grid">{#each coreKeys as key}<RangeValueControl label={key.toUpperCase()} min={0} max={gearCore.poolMax} bind:value={selection[key]}/>{/each}</div>
|
||
<div class="builder-section-title"><div><span>ROLLED ATTRIBUTES</span><small>TWO REQUIRED SLOTS</small></div></div>
|
||
<div class="builder-rolls required">{#each selection.rolls as roll, index}{@const rollRange = attributeRange(attribute(roll.statId), 'gear', selection.level)}<div><BuilderPicker items={gearAttributes} bind:value={roll.statId} onchange={(id) => setRollStat(roll,id,'gear',selection.level)} disabledIds={selection.rolls.filter((_, itemIndex) => itemIndex !== index).map((entry) => entry.statId).filter(Boolean)} label={`ATTRIBUTE ${index + 1}`}/><RangeValueControl label="VALUE" min={rollRange.min} max={rollRange.max} provisional={rollRange.provisional} bind:value={roll.value}/></div>{/each}</div>
|
||
{#if augments.length}<div class="builder-section-title"><div><span>TACTICAL AUGMENTS</span><small>OPTIONAL ITEM UPGRADES</small></div><b>{selection.augmentSlots.length} / {augments.length} ACTIVE</b></div><div class="builder-augment-list">{#each augments as augment}<label><input type="checkbox" checked={selection.augmentSlots.includes(Number(augment.augment_slot))} onchange={() => selection.augmentSlots = selection.augmentSlots.includes(Number(augment.augment_slot)) ? selection.augmentSlots.filter((value) => value !== Number(augment.augment_slot)) : [...selection.augmentSlots,Number(augment.augment_slot)]}/><span><b>AUGMENT 0{augment.augment_slot}</b><small>{augment.effect_type === 'Custom' ? `${attribute(augment.stat_attribute_id)?.name} · ${unitValue(augment.value,augment.stat_attribute_id)}` : `+${augment.value}% BASE HEALTH${item.base_armor_min !== null ? ' + ARMOR' : ''}`}</small></span><em>{augment.costs.find((cost: any) => Number(cost.gear_tier) === Number(item.tier))?.unlock_cost ?? '—'} COST · T{item.tier}</em></label>{/each}</div>{/if}
|
||
</section>
|
||
</div>
|
||
{/if}
|
||
{:else if activeParts[0] === 'weapon'}
|
||
{@const index = Number(activeParts[1])}{@const selection = draft.weapons[index]}{@const item = weaponItem(index)}{@const other = weaponItem(index ? 0 : 1)}
|
||
<div class="loadout-editor-head"><div><span>WEAPON</span><h2>{index ? 'SECONDARY' : 'PRIMARY'}</h2></div><b>{item ? item.damage_type : 'UNASSIGNED'}</b></div>
|
||
<BuilderPicker items={data.weapons} bind:value={selection.itemId} onchange={(id) => configureWeapon(index,id)} disabledIds={other && Number(other.is_exotic) ? data.weapons.filter((entry) => Number(entry.is_exotic)).map((entry) => entry.id) : []} label="WEAPON"/>
|
||
{#if item}
|
||
{#if Number(item.is_exotic) && other && Number(other.is_exotic)}<p class="error">Only one exotic weapon may be equipped. Choose a standard weapon in either slot.</p>{/if}
|
||
{@const range = item.ranges.find((entry: any) => Number(entry.tier) === selection.tier)}
|
||
{#if range}{@const damageRange = weaponStatRange(range,'damage',selection.level)}{@const weaponCore = coreAllocationRange(selection.tier, selection.level, 'weapon')}
|
||
<div class="builder-editor-columns">
|
||
<section class="builder-editor-lane" aria-label="Weapon identity and base values">
|
||
<div class="builder-weapon-controls">
|
||
<RangeValueControl label="WEAPON LEVEL" min={selection.tier === 2 ? 40 : 1} max={50} value={selection.level} onchange={(value) => changeWeaponLevel(index,value)}/>
|
||
<SegmentedChoice legend="TIER" name={`weapon-${index}-tier`} options={item.ranges.map((entry: any) => ({ value: String(entry.tier), label: `T${entry.tier}` }))} value={String(selection.tier)} onchange={(values) => changeWeaponTier(index,Number(values[0]))} required/>
|
||
<div class="builder-fixed"><span>{item.rpm} RPM</span><span>{item.magazine} SHOTS</span><span>{item.reload_speed}s RELOAD</span></div>
|
||
</div>
|
||
<p class:provisional={selection.level < 40} class="builder-scaling-note">{selection.level < 40 ? 'Estimated range below level 40.' : 'Damage scales with the selected item level.'}</p>
|
||
<div class="builder-range-grid weapon-damage"><RangeValueControl label="DAMAGE" min={damageRange.min} max={damageRange.max} provisional={damageRange.provisional} bind:value={selection.damage}/></div>
|
||
{#if item.baseBonuses.length}<div class="builder-inherited">{#each item.baseBonuses as bonus}<span><small>{attribute(bonus.stat_attribute_id)?.name}</small><b>{unitValue(bonus.value,bonus.stat_attribute_id)}</b></span>{/each}</div>{/if}
|
||
</section>
|
||
<section class="builder-editor-lane" aria-label="Weapon attributes and talents">
|
||
<div class="builder-section-title"><div><span>CORE ALLOCATION</span><small>SHARED T{selection.tier} POOL</small></div><b class:restricted={coreTotal(selection) < weaponCore.poolMin || coreTotal(selection) > weaponCore.poolMax}>{coreTotal(selection)} / {weaponCore.poolMin}–{weaponCore.poolMax}</b></div>
|
||
<div class="builder-core-grid">{#each coreKeys as key}<RangeValueControl label={key.toUpperCase()} min={0} max={weaponCore.poolMax} bind:value={selection[key]}/>{/each}</div>
|
||
<div class="builder-section-title"><div><span>ROLLED ATTRIBUTES</span><small>TWO REQUIRED SLOTS</small></div></div>
|
||
<div class="builder-rolls required">{#each selection.rolls as roll, rollIndex}{@const rollRange = attributeRange(attribute(roll.statId), 'weapon', selection.level)}<div><BuilderPicker items={weaponAttributes} bind:value={roll.statId} onchange={(id) => setRollStat(roll,id,'weapon',selection.level)} disabledIds={selection.rolls.filter((_, itemIndex) => itemIndex !== rollIndex).map((entry) => entry.statId).filter(Boolean)} label={`ATTRIBUTE ${rollIndex + 1}`}/><RangeValueControl label="VALUE" min={rollRange.min} max={rollRange.max} provisional={rollRange.provisional} bind:value={roll.value}/></div>{/each}</div>
|
||
<div class="builder-talent-grids">
|
||
{#if item.talent1Ids.length}<section class="builder-talent-slot"><BuilderRadioGrid label="TALENT 1" name={`weapon-${index}-talent-1`} items={item.talent1Ids.map((id: string) => talent(id)).filter(Boolean)} value={selection.talent1Id} onchange={(id) => { selection.talent1Id = id; selection.talent1Tier = supportedTalentTier(id, selection.talent1Tier); }} columns={Math.min(item.talent1Ids.length,4)} searchable={item.talent1Ids.length > 6} required/>{#if selection.talent1Id && talent(selection.talent1Id)}<TalentTierChoice name={`weapon-${index}-talent-1-tier`} talent={talent(selection.talent1Id)} bind:value={selection.talent1Tier}/>{/if}</section>{/if}
|
||
{#if item.talent2Ids.length}<section class="builder-talent-slot"><BuilderRadioGrid label="TALENT 2" name={`weapon-${index}-talent-2`} items={item.talent2Ids.map((id: string) => talent(id)).filter(Boolean)} value={selection.talent2Id} onchange={(id) => { selection.talent2Id = id; selection.talent2Tier = supportedTalentTier(id, selection.talent2Tier); }} columns={Math.min(item.talent2Ids.length,4)} searchable={item.talent2Ids.length > 6} required/>{#if selection.talent2Id && talent(selection.talent2Id)}<TalentTierChoice name={`weapon-${index}-talent-2-tier`} talent={talent(selection.talent2Id)} bind:value={selection.talent2Tier}/>{/if}</section>{/if}
|
||
{#if item.exotic_talent_id && talent(item.exotic_talent_id)}<section class="builder-talent-slot builder-exotic-talent"><div><ItemIcon src={talent(item.exotic_talent_id).iconUrl} alt=""/><span><small>EXOTIC TALENT</small><b>{talent(item.exotic_talent_id).name}</b></span></div><TalentTierChoice name={`weapon-${index}-exotic-talent-tier`} talent={talent(item.exotic_talent_id)} bind:value={selection.exoticTalentTier}/></section>{/if}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
{/if}
|
||
{/if}
|
||
{:else if activeParts[0] === 'chip'}
|
||
{@const index = Number(activeParts[1])}{@const chip = draft.chips[index]}{@const item = chipItem(index)}{@const abilityIndex = Math.floor(index / 3)}{@const ability = selectedFocus?.abilities[abilityIndex]}
|
||
<div class="loadout-editor-head"><div><span>CHIP {(index % 3) + 1} / 3</span><h2>{ability?.name?.toUpperCase() ?? 'SKILL CHIP'}</h2></div><b>{chip.quality.toUpperCase()}</b></div>
|
||
<button class="builder-return-link" type="button" onclick={() => active = `ability:${abilityIndex}`}>← BACK TO ABILITY</button>
|
||
{#if ability}<BuilderPicker items={data.chipSets.filter((entry: any) => chipSupportsAbility(entry, ability.id))} bind:value={chip.setId} onchange={(id) => configureChip(index,id)} label="CHIP SET"/>{:else}<p class="error">Choose a focus with 3 abilities first.</p>{/if}
|
||
{#if !chipProfileConfigured}<p class="error">CHIP PROFILE REQUIRED. Configure shared ranges in ISAC.</p>{/if}
|
||
{#if item}
|
||
<div class="builder-editor-columns builder-chip-editor">
|
||
<section class="builder-editor-lane" aria-label="Skill Chip quality and primary Attribute">
|
||
<div class="builder-field-grid"><SegmentedChoice legend="QUALITY" name={`chip-${index}-quality`} options={skillChipQualities.map((quality) => ({ value: quality, label: quality.toUpperCase() }))} value={chip.quality} onchange={(values) => changeChipQuality(index, values[0] as SkillChipQuality)} required/></div>
|
||
<div class="builder-section-title"><div><span>PRIMARY</span><small>ABILITY ONLY</small></div><b>NOT IN TOTALS</b></div>
|
||
<p class="builder-scaling-note">Not included in totals.</p>
|
||
<div class="builder-chip-rolls"><div><BuilderPicker items={chipPrimaryAttributes} bind:value={chip.primary.statId} onchange={(id) => setChipRoll(chip.primary,id,'primary',chip.quality)} label="PRIMARY"/>{#if validChipRange(chipRange('primary', chip.primary.statId, chip.quality))}<RangeValueControl label="VALUE" min={chipRangeMin('primary', chip.primary.statId, chip.quality)} max={chipRangeMax('primary', chip.primary.statId, chip.quality)} step={0.01} bind:value={chip.primary.value}/>{:else}<p class="error">PRIMARY RANGE REQUIRED</p>{/if}</div></div>
|
||
</section>
|
||
<section class="builder-editor-lane" aria-label="Skill Chip secondary Attributes">
|
||
<div class="builder-section-title"><div><span>SECONDARIES</span><small>{skillChipSecondaryCapacity[chip.quality]} SLOT{skillChipSecondaryCapacity[chip.quality] === 1 ? '' : 'S'}</small></div></div>
|
||
<div class="builder-chip-rolls">{#each chip.secondary as roll, secondaryIndex}<div><BuilderPicker items={chipSecondaryAttributes} bind:value={roll.statId} onchange={(id) => setChipRoll(roll,id,'secondary',chip.quality)} disabledIds={chip.secondary.filter((_,i) => i !== secondaryIndex).map((entry) => entry.statId).filter(Boolean)} label={`SECONDARY ${secondaryIndex + 1}`}/>{#if validChipRange(chipRange('secondary', roll.statId, chip.quality))}<RangeValueControl label="VALUE" min={chipRangeMin('secondary', roll.statId, chip.quality)} max={chipRangeMax('secondary', roll.statId, chip.quality)} step={0.01} bind:value={roll.value}/>{:else}<p class="error">SECONDARY RANGE REQUIRED</p>{/if}</div>{/each}</div>
|
||
{#if skillChipSecondaryCapacity[chip.quality] === 0}<p class="builder-scaling-note">NO SECONDARIES</p>{/if}
|
||
</section>
|
||
</div>
|
||
{/if}
|
||
{:else}
|
||
{@const protocol = protocolItem()}
|
||
<div class="loadout-editor-head"><div><span>PROTOCOL</span><h2>OS PROTOCOL</h2></div><b>{protocol?.quality?.toUpperCase() ?? 'UNASSIGNED'}</b></div>
|
||
<BuilderPicker items={data.protocols} bind:value={draft.protocol.itemId} label="PROTOCOL"/>
|
||
{#if protocol}<div class="builder-range-grid"><label>PROTOCOL LEVEL <span>01–50</span><input type="number" min="1" max="50" bind:value={draft.protocol.level} onblur={() => draft.protocol.level = clamp(draft.protocol.level,1,50)}/></label><label>TALENT UPGRADES <span>0–5</span><input type="number" min="0" max="5" bind:value={draft.protocol.talentUpgrades} onblur={() => draft.protocol.talentUpgrades = clamp(draft.protocol.talentUpgrades,0,5)}/></label></div><div class="builder-inherited">{#if protocol.primaryEffect}<span><small>{attribute(protocol.primaryEffect.stat_attribute_id)?.name} · LEVEL {draft.protocol.level}</small><b>{unitValue(Number(protocol.primaryEffect.base_value)*(1+(draft.protocol.level-1)/49),protocol.primaryEffect.stat_attribute_id)}</b></span>{/if}{#each protocol.secondaryEffects as effect}<span><small>{attribute(effect.stat_attribute_id)?.name}</small><b>{unitValue(effect.value,effect.stat_attribute_id)}</b></span>{/each}</div>{/if}
|
||
{/if}
|
||
</section>
|
||
|
||
<aside class="loadout-summary">
|
||
<LoadoutStatsSummary {summary} attributes={data.attributes} talents={data.talents} headingId="builder-known-stats-heading" />
|
||
<div class="builder-planned-model"><PlannedCombatModel headingId="builder-planned-output-heading" variant="compact" /></div>
|
||
<p class="notice">Anonymous drafts remain on this device. Account saves preserve the equipped-item configuration and current visibility.</p>
|
||
</aside>
|
||
</div>
|
||
</main>
|