I have card components (press add on the gambit button) inside my container. I want to link the card component logically using some data strucutre as well as on the UI.
To give you a clear picture please see this image:This is what i want to do
1. How can I link (parent child relationship maybe) cards on UI (maybe using some libraries). when user try to make a source to destination realtionship line between two card components as show in the image above as well logicallly inside some new State varaible (lets say treeGambit)?
2. Is my gambits data-strucutre good enough or do i need some improvement (considering card can be added, deleted and value inside card can be modified). ?
This is how my gambits data structure looks like:
gambits: {
0: {top: 40, left: 231, title: "Card G_0"},
1: {top: 110, left: 134, title: "Card G_1"},
2: {top: 46, left: 109, title: "Card G_2"},
3: {top: 75, left: 212, title: "Card G_3"},
4: {top: 81, left: 139, title: "Card G_4"},
5: {top: 64, left: 267, title: "Card G_5"},
6: {top: 77, left: 109, title: "Card G_6"},
}
Here is how my card components looks like :
Thanks