Alex
/
Rauru-GameLib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
Rauru-GameLib/resources/views/games/show.blade.php

266 lines
20 KiB
PHTML
Raw Permalink Blame History

<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>
&middot;
<span>
{{$game['formatedCompanies']}}
</span>
@if(isset($game['platforms']))
&middot;
<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"
>
&times;
</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"
>
&times;
</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>
Reference in New Issue View Git Blame Copy Permalink