Dragging and dropping images?

isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte

MIT License

1.79k stars 104 forks source link

Dragging and dropping images? #603

Closed MarcinJaracz closed 3 weeks ago

MarcinJaracz commented 4 weeks ago

Hi, I like the idea of your component, but I struggle to make it work with my card game. Here is the example. 2024-09-23 16-17-41_1

I leave here a link to my latest static build. There are a few debug messages in the console if you want. As well as my github link repo.

isaacHagoel commented 4 weeks ago

Have you seen the "scrabble" example in the readme? If it doesn't help can you make a minimal repl reproducing the issue you're facing?

On Tue, Sep 24, 2024, 00:42 Marcin Jaracz @.***> wrote:

Reopened #603 https://github.com/isaacHagoel/svelte-dnd-action/issues/603.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#event-14365547594, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZB5OHWITEIFLSB7WTZYASGFAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJUGM3DKNJUG42TSNA . You are receiving this because you are subscribed to this thread.Message ID: <isaacHagoel/svelte-dnd-action/issue/603/issue_event/14365547594@ github.com>

MarcinJaracz commented 4 weeks ago

Have you seen the "scrabble" example in the readme? If it doesn't help can you make a minimal repl reproducing the issue you're facing?

I had a look, but I haven't found anything helpful. Your tiles still base on letters. Here is what I am passing to dndzone component. This is an example of the first three elements out of 72 cards.

[
    { "id": "yellow_1", "name": "Yellow 1", "points": 1, "position": { "row": 0, "col": 0 }, "flipped": false, "color": "yellow" },
    { "id": "yellow_2", "name": "Yellow 2", "points": 2, "position": { "row": 0, "col": 1 }, "flipped": false, "color": "yellow" },
    { "id": "yellow_3", "name": "Yellow 3", "points": 3, "position": { "row": 0, "col": 2 }, "flipped": false, "color": "yellow" },
]

As you can see there is unique name and id for every item in my .json file.

Here is the section where a define my board:

