37 lines
1.1 KiB
PHP
37 lines
1.1 KiB
PHP
@php
|
|
$size = 'h-32 md:h-44 lg:h-52';
|
|
|
|
$main_class = 'cursor-pointer relative transform-style-3d transition duration-500';
|
|
$base_class = "absolute backface-hidden flex items-center justify-center border w-full $size transition duration-500 px-4 py-2";
|
|
$frontface_class = "$base_class z-10 bg-gray-100 hover:bg-gray-200 rotate-y-0 transform hover:scale-105";
|
|
$backface_class = "$base_class rotate-y-180";
|
|
|
|
if ($flipped) {
|
|
$main_class .= ' rotate-y-180';
|
|
}
|
|
|
|
if ($win) {
|
|
$backface_class .= ' bg-green-300 hover:bg-green-400';
|
|
} else {
|
|
$backface_class .= ' bg-blue-300 hover:bg-blue-400';
|
|
}
|
|
|
|
@endphp
|
|
|
|
<div class="{{ $size }} perspective">
|
|
<div {!! $attributes->merge(['class' => $main_class]) !!}>
|
|
|
|
{{-- Card frontface --}}
|
|
<div class="{{ $frontface_class }}">
|
|
<h2 class="absolute top-1 left-2 text-xl text-gray-600">#{{ $number }}</h2>
|
|
<p>
|
|
<x-card-text :card="$card" />
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Card backface --}}
|
|
<div class="{{ $backface_class }}">
|
|
<img class="h-full" src="{{ url('img/logo.png') }}" />
|
|
</div>
|
|
</div>
|
|
</div>
|