wip

resources/js/dragndrop.js

@@ -50,3 +50,20 @@ interact(".piece").draggable({
         },
     },
 });
+
+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/views/livewire/player-calculator.blade.php

@@ -1,33 +1,51 @@
+@php
+    use Illuminate\Support\HtmlString;
+@endphp
+
 {{-- 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') }});">
-    @foreach ($grid as $key => $elements)
-        @if ($key % 2 == 0)
-            @foreach ($elements as $name)
-                @if (isset($name['color']))
-                    <x-filament::badge color="{{ $name['color'] }}" id="{{ $name['player_id'] }}"
-                        class="piece size-24 select-none aspect-square">
-                        <div>{{ $name['position'] }}</div>
-                        <div class="font-bold text-wrap">{{ $name['name'] }}</div>
-                        <div class="text-wrap">{{ $name['info'] }}</div>
-                    </x-filament::badge>
-                @else
-                    <div class="size-24"></div>
-                @endif
-            @endforeach
+    style="background-image:url({{ asset('svg/soccerfield.svg') }});" x-data x-init="
+            setTimeout(() => {
+                $store.main.loadPlayer({{ json_encode($grid) }});
+            }, 1000); ">
+
+  {{-- 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
+
+      7 => array:3 [▼
+        "type" => "ST"
+        "x" => 832
+        "y" => 104
+    ]
+  ] --}}
+
+    @foreach ($grid as $key => $ele)
+
+        @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'] }}
+            </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
-            @foreach ($elements as $pos)
-                @if ($pos)
-                    <div class="size-24 bg-white/10">
-                        <div class="font-black text-3xl text-center text-white/25 p-3">
-                            {{ $pos }}
-                        </div>
-                    </div>
-                @else
-                    <div class="size-24"></div>
-                @endif
-            @endforeach
+            <div class="size-24"></div>
         @endif
     @endforeach
-
-</div>
+</div>