wip

resources/css/filament/admin/theme.css

@@ -235,12 +235,45 @@ less padding in table
     }
 }
 
-.chessboard {
-    background-position: top right;
-    background-size: 512px auto;
-    background-repeat: no-repeat;
+/* 1. Das Element, das am Mauszeiger klebt (Der Mirror) */
+.gu-mirror {
+    position: fixed !important;
+    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 {
-    @apply cursor-grabbing drop-shadow border
+/* Dark Mode Anpassung für den Mirror (Wichtig in Filament!) */
+.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
-    use Illuminate\Support\HtmlString;
-@endphp
+<!-- 1. Der Alpine-Wrapper (Komplett clean, ohne 'dropzones' oder 'sources') -->
+<div x-data="{
+    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) --}}
-<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); ">
+            if (allContainers.length === 0) return;
 
-  {{-- 0 => array:9 [▼
-    "player_id" => 789695
-    "name" => "Favio Álvarez"
-    "position" => "MIDFIELD"
-    "position_color" => "info"
-    "color" => "info"
-    "info" => "Ev 3, Right, 8 min"
-    "type" => ""
-    "x" => 104
-    "y" => 104
+            // Dragula initialisieren
+            const drake = dragula(Array.from(allContainers), {
+                revertOnSpill: true,
+                copy: false
+            });
 
-      7 => array:3 [▼
-        "type" => "ST"
-        "x" => 832
-        "y" => 104
-    ]
-  ] --}}
+            // Drop-Event verarbeiten
+            drake.on('drop', (el, target, source) => {
+                const playerId = el.getAttribute('data-item-id');
+                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'] }}" 
-                @click="$store.main.console({{$key}})"
-                id="{{ $ele['player_id'] }}"
-                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'] }}
+
+                {{--  If the item lands in the "trash" zone, remove it entirely 
+                    if (targetZone === 'trash') {
+                        el.remove();
+                    } 
+                --}}
+            });
+        });
+    }
+}" 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>
+        @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>
-        @else
-            <div class="size-24"></div>
-        @endif
-    @endforeach
-</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>