<div class="board">
    {#each Array(36).fill(0) as _, i}
        <div
            class="box"
            id={i + 1}
            name="cell_{i + 1}"
            use:dndzone={{
                items: cardItems,
                dropTargetStyle: customStyle,
                dragDisabled: true,
            }}
            on:consider={handleDndConsider}
            on:finalize={handleDndFinalize}
        >
            <!-- Render dropped cards on the board -->
            {#each cardItems as card (card.id)}
                <div
                    class="flip-card"
                    style="background-position: {getBackgroundPosition(card)}"
                ></div>
            {/each}
        </div>
    {/each}
</div>

In my case I pass div insted of item.letter. More over I base my card on style with function getBackgroundPosition(card) which gets properties like row and col from json file to find the correct part of an image. It is irrelevant, but I leave it here.

function getBackgroundPosition(card) {
    const x = card.position.col * 100
    const y = card.position.row * 100
    return `-${x}px -${y}px`
}

link to entire file here working example here To me honest I don't know what I do wrong, and it is the worst :-(

isaacHagoel commented 4 weeks ago

Just make a repl for me and I'll try to fix for you. I can't do much with code snippets.

On Tue, Sep 24, 2024, 18:30 Marcin Jaracz @.***> wrote:

Have you seen the "scrabble" example in the readme? If it doesn't help can you make a minimal repl reproducing the issue you're facing?

I had a look, but I haven't found anything helpful. Your tiles still base on letters. Here is what I am passing to dndzone component. This is an example of the first three elements out of 72 cards.

[ { "id": "yellow_1", "name": "Yellow 1", "points": 1, "position": { "row": 0, "col": 0 }, "flipped": false, "color": "yellow" }, { "id": "yellow_2", "name": "Yellow 2", "points": 2, "position": { "row": 0, "col": 1 }, "flipped": false, "color": "yellow" }, { "id": "yellow_3", "name": "Yellow 3", "points": 3, "position": { "row": 0, "col": 2 }, "flipped": false, "color": "yellow" }, ]

As you can see there is unique name and id for every item in my .json file.

Here is the section where a define my board:
{#each Array(36).fill(0) as _, i}
{#each cardItems as card (card.id)}
      {/each}
  </div>
{/each}
In my case I pass div insted of item.letter. More over I base my card on style with function getBackgroundPosition(card) which gets properties like row and col from json file to find the correct part of an image. It is irrelevant, but I leave it here.

function getBackgroundPosition(card) { const x = card.position.col 100 const y = card.position.row 100 return -${x}px -${y}px}

link to entire file here https://github.com/MarcinJaracz/Punto-online/blob/master/src/routes/board/%2Bpage.svelte working example here https://punto-online-fm5xw.kinsta.page/board To me honest I don't know what I do wrong, and it is the worst :-(

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370613831, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ2Z6HOW3VICU7JXYLZYEPKXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGYYTGOBTGE . You are receiving this because you commented.Message ID: @.***>

MarcinJaracz commented 4 weeks ago

@isaacHagoel What do You mean by that? I left a link to a particular file previously.

Just make a repl for me and I'll try to fix for you. I can't do much with code snippets. …

isaacHagoel commented 4 weeks ago

I need a small working example I can run and play with

On Tue, Sep 24, 2024, 19:21 Marcin Jaracz @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel What do You mean by that? I left a link to a particular file previously.

Just make a repl for me and I'll try to fix for you. I can't do much with code snippets. … <#m8427917325330411360> On Tue, Sep 24, 2024, 18:30 Marcin Jaracz @.> wrote: Have you seen the "scrabble" example in the readme? If it doesn't help can you make a minimal repl reproducing the issue you're facing? I had a look, but I haven't found anything helpful. Your tiles still base on letters. Here is what I am passing to dndzone component. This is an example of the first three elements out of 72 cards. [ { "id": "yellow_1", "name": "Yellow 1", "points": 1, "position": { "row": 0, "col": 0 }, "flipped": false, "color": "yellow" }, { "id": "yellow_2", "name": "Yellow 2", "points": 2, "position": { "row": 0, "col": 1 }, "flipped": false, "color": "yellow" }, { "id": "yellow_3", "name": "Yellow 3", "points": 3, "position": { "row": 0, "col": 2 }, "flipped": false, "color": "yellow" }, ] As you can see there is unique name and id for every item in my .json file. Here is the section where a define my board:

{#each Array(36).fill(0) as , i} <div class="box" id={i + 1} name="cell{i + 1}" use:dndzone={{ items: cardItems, dropTargetStyle: customStyle, dragDisabled: true, }} on:consider={handleDndConsider} on:finalize={handleDndFinalize} > {#each cardItems as card (card.id http://card.id)} {/each} *

{/each} In my case I pass div insted of item.letter. More over I base my card on style with function getBackgroundPosition(card) which gets properties like row and col from json file to find the correct part of an image. It is irrelevant, but I leave it here. function getBackgroundPosition(card) { const x = card.position.col 100 const y = card.position.row 100 return -${x}px -${y}px} link to entire file here https://github.com/MarcinJaracz/Punto-online/blob/master/src/routes/board/%2Bpage.svelte https://github.com/MarcinJaracz/Punto-online/blob/master/src/routes/board/%2Bpage.svelte working example here https://punto-online-fm5xw.kinsta.page/board https://punto-online-fm5xw.kinsta.page/board To me honest I don't know what I do wrong, and it is the worst :-( — Reply to this email directly, view it on GitHub <#603 (comment) https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370613831>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ2Z6HOW3VICU7JXYLZYEPKXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGYYTGOBTGE https://github.com/notifications/unsubscribe-auth/AE4OZCZ2Z6HOW3VICU7JXYLZYEPKXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGYYTGOBTGE . You are receiving this because you commented.Message ID: @.*>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370736726, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7M7L3NLR3OB5GZI73ZYEVJ5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQG4ZTMNZSGY . You are receiving this because you were mentioned.Message ID: @.***>

isaacHagoel commented 4 weeks ago

While changing the code

On Tue, Sep 24, 2024, 19:23 Isaac Hagoel @.***> wrote:

I need a small working example I can run and play with

On Tue, Sep 24, 2024, 19:21 Marcin Jaracz @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel What do You mean by that? I left a link to a particular file previously.

Just make a repl for me and I'll try to fix for you. I can't do much with code snippets. … <#m_-468892681040621109_m8427917325330411360> On Tue, Sep 24, 2024, 18:30 Marcin Jaracz @.> wrote: Have you seen the "scrabble" example in the readme? If it doesn't help can you make a minimal repl reproducing the issue you're facing? I had a look, but I haven't found anything helpful. Your tiles still base on letters. Here is what I am passing to dndzone component. This is an example of the first three elements out of 72 cards. [ { "id": "yellow_1", "name": "Yellow 1", "points": 1, "position": { "row": 0, "col": 0 }, "flipped": false, "color": "yellow" }, { "id": "yellow_2", "name": "Yellow 2", "points": 2, "position": { "row": 0, "col": 1 }, "flipped": false, "color": "yellow" }, { "id": "yellow_3", "name": "Yellow 3", "points": 3, "position": { "row": 0, "col": 2 }, "flipped": false, "color": "yellow" }, ] As you can see there is unique name and id for every item in my .json file. Here is the section where a define my board:

{#each Array(36).fill(0) as , i} <div class="box" id={i + 1} name="cell{i + 1}" use:dndzone={{ items: cardItems, dropTargetStyle: customStyle, dragDisabled: true, }} on:consider={handleDndConsider} on:finalize={handleDndFinalize} > {#each cardItems as card (card.id http://card.id)} {/each} *

{/each} In my case I pass div insted of item.letter. More over I base my card on style with function getBackgroundPosition(card) which gets properties like row and col from json file to find the correct part of an image. It is irrelevant, but I leave it here. function getBackgroundPosition(card) { const x = card.position.col 100 const y = card.position.row 100 return -${x}px -${y}px} link to entire file here https://github.com/MarcinJaracz/Punto-online/blob/master/src/routes/board/%2Bpage.svelte https://github.com/MarcinJaracz/Punto-online/blob/master/src/routes/board/%2Bpage.svelte working example here https://punto-online-fm5xw.kinsta.page/board https://punto-online-fm5xw.kinsta.page/board To me honest I don't know what I do wrong, and it is the worst :-( — Reply to this email directly, view it on GitHub <#603 (comment) https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370613831>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZ2Z6HOW3VICU7JXYLZYEPKXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGYYTGOBTGE https://github.com/notifications/unsubscribe-auth/AE4OZCZ2Z6HOW3VICU7JXYLZYEPKXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQGYYTGOBTGE . You are receiving this because you commented.Message ID: @.*>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370736726, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7M7L3NLR3OB5GZI73ZYEVJ5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQG4ZTMNZSGY . You are receiving this because you were mentioned.Message ID: @.***>

MarcinJaracz commented 4 weeks ago

Would you clone my repo, or is it too much? It based on SvelteKit framework, so cloning it would be the easiest way. …

isaacHagoel commented 4 weeks ago

i can but not sure if i will have time before the weekend. working with the whole repo is more complicated.

On Tue, Sep 24, 2024 at 7:30 PM Marcin Jaracz @.***> wrote:

Would you clone my repo, or is it too much? It based on SvelteKit framework, so cloning it would be the easiest way. … <#m1451064372960991387>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370760963, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC37GMUVNDCF7LQPP2TZYEWM5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQG43DAOJWGM . You are receiving this because you were mentioned.Message ID: @.***>

MarcinJaracz commented 4 weeks ago

Everything is interactive enough to work with it, even for a Pearson who never touch Svelte. I've tried to stitch it up to HTML, but it was too much work and I didn't have much time to make it work. Message me if you have any questions/problems with my project.

Appreciate your time. <3

wt., 24 wrz 2024 o 11:48 Isaac Hagoel @.***> napisał(a):

i can but not sure if i will have time before the weekend. working with the whole repo is more complicated.

On Tue, Sep 24, 2024 at 7:30 PM Marcin Jaracz @.***> wrote:

Would you clone my repo, or is it too much? It based on SvelteKit framework, so cloning it would be the easiest way. … <#m1451064372960991387>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370760963>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC37GMUVNDCF7LQPP2TZYEWM5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQG43DAOJWGM>

. You are receiving this because you were mentioned.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2370799945, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGJSTDCQUTJDIN52AETZYEYN5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZQG44TSOJUGU . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 3 weeks ago

I played with it for a few minutes. The consider functions were updating the wrong data. I fixed it (quick an dirty) but now the board doesn't render the cards even though it has them (as you can see in the console). maybe give it a quick look.

<script>
    import Return from "$components/return.svelte"
    import { noPlayers, setGameExistState } from "$lib/store"
    import { playClickSound } from "$lib/click"
    import { dndzone } from "svelte-dnd-action"
    import { flip } from "svelte/animate"
    import { onMount, onDestroy } from "svelte"

    const flipDurationMs = 300
    let customStyle = { border: "1px solid #1f1f1f23;" }
    let cardItems = []
    let cards = []
    let controller
    let playerCards = {
        player1: [],
        player2: [],
        player3: [],
        player4: [],
    }

    onMount(() => {
        loadCards()
    })

    onDestroy(() => {
        if (controller) {
            controller.abort()
        }
    })

    async function loadCards() {
        controller = new AbortController()
        const signal = controller.signal
        try {
            const response = await fetch("/cards.json", { signal })
            if (response.ok) {
                let allCards = await response.json()
                cards = allCards
                splitCardsByColor(cards)
                shuffleCardsForPlayers()
            } else {
                console.error("Failed to load cards:", response.statusText)
            }
        } catch (error) {
            if (error.name === "AbortError") {
                console.log("Fetch aborted")
            } else {
                console.error("Error loading cards:", error)
            }
        }
    }

    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1))
            ;[array[i], array[j]] = [array[j], array[i]]
        }
    }

    function shuffleCardsForPlayers() {
        for (let player in playerCards) {
            shuffle(playerCards[player])
        }
    }

    function handleDndPlayerConsider(path, e) {
        console.log("DND Consider event:", {path, items: e.detail.items, cardItems});
        cards[path] = e.detail.items
    }
    function handleDndBoardConsider(e) {
        cardItems = e.detail.items;
    }
    function handleDndConsider(e) {
        // Nothing
    } 
    function handleDndFinalize(e) {
        const { items: updatedItems, from, to, item } = e.detail
        if (!item) {
            console.error("Item is undefined:", item)
            return
        }
        if (!item.id) {
            console.error("undefined id:", item)
            return
        }
        if (to.id === "board") {
            cardItems = updatedItems
        } else {
            playerCards[to.id] = updatedItems
        }
        if (from.id !== to.id) {
            playerCards[from.id] = playerCards[from.id].filter((c) => c.name !== item.name)
        }
    }

    function splitCardsByColor(cards) {
        playerCards.player3 = cards.filter((card) => card.color === "yellow")
        playerCards.player2 = cards.filter((card) => card.color === "green")
        playerCards.player1 = cards.filter((card) => card.color === "blue")
        playerCards.player4 = cards.filter((card) => card.color === "red")
    }

    function getBackgroundPosition(card) {
        const x = card.position.col * 100
        const y = card.position.row * 100
        return `-${x}px -${y}px`
    }
</script>

<svelte:head>
    <title>Board</title>
</svelte:head>

<body>
    <div class="container-fluid">
        <div
            class="d-flex justify-content-evenly"
            style="overflow-x: hidden;"
        >
            <!-- Column 1  player 1 & 2-->
            <div
                class="col-1 d-flex flex-column justify-content-evenly"
                style="flex-shrink: 0; min-width: 100px;"
            >
                <div class="row">
                    <div class="player-container">
                        <div class="d-grid align-items-center justify-content-evenly">
                            <div
                                class="d-block p-2 bg-primary rounded text-white fs-4 text-center mb-2 shadow"
                                style="cursor: default;"
                            >
                                Player 1
                            </div>
                            <div
                                class="box"
                                id="player1"
                                use:dndzone={{
                                    items: playerCards.player1,
                                    dragDisabled: false,
                                    dropTargetStyle: customStyle,
                                }}
                                on:consider={e => handleDndPlayerConsider("player1" ,e)}
                                on:finalize={e => handleDndPlayerConsider("player1" ,e)}
                            >
                                <!-- Render cards for player 1 -->
                                {#each playerCards.player1 as card, i (card.id)}
                                    <div
                                        class="flip-card"
                                        on:click={() => (card.flipped = !card.flipped)}
                                        animate:flip={{ duration: flipDurationMs }}
                                        style="z-index: {playerCards.player1.length - i};"
                                    >
                                        <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                            <div
                                                class="flip-card-front"
                                                style="background-position: {getBackgroundPosition(card)}"
                                            ></div>
                                            <div class="flip-card-back"></div>
                                        </div>
                                    </div>
                                {/each}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="player-container">
                        <div class="d-grid align-items-center justify-content-evenly">
                            <div
                                class="d-block p-2 bg-success rounded text-white fs-4 text-center mb-2 shadow"
                                style="cursor: default;"
                            >
                                Player 2
                            </div>
                            <div
                                class="box"
                                id="player2"
                                use:dndzone={{
                                    items: playerCards.player2,
                                    dragDisabled: false,
                                    dropTargetStyle: customStyle,
                                }}
                                on:consider={e => handleDndPlayerConsider("player2", e)}
                                on:finalize={e => handleDndPlayerConsider("player2", e)}
                            >
                                <!-- Render cards for player 2 -->
                                {#each playerCards.player2 as card, i (card.id)}
                                    <div
                                        class="flip-card"
                                        draggable="true"
                                        on:click={() => (card.flipped = !card.flipped)}
                                        animate:flip={{ duration: flipDurationMs }}
                                        style="z-index: {playerCards.player1.length - i}; "
                                    >
                                        <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                            <div
                                                class="flip-card-front"
                                                style="background-position: {getBackgroundPosition(card)}"
                                            ></div>
                                            <div class="flip-card-back"></div>
                                        </div>
                                    </div>
                                {/each}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Board & buttons under-->
            <div
                class="col-7 mt-2 d-flex flex-column"
                style="flex-shrink: 0; min-width: 700px;"
            >
                <div class="board">
                    {#each Array(36).fill(0) as _, i}
                        <div
                            class="box"
                            id={i + 1}
                            name="cell_{i + 1}"
                            use:dndzone={{
                                items: cardItems,
                                dropTargetStyle: customStyle,
                                dragDisabled: true,
                            }}
                            on:consider={handleDndBoardConsider}
                            on:finalize={handleDndBoardConsider}
                        >
                            <!-- Render dropped cards on the board -->
                            {#each cardItems as card (card.id)}
                                <div
                                    class="flip-card"
                                    style="background-position: {getBackgroundPosition(card)}"
                                ></div>
                            {/each}
                        </div>
                    {/each}
                </div>

                <!-- buttons -->
                <div class="d-flex justify-content-evenly align-items-center pt-4">
                    <div class="d-inline-block align-self-center">
                        <Return />
                    </div>
                    <h3>
                        <a
                            href="/"
                            data-bs-toggle="tooltip"
                            data-placement="right"
                            title="Go back to main page"
                            style="--hover-color: #dc3545;"
                            on:click={() => setGameExistState(false)}
                            on:mousedown={playClickSound}
                        >
                            <i class="fa-sharp fa-light fa-circle-arrow-left" /> finish this game and exit
                        </a>
                    </h3>
                </div>
            </div>
            <!-- Column 2  player 3 & 4-->
            <div
                class="col-1 d-flex flex-column justify-content-evenly"
                style="flex-shrink: 0; min-width: 100px;"
            >
                <!-- Player 3, displayed if numberOfPlayers > 2 -->
                {#if $noPlayers > 2}
                    <div class="row">
                        <div class="player-container">
                            <div class="d-grid align-items-center justify-content-evenly">
                                <div
                                    class="d-block p-2 bg-warning rounded text-white fs-4 text-center mb-2 shadow"
                                    style="cursor: default;"
                                >
                                    Player 3
                                </div>
                                <div
                                    class="box"
                                    id="player3"
                                    use:dndzone={{
                                        items: playerCards.player3,
                                        dragDisabled: false,
                                        dropTargetStyle: customStyle,
                                    }}
                                    on:consider={handleDndConsider}
                                    on:finalize={handleDndFinalize}
                                >
                                    <!-- Render cards for player 3 -->
                                    {#each playerCards.player3 as card, i (card.id)}
                                        <div
                                            class="flip-card"
                                            draggable="true"
                                            on:click={() => (card.flipped = !card.flipped)}
                                            animate:flip={{ duration: flipDurationMs }}
                                            style="z-index: {playerCards.player1.length - i}; "
                                        >
                                            <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                                <div
                                                    class="flip-card-front"
                                                    style="background-position: {getBackgroundPosition(card)}"
                                                ></div>
                                                <div class="flip-card-back"></div>
                                            </div>
                                        </div>
                                    {/each}
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}

                <!-- Player 4, displayed if numberOfPlayers > 3 -->
                {#if $noPlayers > 3}
                    <div class="row">
                        <div class="player-container">
                            <div class="d-grid align-items-center justify-content-evenly">
                                <div
                                    class="d-block p-2 bg-danger rounded text-white fs-4 text-center mb-2 shadow"
                                    style="cursor: default;"
                                >
                                    Player 4
                                </div>
                                <div
                                    class="box"
                                    id="player4"
                                    use:dndzone={{
                                        items: playerCards.player4,
                                        dragDisabled: false,
                                        dropTargetStyle: customStyle,
                                    }}
                                    on:consider={handleDndConsider}
                                    on:finalize={handleDndFinalize}
                                >
                                    <!-- Render cards for player 1 -->
                                    {#each playerCards.player4 as card, i (card.id)}
                                        <div
                                            class="flip-card"
                                            draggable="true"
                                            on:click={() => (card.flipped = !card.flipped)}
                                            animate:flip={{ duration: flipDurationMs }}
                                            style="z-index: {playerCards.player1.length - i}; "
                                        >
                                            <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                                <div
                                                    class="flip-card-front"
                                                    style="background-position: {getBackgroundPosition(card)}"
                                                ></div>
                                                <div class="flip-card-back"></div>
                                            </div>
                                        </div>
                                    {/each}
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}
            </div>
        </div>
    </div>
</body>

<style>
    .flip-card {
        position: absolute;
        width: 100px;
        height: 100px;
        perspective: 1000px;
        cursor: grab;
    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    .flipped {
        transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100px;
        height: 100px;
        backface-visibility: hidden;
        border-radius: 10px;
    }

    .flip-card-front {
        background-image: url("/all-cards.webp");
        background-size: 900px 400px;
    }

    .flip-card-back {
        background-image: url("/Punto-Icon.webp");
        background-size: cover;
        transform: rotateY(180deg);
    }

    .board {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff96;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    }
    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        border: 1px solid #1f1f1f23;
        background-color: #4f4f4f5d;
        border-radius: 10px;
        font-size: 10px;
        font-weight: bold;
        cursor: default;
        box-shadow:
            0 4px 8px 0 #0000001a,
            0 6px 20px 0 #0000001a;
    }
    .box:hover {
        background-color: #4f4f4f9a;
    }
    .player-container {
        padding: 25px;
        background-color: #ffffff96;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h3 {
        margin-bottom: 0;
    }
</style>

MarcinJaracz commented 3 weeks ago

It's a mystery for me. I can see that in every box on the board the cards data I dragged exists, but I have no idea why they don't want to render. ;(

isaacHagoel commented 3 weeks ago

as far as i can tell the cards on the board just render an empty div. If you do this for example:

<!-- Render dropped cards on the board -->
{#each cardItems as card (card.id)}
<div
class="flip-card"
style="background-position: {getBackgroundPosition(card)}"
>{card.id}</div>
{/each}

it renders the id of the dropped card in the cell. you just need to make it render the card.

On Thu, Sep 26, 2024 at 5:19 PM Marcin Jaracz @.***> wrote:

It's a mystery for me. I can see that in every box on the board the cards data I dragged exists, but I have no idea why they don't want to render. ;(

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2376125812, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYGJMOKXHYO2CAZV6LZYOYQLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZWGEZDKOBRGI . You are receiving this because you were mentioned.Message ID: @.***>

MarcinJaracz commented 3 weeks ago

Yep, that's exactly what I found in the console. But somehow it's puzzling for me. I'm such a rookie in JavaScript and HTML that I don't know what I'm doing.

isaacHagoel commented 3 weeks ago

changing the class on the div in the board to 'flip-card-front' seems to do the trick

<!-- Render dropped cards on the board -->
    {#each cardItems as card (card.id)}
            <div
                class="flip-card-front"
                style="background-position: {getBackgroundPosition(card)}"
            ></div>
    {/each}

the app you wrote doesn't seem rookie level :)

MarcinJaracz commented 3 weeks ago

I wonder why such simple things always keep me from solving my problems.

isaacHagoel commented 3 weeks ago

That's the reality of being a programmer: One day you feel like a genius, the next day you feel like a fool.

On Fri, Sep 27, 2024 at 10:17 PM Marcin Jaracz @.***> wrote:

I wonder why such simple things always keep me from solving my problems.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2379140317, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC3MY6ZMYD67ZKFBBP3ZYVEGLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZZGE2DAMZRG4 . You are receiving this because you were mentioned.Message ID: @.***>

isaacHagoel commented 3 weeks ago

closing this issue. pls re-open if you need anything else

MarcinJaracz commented 3 weeks ago

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01 14-40-00_1

isaacHagoel commented 3 weeks ago

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 2 weeks ago

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) < https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 2 weeks ago

is it the same repo you shared with me? for me it runs smoothly

On Wed, Oct 2, 2024 at 5:16 PM Marcin Jaracz @.***> wrote:

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) <

https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387783534, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYNDTVRBOII776ZGLDZZOMUXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXG44DGNJTGQ . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 2 weeks ago

Yep, the same.

śr., 2 paź 2024, 09:38 użytkownik Isaac Hagoel @.***> napisał:

is it the same repo you shared with me? for me it runs smoothly

On Wed, Oct 2, 2024 at 5:16 PM Marcin Jaracz @.***> wrote:

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) <

https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387783534>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZCYNDTVRBOII776ZGLDZZOMUXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXG44DGNJTGQ>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387818846, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGPL4FESKAJTG6RVJV3ZZOPI7AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHAYTQOBUGY . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 2 weeks ago

Not sure what to tell you. Can you try to use the browser's dev tools to check what's consuming cpu?

On Wed, Oct 2, 2024 at 6:28 PM Marcin Jaracz @.***> wrote:

Yep, the same.

śr., 2 paź 2024, 09:38 użytkownik Isaac Hagoel @.***> napisał:

is it the same repo you shared with me? for me it runs smoothly

On Wed, Oct 2, 2024 at 5:16 PM Marcin Jaracz @.***> wrote:

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) <

https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387783534>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZCYNDTVRBOII776ZGLDZZOMUXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXG44DGNJTGQ>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387818846>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ALQGSGPL4FESKAJTG6RVJV3ZZOPI7AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHAYTQOBUGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387909306, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC3IX6JTK3MBPXSXHT3ZZOVDRAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHEYDSMZQGY . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 2 weeks ago

Trace-20241002T130455.json https://drive.google.com/file/d/1Spw6CWD67HDiSCSck2oLU5hul9Gaifj6/view?usp=drive_web I've downloaded the profile from dev tool just so You can upload and see it Yourself. There are many references to svelte-dnd-action as a bottleneck performance.[image: image.png]

śr., 2 paź 2024 o 12:47 Isaac Hagoel @.***> napisał(a):

Not sure what to tell you. Can you try to use the browser's dev tools to check what's consuming cpu?

On Wed, Oct 2, 2024 at 6:28 PM Marcin Jaracz @.***> wrote:

Yep, the same.

śr., 2 paź 2024, 09:38 użytkownik Isaac Hagoel @.***> napisał:

is it the same repo you shared with me? for me it runs smoothly

On Wed, Oct 2, 2024 at 5:16 PM Marcin Jaracz @.***> wrote:

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) <

https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387783534>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZCYNDTVRBOII776ZGLDZZOMUXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXG44DGNJTGQ>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387818846>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGPL4FESKAJTG6RVJV3ZZOPI7AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHAYTQOBUGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387909306>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC3IX6JTK3MBPXSXHT3ZZOVDRAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHEYDSMZQGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2388343048, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGL2JAWC4RH56VAAFM3ZZPFLHAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBYGM2DGMBUHA . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 2 weeks ago

No access to the file

On Wed, Oct 2, 2024 at 9:11 PM Marcin Jaracz @.***> wrote:

Trace-20241002T130455.json < https://drive.google.com/file/d/1Spw6CWD67HDiSCSck2oLU5hul9Gaifj6/view?usp=drive_web>

I've downloaded the profile from dev tool just so You can upload and see it Yourself. There are many references to svelte-dnd-action as a bottleneck performance.[image: image.png]

śr., 2 paź 2024 o 12:47 Isaac Hagoel @.***> napisał(a):

Not sure what to tell you. Can you try to use the browser's dev tools to check what's consuming cpu?

On Wed, Oct 2, 2024 at 6:28 PM Marcin Jaracz @.***> wrote:

Yep, the same.

śr., 2 paź 2024, 09:38 użytkownik Isaac Hagoel @.***> napisał:

is it the same repo you shared with me? for me it runs smoothly

On Wed, Oct 2, 2024 at 5:16 PM Marcin Jaracz @.***> wrote:

I don't think that machine has anything to do with the rendering. I've pretty strong laptop(Lenovo Legion) but I can tell the same thing happens on my stable build here https://punto-online-fm5xw.kinsta.page/board

wt., 1 paź 2024 o 23:44 Isaac Hagoel @.***> napisał(a):

Regarding the rendering - the lib is updating the position of the element and the browser re-draws it. it is supposed to be a cheap operation (because it doesn't trigger any reflows) and works smoothly for me. Is it always janky for you? what is your machine specs and which browser are you using?

Regarding consider and finalize, the difference is only in the timing in which they are fired. these are two separate events because in some cases they need to be handled differently, for example if you need to save the data back to the database (you dont want to do it in the consider handler). for simple cases they could be the same. in your app i just did a quick fix to make it work and get you unblocked, change it as you see fit.

On Tue, Oct 1, 2024 at 11:06 PM Marcin Jaracz @.***> wrote:

So I have a few questions about on:consider and on:finalize events in my project. Why there is no difference in these two functions, and why is it so chunky/choppy animated? Does consider function lag my PC too much to animate it smoothly while hovering the card over the board? 2024-10-01.14-40-00_1.gif (view on web) <

https://github.com/user-attachments/assets/24ceddbd-3c50-4915-a4c7-872bc28c3305>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2385745911>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC4C5YZ3NLVAQOSLNUTZZKM33AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVG42DKOJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387130021>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGJWSYRP42ES3N7R2XTZZMJSLAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXGEZTAMBSGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387783534>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZCYNDTVRBOII776ZGLDZZOMUXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXG44DGNJTGQ>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387818846>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGPL4FESKAJTG6RVJV3ZZOPI7AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHAYTQOBUGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2387909306>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC3IX6JTK3MBPXSXHT3ZZOVDRAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBXHEYDSMZQGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2388343048>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ALQGSGL2JAWC4RH56VAAFM3ZZPFLHAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBYGM2DGMBUHA>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2388383961, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7EPRAFYSOXW6UJVMLZZPIGDAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBYGM4DGOJWGE . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 2 weeks ago

I ran the profiler locally. One thing that will help - pass the option morphDisabled: true to all your dropzones. Let me know if it solved the issue for you.

MarcinJaracz commented 2 weeks ago

Wow, it did the trick. Thank you. One last thing. Do you think why cards disappear if you place 2 cards into the same box and don't return to the stack?

śr., 2 paź 2024 o 13:54 Isaac Hagoel @.***> napisał(a):

I ran the profiler locally. One thing that will help - pass the option morphDisabled: true to all your dropzones. Let me know if it solved the issue for you.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2388455722, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGPBRJOSBYTELIERGS3ZZPGFZAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBYGQ2TKNZSGI . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 2 weeks ago

there are two problems.

The way that the board data is set up is incorrect. all the cells share the same flat cardItems data structure.
When a cell is "full" its dndzone should have dropFromOthersDisabled: true.

I can help you fix it, hopefully i will have time today

MarcinJaracz commented 2 weeks ago

In your free time You can check my latest WIP commit where I tried to assign for each cell a single variable from object. You are truly a guardian angel. <3

isaacHagoel commented 2 weeks ago

I haven't forgotten just super busy lately, I believe I will get to this this week.

On Sat, Oct 5, 2024 at 9:59 PM Marcin Jaracz @.***> wrote:

In your free time You can check my latest WIP commit where I tried to assign for each cell a single variable from object. You are truly a guardian angel. <3

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2395032381, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC2G2OSA7ZQ6F2WEPQDZZ7IBNAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJVGAZTEMZYGE . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 2 weeks ago

Sure thing. I'll wait.

wt., 8 paź 2024, 12:18 użytkownik Isaac Hagoel @.***> napisał:

I haven't forgotten just super busy lately, I believe I will get to this this week.

On Sat, Oct 5, 2024 at 9:59 PM Marcin Jaracz @.***> wrote:

In your free time You can check my latest WIP commit where I tried to assign for each cell a single variable from object. You are truly a guardian angel. <3

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2395032381>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC2G2OSA7ZQ6F2WEPQDZZ7IBNAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJVGAZTEMZYGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2399447299, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGPHLLVXCIH6LCZCVH3Z2OWOPAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJZGQ2DOMRZHE . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 1 week ago

I pulled and ran npm run dev and the cards don't render on the board. Are you aware?

MarcinJaracz commented 1 week ago

Yep, that's the part of a progress I made while connecting board.json to the board div in your component.

śr., 9 paź 2024, 12:04 użytkownik Isaac Hagoel @.***> napisał:

I pulled and ran npm run dev and the cards don't render on the board. Are you aware?

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2401887125, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGN3I7MIK3BDOQMTCRTZ2T5SXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBRHA4DOMJSGU . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 1 week ago

I had an almost working version before these changes but it looks like a lot has changed. I will need to allocate a longer time slot than what I anticipated, hopefully later this week.

MarcinJaracz commented 1 week ago

Don't worry. I can't wait for your suggestions.

śr., 9 paź 2024 o 12:16 Isaac Hagoel @.***> napisał(a):

I had an almost working version before these changes but it looks like a lot has changed. I will need to allocate a longer time slot than what I anticipated, hopefully later this week.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2401911646, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGONMJCBDURWTRJCMQLZ2T66XAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBRHEYTCNRUGY . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

Somehow e.detail.items in consider function difference from finalize one. In consider function, I got full properties of an event correctly, but undefined in finalize.\

isaacHagoel commented 1 week ago

Try this (I didn't make many changes):

<script>
    import Return from "$components/return.svelte"
    import { noPlayers, setGameExistState } from "$lib/store"
    import { playClickSound } from "$lib/click"
    import { dndzone } from "svelte-dnd-action"
    import { flip } from "svelte/animate"
    import { onMount, onDestroy } from "svelte"

    const flipDurationMs = 500
    let cards = []
    let board = []
    let controller
    let playerCards = {
        player1: [],
        player2: [],
        player3: [],
        player4: [],
    }

    onMount(() => {
        loadCards()
        loadBoard()
    })

    onDestroy(() => {
        if (controller) {
            controller.abort()
        }
    })

    async function loadCards() {
        controller = new AbortController()
        const signal = controller.signal
        try {
            const response = await fetch("/cards.json", { signal })
            if (response.ok) {
                let allCards = await response.json()
                cards = allCards
                splitCardsByColor(cards)
                shuffleCardsForPlayers()
            } else {
                console.error("Failed to load cards:", response.statusText)
            }
        } catch (error) {
            if (error.name === "AbortError") {
                console.log("Fetch aborted")
            } else {
                console.error("Error loading cards:", error)
            }
        }
    }

    async function loadBoard() {
        try {
            const response = await fetch("/board.json")
            if (!response.ok) {
                throw new Error(`Failed to load board: ${response.statusText}`)
            }
            const data = await response.json()
            if (Array.isArray(data)) {
                board = [...data]
                console.log(">>> Board loaded properly.")
            } else {
                console.error("Unexpected board format:", data)
            }
        } catch (error) {
            console.error("Error loading board:", error)
        }
    }

    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1))
            ;[array[i], array[j]] = [array[j], array[i]]
        }
    }

    function shuffleCardsForPlayers() {
        for (let player in playerCards) {
            shuffle(playerCards[player])
        }
    }

    function handleDndPlayer(path, e) {
        console.log('player', {event: e.detail});
        playerCards[path] = e.detail.items
    }
    $: console.warn({playerCards});

    const isCellFull = new Map();
    function handleDndBoardConsider(index, e) {
        board[index].card = e.detail.items;
        board = [...board];
    }
    function handleDndBoardFinalize(index, e) {
        board[index].card = e.detail.items;
        board = [...board];
        isCellFull.set(index, true);
    }

    function splitCardsByColor(cards) {
        playerCards.player3 = cards.filter((card) => card.color === "yellow")
        playerCards.player2 = cards.filter((card) => card.color === "green")
        playerCards.player1 = cards.filter((card) => card.color === "blue")
        playerCards.player4 = cards.filter((card) => card.color === "red")
    }

    function getBackgroundPosition(card) {
        const x = card.position.col * 100
        const y = card.position.row * 100
        return `-${x}px -${y}px`
    }

</script>

<svelte:head>
    <title>Board</title>
</svelte:head>

<body>
    <div class="container-fluid">
        <!-- buttons -->
        <div
            class="d-flex"
            style="position:absolute;"
        >
            <div class="d-inline-block">
                <Return />
            </div>
            <h3>
                <a
                    href="/"
                    data-bs-toggle="tooltip"
                    data-placement="right"
                    title="Go back to main page"
                    style="--hover-color: #dc3545; margin-top:6px"
                    on:click={() => setGameExistState(false)}
                    on:mousedown={playClickSound}
                >
                    <i class="fa-light fa-circle-xmark" /> end game
                </a>
            </h3>
        </div>
        <!-- main body -->
        <div
            class="d-flex justify-content-evenly"
            style="overflow-x: hidden;"
        >
            <!-- Column 1  player 1 & 2-->
            <div
                class="col-1 d-flex flex-column justify-content-evenly"
                style="flex-shrink: 0; min-width: 100px;"
            >
                <div class="row">
                    <div class="player-container">
                        <div class="d-grid align-items-center justify-content-evenly">
                            <div
                                class="d-block p-2 bg-primary rounded text-white fs-4 text-center mb-2 shadow"
                                style="cursor: default;"
                            >
                                Player 1
                            </div>
                            <div
                                class="box"
                                id="player1"
                                use:dndzone={{
                                    items: playerCards.player1,
                                    dragDisabled: false,
                                    dropTargetStyle: {},
                                    dropAnimationDisabled: true,
                                    morphDisabled: true,
                                }}
                                on:consider={(e) => handleDndPlayer("player1", e)}
                                on:finalize={(e) => handleDndPlayer("player1", e)}
                            >
                                <!-- Render cards for player 1 -->
                                {#each playerCards.player1 as card, i (card.id)}
                                    <div
                                        class="flip-card"
                                        on:click={() => (card.flipped = !card.flipped)}
                                        animate:flip={{ duration: flipDurationMs }}
                                        style="z-index: {playerCards.player1.length - i};"
                                    >
                                        <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                            <div
                                                class="flip-card-front"
                                                style="background-position: {getBackgroundPosition(card)}"
                                            ></div>
                                            <div class="flip-card-back"></div>
                                        </div>
                                    </div>
                                {/each}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="player-container">
                        <div class="d-grid align-items-center justify-content-evenly">
                            <div
                                class="d-block p-2 bg-success rounded text-white fs-4 text-center mb-2 shadow"
                                style="cursor: default;"
                            >
                                Player 2
                            </div>
                            <div
                                class="box"
                                id="player2"
                                use:dndzone={{
                                    items: playerCards.player2,
                                    dragDisabled: false,
                                    dropTargetStyle: {},
                                    dropAnimationDisabled: true,
                                    morphDisabled: true,
                                }}
                                on:consider={(e) => handleDndPlayer("player2", e)}
                                on:finalize={(e) => handleDndPlayer("player2", e)}
                            >
                                <!-- Render cards for player 2 -->
                                {#each playerCards.player2 as card, i (card.id)}
                                    <div
                                        class="flip-card"
                                        on:click={() => (card.flipped = !card.flipped)}
                                        animate:flip={{ duration: flipDurationMs }}
                                        style="z-index: {playerCards.player1.length - i}; "
                                    >
                                        <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                            <div
                                                class="flip-card-front"
                                                style="background-position: {getBackgroundPosition(card)}"
                                            ></div>
                                            <div class="flip-card-back"></div>
                                        </div>
                                    </div>
                                {/each}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Board -->
            <div
                class="col-7 mt-2 d-flex flex-column"
                style="flex-shrink: 0; min-width: 700px;"
            >
                <div class="board">
                    {#each board as card, index}
                        <div
                            class="box"
                            id="cell_{index}"
                            name="cell_{index}"
                            data-index={index}
                            use:dndzone={{
                                items: board[index].card,
                                dropTargetStyle: {},
                                dragDisabled: true,
                                morphDisabled: true,
                                dropFromOthersDisabled: !!isCellFull.get(index)
                            }}
                            on:consider={e => handleDndBoardConsider(index, e)}
                            on:finalize={e => handleDndBoardFinalize(index, e)}
                        >
                            cell_{index}
                            <!-- temporally printing id inside a cell. -->

                            {#each board[index].card as item (item.id)}
                                <div
                                    class="flip-card-front"
                                    style="background-position: {getBackgroundPosition(item)}"
                                ></div>
                            {/each}
                        </div>
                    {/each}
                </div>
            </div>

            <!-- Column 2  player 3 & 4-->
            <div
                class="col-1 d-flex flex-column justify-content-evenly"
                style="flex-shrink: 0; min-width: 100px;"
            >
                <!-- Player 3, displayed if numberOfPlayers > 2 -->
                {#if $noPlayers > 2}
                    <div class="row">
                        <div class="player-container">
                            <div class="d-grid align-items-center justify-content-evenly">
                                <div
                                    class="d-block p-2 bg-warning rounded text-white fs-4 text-center mb-2 shadow"
                                    style="cursor: default;"
                                >
                                    Player 3
                                </div>
                                <div
                                    class="box"
                                    id="player3"
                                    use:dndzone={{
                                        items: playerCards.player3,
                                        dragDisabled: false,
                                        dropTargetStyle: {},
                                        dropAnimationDisabled: true,
                                        morphDisabled: true,
                                    }}
                                    on:consider={(e) => handleDndPlayer("player3", e)}
                                    on:finalize={(e) => handleDndPlayer("player3", e)}
                                >
                                    <!-- Render cards for player 3 -->
                                    {#each playerCards.player3 as card, i (card.id)}
                                        <div
                                            class="flip-card"
                                            on:click={() => (card.flipped = !card.flipped)}
                                            animate:flip={{ duration: flipDurationMs }}
                                            style="z-index: {playerCards.player1.length - i}; "
                                        >
                                            <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                                <div
                                                    class="flip-card-front"
                                                    style="background-position: {getBackgroundPosition(card)}"
                                                ></div>
                                                <div class="flip-card-back"></div>
                                            </div>
                                        </div>
                                    {/each}
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}

                <!-- Player 4, displayed if numberOfPlayers > 3 -->
                {#if $noPlayers > 3}
                    <div class="row">
                        <div class="player-container">
                            <div class="d-grid align-items-center justify-content-evenly">
                                <div
                                    class="d-block p-2 bg-danger rounded text-white fs-4 text-center mb-2 shadow"
                                    style="cursor: default;"
                                >
                                    Player 4
                                </div>
                                <div
                                    class="box"
                                    id="player4"
                                    use:dndzone={{
                                        items: playerCards.player4,
                                        dragDisabled: false,
                                        dropTargetStyle: {},
                                        dropAnimationDisabled: true,
                                        morphDisabled: true,
                                    }}
                                    on:consider={(e) => handleDndPlayer("player4", e)}
                                    on:finalize={(e) => handleDndPlayer("player4", e)}
                                >
                                    <!-- Render cards for player 1 -->
                                    {#each playerCards.player4 as card, i (card.id)}
                                        <div
                                            class="flip-card"
                                            on:click={() => (card.flipped = !card.flipped)}
                                            animate:flip={{ duration: flipDurationMs }}
                                            style="z-index: {playerCards.player1.length - i}; "
                                        >
                                            <div class="flip-card-inner {card.flipped ? 'flipped' : ''}">
                                                <div
                                                    class="flip-card-front"
                                                    style="background-position: {getBackgroundPosition(card)}"
                                                ></div>
                                                <div class="flip-card-back"></div>
                                            </div>
                                        </div>
                                    {/each}
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}
            </div>
        </div>
    </div>
</body>

<style>
    .flip-card {
        position: absolute;
        width: 100px;
        height: 100px;
        perspective: 1000px;
        cursor: grab;
    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    .flipped {
        transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100px;
        height: 100px;
        backface-visibility: hidden;
        border-radius: 10px;
    }

    .flip-card-front {
        background-image: url("/all-cards.webp");
        background-size: 900px 400px;
    }

    .flip-card-back {
        background-image: url("/Punto-Icon.webp");
        background-size: cover;
        transform: rotateY(180deg);
    }

    .board {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff96;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    }
    .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        border: 1px solid #1f1f1f23;
        background-color: #4f4f4f5d;
        border-radius: 10px;
        font-size: 10px;
        font-weight: bold;
        cursor: default;
        box-shadow:
            0 4px 8px 0 #0000001a,
            0 6px 20px 0 #0000001a;
    }
    .box:hover {
        background-color: #4f4f4f9a;
    }
    .player-container {
        padding: 25px;
        background-color: #ffffff96;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h3 {
        margin-bottom: 0;
    }
</style>

MarcinJaracz commented 1 week ago

OMG, these little changes You did just save my sanity. Thank You so much.

isaacHagoel commented 1 week ago

my pleasure

On Mon, Oct 14, 2024 at 7:27 AM Marcin Jaracz @.***> wrote:

OMG, these little changes You did just save my sanity. Thank You so much.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2409113791, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC52SIJSRTICDKMZ5EDZ3LJTBAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBZGEYTGNZZGE . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

I swear it is my last question and I won't bother You any more. Why in your demo for example scrabble, tiles back to the rack with smooth animation when dropped inappropriate and my cards don't?

isaacHagoel commented 1 week ago

Don't worry. Can you include a gif or explain exactly what you're after?

On Mon, Oct 14, 2024, 20:26 Marcin Jaracz @.***> wrote:

I swear it is my last question and I won't bother You any more. Why in your demo for example scrabble, tiles back to the rack with smooth animation when dropped inappropriate and my cards don't?

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410572488, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC655SFTCZMYP66ALJTZ3OE5XAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQGU3TENBYHA . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

2024-10-14 11-38-43_1 2024-10-14 11-39-11_1

isaacHagoel commented 1 week ago

RIght. Usually it means that the lib can't find the shadow item's position in order to create the drop animation. I will look at it tomorrow or the next day.

On Mon, Oct 14, 2024 at 8:55 PM Marcin Jaracz @.***> wrote:

2024-10-14.11-38-43_1.gif (view on web) https://github.com/user-attachments/assets/fcfc1619-eac3-421d-8d88-f4004a565c53 2024-10-14.11-39-11_1.gif (view on web) https://github.com/user-attachments/assets/5471979d-c609-4350-8f01-b6b847f5c987

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410654111, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7RSJZYVQHGPKQAXKDZ3OII5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQGY2TIMJRGE . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

Great, the shadow would be my next thing to work on.

pon., 14 paź 2024, 13:00 użytkownik Isaac Hagoel @.***> napisał:

RIght. Usually it means that the lib can't find the shadow item's position in order to create the drop animation. I will look at it tomorrow or the next day.

On Mon, Oct 14, 2024 at 8:55 PM Marcin Jaracz @.***> wrote:

2024-10-14.11-38-43_1.gif (view on web) < https://github.com/user-attachments/assets/fcfc1619-eac3-421d-8d88-f4004a565c53>

2024-10-14.11-39-11_1.gif (view on web) < https://github.com/user-attachments/assets/5471979d-c609-4350-8f01-b6b847f5c987>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410654111>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZC7RSJZYVQHGPKQAXKDZ3OII5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQGY2TIMJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410867126, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGMSEGOERV7QPXIG5JTZ3OP6JAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3DOMJSGY . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 1 week ago

Leave it with me I think. I saw the shadow element in the array. It might be related to the z index or something. I won't know until I try to debug it

On Mon, Oct 14, 2024, 22:04 Marcin Jaracz @.***> wrote:

Great, the shadow would be my next thing to work on.

pon., 14 paź 2024, 13:00 użytkownik Isaac Hagoel @.***> napisał:

RIght. Usually it means that the lib can't find the shadow item's position in order to create the drop animation. I will look at it tomorrow or the next day.

On Mon, Oct 14, 2024 at 8:55 PM Marcin Jaracz @.***> wrote:

2024-10-14.11-38-43_1.gif (view on web) <

https://github.com/user-attachments/assets/fcfc1619-eac3-421d-8d88-f4004a565c53>

2024-10-14.11-39-11_1.gif (view on web) <

https://github.com/user-attachments/assets/5471979d-c609-4350-8f01-b6b847f5c987>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410654111>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC7RSJZYVQHGPKQAXKDZ3OII5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQGY2TIMJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410867126>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ALQGSGMSEGOERV7QPXIG5JTZ3OP6JAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3DOMJSGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410873710, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYOZNDMUXIOSGOYJVDZ3OQKNAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3TGNZRGA . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

Okay, I'll wait untill then.

pon., 14 paź 2024, 13:06 użytkownik Isaac Hagoel @.***> napisał:

Leave it with me I think. I saw the shadow element in the array. It might be related to the z index or something. I won't know until I try to debug it

On Mon, Oct 14, 2024, 22:04 Marcin Jaracz @.***> wrote:

Great, the shadow would be my next thing to work on.

pon., 14 paź 2024, 13:00 użytkownik Isaac Hagoel @.***> napisał:

RIght. Usually it means that the lib can't find the shadow item's position in order to create the drop animation. I will look at it tomorrow or the next day.

On Mon, Oct 14, 2024 at 8:55 PM Marcin Jaracz @.***> wrote:

2024-10-14.11-38-43_1.gif (view on web) <

https://github.com/user-attachments/assets/fcfc1619-eac3-421d-8d88-f4004a565c53>

2024-10-14.11-39-11_1.gif (view on web) <

https://github.com/user-attachments/assets/5471979d-c609-4350-8f01-b6b847f5c987>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410654111>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AE4OZC7RSJZYVQHGPKQAXKDZ3OII5AVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQGY2TIMJRGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub <

https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410867126>,

or unsubscribe <

https://github.com/notifications/unsubscribe-auth/ALQGSGMSEGOERV7QPXIG5JTZ3OP6JAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3DOMJSGY>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410873710>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4OZCYOZNDMUXIOSGOYJVDZ3OQKNAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3TGNZRGA>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2410879625, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGM6ULX3N3TKLQGPBQ3Z3OQSXAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJQHA3TSNRSGU . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 1 week ago

Actually it's a simple fix. You are disabling the drop animation because you are passing dropAnimationDisabled:true. Try this (this will affect player 1, you can repeat for the others), I added flipDurationMs (control the duration of the animation) and changed dropAnimationDisabled to its default value (same as removing it):

    <div
                                class="box"
                                id="player1"
                                use:dndzone={{
                                    items: playerCards.player1,
                                    dragDisabled: false,
                                    dropTargetStyle: {},
                                    dropAnimationDisabled: false,
                                    flipDurationMs: 150,
                                    morphDisabled: true,
                                }}
                                on:consider={(e) => handleDndPlayer("player1", e)}
                                on:finalize={(e) => handleDndPlayer("player1", e)}
                            >

MarcinJaracz commented 1 week ago

Beautiful :D And how about the shadow thing...?

wt., 15 paź 2024 o 09:56 Isaac Hagoel @.***> napisał(a):

Actually it's a simple fix. You are disabling the drop animation because you are passing dropAnimationDisabled:true. Try this (this will affect player 1, you can repeat for the others):

<div class="box" id="player1" use:dndzone={{ items: playerCards.player1, dragDisabled: false, dropTargetStyle: {}, dropAnimationDisabled: false, flipDurationMs: 150, morphDisabled: true, }} on:consider={(e) => handleDndPlayer("player1", e)} on:finalize={(e) => handleDndPlayer("player1", e)}

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2413156441, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQGSGJ76ORAXLGFN3ABNM3Z3TDBJAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJTGE2TMNBUGE . You are receiving this because you modified the open/close state.Message ID: @.***>

isaacHagoel commented 1 week ago

Wasn't relevant, I didn't notice that the animation is disabled so I suspected the poor shadow

On Tue, Oct 15, 2024, 20:12 Marcin Jaracz @.***> wrote:

Beautiful :D And how about the shadow thing...?

wt., 15 paź 2024 o 09:56 Isaac Hagoel @.***> napisał(a):

Actually it's a simple fix. You are disabling the drop animation because you are passing dropAnimationDisabled:true. Try this (this will affect player 1, you can repeat for the others):

<div class="box" id="player1" use:dndzone={{ items: playerCards.player1, dragDisabled: false, dropTargetStyle: {}, dropAnimationDisabled: false, flipDurationMs: 150, morphDisabled: true, }} on:consider={(e) => handleDndPlayer("player1", e)} on:finalize={(e) => handleDndPlayer("player1", e)}

— Reply to this email directly, view it on GitHub < https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2413156441>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/ALQGSGJ76ORAXLGFN3ABNM3Z3TDBJAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJTGE2TMNBUGE>

. You are receiving this because you modified the open/close state.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/603#issuecomment-2413333707, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCZNLLUW5WL3U4AUXC3Z3TMATAVCNFSM6AAAAABOWH2I72VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJTGMZTGNZQG4 . You are receiving this because you modified the open/close state.Message ID: @.***>

MarcinJaracz commented 1 week ago

Thank You for everything You did for me. I really appreciate that.