Fix various spacing and sizing issues on party details
This commit is contained in:
parent
d8eb6b965a
commit
6ace86a00e
8 changed files with 949 additions and 831 deletions
|
|
@ -747,14 +747,14 @@
|
|||
alt={`Avatar of ${party.user.username}`}
|
||||
src={avatarSrc}
|
||||
srcset={avatarSrcSet}
|
||||
width="40"
|
||||
height="40"
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
{:else}
|
||||
<div class="avatar-placeholder" aria-hidden="true"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="username">@{party.user.username}</span>
|
||||
<span class="username">{party.user.username}</span>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -940,17 +940,23 @@
|
|||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: $unit-half;
|
||||
gap: $unit-2x;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.party-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: $unit-half;
|
||||
padding: $unit-4x 0;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
padding: $unit-2x 0;
|
||||
}
|
||||
|
||||
.party-info {
|
||||
flex-grow: 1;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $unit-fourth 0;
|
||||
font-size: $font-xlarge;
|
||||
|
|
@ -981,8 +987,8 @@
|
|||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
width: $unit-5x;
|
||||
height: $unit-5x;
|
||||
width: $unit-4x;
|
||||
height: $unit-4x;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
|
|
@ -1031,7 +1037,7 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
font-size: $font-medium;
|
||||
font-size: $font-regular;
|
||||
font-weight: $medium;
|
||||
}
|
||||
|
||||
|
|
@ -1044,7 +1050,6 @@
|
|||
.cards {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
margin-bottom: $unit-2x;
|
||||
|
||||
// Individual card styles
|
||||
.description-card,
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@
|
|||
class?: string
|
||||
}
|
||||
|
||||
let {
|
||||
selectedTab = GridType.Character,
|
||||
onTabChange,
|
||||
party,
|
||||
class: className
|
||||
}: Props = $props()
|
||||
|
||||
let { selectedTab = GridType.Character, onTabChange, party, class: className }: Props = $props()
|
||||
|
||||
// Handle value changes
|
||||
let value = $state(selectedTab)
|
||||
|
|
@ -44,12 +38,7 @@
|
|||
</script>
|
||||
|
||||
<nav class={className}>
|
||||
<SegmentedControl
|
||||
bind:value
|
||||
onValueChange={handleValueChange}
|
||||
gap={true}
|
||||
grow={true}
|
||||
>
|
||||
<SegmentedControl bind:value onValueChange={handleValueChange} gap={true} grow={true}>
|
||||
<RepSegment
|
||||
value={GridType.Character}
|
||||
label={m.party_segmented_control_characters()}
|
||||
|
|
@ -82,8 +71,9 @@
|
|||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -95,7 +95,6 @@
|
|||
}
|
||||
|
||||
.actions-section {
|
||||
margin-top: $unit-2x;
|
||||
padding: $unit-2x;
|
||||
padding-bottom: $unit-2x;
|
||||
border-top: 1px solid var(--button-bg);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $item-corner;
|
||||
border-radius: $card-corner;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
background: $grey-100;
|
||||
border-radius: $item-corner;
|
||||
border-radius: $card-corner;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
|
||||
.segmentedControl {
|
||||
display: inline-flex;
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
gap: spacing.$unit-half;
|
||||
user-select: none;
|
||||
|
|
@ -45,7 +44,7 @@
|
|||
}
|
||||
|
||||
&.gap {
|
||||
gap: spacing.$unit;
|
||||
gap: spacing.$unit-2x;
|
||||
}
|
||||
|
||||
&.raid {
|
||||
|
|
|
|||
|
|
@ -22,16 +22,29 @@
|
|||
<section class="profile">
|
||||
<header class="header">
|
||||
{#if data.user?.avatar?.picture}
|
||||
<img class="avatar" alt={`Avatar of ${data.user.username}`} src={avatarSrc} srcset={avatarSrcSet} width="64" height="64" />
|
||||
<img
|
||||
class="avatar"
|
||||
alt={`Avatar of ${data.user.username}`}
|
||||
src={avatarSrc}
|
||||
srcset={avatarSrcSet}
|
||||
width="64"
|
||||
height="64"
|
||||
/>
|
||||
{:else}
|
||||
<div class="avatar" aria-hidden="true"></div>
|
||||
{/if}
|
||||
<div>
|
||||
<h1>@{data.user.username}</h1>
|
||||
<h1>{data.user.username}</h1>
|
||||
<nav class="tabs" aria-label="Profile sections">
|
||||
<a class:active={tab==='teams'} href="?tab=teams" data-sveltekit-preload-data="hover">Teams</a>
|
||||
<a class:active={tab === 'teams'} href="?tab=teams" data-sveltekit-preload-data="hover"
|
||||
>Teams</a
|
||||
>
|
||||
{#if isOwner}
|
||||
<a class:active={tab==='favorites'} href="?tab=favorites" data-sveltekit-preload-data="hover">Favorites</a>
|
||||
<a
|
||||
class:active={tab === 'favorites'}
|
||||
href="?tab=favorites"
|
||||
data-sveltekit-preload-data="hover">Favorites</a
|
||||
>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -53,13 +66,48 @@
|
|||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
|
||||
.profile { padding: $unit-2x 0; }
|
||||
.header { display: flex; align-items: center; gap: $unit-2x; margin-bottom: $unit-2x; }
|
||||
.avatar { width: 64px; height: 64px; border-radius: 50%; background: $grey-80; border: 1px solid $grey-75; object-fit: cover; }
|
||||
.sub { color: $grey-55; margin: 0; }
|
||||
.tabs { display: flex; gap: $unit-2x; margin-top: $unit-half; }
|
||||
.tabs a { text-decoration: none; color: inherit; padding-bottom: 2px; border-bottom: 2px solid transparent; }
|
||||
.tabs a.active { border-color: #3366ff; color: #3366ff; }
|
||||
.pagination { display: flex; gap: $unit-2x; padding: $unit-2x 0; }
|
||||
.pagination a { text-decoration: none; }
|
||||
.profile {
|
||||
padding: $unit-2x 0;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit-2x;
|
||||
margin-bottom: $unit-2x;
|
||||
}
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: $grey-80;
|
||||
border: 1px solid $grey-75;
|
||||
object-fit: cover;
|
||||
}
|
||||
.sub {
|
||||
color: $grey-55;
|
||||
margin: 0;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
margin-top: $unit-half;
|
||||
}
|
||||
.tabs a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.tabs a.active {
|
||||
border-color: #3366ff;
|
||||
color: #3366ff;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-2x 0;
|
||||
}
|
||||
.pagination a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
|
||||
import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
|
||||
import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte'
|
||||
import { openSearchSidebar, closeSearchSidebar } from '$lib/features/search/openSearchSidebar.svelte'
|
||||
import {
|
||||
openSearchSidebar,
|
||||
closeSearchSidebar
|
||||
} from '$lib/features/search/openSearchSidebar.svelte'
|
||||
import PartySegmentedControl from '$lib/components/party/PartySegmentedControl.svelte'
|
||||
import { GridType } from '$lib/types/enums'
|
||||
import { setContext } from 'svelte'
|
||||
|
|
@ -41,9 +44,12 @@
|
|||
activeTab = gridType
|
||||
// Open sidebar when switching tabs
|
||||
openSearchSidebar({
|
||||
type: gridType === GridType.Weapon ? 'weapon' :
|
||||
gridType === GridType.Summon ? 'summon' :
|
||||
'character',
|
||||
type:
|
||||
gridType === GridType.Weapon
|
||||
? 'weapon'
|
||||
: gridType === GridType.Summon
|
||||
? 'summon'
|
||||
: 'character',
|
||||
onAddItems: handleAddItems,
|
||||
canAddMore: !isGridFull(gridType)
|
||||
})
|
||||
|
|
@ -74,16 +80,17 @@
|
|||
let errorMessage = $state('')
|
||||
let errorDetails = $state<string[]>([])
|
||||
|
||||
|
||||
// Calculate if grids are full
|
||||
let isWeaponGridFull = $derived(weapons.length >= 10) // 1 mainhand + 9 grid slots
|
||||
let isSummonGridFull = $derived(summons.length >= 6) // 6 summon slots (main + 4 grid + friend)
|
||||
let isCharacterGridFull = $derived(characters.length >= 5) // 5 character slots
|
||||
|
||||
let canAddMore = $derived(
|
||||
activeTab === GridType.Weapon ? !isWeaponGridFull :
|
||||
activeTab === GridType.Summon ? !isSummonGridFull :
|
||||
!isCharacterGridFull
|
||||
activeTab === GridType.Weapon
|
||||
? !isWeaponGridFull
|
||||
: activeTab === GridType.Summon
|
||||
? !isSummonGridFull
|
||||
: !isCharacterGridFull
|
||||
)
|
||||
|
||||
// Handle adding items from search
|
||||
|
|
@ -131,22 +138,26 @@
|
|||
let position = selectedSlot !== null ? selectedSlot : -1 // Use selectedSlot if available
|
||||
let itemAdded = false
|
||||
try {
|
||||
console.log('Adding item to party:', { partyId, itemId: firstItem.id, type: activeTab, position })
|
||||
console.log('Adding item to party:', {
|
||||
partyId,
|
||||
itemId: firstItem.id,
|
||||
type: activeTab,
|
||||
position
|
||||
})
|
||||
|
||||
if (activeTab === GridType.Weapon) {
|
||||
// Use selectedSlot if available, otherwise default to mainhand
|
||||
if (selectedSlot === null) position = -1
|
||||
const addResult = await apiClient.addWeapon(
|
||||
partyId,
|
||||
firstItem.granblue_id,
|
||||
position,
|
||||
{ mainhand: position === -1 }
|
||||
)
|
||||
const addResult = await apiClient.addWeapon(partyId, firstItem.granblue_id, position, {
|
||||
mainhand: position === -1
|
||||
})
|
||||
console.log('Weapon added:', addResult)
|
||||
itemAdded = true
|
||||
|
||||
// Update local state with the added weapon
|
||||
weapons = [...weapons, {
|
||||
weapons = [
|
||||
...weapons,
|
||||
{
|
||||
id: addResult.grid_weapon?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -155,21 +166,22 @@
|
|||
element: firstItem.element
|
||||
},
|
||||
mainhand: position === -1
|
||||
}]
|
||||
}
|
||||
]
|
||||
} else if (activeTab === GridType.Summon) {
|
||||
// Use selectedSlot if available, otherwise default to main summon
|
||||
if (selectedSlot === null) position = -1
|
||||
const addResult = await apiClient.addSummon(
|
||||
partyId,
|
||||
firstItem.granblue_id,
|
||||
position,
|
||||
{ main: position === -1, friend: position === 6 }
|
||||
)
|
||||
const addResult = await apiClient.addSummon(partyId, firstItem.granblue_id, position, {
|
||||
main: position === -1,
|
||||
friend: position === 6
|
||||
})
|
||||
console.log('Summon added:', addResult)
|
||||
itemAdded = true
|
||||
|
||||
// Update local state with the added summon
|
||||
summons = [...summons, {
|
||||
summons = [
|
||||
...summons,
|
||||
{
|
||||
id: addResult.grid_summon?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -179,7 +191,8 @@
|
|||
},
|
||||
main: position === -1,
|
||||
friend: position === 6
|
||||
}]
|
||||
}
|
||||
]
|
||||
} else if (activeTab === GridType.Character) {
|
||||
// Use selectedSlot if available, otherwise default to first slot
|
||||
if (selectedSlot === null) position = 0
|
||||
|
|
@ -193,7 +206,9 @@
|
|||
itemAdded = true
|
||||
|
||||
// Update local state with the added character
|
||||
characters = [...characters, {
|
||||
characters = [
|
||||
...characters,
|
||||
{
|
||||
id: addResult.grid_character?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -201,7 +216,8 @@
|
|||
name: firstItem.name,
|
||||
element: firstItem.element
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
selectedSlot = null // Reset after using
|
||||
|
||||
|
|
@ -248,7 +264,8 @@
|
|||
} else if (error.errors && typeof error.errors === 'object') {
|
||||
// Rails-style validation errors
|
||||
errorDetails = Object.entries(error.errors).map(
|
||||
([field, messages]) => `${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
|
||||
([field, messages]) =>
|
||||
`${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
|
||||
)
|
||||
} else {
|
||||
errorDetails = []
|
||||
|
|
@ -268,13 +285,18 @@
|
|||
|
||||
if (activeTab === GridType.Weapon) {
|
||||
// Use selectedSlot for first item if available
|
||||
if (i === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
|
||||
if (
|
||||
i === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!weapons.find((w) => w.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty weapon slot
|
||||
const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1)
|
||||
.filter(i => !weapons.find(w => w.position === i))
|
||||
const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1).filter(
|
||||
(i) => !weapons.find((w) => w.position === i)
|
||||
)
|
||||
if (emptySlots.length === 0) return // Grid full
|
||||
position = emptySlots[0]
|
||||
}
|
||||
|
|
@ -288,7 +310,9 @@
|
|||
)
|
||||
|
||||
// Add to local state
|
||||
weapons = [...weapons, {
|
||||
weapons = [
|
||||
...weapons,
|
||||
{
|
||||
id: response.grid_weapon?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -297,16 +321,21 @@
|
|||
element: item.element
|
||||
},
|
||||
mainhand: position === -1
|
||||
}]
|
||||
}
|
||||
]
|
||||
} else if (activeTab === GridType.Summon) {
|
||||
// Use selectedSlot for first item if available
|
||||
if (i === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
|
||||
if (
|
||||
i === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!summons.find((s) => s.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty summon slot
|
||||
const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
|
||||
.filter(i => !summons.find(s => s.position === i))
|
||||
.filter((i) => !summons.find((s) => s.position === i))
|
||||
if (emptySlots.length === 0) return // Grid full
|
||||
position = emptySlots[0]
|
||||
}
|
||||
|
|
@ -320,7 +349,9 @@
|
|||
)
|
||||
|
||||
// Add to local state
|
||||
summons = [...summons, {
|
||||
summons = [
|
||||
...summons,
|
||||
{
|
||||
id: response.grid_summon?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -330,16 +361,22 @@
|
|||
},
|
||||
main: position === -1,
|
||||
friend: position === 6
|
||||
}]
|
||||
}
|
||||
]
|
||||
} else if (activeTab === GridType.Character) {
|
||||
// Use selectedSlot for first item if available
|
||||
if (i === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
|
||||
if (
|
||||
i === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!characters.find((c) => c.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty character slot
|
||||
const emptySlots = Array.from({ length: 5 }, (_, i) => i)
|
||||
.filter(i => !characters.find(c => c.position === i))
|
||||
const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
|
||||
(i) => !characters.find((c) => c.position === i)
|
||||
)
|
||||
if (emptySlots.length === 0) return // Grid full
|
||||
position = emptySlots[0]
|
||||
}
|
||||
|
|
@ -353,7 +390,9 @@
|
|||
)
|
||||
|
||||
// Add to local state
|
||||
characters = [...characters, {
|
||||
characters = [
|
||||
...characters,
|
||||
{
|
||||
id: response.grid_character?.id || `temp-${Date.now()}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -361,7 +400,8 @@
|
|||
name: item.name,
|
||||
element: item.element
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
|
|
@ -377,17 +417,21 @@
|
|||
if (activeTab === GridType.Weapon) {
|
||||
// Add weapons to empty slots
|
||||
const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1) // -1 for mainhand, 0-8 for grid
|
||||
.filter(i => !weapons.find(w => w.position === i))
|
||||
.filter((i) => !weapons.find((w) => w.position === i))
|
||||
|
||||
items.forEach((item, index) => {
|
||||
let position: number
|
||||
// Use selectedSlot for first item if available
|
||||
if (index === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
|
||||
if (
|
||||
index === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!weapons.find((w) => w.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty slot
|
||||
const availableSlots = emptySlots.filter(s => !weapons.find(w => w.position === s))
|
||||
const availableSlots = emptySlots.filter((s) => !weapons.find((w) => w.position === s))
|
||||
if (availableSlots.length === 0) return
|
||||
position = availableSlots[0]
|
||||
}
|
||||
|
|
@ -409,22 +453,30 @@
|
|||
} else if (activeTab === GridType.Summon) {
|
||||
// Add summons to empty slots
|
||||
const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
|
||||
.filter(i => !summons.find(s => s.position === i))
|
||||
.filter((i) => !summons.find((s) => s.position === i))
|
||||
|
||||
items.forEach((item, index) => {
|
||||
let position: number
|
||||
// Use selectedSlot for first item if available
|
||||
if (index === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
|
||||
if (
|
||||
index === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!summons.find((s) => s.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty slot
|
||||
const availableSlots = emptySlots.filter(s => !summons.find(sum => sum.position === s))
|
||||
const availableSlots = emptySlots.filter(
|
||||
(s) => !summons.find((sum) => sum.position === s)
|
||||
)
|
||||
if (availableSlots.length === 0) return
|
||||
position = availableSlots[0]
|
||||
}
|
||||
|
||||
summons = [...summons, {
|
||||
summons = [
|
||||
...summons,
|
||||
{
|
||||
id: `temp-${Date.now()}-${index}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -434,27 +486,35 @@
|
|||
},
|
||||
main: position === -1,
|
||||
friend: position === 6
|
||||
}]
|
||||
}
|
||||
]
|
||||
})
|
||||
} else if (activeTab === GridType.Character) {
|
||||
// Add characters to empty slots
|
||||
const emptySlots = Array.from({ length: 5 }, (_, i) => i)
|
||||
.filter(i => !characters.find(c => c.position === i))
|
||||
const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
|
||||
(i) => !characters.find((c) => c.position === i)
|
||||
)
|
||||
|
||||
items.forEach((item, index) => {
|
||||
let position: number
|
||||
// Use selectedSlot for first item if available
|
||||
if (index === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
|
||||
if (
|
||||
index === 0 &&
|
||||
selectedSlot !== null &&
|
||||
!characters.find((c) => c.position === selectedSlot)
|
||||
) {
|
||||
position = selectedSlot
|
||||
selectedSlot = null // Reset after using
|
||||
} else {
|
||||
// Find next empty slot
|
||||
const availableSlots = emptySlots.filter(s => !characters.find(c => c.position === s))
|
||||
const availableSlots = emptySlots.filter((s) => !characters.find((c) => c.position === s))
|
||||
if (availableSlots.length === 0) return
|
||||
position = availableSlots[0]
|
||||
}
|
||||
|
||||
characters = [...characters, {
|
||||
characters = [
|
||||
...characters,
|
||||
{
|
||||
id: `temp-${Date.now()}-${index}`,
|
||||
position,
|
||||
object: {
|
||||
|
|
@ -462,7 +522,8 @@
|
|||
name: item.name,
|
||||
element: item.element
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -470,19 +531,19 @@
|
|||
// Remove functions
|
||||
function removeWeapon(itemId: string) {
|
||||
console.log('Removing weapon:', itemId)
|
||||
weapons = weapons.filter(w => w.id !== itemId)
|
||||
weapons = weapons.filter((w) => w.id !== itemId)
|
||||
return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
|
||||
}
|
||||
|
||||
function removeSummon(itemId: string) {
|
||||
console.log('Removing summon:', itemId)
|
||||
summons = summons.filter(s => s.id !== itemId)
|
||||
summons = summons.filter((s) => s.id !== itemId)
|
||||
return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
|
||||
}
|
||||
|
||||
function removeCharacter(itemId: string) {
|
||||
console.log('Removing character:', itemId)
|
||||
characters = characters.filter(c => c.id !== itemId)
|
||||
characters = characters.filter((c) => c.id !== itemId)
|
||||
return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
|
||||
}
|
||||
|
||||
|
|
@ -501,24 +562,36 @@
|
|||
removeWeapon: (partyId: string, itemId: string) => removeWeapon(itemId),
|
||||
removeSummon: (partyId: string, itemId: string) => removeSummon(itemId),
|
||||
removeCharacter: (partyId: string, itemId: string) => removeCharacter(itemId),
|
||||
addWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
addSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
addCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
|
||||
addWeapon: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
addSummon: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
addCharacter: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceWeapon: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceSummon: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
|
||||
replaceCharacter: () =>
|
||||
Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
|
||||
},
|
||||
partyService: { getEditKey: () => null }
|
||||
},
|
||||
openPicker: (opts: { type: 'weapon' | 'summon' | 'character'; position: number; item?: any }) => {
|
||||
openPicker: (opts: {
|
||||
type: 'weapon' | 'summon' | 'character'
|
||||
position: number
|
||||
item?: any
|
||||
}) => {
|
||||
selectedSlot = opts.position
|
||||
openSearchSidebar({
|
||||
type: opts.type,
|
||||
onAddItems: handleAddItems,
|
||||
canAddMore: !isGridFull(
|
||||
opts.type === 'weapon' ? GridType.Weapon :
|
||||
opts.type === 'summon' ? GridType.Summon :
|
||||
GridType.Character
|
||||
opts.type === 'weapon'
|
||||
? GridType.Weapon
|
||||
: opts.type === 'summon'
|
||||
? GridType.Summon
|
||||
: GridType.Character
|
||||
)
|
||||
})
|
||||
}
|
||||
|
|
@ -533,13 +606,20 @@
|
|||
<h1>Create a new team</h1>
|
||||
<p class="description">Search and click items to add them to your grid</p>
|
||||
</div>
|
||||
<button class="toggle-sidebar" on:click={() => openSearchSidebar({
|
||||
type: activeTab === GridType.Weapon ? 'weapon' :
|
||||
activeTab === GridType.Summon ? 'summon' :
|
||||
'character',
|
||||
<button
|
||||
class="toggle-sidebar"
|
||||
on:click={() =>
|
||||
openSearchSidebar({
|
||||
type:
|
||||
activeTab === GridType.Weapon
|
||||
? 'weapon'
|
||||
: activeTab === GridType.Summon
|
||||
? 'summon'
|
||||
: 'character',
|
||||
onAddItems: handleAddItems,
|
||||
canAddMore: !isGridFull(activeTab)
|
||||
})}>
|
||||
})}
|
||||
>
|
||||
Open Search
|
||||
</button>
|
||||
</header>
|
||||
|
|
@ -592,9 +672,7 @@
|
|||
{/if}
|
||||
|
||||
<div class="dialog-actions">
|
||||
<Dialog.Close class="dialog-button">
|
||||
OK
|
||||
</Dialog.Close>
|
||||
<Dialog.Close class="dialog-button">OK</Dialog.Close>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
|
|
@ -622,7 +700,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.party-info h1 {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $desktop: 1920px;
|
|||
$laptop: 1280px;
|
||||
$tablet: 768px;
|
||||
$phone: 375px;
|
||||
$grid-width: 720px;
|
||||
$grid-width: 780px;
|
||||
|
||||
$character-rep-height: 111px;
|
||||
$summon-rep-height: 117px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue