remove fluid-dnd drag and drop
This commit is contained in:
parent
e26b5c2e20
commit
ef30e57eba
5 changed files with 278 additions and 231 deletions
|
|
@ -60,6 +60,7 @@
|
|||
"dependencies": {
|
||||
"@tanstack/svelte-query": "^5.87.1",
|
||||
"bits-ui": "^2.9.6",
|
||||
"fluid-dnd": "^2.6.2",
|
||||
"modern-normalize": "^3.0.1",
|
||||
"zod": "^4.1.5"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ importers:
|
|||
bits-ui:
|
||||
specifier: ^2.9.6
|
||||
version: 2.9.6(@internationalized/date@3.9.0)(svelte@5.38.7)
|
||||
fluid-dnd:
|
||||
specifier: ^2.6.2
|
||||
version: 2.6.2
|
||||
modern-normalize:
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1
|
||||
|
|
@ -1338,6 +1341,9 @@ packages:
|
|||
flatted@3.3.3:
|
||||
resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
|
||||
|
||||
fluid-dnd@2.6.2:
|
||||
resolution: {integrity: sha512-NB11wa6QmKkelLi/PrV95nfXM0oA3lrynQD91VrLbhk2BEfH7PLTUMjqlSkavu+fqPlPVCL8HFhYsfv9GVqd7Q==}
|
||||
|
||||
fsevents@2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
|
|
@ -3332,6 +3338,8 @@ snapshots:
|
|||
|
||||
flatted@3.3.3: {}
|
||||
|
||||
fluid-dnd@2.6.2: {}
|
||||
|
||||
fsevents@2.3.2:
|
||||
optional: true
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
<script lang="ts">
|
||||
import type { GridCharacter } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
characters?: GridCharacter[]
|
||||
|
|
@ -9,22 +11,26 @@
|
|||
partyElement?: number | null | undefined
|
||||
}
|
||||
|
||||
let {
|
||||
characters = [],
|
||||
mainWeaponElement = undefined,
|
||||
partyElement = undefined
|
||||
}: Props = $props()
|
||||
let { characters = [], mainWeaponElement = undefined, partyElement = undefined }: Props = $props()
|
||||
|
||||
import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
|
||||
|
||||
let grid = $derived(Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i)))
|
||||
const ctx = getContext<PartyContext>('party')
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<ul class="characters" aria-label="Character Grid">
|
||||
{#each grid as c, i}
|
||||
<li aria-label={`Character slot ${i}`}>
|
||||
<CharacterUnit item={c} position={i} {mainWeaponElement} {partyElement} />
|
||||
<ul
|
||||
class="characters"
|
||||
aria-label="Character Grid"
|
||||
>
|
||||
{#each Array(5) as _, i}
|
||||
{@const character = characters.find((c) => c.position === i)}
|
||||
<li
|
||||
aria-label={`Character slot ${i}`}
|
||||
class:main-character={i === 0}
|
||||
class:Empty={!character}
|
||||
>
|
||||
<CharacterUnit item={character} position={i} {mainWeaponElement} {partyElement} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -40,7 +46,9 @@
|
|||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: $unit-3x;
|
||||
|
||||
& > li { list-style: none; }
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
|
|
@ -51,7 +59,13 @@
|
|||
gap: $unit;
|
||||
}
|
||||
|
||||
.image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid $grey-75;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
<script lang="ts">
|
||||
import type { GridSummon } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
summons?: GridSummon[]
|
||||
|
|
@ -12,9 +14,10 @@
|
|||
import SummonUnit from '$lib/components/units/SummonUnit.svelte'
|
||||
import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
|
||||
|
||||
const ctx = getContext<PartyContext>('party')
|
||||
|
||||
let main = $derived(summons.find((s) => s.main || s.position === -1))
|
||||
let friend = $derived(summons.find((s) => s.friend || s.position === 6))
|
||||
let grid = $derived(Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i)))
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
|
|
@ -27,9 +30,13 @@
|
|||
<section>
|
||||
<div class="label">Summons</div>
|
||||
<ul class="summons">
|
||||
{#each grid as s, i}
|
||||
<li aria-label={`Summon slot ${i}`}>
|
||||
<SummonUnit item={s} position={i} />
|
||||
{#each Array(4) as _, i}
|
||||
{@const summon = summons.find((s) => s.position === i)}
|
||||
<li
|
||||
aria-label={`Summon slot ${i}`}
|
||||
class:Empty={!summon}
|
||||
>
|
||||
<SummonUnit item={summon} position={i} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -40,7 +47,7 @@
|
|||
<SummonUnit item={friend} position={6} />
|
||||
</div>
|
||||
</div>
|
||||
<ExtraSummons summons={summons} offset={4} />
|
||||
<ExtraSummons {summons} offset={4} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -110,7 +117,13 @@
|
|||
gap: $unit;
|
||||
}
|
||||
|
||||
.image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid $grey-75;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
<script lang="ts">
|
||||
import type { GridWeapon } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
weapons?: GridWeapon[]
|
||||
|
|
@ -21,8 +23,9 @@
|
|||
import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
|
||||
import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
|
||||
|
||||
const ctx = getContext<PartyContext>('party')
|
||||
|
||||
let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
|
||||
let grid = $derived(Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i)))
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
|
|
@ -32,15 +35,20 @@
|
|||
</div>
|
||||
|
||||
<ul class="weapons" aria-label="Weapon Grid">
|
||||
{#each grid as w, i}
|
||||
<li class:Empty={!w} aria-label={`Weapon slot ${i}`}>
|
||||
<WeaponUnit item={w} {i} position={i} />
|
||||
{#each Array(9) as _, i}
|
||||
{@const weapon = weapons.find((w) => w.position === i)}
|
||||
<li
|
||||
aria-label={weapon ? `Weapon ${i}` : `Empty slot ${i}`}
|
||||
data-index={i}
|
||||
class={weapon ? '' : 'Empty'}
|
||||
>
|
||||
<WeaponUnit item={weapon} position={i} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{#if raidExtra}
|
||||
<ExtraWeapons weapons={weapons} offset={9} />
|
||||
<ExtraWeapons {weapons} offset={9} />
|
||||
{/if}
|
||||
{#if showGuidebooks}
|
||||
<Guidebooks {guidebooks} />
|
||||
|
|
@ -85,10 +93,7 @@
|
|||
3,
|
||||
minmax(0, 1fr)
|
||||
); /* create 3 columns, each taking up 1 fraction */
|
||||
grid-template-rows: repeat(
|
||||
3,
|
||||
1fr
|
||||
); /* create 3 rows, each taking up 1 fraction */
|
||||
grid-template-rows: repeat(3, 1fr); /* create 3 rows, each taking up 1 fraction */
|
||||
gap: $unit-3x;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
|
|
@ -114,7 +119,13 @@
|
|||
gap: $unit;
|
||||
}
|
||||
|
||||
.image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; }
|
||||
.image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid $grey-75;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
|
|
|
|||
Loading…
Reference in a new issue