69 lines
3.4 KiB
PHP
69 lines
3.4 KiB
PHP
@php
|
|
use Illuminate\Support\HtmlString;
|
|
@endphp
|
|
|
|
|
|
<div class="grid grid-cols-6 gap-10" class="drag-and-drop" x-data="{ adding: false, removing: false }">
|
|
<div class="col-span-2 h-full drag-and-drop__container drag-and-drop__container--from">
|
|
@foreach ($player as $position => $names)
|
|
<div class="text-bold py-2"> {{ ucfirst(strtolower($position)) }}</div>
|
|
<div class="grid grid-cols-2 gap-2 cursor-grab drag-and-drop__items"
|
|
:class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
|
|
x-on:drop.prevent="
|
|
const target = event.target.closest('div');
|
|
const element = document.getElementById(event.dataTransfer.getData('text/plain'));
|
|
target.appendChild(element);
|
|
"
|
|
x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
|
|
@foreach ($names as $ss_player_id => $name)
|
|
<div color="gray" id="{{ $ss_player_id }}"
|
|
class="border border-gray-200 bg-gray-100 p-1 rounded text-xs cursor-grap drag-and-drop__item"
|
|
:class="{ 'drag-and-drop__item--dragging': dragging }"
|
|
x-on:dragstart.self="
|
|
dragging = true;
|
|
event.dataTransfer.effectAllowed='move';
|
|
event.dataTransfer.setData('text/plain', event.target.id);
|
|
"
|
|
x-on:dragend="dragging = false" x-data="{ dragging: false }" draggable="true">
|
|
{{ new HtmlString($name) }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="col-span-3 h-full drag-and-drop__container drag-and-drop__container--to">
|
|
<div class="drag-and-drop__items grid grid-cols-5 gap-2 justify-center w-130 bg-size-[100%_100%] p-2 border-5 border-green-600"
|
|
style="background-image:url({{ asset('images/soccerfield.png') }});">
|
|
@foreach ($positions as $pos)
|
|
@if ($pos)
|
|
<div class="border-5 border-white/30 h-full aspect-square p-1 m-1 rounded-xl"
|
|
:class="{ 'drag-and-drop__items--adding': adding }" x-on:drop="adding = false"
|
|
x-on:drop.prevent="
|
|
const target = event.target.closest('ul');
|
|
const element = document.getElementById(event.dataTransfer.getData('text/plain'));
|
|
target.appendChild(element);
|
|
"
|
|
x-on:dragover.prevent="adding = true" x-on:dragleave.prevent="adding = false">
|
|
<div class="text-white/30 font-black text-center text-xl">
|
|
{{ $pos }}
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div></div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
|
|
Reset
|
|
</x-filament::button>
|
|
<x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-calculator">
|
|
Calculate
|
|
</x-filament::button>
|
|
<x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-copy">
|
|
Copy
|
|
</x-filament::button>
|
|
</div>
|
|
</div>
|