wip

app/Filament/Pages/Statistic.php

@@ -17,7 +17,6 @@ use Filament\Forms\Components\Hidden;
 use Filament\Forms\Components\Radio;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Slider;
-use Filament\Forms\Components\ToggleButtons;
 use Filament\Pages\Dashboard as BaseDashboard;
 use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
 use Filament\Schemas\Components\Grid;
@@ -89,7 +88,7 @@ class Statistic extends BaseDashboard
                 ->keyBindings(['esc'])
                 ->action('resetFilters'),
             Action::make('calculator')
-                // ->modalHeading('')
+                ->modalHeading('')
                 ->modalSubmitAction(false) // Hides the submit button
                 ->modalCancelAction(false) // Optional: hides the cancel button too
                 ->label('Calculate')
@@ -97,64 +96,8 @@ class Statistic extends BaseDashboard
                 ->color(fn(): string => $this->filters['team_id'] ? 'primary' : 'gray')
                 ->disabled(fn(): string => $this->filters['team_id'] ? false : true)
                 ->slideOverPosition(SlideOverPosition::Start)
-                ->modalWidth(Width::SevenExtraLarge)
+                ->modalWidth(Width::SixExtraLarge)
                 ->slideOver()
-                ->schema([
-                    Grid::make(2)
-                        ->extraAttributes([
-                            'class' => 'justify-between w-full gap-4',
-                        ])
-                        ->schema([
-                            ToggleButtons::make('status')
-                                ->live()
-                                ->hiddenLabel()
-                                ->multiple()
-                                ->inline()
-                                ->default('attack')
-                                ->options([
-                                    'attack' => 'Attack',
-                                    'midfield' => 'Midfield',
-                                    'defence' => 'Defence',
-                                    'goalkeeper' => 'Goalkeeper',
-                                ])
-                                ->colors([
-                                    'attack' => 'warning',
-                                    'midfield' => 'info',
-                                    'defence' => 'success',
-                                    'goalkeeper' => 'gray',
-                                ])
-                                ->afterStateUpdated(function (ToggleButtons $component, $state, $livewire) {
-                                    // 1. Fetch the enabled options array
-                                    $livewireComponent = $component->getLivewire();
-                                    $data = json_encode($livewireComponent->mountedActions);
-                                    $livewire->js('toggle_type(\''.$data.'\')');
-
-                                }),
-                            Grid::make(5)
-                                ->schema([
-                                    Action::make('restart')
-                                        ->extraAttributes([
-                                            'class' => 'w-30',
-                                        ])
-                                        ->color('warning')
-                                        ->icon('phosphor-arrow-counter-clockwise'),
-                                    Action::make('copy')
-                                        ->extraAttributes([
-                                            'class' => 'w-30',
-                                        ])
-                                        ->color('success')
-                                        ->icon('phosphor-copy'),
-                                    Action::make('calculate')
-                                        ->extraAttributes([
-                                            'class' => 'w-30',
-                                        ])
-                                        ->icon('phosphor-calculator'),
-                                ])
-                                ->extraAttributes([
-                                    'class' => 'flex justify-center items-center gap-0',
-                                ]),
-                        ]),
-                ])
                 ->modalContentFooter(view('filament.modals.player-calculator-modal', ['filters' => $this->filters])),
         ];
     }

app/Livewire/PlayerCalculator.php

@@ -4,7 +4,6 @@ namespace App\Livewire;
 
 use App\Filament\Pages\Selections\Helper\GetSeason;
 use App\Filament\Pages\Selections\LoadPositions;
-use App\Livewire\Mapper\LoadGridPositions;
 use App\Models\SofaScorePlayerPerSeason;
 use App\Models\StatistikoEvent;
 use Filament\Widgets\Concerns\InteractsWithPageFilters;
