drag n drop second round

• the last implementation of html introduce a lot of headache. and not currently support dragging around inside the box which lead to clashing interaction between drag and drag to drop

• so i’m gonna try to improve the implementation by porting dnd-kit back into svelte

  • dnd-kit have enough good stuff for me to follow, very performant due to using css transform such as translate3d()

• rough idea for dropzone

  • measures the rect bounding of draggable

  • measures the rect bounding of droppable(s)

  • check intersect/collision

    • require both draggable & droppable sitting inside the same coordinate aka context?

  • if yes => dropable => run callback

    • when yes? onPointerUp

  • should save the after translate position for keeping after dropping

• stuff about drag

  • every draggable node create an event which attached into window

  • node have indentifier or something to know which node is currently being dragged

    • mostly for running callback which update something for userland

    • otherwise event.target should be enough

notes:: clientX/Y, offsetX/Y

• 

• clientX,Y: is pointer event which absolute position compare to the viewport

• offsetX,Y: is position of the mouse compare target node

• clientX,Y - initial offsetX,Y: should yield the should be position of target node after translate

• deltaX,Y to translate is clientX,Y-initial offsetX,Y-initial bounding X,Y

rough roadmap for mtg

• goal

  • get everybody i know to play mtg, eventually have enough people to draft a cube

  • recreation programming

    • try to learn and reimplement most interesting stuff while building this

• single player experience. streamable. watch able in discord call. spelltable capable of recognizing all the art card

  • drag and drop between zone

  • card interaction

    • tap, untap

    • draw, scry, discard

    • context menu

    • spawn stuff

    • viewable

  • view zone

  • selection, mass update something

  • baseline is the goldfish testing of moxfield

    • https://www.moxfield.com/decks/PdktfhYDMEe-wyQ-k25vZA/goldfish

• multiplayer eventually (stretch goal)

  • share playfield, zoomable, able to interact card between player. similar to tabletop simulator

• non goal

  • card scripting, too much work. the point is get people to talk to each other, why take the fun out of it.

how to implement drag n drop in svelte?

• dragging a round inside is relatively simple (it’s not)

  • bound with parent and the mouse event somehow updating the coord of card relatively to the field

  • so the card should have the normal flow and only use transform to moving around?

    • thus achieve the effect of orderly into chaos later aka. first it drop into neatly order thing, when user start dragging, everything went apeshit.

  • ok not so easy

• drag and then dropping into another container is a different beast.

  • there’s https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#specifications