wip player app
This commit is contained in:
salam committed
1 parent
f9712cbd25
commit
6b1a68e738
13 files changed
+537
-311
No files matched your search
@@ -235,6 +235,8 @@ less padding in table
|
||||
}
|
||||
}
|
||||
|
||||
.dragging {
|
||||
@apply border-red-500
|
||||
.chessboard {
|
||||
background-position: top right;
|
||||
background-size: 512px auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Vendored
+3
-2
@@ -1,4 +1,5 @@
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
|
||||
window.axios = axios;
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
|
||||
@@ -0,0 +1,52 @@
|
||||
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}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg fill="#000000" height="300px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290 290" xml:space="preserve">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path color-rendering="auto" image-rendering="auto" shape-rendering="auto" color-interpolation="sRGB" d="M45,0 c-2.761,0-5,2.239-5,5v280c0,2.761,2.239,5,5,5h200c2.761,0,5-2.239,5-5V5c0-2.761-2.239-5-5-5L45,0L45,0z M50,10h50v15 c0,2.761,2.239,5,5,5h80c2.761,0,5-2.239,5-5V10h50v129.963h-50.285c-2.5-22.452-21.612-40-44.715-40 c-23.103,0-42.213,17.548-44.713,40H50V10z M110,10h70v10h-70V10z M145,109.963c17.69,0,32.229,12.997,34.643,30h-69.283 C112.773,122.96,127.31,109.963,145,109.963z M50,149.963h50.287c2.5,22.453,21.61,40,44.713,40s42.215-17.547,44.715-40H240V280 h-50v-15c0-2.761-2.239-5-5-5h-80c-2.761,0-5,2.239-5,5v15H50V149.963L50,149.963z M110.359,149.963h69.283 c-2.413,17.003-16.952,30-34.643,30C127.31,179.963,112.773,166.966,110.359,149.963z M110,270h70v10h-70C110,280,110,270,110,270z"></path> </g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,68 +1,98 @@
|
||||
@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
|
||||
{{-- In Tailwind CSS, a value of 24 equals 96 pixels (or 6rem) --}}
|
||||
<div class="w-full">
|
||||
<div class="pb-5 flex flex-row justify-between">
|
||||
<div class="flex flex-row gap-3">
|
||||
<x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
|
||||
ATTACK
|
||||
</x-filament::button>
|
||||
<x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
|
||||
MIDFIELD
|
||||
</x-filament::button>
|
||||
<x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
|
||||
DEFENCE
|
||||
</x-filament::button>
|
||||
<x-filament::button wire:click="openNewUserModal" color="gray" size="sm" class="w-24">
|
||||
GOALKEEPER
|
||||
</x-filament::button>
|
||||
</div>
|
||||
<div class="flex flex-row 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="info" icon="phosphor-calculator">
|
||||
Calculate
|
||||
</x-filament::button>
|
||||
<x-filament::button wire:click="openNewUserModal" color="info" icon="phosphor-copy">
|
||||
Copy
|
||||
</x-filament::button>
|
||||
</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 class="chessboard grid w-258 h-182 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
|
||||
@else
|
||||
@foreach ($elements as $pos)
|
||||
@if ($pos)
|
||||
<div class="size-24 bg-white/30 inset-shadow-sm">
|
||||
<div class="font-black text-3xl text-center text-white/25 p-3">
|
||||
{{ $pos }}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="size-24"></div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
{{-- <div class="chessboard grid grid-cols-10 w-240 pr-3 gap-0 bg-no-repeat bg-size-[466px_672px] bg-position-[top_left_476px] overflow-hidden"
|
||||
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-22 m-1 z-20 select-none cursor-grab grid grid-cols-1 gap-3 text-xs">
|
||||
<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-22 m-1"></div>
|
||||
@endif
|
||||
@endforeach
|
||||
@else
|
||||
@foreach ($elements as $pos)
|
||||
@if ($pos)
|
||||
<div class="size-22 m-1 bg-white/30 rounded">
|
||||
<div class="font-black text-3xl text-center text-white/25 p-3">
|
||||
{{ $pos }}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="size-22 m-1"></div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
</div> --}}
|
||||
</div>
|
||||
Reference in new issue
Block a user