@@ -14,41 +13,11 @@ class PlayerCalculator extends Component
 {
     use InteractsWithPageFilters;
 
-    public $grid = [];
+    public $players = [];
 
     public function mount(array $filters)
     {
-        $pos = array_chunk(LoadGridPositions::load(), 5);
+        $this->players = self::load($filters);
-        $pla = array_chunk(self::load($filters), 5);
-
-        $i = 1;
-        while ($v = array_shift($pos)) {
-            array_splice($pla, $i, 0, [$v]);
-            $i += 2;
-        }
-        $x = 1;
-        $y = 1;
-        foreach ($pla as $ele) {
-            foreach ($ele as $val) {
-                $tmp = [];
-                if (is_array($val)) {
-                    foreach ($val as $key => $value) {
-                        $tmp[$key] = $value;
-                    }
-                    $tmp['type'] = '';
-                } else {
-                    $tmp['type'] = $val != 0 ? $val : '';
-                }
-                $tmp['x'] = 104 * $x;
-                $tmp['y'] = 104 * $y;
-                $this->grid[] = $tmp;
-                $x++;
-                if ($x > 10) {
-                    $x = 1;
-                    $y++;
-                }
-            }
-        }
     }
 
     public static function load(array $filters)
@@ -148,7 +117,7 @@ class PlayerCalculator extends Component
 
             $result[] = [
                 'player_id' => $player_id,
-                'name' => $name,
+                'player_name' => $name,
                 'position' => $position,
                 'position_color' => $position_color,
                 'color' => $color,
@@ -156,12 +125,6 @@ class PlayerCalculator extends Component
             ];
         }
 
-        $maxlength = 35;
-        $len = count($result);
-        if ($len < $maxlength) {
-            $result += array_fill($len, $maxlength - $len, [0, 0, 0, 0, 0, 0, 0]);
-        }
-
         return $result;
     }
 }

app/Providers/AppServiceProvider.php

@@ -2,7 +2,6 @@
 
 namespace App\Providers;
 
-use App\Filament\Pages\Statistic;
 use App\Filament\Resources\Events\Pages\ListEvents;
 use Carbon\Carbon;
 use Filament\Support\Assets\Css;
@@ -38,9 +37,8 @@ class AppServiceProvider extends ServiceProvider
 
         FilamentAsset::register([
             Css::make('font-stylesheet', __DIR__ . '/../../resources/css/font.css'),
-            Js::make('example-external-script', 'https://cdn.jsdelivr.net/npm/interactjs@latest'),
             Js::make('number-animator', __DIR__ . '/../../resources/js/number-animator.js'),
-            Js::make('dragndrop', __DIR__ . '/../../resources/js/dragndrop.js'),
+            Js::make('dragndrop', __DIR__ . '/../../resources/js/dragndrop-store.js'),
         ]);
 
         FilamentView::registerRenderHook(

app/Providers/Filament/AdminPanelProvider.php

@@ -2,7 +2,6 @@
 
 namespace App\Providers\Filament;
 
-use Agencetwogether\HooksHelper\HooksHelperPlugin;
 use App\Filament\Exports\BetfairExporter;
 use App\Filament\Pages\Statistic;
 use App\Http\Middleware\RecordUserActivity;
@@ -21,6 +20,8 @@ use Filament\Http\Middleware\DisableBladeIconComponents;
 use Filament\Http\Middleware\DispatchServingFilamentEvent;
 use Filament\Panel;
 use Filament\PanelProvider;
+use Filament\Support\Assets\Css;
+use Filament\Support\Assets\Js;
 use Filament\Support\Enums\Width;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -29,6 +30,7 @@ use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
 use Illuminate\Routing\Middleware\SubstituteBindings;
 use Illuminate\Session\Middleware\StartSession;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Vite;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
 use Joaopaulolndev\FilamentEditProfile\FilamentEditProfilePlugin;
 use Joaopaulolndev\FilamentEditProfile\Pages\EditProfilePage;
@@ -46,6 +48,11 @@ class AdminPanelProvider extends PanelProvider
             ->middleware([
                 RecordUserActivity::class,
             ])
+            ->assets([
+                // Point directly to the source files on disk relative to this provider
+                Css::make('dragula-css', base_path('resources/js/filament-dragula.js')), // Vite extracts CSS imported here
+                Js::make('filament-dragula', Vite::asset('resources/js/filament-dragula.js'))->module(),
+            ])
             ->userMenuItems([
                 ExportAction::make('download_betfair')
                     ->columnMapping(false)

composer.lock

@@ -4705,24 +4705,24 @@
         },
         {
             "name": "mongodb/mongodb",
-            "version": "2.3.0",
+            "version": "2.2.0",
             "source": {
                 "type": "git",
-                "url": "https://github.com/mongodb/mongo-php-library",
+                "url": "https://github.com/mongodb/mongo-php-library.git",
-                "reference": "12e56461166d915e3dd8e4969ad0940ed5207d88"
+                "reference": "bbb13f969e37e047fd822527543df55fdc1c9298"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/mongodb/mongo-php-library/zipball/12e56461166d915e3dd8e4969ad0940ed5207d88",
+                "url": "https://api.github.com/repos/mongodb/mongo-php-library/zipball/bbb13f969e37e047fd822527543df55fdc1c9298",
-                "reference": "12e56461166d915e3dd8e4969ad0940ed5207d88",
+                "reference": "bbb13f969e37e047fd822527543df55fdc1c9298",
                 "shasum": ""
             },
             "require": {
                 "composer-runtime-api": "^2.0",
-                "ext-mongodb": "^2.3",
+                "ext-mongodb": "^2.2",
                 "php": "^8.1",
                 "psr/log": "^1.1.4|^2|^3",
-                "symfony/polyfill-php85": "^1.33"
+                "symfony/polyfill-php85": "^1.32"
             },
             "replace": {
                 "mongodb/builder": "*"
@@ -4774,7 +4774,11 @@
                 "mongodb",
                 "persistence"
             ],
-            "time": "2026-04-28T12:50:06+00:00"
+            "support": {
+                "issues": "https://github.com/mongodb/mongo-php-library/issues",
+                "source": "https://github.com/mongodb/mongo-php-library/tree/2.2.0"
+            },
+            "time": "2026-02-11T11:39:56+00:00"
         },
         {
             "name": "monolog/monolog",

package-lock.json

@@ -4,6 +4,10 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "dragula": "^3.7.3",
+                "prettier-plugin-blade": "^3.3.2"
+            },
             "devDependencies": {
                 "@tailwindcss/vite": "^4.1.11",
                 "axios": "^1.11.0",
@@ -526,6 +530,18 @@
                 "node": "^22.20 || ^24.12 || >=25"
             }
         },
+        "node_modules/@prettier/html-tags": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@prettier/html-tags/-/html-tags-2.2.0.tgz",
+            "integrity": "sha512-6qLjt8ncestmSfEOeVf/kX5VhkinUsppybvkwn1X7wu+BjQ/GBSZYu7cytxdCvi5BaljCGIAr4rmfL5zVqdgyQ==",
+            "license": "MIT"
+        },
+        "node_modules/@prettier/parse-srcset": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@prettier/parse-srcset/-/parse-srcset-3.1.0.tgz",
+            "integrity": "sha512-FIRv2rZotO9NP/r66taYqD1zICpPiBbrECqjKV/xqNotqDxF7fLzzUeK+1RSRx9Tenk0DajR/GcRmTJ2qtHaKQ==",
+            "license": "MIT"
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.63.1",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.1.tgz",
@@ -1252,6 +1268,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/atoa": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
+            "integrity": "sha512-VVE1H6cc4ai+ZXo/CRWoJiHXrA1qfA31DPnx6D20+kSI547hQN5Greh51LQ1baMRMfxO5K5M4ImMtZbZt2DODQ==",
+            "license": "MIT"
+        },
         "node_modules/axios": {
             "version": "1.20.0",
             "resolved": "https://registry.npmjs.org/axios/-/axios-1.20.0.tgz",
@@ -1382,6 +1404,31 @@
                 "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
             }
         },
+        "node_modules/contra": {
+            "version": "1.9.4",
+            "resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
+            "integrity": "sha512-N9ArHAqwR/lhPq4OdIAwH4e1btn6EIZMAz4TazjnzCiVECcWUPTma+dRAM38ERImEJBh8NiCCpjoQruSZ+agYg==",
+            "license": "MIT",
+            "dependencies": {
+                "atoa": "1.0.0",
+                "ticky": "1.0.1"
+            }
+        },
+        "node_modules/crossvent": {
+            "version": "1.5.5",
+            "resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.5.tgz",
+            "integrity": "sha512-MY4xhBYEnVi+pmTpHCOCsCLYczc0PVtGdPBz6NXNXxikLaUZo4HdAeUb1UqAo3t3yXAloSelTmfxJ+/oUqkW5w==",
+            "license": "MIT",
+            "dependencies": {
+                "custom-event": "^1.0.0"
+            }
+        },
+        "node_modules/custom-event": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+            "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
+            "license": "MIT"
+        },
         "node_modules/debug": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1420,6 +1467,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/dragula": {
