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.
118 lines
8.3 KiB
PHTML
118 lines
8.3 KiB
PHTML
<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);
|
|
|
|
});
|
|
</script>
|
|
</x-slot>
|
|
<x-slot name="title">Startseite</x-slot>
|
|
|
|
<x-slot name="content">
|
|
<div class="container px-4 mx-auto">
|
|
<h2 class="font-semibold tracking-wide text-blue-500 uppercase">Popular Games</h2>
|
|
<div class="grid grid-cols-1 gap-12 pb-16 text-sm border-b border-gray-600 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-6 popular-games">
|
|
@foreach ($popularGames as $game)
|
|
<x-game-card :game="$game" />
|
|
@endforeach
|
|
</div> <!-- Ende von Popular Games -->
|
|
|
|
<!--Start Recently Reviewed-->
|
|
<div class="flex flex-col my-10 lg:flex-row">
|
|
<div class="w-full mr-0 lg:mr-32 lg:w-3/4 recently-viewed">
|
|
<h2 class="font-semibold tracking-wide text-blue-500 uppercase">Recently Viewed</h2>
|
|
<div class="mt-8 space-y-12 recently-reviewed-container">
|
|
@foreach ($recentlyReviewed as $review)
|
|
<div class="flex px-6 py-6 bg-gray-800 rounded-lg shadow-md game">
|
|
<div class="relative flex-none">
|
|
<a href="#">
|
|
@if(isset($review['cover']))
|
|
<img src="{{Str::replaceFirst('thumb', 'cover_big', $review['cover']['url'])}}" 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 ($review['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{{$review['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="{{$review['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>
|
|
<!--<div class="absolute bottom-0 right-0 w-8 h-8 bg-gray-600 rounded-full" style="right:-20px; bottom:-20px">
|
|
<div class="flex items-center justify-center h-full text-xs font-semibold">
|
|
{{$review['rating']}}
|
|
</div>
|
|
</div>-->
|
|
@endif
|
|
</div>
|
|
<div class="ml-6 lg:ml-12">
|
|
<a href="#" class="block mt-4 text-lg font-semibold leading-tight hover:text-gray-400">
|
|
{{$review['name']}}
|
|
</a>
|
|
<div class="mt-1 text-gray-400">
|
|
{{$review['platforms']}}
|
|
</div>
|
|
<p class="hidden mt-6 text-gray-400 lg:block">{{translate($review['summary'],'de')}}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div> <!-- Ende Recently viewed -->
|
|
<div class="mt-12 lg:w-1/4 lg:mt-0 most-anticipated">
|
|
<h2 class="font-semibold tracking-wide text-blue-500 uppercase">Most anticipated</h2>
|
|
<div class="mt-8 space-y-10 most-anticipated-container">
|
|
@foreach ($mostAnticipated as $mostA)
|
|
<x-game-card-small :game='$mostA' />
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- Ende container -->
|
|
</x-slot>
|
|
</x-layout>
|