You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
3.2 KiB
PHTML
36 lines
3.2 KiB
PHTML
<div class="mt-8 game">
|
|
<div class="relative inline-block">
|
|
<a href="{{ route('games.show', $game['slug']) }}">
|
|
@if(isset($game['cover']))
|
|
<img src="{{$game['coverImageUrl']}}" alt="game cover" class="w-48 transition duration-150 ease-in-out hover:opacity-75">
|
|
@else
|
|
<svg class="w-10 h-10 fill-current" viewBox="0 -6 96 96" xmlns="http://www.w3.org/2000/svg"><g data-name="Group 9" transform="translate(-434 -708)" stroke="#2d4d68" stroke-linejoin="round" stroke-width="4"><path data-name="Path 51" d="M449 730v19a15 15 0 0 0 9 13.744V780a10 10 0 0 0 10 10h28a10 10 0 0 0 10-10v-17.256A15 15 0 0 0 515 749v-19Z" fill="#ffeecd"/><path data-name="Path 52" d="M459 764h-1v16a10 10 0 0 0 10 10h1v-16a10 10 0 0 0-10-10Z" fill="#c17a61"/><path data-name="Path 53" d="M505 764h1v16a10 10 0 0 1-10 10h-1v-16a10 10 0 0 1 10-10Z" fill="#c17a61"/><circle data-name="Ellipse 12" cx="11" cy="11" r="11" transform="translate(482 731)" fill="#fff" stroke-linecap="round"/><circle data-name="Ellipse 13" cx="11" cy="11" r="11" transform="translate(460 731)" fill="#fff" stroke-linecap="round"/><path data-name="Path 66" d="M523 710h-19v2a9.973 9.973 0 0 1-4.016 8H500h-.018a9.942 9.942 0 0 1-5.64 1.983l-.015.017h-24.654l-.015-.017a9.942 9.942 0 0 1-5.64-1.983H464h.016a9.973 9.973 0 0 1-4.016-8v-2h-19a5 5 0 0 0 0 10h6a5 5 0 0 0 0 10h11.222a26.6 26.6 0 0 0 3.278 0 15.5 15.5 0 0 1 15.5 15.5c0 .506-.028 1.006-.076 1.5H477v13.7a5 5 0 0 0 10 0V747h.076a15.498 15.498 0 0 1-.076-1.5 15.5 15.5 0 0 1 15.5-15.5 26.6 26.6 0 0 0 3.278 0H517a5 5 0 0 0 0-10h6a5 5 0 0 0 0-10Z" fill="#9b8772"/><rect data-name="Rectangle 64" width="10" height="21" rx="5" transform="translate(477 744)" fill="#fbb141"/></g></svg>
|
|
@endif
|
|
</a>
|
|
@if ($game['rating'])
|
|
<div class="absolute bottom-0 right-0 w-8 h-8 bg-gray-600 rounded-full" style="right:-20px; bottom:-20px">
|
|
<div id="memberRating{{$game['slug']}}"
|
|
x-data="ratingProgressBar(0)"
|
|
x-init="startCountingSmall"
|
|
class="inline-flex items-center justify-center w-8 h-8 overflow-hidden text-white bg-gray-400 rounded-full"
|
|
x-bind:maxCount="maxCount"
|
|
data-max-count="{{$game['rating']}}">
|
|
<svg class="w-8 h-8">
|
|
<g transform="rotate(-90 16 16)">
|
|
<circle class="text-gray-500" stroke-width="2" stroke="currentColor" fill="transparent" r="12" cx="16" cy="16" />
|
|
<circle class="text-white" stroke-width="2" :stroke-dasharray="circumference" :stroke-dashoffset="circumference - count / 100 * circumference" stroke-linecap="round" stroke="currentColor" fill="transparent" r="12" cx="16" cy="16" />
|
|
<span class="absolute text-[10px] text-white" x-text="formatedcount"></span>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<a href="#" class="block mt-5 text-base font-semibold leading-tight text-white hover:text-gray-400">
|
|
{{$game['name']}}
|
|
</a>
|
|
<div class="mt-1 text-gray-400">
|
|
{{$game['platforms']}}
|
|
</div>
|
|
</div>
|