<x-layout> <x-slot name="scripts"> <script> function ratingProgressBar(maxCount) { return { count: 0, formatedcount: "0 %", maxCount: maxCount, startCounting() { this.maxCount = parseInt(this.$el.getAttribute('data-max-count')); // Set maxCount from data attribute this.circumference = 2 * Math.PI * 25; const updateCount = () => { if (this.count < this.maxCount) { this.count++; this.formatedcount = "" + this.count + "%"; requestAnimationFrame(updateCount); } } updateCount(); }, startCountingSmall() { this.maxCount = parseInt(this.$el.getAttribute('data-max-count')); // Set maxCount from data attribute this.circumference = 2 * Math.PI * 12; const updateCount = () => { if (this.count < this.maxCount) { this.count++; this.formatedcount = "" + this.count + "%"; requestAnimationFrame(updateCount); } } updateCount(); }, } } window.addEventListener('DOMContentLoaded', () => { const maxCount = 70; // Set your desired maxCount value here document.getElementById('memberRating').setAttribute('maxCount', maxCount); document.getElementById('criticsRating').setAttribute('maxCount', {{$game['critics_score']}}); const similarGames = {!! json_encode($game['similarGames']) !!}; // Convert the PHP array to a JavaScript object similarGames.forEach(similar_game => { const memberRatingElem = document.getElementById(`memberRating${similar_game.slug}`); const maxCountMember = similar_game.rating; // Set the maxCount value for member score memberRatingElem.setAttribute('maxCount', maxCountMember); // Call ratingProgressBar() for each similar game const progressBar = ratingProgressBar(maxCountMember); progressBar.startCounting(); }); }); </script> </x-slot> <x-slot name="title">Details</x-slot> <x-slot name="content"> <div class="container p-4 sm:ml-64"> <div class="w-screen p-4 mb-5 border-b border-gray-400 game-details lg:flex-row"> <div class="mt-16 "> @if(array_key_exists('cover',$game)) <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 </div> <div class="w-screen"> <h2 class="mt-1 text-3xl font-semibold leading-tight text-white ">{{$game['name']}}</h2> <div class="w-5/6 text-gray-400"> <span> {{$game['genres']}} </span> · <span> {{$game['formatedCompanies']}} </span> @if(isset($game['platforms'])) · <span> {{$game['platforms']}} </span> @endif </div> <div class="flex flex-wrap items-center mt-8 "> <div class="flex items-center"> <div id="memberRating" x-data="ratingProgressBar(0)" x-init="startCounting" class="inline-flex items-center justify-center w-16 h-16 overflow-hidden text-white bg-gray-400 rounded-full" x-bind:maxCount="maxCount" data-max-count={{$game['member_score']}}> <svg class="w-20 h-20"> <g transform="rotate(-90 32 40)"> <circle class="text-gray-500" stroke-width="5" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <circle class="text-white" stroke-width="5" :stroke-dasharray="circumference" :stroke-dashoffset="circumference - count / 100 * circumference" stroke-linecap="round" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <span class="absolute text-white text-md" x-text="formatedcount"></span> </g> </svg> </div> <div class="ml-4 text-xs">Member<br>Score</div> </div> <div class="flex items-center ml-6"> <div id="criticsRating" x-data="ratingProgressBar(0)" x-init="startCounting" class="inline-flex items-center justify-center w-16 h-16 overflow-hidden text-white bg-gray-400 rounded-full" x-bind:maxCount="maxCount" data-max-count="{{$game['critics_score']}}"> <svg class="w-20 h-20"> <g transform="rotate(-90 32 40)"> <circle class="text-gray-500" stroke-width="5" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <circle class="text-white" stroke-width="5" :stroke-dasharray="circumference" :stroke-dashoffset="circumference - count / 100 * circumference" stroke-linecap="round" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <span class="absolute text-white text-md" x-text="formatedcount"></span> </g> </svg> </div> <div class="ml-4 text-xs">Critic<br>Score</div> </div> <div class="flex items-center mt-4 ml-4 space-x-2 lg:mt-0"> @if ($game['social']['website']) <div class="w-8 h-8 text-gray-500 bg-gray-400 rounded-full"> <a href="{{$game['social']['website']['url']}}" class="hover:text-white "> <svg class="m-1 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path data-name="Path 195" d="M8 0a7.957 7.957 0 0 0-2.584.436.523.523 0 0 0-.1.037A7.978 7.978 0 1 0 8 0ZM1 8a7 7 0 0 1 4.473-6.52l1.344 1.106A.5.5 0 0 1 7 2.972v1.384a1.485 1.485 0 0 0-1.244-.135L4.025 4.8A1.5 1.5 0 0 0 3 6.221v.5a1.5 1.5 0 0 0 1.137 1.455L6 8.641a.5.5 0 0 1 .3.762l-1.045 1.568A1.493 1.493 0 0 0 5 11.8v2.512A7 7 0 0 1 1 8Zm4.961 6.695A.506.506 0 0 0 6 14.5v-2.7a.5.5 0 0 1 .084-.278l1.045-1.567a1.5 1.5 0 0 0-.885-2.287L4.379 7.2A.5.5 0 0 1 4 6.719v-.5a.5.5 0 0 1 .342-.475l1.73-.576a.5.5 0 0 1 .512.121l.562.563A.5.5 0 0 0 8 5.5V2.972a1.5 1.5 0 0 0-.547-1.158l-.823-.677a6.978 6.978 0 0 1 7.21 3.013l-2.7.676A1.5 1.5 0 0 0 10 6.281v.6a1.491 1.491 0 0 0 .829 1.342l.73.364a.5.5 0 0 1 .261.569l-.667 2.672a1.5 1.5 0 0 0 .394 1.425l.47.47a6.963 6.963 0 0 1-6.056.971Zm6.833-1.608-.54-.54a.5.5 0 0 1-.131-.475l.668-2.672a1.492 1.492 0 0 0-.785-1.705l-.73-.365A.5.5 0 0 1 11 6.882v-.6a.5.5 0 0 1 .379-.486l2.962-.74a6.948 6.948 0 0 1-1.547 8.032Z"/></svg> </a> </div> @endif @if ($game['social']['facebook']) <div class="w-8 h-8 text-gray-500 bg-gray-400 rounded-full"> <a href="{{$game['social']['facebook']['url']}}" class="hover:text-white "> <svg xmlns="http://www.w3.org/2000/svg" class="m-1 fill-current" viewBox="0 0 512 512" xml:space="preserve"><path style="display:inline" d="M283.122 122.174v46.583h83.424l-9.045 74.367h-74.379v268.375h-98.726V243.124h-51.443v-74.367h51.443v-56.302c0-27.82-2.096-41.02 9.725-62.578C205.948 28.32 239.308-.174 297.007.512c57.713.711 82.04 6.263 82.04 6.263l-12.501 79.257s-36.853-9.731-54.942-6.263c-18.065 3.469-28.482 14.597-28.482 42.405z"/></svg> </a> </div> @endif @if ($game['social']['twitter']) <div class="w-8 h-8 text-gray-500 bg-gray-400 rounded-full"> <a href="{{$game['social']['twitter']['url']}}" class="hover:text-white "> <svg xmlns="http://www.w3.org/2000/svg" class="m-1 fill-current" viewBox="0 0 512 512" xml:space="preserve"><path style="display:inline" d="M459.186 151.787c.203 4.501.305 9.023.305 13.565 0 138.542-105.461 298.285-298.274 298.285-59.209 0-114.322-17.357-160.716-47.104 8.212.973 16.546 1.47 25.012 1.47 49.121 0 94.318-16.759 130.209-44.884-45.887-.841-84.596-31.154-97.938-72.804a104.555 104.555 0 0 0 19.73 1.886c9.55 0 18.816-1.287 27.617-3.68-47.955-9.633-84.1-52.001-84.1-102.795 0-.446 0-.882.011-1.318a104.487 104.487 0 0 0 47.488 13.109c-28.134-18.796-46.637-50.885-46.637-87.262 0-19.212 5.16-37.218 14.193-52.7 51.707 63.426 128.941 105.156 216.072 109.536a105.436 105.436 0 0 1-2.718-23.896c0-57.891 46.941-104.832 104.832-104.832 30.173 0 57.404 12.734 76.525 33.102 23.887-4.694 46.313-13.423 66.569-25.438-7.827 24.485-24.434 45.025-46.089 58.002 21.209-2.535 41.426-8.171 60.222-16.505-14.051 21.018-31.833 39.48-52.313 54.263z"/></svg> </a> </div> @endif @if ($game['social']['instagram']) <div class="w-8 h-8 text-gray-500 bg-gray-400 rounded-full"> <a href="{{$game['social']['instagram']['url']}}" class="hover:text-white "> <svg class="m-1 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M20.445 5h-8.891A6.559 6.559 0 0 0 5 11.554v8.891A6.559 6.559 0 0 0 11.554 27h8.891a6.56 6.56 0 0 0 6.554-6.555v-8.891A6.557 6.557 0 0 0 20.445 5zm4.342 15.445a4.343 4.343 0 0 1-4.342 4.342h-8.891a4.341 4.341 0 0 1-4.341-4.342v-8.891a4.34 4.34 0 0 1 4.341-4.341h8.891a4.342 4.342 0 0 1 4.341 4.341l.001 8.891z"/><path d="M16 10.312c-3.138 0-5.688 2.551-5.688 5.688s2.551 5.688 5.688 5.688 5.688-2.551 5.688-5.688-2.55-5.688-5.688-5.688zm0 9.163a3.475 3.475 0 1 1-.001-6.95 3.475 3.475 0 0 1 .001 6.95zm5.7-10.484a1.363 1.363 0 1 1-1.364 1.364c0-.752.51-1.364 1.364-1.364z"/></svg> </a> </div> @endif </div> </div> <p class="w-[75%] mt-12 "> {{ $game['summary']}}<!-- translate($game['summary'],'de'--> </p> @if(isset($game['trailer'])) <div class="mt-12" x-data="{ isTrailerModalVisible: false }"> <button @click="isTrailerModalVisible = true" class="flex px-4 py-4 font-semibold text-white transition duration-150 ease-in-out bg-blue-500 rounded hover:bg-blue-600" > <svg class="w-6 fill-current" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg> <span class="ml-2">Trailer</span> </button> <template x-if="isTrailerModalVisible"> <div style="background-color: rgba(0, 0, 0, .5);" class="fixed top-0 left-0 z-50 flex items-center w-full h-full overflow-y-auto shadow-lg" > <div class="container mx-auto overflow-y-auto rounded-lg lg:px-32"> <div class="bg-gray-900 rounded"> <div class="flex justify-end pt-2 pr-4"> <button @click="isTrailerModalVisible = false" @keydown.escape.window="isTrailerModalVisible = false" class="text-3xl leading-none hover:text-gray-300" > × </button> </div> <div class="px-8 py-8 modal-body"> <div class="relative overflow-hidden responsive-container" style="padding-top: 56.25%"> <iframe width="560" height="315" class="absolute top-0 left-0 w-full h-full responsive-iframe" src="{{ $game['trailer'] }}" style="border:0;" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> </div> </div> </template> </div> @endif </div> </div> <!--Ende Game Details--> <div class="pb-12 mt-4 border-b border-gray-400 images-container lg:w-5/6" x-data="{ isImageModalVisible: false, image: '' }" > <h2 class="font-semibold tracking-wide text-blue-500 uppercase">Bilder</h2> <div class="grid grid-cols-1 gap-12 mt-8 md:grid-cols-2 lg:grid-cols-3"> @foreach ($game['screenshots'] as $screen ) <div> <a href="#" @click.prevent=" isImageModalVisible = true image='{{ $screen['huge'] }}' " > <img src="{{$screen['big']}}" alt="screenshot" class="transition duration-150 ease-in-out hover:opacity-75"> </a> </div> @endforeach </div> <template x-if="isImageModalVisible"> <div style="background-color: rgba(0, 0, 0, .5);" class="fixed top-0 left-0 z-50 flex items-center w-full h-full overflow-y-auto shadow-lg" > <div class="container mx-auto overflow-y-auto rounded-lg lg:px-32"> <div class="bg-gray-900 rounded"> <div class="flex justify-end pt-2 pr-4"> <button class="text-3xl leading-none hover:text-gray-300" @click="isImageModalVisible = false" @keydown.escape.window="isImageModalVisible = false" > × </button> </div> <div class="px-8 py-8 modal-body"> <img :src="image" alt="screenshot"> </div> </div> </div> </div> </template> </div><!--Ende images-container--> <div class="mt-4 border-b border-gray-400 similar-games-container lg:w-5/6"> <h2 class="font-semibold tracking-wide text-blue-500 uppercase">Ähnliche Spiele</h2> <div class="grid grid-cols-1 gap-12 pb-16 text-sm md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-6 popular-games"> @foreach ($game['similarGames'] as $similar_game) <x-game-card :game="$similar_game" /> <!--<div class="flex items-center"> <div id="memberRating{{$similar_game['slug']}}" x-data="ratingProgressBar(0)" x-init="startCounting" class="inline-flex items-center justify-center w-16 h-16 overflow-hidden text-white bg-gray-400 rounded-full" x-bind:maxCount="maxCount" data-max-count="{{$similar_game['rating']}}"> <svg class="w-20 h-20"> <g transform="rotate(-90 32 40)"> <circle class="text-gray-500" stroke-width="5" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <circle class="text-white" stroke-width="5" :stroke-dasharray="circumference" :stroke-dashoffset="circumference - count / 100 * circumference" stroke-linecap="round" stroke="currentColor" fill="transparent" r="25" cx="32" cy="40" /> <span class="absolute text-white text-md" x-text="formatedcount"></span> </g> </svg> </div> <div class="ml-4 text-xs">Member<br>Score<br>{{$similar_game['slug']}}</div> </div>--> @endforeach </div> </div><!-- Ende von similar Games --> </div> </x-slot> </x-layout>