+            "version": "3.7.3",
+            "resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.3.tgz",
+            "integrity": "sha512-/rRg4zRhcpf81TyDhaHLtXt6sEywdfpv1cRUMeFFy7DuypH2U0WUL0GTdyAQvXegviT4PJK4KuMmOaIDpICseQ==",
+            "license": "MIT",
+            "dependencies": {
+                "contra": "1.9.4",
+                "crossvent": "1.5.5"
+            }
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1759,6 +1816,16 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/html-element-attributes": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-3.5.0.tgz",
+            "integrity": "sha512-rU2BFhp0kQla9sqPBI46C+zbP6PFOtD7z6XNAJ6as+cGecCDXLx0W3aIs6XdPLmBBG/Fy1meRi/n65Exofz4Qw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/https-proxy-agent": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -2204,6 +2271,49 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/prettier": {
+            "version": "3.9.6",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz",
+            "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==",
+            "license": "MIT",
+            "peer": true,
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-blade": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-blade/-/prettier-plugin-blade-3.3.2.tgz",
+            "integrity": "sha512-bw5bWD+C0Xj1jd+wcOcU5fh4EVtD0ZzWKeEL276kmA5j7k2KfX5lGQgj/C+SFU9Ga4PcoOdJ7k9dJUCC5DkoNQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@prettier/html-tags": "^2.2.0",
+                "@prettier/parse-srcset": "^3.1.0",
+                "html-element-attributes": "^3.5.0"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "@prettier/plugin-php": "^0.24.0 || ^0.25.0",
+                "prettier": "^3.0.0",
+                "prettier-plugin-tailwindcss": "^0.7.0 || ^0.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@prettier/plugin-php": {
+                    "optional": true
+                },
+                "prettier-plugin-tailwindcss": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -2368,6 +2478,12 @@
                 "url": "https://opencollective.com/webpack"
             }
         },
+        "node_modules/ticky": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
+            "integrity": "sha512-RX35iq/D+lrsqhcPWIazM9ELkjOe30MSeoBHQHSsRwd1YuhJO5ui1K1/R0r7N3mFvbLBs33idw+eR6j+w6i/DA==",
+            "license": "MIT"
+        },
         "node_modules/tinyglobby": {
             "version": "0.2.17",
             "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",

package.json

@@ -19,5 +19,9 @@
         "esbuild@0.25.12": true,
         "fsevents@2.3.3": true,
         "esbuild@0.28.2": true
+    },
+    "dependencies": {
+        "dragula": "^3.7.3",
+        "prettier-plugin-blade": "^3.3.2"
     }
 }

resources/css/filament/admin/theme.css

@@ -235,12 +235,45 @@ less padding in table
     }
 }
 
