Skip to content

Commit

Permalink
update show view, such as similar games
Browse files Browse the repository at this point in the history
  • Loading branch information
@abrahamfast
abrahamfast committed Aug 13, 2020
1 parent a57c535 commit 934f9ed
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 118 deletions.
8 changes: 3 additions & 5 deletions app/Http/Controllers/GameController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,21 @@ public function store(Request $request)
/**
* Display the specified resource.
*
* @param int $id
* @param string $slug
* @return \Illuminate\Http\Response
*/
public function show($slug)
{
$endpoint = "https://api-v3.igdb.com/games";
$game = Http::withHeaders(config('services.igdb'))->withOptions([
$game = Http::withHeaders(config('services.igdb'))->withOptions([
'body' => "
fields *, name, cover.*, first_release_date, popularity,platforms.abbreviation,rating, slug, involved_companies.company.*, genres.*;
fields rating,screenshots.*, name,videos.*, cover.*, first_release_date, popularity, platforms.abbreviation ,slug, involved_companies.company.*, genres.*, similar_games.*, similar_games.cover.*,summary;
where slug = \"{$slug}\";
"
])->get($endpoint)->json();

abort_if(!$game, 404);

dump($game);

return view('show', [
'game' => $game[0]
]);
Expand Down
163 changes: 50 additions & 113 deletions resources/views/show.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
<span>{{ $game['involved_companies'][0]['company']['name'] }}</span>
&middot;
@foreach($game['platforms'] as $platform)
@if(array_key_exists('abbreviation', $platform))
{{ $platform['abbreviation'] }}
@endif
@endforeach
@if(array_key_exists('abbreviation', $platform))
{{ $platform['abbreviation'] }}
@endif
@endforeach
</div>
<div class="flex flex-wrap items-center mt-8">
<div class="flex items-center">
<div class="w-16 h-16 bg-gray-800 rounded-full">
<div class="font-semibold text-xs flex justify-center items-center h-full">90%</div>
<div class="font-semibold text-xs flex justify-center items-center h-full">{{ floor($game['rating'].'%') }}</div>
</div>
<div class="ml-4 text-xs">Member <br> Score</div>
</div>
<div class="flex items-center">
<div class="w-16 h-16 bg-gray-800 rounded-full ml-12">
<div class="font-semibold text-xs flex justify-center items-center h-full">88%</div>
<div class="font-semibold text-xs flex justify-center items-center h-full">{{ floor($game['rating']).'%' }}</div>
</div>
<div class="ml-4 text-xs">Critic <br> Score</div>
</div>
Expand All @@ -53,127 +53,64 @@
</div>
</div>
</div>
<p class="mt-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam illo id dicta eaque dolorum. Placeat repellendus accusantium sequi et dolorem, repellat fugit consequuntur exercitationem aut quasi, labore eveniet. Necessitatibus corporis soluta quas voluptate praesentium, fugiat illum nesciunt porro autem quod.
</p>
<p class="mt-12">{{ $game['summary'] }}</p>

<div class="mt-12">
<button class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blud-600 rounded transition ease-in-out duration-150">
<span class="ml-2">Play Trailer</span>
</button>
{{-- <button class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blud-600 rounded transition ease-in-out duration-150">
<span class="ml-2">Play Trailer</span>
</button> --}}
<a href="https://youtube.com/watch/{{$game['videos'][0]['video_id']}}" class="flex-inline bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blud-600 rounded transition ease-in-out duration-150">
<span class="ml-2">Play Trailer</span>
</a>
</div>
</div>
</div>
</div>
<div class="images-conainer border-b border-gray-800 pb-12 mt-8">
<h2 class="text-blue-500 uppercase tracking-wide font-semibold">Images</h2>
<div class="grid grid-cols-1 md:grid-cols-2 md:grid-cols-3 gap-12 mt-8">
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
<div>
<a href="#">
<img src="/img/gg1.jpg" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
@foreach($game['screenshots'] as $screenshot)
<div>
<a href="{{ Str::replaceFirst('thumb', 'cover_huge', $screenshot['url']) }}">
<img src="{{ Str::replaceFirst('thumb', 'cover_big', $screenshot['url']) }}" alt="screenshot" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
</div>
@endforeach

</div>
</div>

<div class="similar-games mt-8 mb-8">
<h2 class="text-blue-500 uppercase tracking-wide font-semibold">Similar Games</h2>
<div class="similar-games text-sm grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 xl:grid-6 gap-12 gap-12">
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
</div>
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
<div class="game mt-8">
<div class="relative inline-block">
<a href="#">
<img src="/img/gg1.jpg" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
80%
<div class="similar-games text-sm grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 xl:grid-6 gap-12 gap-12">
@foreach($game['similar_games'] as $game)
<div class="game mt-8">
<div class="relative inline-block">
@if(array_key_exists('cover', $game))
<a href="{{ route('game.show', $game['slug']) }}">
<img src="{{ Str::replaceFirst('thumb', 'cover_big', $game['cover']['url']) }}" alt="game cover" class="hover:opacity-75 transition ease-in-out duration-150">
</a>
@endif
@isset($game['rating'])
<div class="absolute bottom-0 right-0 w-16 h-16 bg-gray-800 rounded-full progress-list-item">
<div class="font-semibold text-xs flex justify-center items-center h-full">
{{ round($game['rating']).'%' }}
</div>
</div>
@endisset
</div>
<a href="{{ route('game.show', $game['slug']) }}" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">{{ $game['name'] }}</a>
<div class="text-gray-400 mt-1">
@if(array_key_exists('platfroms', $game))
@foreach($game['platforms'] as $platform)
@if(array_key_exists('abbreviation', $platform))
{{ $platform['abbreviation'] }}
@endif
@endforeach
@endif
</div>
</div>
@endforeach
</div>
</div>
<a href="#" class="block text-base font-semibold leading-tight hover:text-gray-400 mt-8">Final Fantasy & remak</a>
<div class="text-gray-400 mt-1">Playstation4</div>
</div>
</div>
</div>

</div>
Expand Down

0 comments on commit 934f9ed

Please sign in to comment.