vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat: Add loot builder frontend — Pinia store, views, 4 components, router + nav
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Details

Browse Source 
Implements the complete frontend for BetterLoot profile management:
- Pinia store (loot.ts) with CRUD, import/export, apply-to-server actions
- LootBuilderView orchestrator with profile bar, modals, two-column layout
- LootContainerSidebar with categorized container list, search, config indicators
- LootItemEditor for per-container item settings and ungrouped item table
- LootItemPicker modal with searchable/filterable Rust item grid
- LootGroupEditor for reusable loot group management
- Router integration at /loot-builder
- Sidebar nav item with Crosshair icon and loot.view permission

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-22 00:27:46 -05:00
parent eb57c51a24
commit 9d28fdfb65
8 changed files with 1186 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
frontend/src/components/loot/LootItemEditor.vue Normal file
View File

@@ -0,0 +1,232 @@
<script setup lang="ts">
import { computed } from 'vue'
import { rustItems } from '@/data/rust-items'
import { rustContainers } from '@/data/rust-containers'
import { Trash2, Plus, Settings2 } from 'lucide-vue-next'
import type { PrefabLoot } from '@/types'
const props = defineProps<{
containerKey: string
lootTable: Record<string, any>
}>()
const emit = defineEmits<{
dirty: []
'add-item': []
}>()
const containerName = computed(() => {
const c = rustContainers.find(c => c.prefab === props.containerKey)
return c?.name || props.containerKey.split('/').pop()?.replace('.prefab', '') || 'Unknown'
})
const containerData = computed<PrefabLoot | null>(() => {
return props.lootTable[props.containerKey] || null
})
function ensureContainer() {
if (!props.lootTable[props.containerKey]) {
props.lootTable[props.containerKey] = {
Enabled: true,
LootProfiles: [],
GuaranteedItems: {},
UngroupedItems: {},
ItemSettings: { ItemsMin: 1, ItemsMax: 6, MinScrap: 0, MaxScrap: 0 },
}
emit('dirty')
}
}
function getItemName(shortname: string): string {
return rustItems.find(i => i.shortname === shortname)?.name || shortname
}
function updateItemField(shortname: string, field: string, value: number) {
ensureContainer()
const items = props.lootTable[props.containerKey].UngroupedItems
if (items[shortname]) {
items[shortname][field] = value
emit('dirty')
}
}
function updateSettings(field: string, value: number) {
ensureContainer()
props.lootTable[props.containerKey].ItemSettings[field] = value
emit('dirty')
}
function toggleEnabled() {
ensureContainer()
props.lootTable[props.containerKey].Enabled = !props.lootTable[props.containerKey].Enabled
emit('dirty')
}
function removeItem(shortname: string) {
if (!containerData.value?.UngroupedItems) return
delete props.lootTable[props.containerKey].UngroupedItems[shortname]
emit('dirty')
}
const ungroupedItems = computed(() => {
if (!containerData.value?.UngroupedItems) return []
return Object.entries(containerData.value.UngroupedItems).map(([shortname, data]) => ({
shortname,
name: getItemName(shortname),
...(data as any),
}))
})
</script>
<template>
<div class="space-y-4">
<!-- Container Header -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<h2 class="text-lg font-semibold text-neutral-100">{{ containerName }}</h2>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
:checked="containerData?.Enabled ?? true"
@change="toggleEnabled"
class="rounded bg-neutral-800 border-neutral-600 text-oxide-500 focus:ring-oxide-500"
/>
<span class="text-sm text-neutral-400">Enabled</span>
</label>
</div>
<div class="flex items-center gap-2">
<Settings2 class="w-4 h-4 text-neutral-500" />
<span class="text-xs text-neutral-500 font-mono">{{ containerKey.split('/').pop() }}</span>
</div>
</div>
<!-- Item Settings -->
<div class="grid grid-cols-4 gap-3" v-if="containerData">
<div>
<label class="block text-xs text-neutral-500 mb-1">Items Min</label>
<input
type="number"
:value="containerData.ItemSettings?.ItemsMin ?? 1"
@input="updateSettings('ItemsMin', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
min="0"
/>
</div>
<div>
<label class="block text-xs text-neutral-500 mb-1">Items Max</label>
<input
type="number"
:value="containerData.ItemSettings?.ItemsMax ?? 6"
@input="updateSettings('ItemsMax', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
min="0"
/>
</div>
<div>
<label class="block text-xs text-neutral-500 mb-1">Min Scrap</label>
<input
type="number"
:value="containerData.ItemSettings?.MinScrap ?? 0"
@input="updateSettings('MinScrap', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
min="0"
/>
</div>
<div>
<label class="block text-xs text-neutral-500 mb-1">Max Scrap</label>
<input
type="number"
:value="containerData.ItemSettings?.MaxScrap ?? 0"
@input="updateSettings('MaxScrap', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
min="0"
/>
</div>
</div>
</div>
<!-- Ungrouped Items Table -->
<div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-semibold text-neutral-300">Ungrouped Items</h3>
<button
@click="emit('add-item')"
class="flex items-center gap-1 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm"
>
<Plus class="w-3.5 h-3.5" />
Add Item
</button>
</div>
<div v-if="ungroupedItems.length > 0" class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-neutral-800">
<th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
<th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
<th class="w-10"></th>
</tr>
</thead>
<tbody>
<tr
v-for="item in ungroupedItems"
:key="item.shortname"
class="border-b border-neutral-800/50 hover:bg-neutral-800/30"
>
<td class="py-2 px-2">
<div>
<span class="text-neutral-200">{{ item.name }}</span>
<span class="text-neutral-600 text-xs ml-2">{{ item.shortname }}</span>
</div>
</td>
<td class="py-2 px-2">
<input
type="number"
:value="item.Min"
@input="updateItemField(item.shortname, 'Min', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0"
/>
</td>
<td class="py-2 px-2">
<input
type="number"
:value="item.Max"
@input="updateItemField(item.shortname, 'Max', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0"
/>
</td>
<td class="py-2 px-2">
<input
type="number"
:value="item.Probability ?? 100"
@input="updateItemField(item.shortname, 'Probability', Number(($event.target as HTMLInputElement).value))"
class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
min="0"
max="100"
/>
</td>
<td class="py-2 px-2">
<button
@click="removeItem(item.shortname)"
class="text-neutral-600 hover:text-red-400 transition-colors"
>
<Trash2 class="w-4 h-4" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else class="text-center py-6 text-neutral-500 text-sm">
No items configured for this container.
<button @click="emit('add-item')" class="text-oxide-400 hover:underline ml-1">Add one</button>
</div>
</div>
</div>
</template>