salam/nuhodds_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
salam committed 2026-09-04 20:12:23 +02:00
1 parent 884b468839
commit d46fa5c51c
13 files changed
+331 -261
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/livewire/player-calculator.blade.php
+64 -44
View File
@@ -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>