-.chessboard {
+/* 1. Das Element, das am Mauszeiger klebt (Der Mirror) */
-    background-position: top right;
+.gu-mirror {
-    background-size: 512px auto;
+    position: fixed !important;
-    background-repeat: no-repeat;
+    margin: 0 !important;
+    z-index: 9999 !important;
+    opacity: 0.95 !important;
+    pointer-events: none;
+    /* Verhindert, dass der Klon Maus-Events blockiert */
+
+    /* Styling für den Klon (Hell-Modus) */
+    background-color: rgb(255, 255, 255) !important;
+    border: 1px solid rgb(226, 232, 240) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    border-radius: 0.5rem !important;
+    transform: rotate(3deg);
+    /* Optionale leichte Drehung für einen dynamischen Look */
+    transition: transform 0.15s ease;
 }
 
-.piece:active {
+/* Dark Mode Anpassung für den Mirror (Wichtig in Filament!) */
-    @apply cursor-grabbing drop-shadow border
+.dark .gu-mirror {
+    background-color: rgb(31, 41, 55) !important;
+    border-color: rgb(55, 65, 81) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* 2. Der „Schatten“ am ursprünglichen Platz (Transit-Element) */
+.gu-transit {
+    opacity: 0.3 !important;
+    border: 2px dashed rgb(99, 102, 241) !important;
+    /* Indigo-farbener gestrichelter Rahmen */
+    background-color: rgba(99, 102, 241, 0.05) !important;
+}
+
+.dark .gu-transit {
+    background-color: rgba(99, 102, 241, 0.1) !important;
+}
+
+/* 3. Sicherstellen, dass die Dropzones Platz für das Element bieten */
+.drag-box {
+    @apply flex flex-col gap-0 size-24 bg-gray-100/50 border-2 border-dashed border-gray-300 rounded-xl text-xs p-0;
 }

resources/js/dragndrop-store.js

@@ -0,0 +1,44 @@
+document.addEventListener("alpine:init", () => {
+    Alpine.store("main", {
+        attack: true,
+        midfield: true,
+        defence: true,
+        goalkeeper: true,
+        players: [],
+        groups: [],
+        toggleAttack() {
+            this.attack = !this.attack;
+            // Loop through them and add Tailwind's invisible class
+            elements.forEach((el) => el.classList.add("invisible"));
+        },
+        console(index) {
+            console.log(this.players[index].player_id);
+            var p = this.players[index].player_id;
+        },
+        loadPlayer(data) {
+            this.players = data;
+        },
+        setPosGroup(group) {
+            this.groups = group;
+            console.log(this.groups, group);
+        },
+        hasVisible(type) {
+            console.log(type);
+            return true;
+        },
+        toggleType(toggleStates) {
+            var toggleState = toggleStates;
+            // var toggleState = JSON.parse(mode);
+            // this.visa = toggleState[0].data.status;
+            // console.log(this.visabilities);
+        },
+        findByPlayerId(player_id) {
+            const index = this.items.findIndex(
+                (item) => item.player_id === player_id,
+            );
+            if (index > -1) {
+                return item;
+            }
+        },
+    });
+});

resources/js/dragndrop.js

@@ -1,69 +0,0 @@
-interact(".piece").draggable({
-    modifiers: [
-        interact.modifiers.snap({
-            targets: [
-                // 1. Match the grid to your square sizes (50px x 50px)
-                interact.snappers.grid({ x: 104, y: 104 }),
-            ],
-            range: Infinity,
-            // 2. Snap by the top-left corner (0,0) of the piece to align with square borders
-            relativePoints: [{ x: 0, y: 0 }],
-            // 3. Keep the element constrained within the 400x400 board boundaries
-            offset: "parent",
-        }),
-        interact.modifiers.restrictRect({
-            restriction: "parent",
-            endOnly: false,
-        }),
-    ],
-
-    listeners: {
-        move(event) {
-            const target = event.target;
-            const x =
-                (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
-            const y =
-                (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
-
-            console.log("console", x, y);
-
-            target.style.transform = `translate(${x}px, ${y}px)`;
-
-            target.setAttribute("data-x", x);
-            target.setAttribute("data-y", y);
-        },
-        end(event) {
-            // Optional: Calculate and log the final algebraic notation (e.g., e4, a1)
-            const target = event.target;
-            const currentX =
-                (parseFloat(target.getAttribute("data-x")) || 0) + 200; // Adding initial left offset
-            const currentY =
-                (parseFloat(target.getAttribute("data-y")) || 0) + 200; // Adding initial top offset
-
-            const files = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "k"];
-            const fileIndex = Math.floor(currentX / 50);
-            const rankIndex = 8 - Math.floor(currentY / 50);
-
-            if (files[fileIndex] && rankIndex >= 1 && rankIndex <= 8) {
-                console.log(`Piece landed on: ${files[fileIndex]}${rankIndex}`);
-            }
-        },
-    },
-});
-
-function toggle_type(mode) {
-    console.log(mode);
-}
-
-
-document.addEventListener("alpine:init", () => {
-    Alpine.store("main", {
-        players: [],
-        console(index) {
-            console.log(this.players[index]);
-        },
-        loadPlayer(data) {
-            this.players = data;
-        }
-    });
-});

resources/js/filament-dragula.js

@@ -0,0 +1,6 @@
+import dragula from "dragula";
+import "dragula/dist/dragula.css";
+
+document.addEventListener("alpine:init", () => {
+    window.dragula = dragula;
+});

resources/views/livewire/player-calculator.blade.php

@@ -1,51 +1,71 @@
-@php
+<!-- 1. Der Alpine-Wrapper (Komplett clean, ohne 'dropzones' oder 'sources') -->
-    use Illuminate\Support\HtmlString;
+<div x-data="{
-@endphp
+    init() {
+        this.$nextTick(() => {
+            // Findet alle 22 Container (1 Quelle + 21 Ziele) im HTML
+            const allContainers = this.$el.querySelectorAll('.drag-container');
 
-{{-- In Tailwind CSS, a value of 24 equals 96 pixels (or 6rem) --}}
+            if (allContainers.length === 0) return;
-<div class="chessboard grid w-258 h-180 grid-cols-10 grid-rows-7 relative gap-2"
-    style="background-image:url({{ asset('svg/soccerfield.svg') }});" x-data x-init="
-            setTimeout(() => {
-                $store.main.loadPlayer({{ json_encode($grid) }});
-            }, 1000); ">
 
-  {{-- 0 => array:9 [▼
+            // Dragula initialisieren
-    "player_id" => 789695
+            const drake = dragula(Array.from(allContainers), {
-    "name" => "Favio Álvarez"
+                revertOnSpill: true,
-    "position" => "MIDFIELD"
+                copy: false
-    "position_color" => "info"
+            });
-    "color" => "info"
-    "info" => "Ev 3, Right, 8 min"
-    "type" => ""
-    "x" => 104
-    "y" => 104
 
-      7 => array:3 [▼
+            // Drop-Event verarbeiten
-        "type" => "ST"
+            drake.on('drop', (el, target, source) => {
-        "x" => 832
+                const playerId = el.getAttribute('data-item-id');
-        "y" => 104
+                const targetZone = target.getAttribute('data-container-id');
-    ]
+                const sourceZone = source.getAttribute('data-container-id');
-  ] --}}
 
-    @foreach ($grid as $key => $ele)
+                console.log('Spieler ' + playerId + ' von ' + sourceZone + ' nach ' + targetZone);
 
-        @if(isset($ele['player_id']))
+
-            <x-filament::button color="{{ $ele['position_color'] }}" 
+                {{--  If the item lands in the "trash" zone, remove it entirely 
-                @click="$store.main.console({{$key}})"
+                    if (targetZone === 'trash') {
-                id="{{ $ele['player_id'] }}"
+                        el.remove();
-                class="piece relative size-24 select-none aspect-square font-bold rounded"
+                    } 
-                    tooltip="{{ $ele['info'] }}">
+                --}}
-                <div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl  bg-white/10">{{ $ele['position'] }}</div>
+            });
-                {{ $ele['name'] }}
+        });
+    }
+}" class="grid grid-cols-12 gap-1">
+    <div class="col-span-5 drag-container flex flex-row flex-wrap gap-2" data-container-id="source-1">
+        @foreach ($players as $player)
+            <x-filament::button class="h-12" size="sm" color="gray" data-item-id="{{ $player['player_id'] }}">
+                ⚽️ {{ $player['player_name'] }}
             </x-filament::button>
-        @elseif($ele['type'])
-            <div class="size-24 bg-white/10">
-                <div class="font-black text-3xl text-center text-white/25 p-3">
-                    {{ $ele['type'] }}
-                </div>
-            </div>
-        @else
-            <div class="size-24"></div>
-        @endif
         @endforeach
     </div>
+
+    <div class="col-span-6 bg-cover bg-center" style="background-image:url({{ asset('svg/soccerfield.svg') }})">
+        <div class="grid grid-cols-5 grid-rows-7 gap-4 justify-between items-center border">
+            {{-- first row --}}
+            <div></div>
+            <div></div>
+            <div class="drag-container drag-box" data-container-id="zone-1">
+                <div class="font-black text-center">SW</div>
+            </div>
+            <div></div>
+            <div></div>
+            {{-- second row --}}
+            <div class="drag-container drag-box" data-container-id="zone-2">
+                <div class="font-black text-black/30 text-center">DR</div>
+            </div>
+            <div class="drag-container drag-box" data-container-id="zone-3">
+                <div class="font-black text-black/30 text-center">DC</div>
+            </div>
+            <div class="drag-container drag-box" data-container-id="zone-4">
+                <div class="font-black text-black/30 text-center">DC</div>
+            </div>
+            <div class="drag-container drag-box" data-container-id="zone-5">
+                <div class="font-black text-black/30 text-center">DC</div>
+            </div>
+            <div class="drag-container drag-box" data-container-id="zone-6">
+                <div class="font-black text-black/30 text-center">DL</div>
+            </div>
+        </div>
+    </div>
+    <div>Actions</div>
+</div>

vite.config.js

@@ -8,6 +8,7 @@ export default defineConfig({
             input: [
                 "resources/css/app.css",
                 "resources/js/app.js",
+                "resources/js/filament-dragula.js",
                 "resources/css/filament/admin/theme.css",
             ],
             refresh: true,