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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,61 +1,75 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import type { GridCharacter } from '$lib/types/api/party'
|
||||
import type { GridCharacter } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
characters?: GridCharacter[]
|
||||
mainWeaponElement?: number | null | undefined
|
||||
partyElement?: number | null | undefined
|
||||
}
|
||||
interface Props {
|
||||
characters?: GridCharacter[]
|
||||
mainWeaponElement?: number | null | undefined
|
||||
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'
|
||||
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} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
|
||||
.characters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: $unit-3x;
|
||||
.characters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: $unit-3x;
|
||||
|
||||
& > li { list-style: none; }
|
||||
}
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,120 +1,133 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import type { GridSummon } from '$lib/types/api/party'
|
||||
import type { GridSummon } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
summons?: GridSummon[]
|
||||
}
|
||||
interface Props {
|
||||
summons?: GridSummon[]
|
||||
}
|
||||
|
||||
let { summons = [] }: Props = $props()
|
||||
let { summons = [] }: Props = $props()
|
||||
|
||||
import SummonUnit from '$lib/components/units/SummonUnit.svelte'
|
||||
import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
|
||||
import SummonUnit from '$lib/components/units/SummonUnit.svelte'
|
||||
import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
|
||||
|
||||
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)))
|
||||
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))
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
<div class="LabeledUnit">
|
||||
<div class="label">Main</div>
|
||||
<SummonUnit item={main} position={-1} />
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="LabeledUnit">
|
||||
<div class="label">Main</div>
|
||||
<SummonUnit item={main} position={-1} />
|
||||
</div>
|
||||
|
||||
<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} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<div class="label">Summons</div>
|
||||
<ul class="summons">
|
||||
{#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>
|
||||
</section>
|
||||
|
||||
<div class="LabeledUnit">
|
||||
<div class="label friend">Friend</div>
|
||||
<SummonUnit item={friend} position={6} />
|
||||
</div>
|
||||
</div>
|
||||
<ExtraSummons summons={summons} offset={4} />
|
||||
<div class="LabeledUnit">
|
||||
<div class="label friend">Friend</div>
|
||||
<SummonUnit item={friend} position={6} />
|
||||
</div>
|
||||
</div>
|
||||
<ExtraSummons {summons} offset={4} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/mixins' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/mixins' as *;
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.17fr 2fr 1.17fr;
|
||||
gap: $unit-3x;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: $grid-width;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.17fr 2fr 1.17fr;
|
||||
gap: $unit-3x;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: $grid-width;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
& .label {
|
||||
color: $grey-55;
|
||||
font-size: $font-tiny;
|
||||
font-weight: $medium;
|
||||
margin-bottom: $unit;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
& .label {
|
||||
color: $grey-55;
|
||||
font-size: $font-tiny;
|
||||
font-weight: $medium;
|
||||
margin-bottom: $unit;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
&.friend {
|
||||
max-width: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
&.friend {
|
||||
max-width: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: $unit-3x;
|
||||
.summons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: $unit-3x;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,124 +1,135 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import type { GridWeapon } from '$lib/types/api/party'
|
||||
import type { GridWeapon } from '$lib/types/api/party'
|
||||
import { getContext } from 'svelte'
|
||||
import type { PartyContext } from '$lib/services/party.service'
|
||||
|
||||
interface Props {
|
||||
weapons?: GridWeapon[]
|
||||
raidExtra?: boolean
|
||||
showGuidebooks?: boolean
|
||||
guidebooks?: Record<string, any>
|
||||
}
|
||||
interface Props {
|
||||
weapons?: GridWeapon[]
|
||||
raidExtra?: boolean
|
||||
showGuidebooks?: boolean
|
||||
guidebooks?: Record<string, any>
|
||||
}
|
||||
|
||||
let {
|
||||
weapons = [],
|
||||
raidExtra = undefined,
|
||||
showGuidebooks = undefined,
|
||||
guidebooks = undefined
|
||||
}: Props = $props()
|
||||
let {
|
||||
weapons = [],
|
||||
raidExtra = undefined,
|
||||
showGuidebooks = undefined,
|
||||
guidebooks = undefined
|
||||
}: Props = $props()
|
||||
|
||||
import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
|
||||
import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
|
||||
import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
|
||||
import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
|
||||
import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
|
||||
import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
|
||||
|
||||
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)))
|
||||
const ctx = getContext<PartyContext>('party')
|
||||
|
||||
let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
<div aria-label="Mainhand Weapon">
|
||||
<WeaponUnit item={mainhand} position={-1} />
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div aria-label="Mainhand Weapon">
|
||||
<WeaponUnit item={mainhand} position={-1} />
|
||||
</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} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{#if raidExtra}
|
||||
<ExtraWeapons weapons={weapons} offset={9} />
|
||||
{/if}
|
||||
{#if showGuidebooks}
|
||||
<Guidebooks {guidebooks} />
|
||||
{/if}
|
||||
<ul class="weapons" aria-label="Weapon Grid">
|
||||
{#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} offset={9} />
|
||||
{/if}
|
||||
{#if showGuidebooks}
|
||||
<Guidebooks {guidebooks} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/mixins' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/mixins' as *;
|
||||
|
||||
.wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
margin: 0 2px;
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: $unit-3x;
|
||||
grid-template-columns: 1.278fr 3fr;
|
||||
justify-items: center;
|
||||
grid-template-areas: 'mainhand grid';
|
||||
max-width: $grid-width;
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: $unit-3x;
|
||||
grid-template-columns: 1.278fr 3fr;
|
||||
justify-items: center;
|
||||
grid-template-areas: 'mainhand grid';
|
||||
max-width: $grid-width;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
.weapons {
|
||||
display: grid; /* make the right-images container a grid */
|
||||
grid-template-columns: repeat(
|
||||
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 */
|
||||
gap: $unit-3x;
|
||||
.weapons {
|
||||
display: grid; /* make the right-images container a grid */
|
||||
grid-template-columns: repeat(
|
||||
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 */
|
||||
gap: $unit-3x;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
gap: $unit-2x;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
@include breakpoint(phone) {
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
}
|
||||
.unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
.name {
|
||||
font-size: $font-small;
|
||||
text-align: center;
|
||||
color: $grey-50;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue