[Update] Re:CAP

- Added button for full year recap - Added buttons to select specific months - Added empty recap month view - Updated logic for default selected month when viewing a recap year
Kurozora · Nov 4, 2024 · aa95331 · aa95331
1 parent c4b47ca
commit aa95331
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 36 deletions.
diff --git a/app/Livewire/Recap/Index.php b/app/Livewire/Recap/Index.php
@@ -5,6 +5,7 @@
 use App\Models\Anime;
 use App\Models\Game;
 use App\Models\Manga;
+use App\Models\Recap;
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Contracts\View\Factory;
 use Illuminate\Contracts\View\View;
@@ -23,6 +24,13 @@ class Index extends Component
      */
     public ?int $year = null;
 
+    /**
+     * The selected month.
+     *
+     * @var ?int $month
+     */
+    public ?int $month = null;
+
     /**
      * Determines whether to load the page.
      *
@@ -37,42 +45,29 @@ class Index extends Component
      */
     public bool $loadingScreenEnabled = true;
 
-    /**
-     * The query strings of the component.
-     *
-     * @return array
-     */
-    protected function queryString(): array
-    {
-        return [
-            'year' => ['except' => now()->year],
-        ];
-    }
-
     /**
      * Prepare the component.
      *
      * @return void
      */
     public function mount(): void
     {
-        if (empty($this->year)) {
-            $this->year = now()->year;
+        $this->year = now()->year;
+
+        if (now()->month !== 12) {
+            $this->month = now()->subMonth()->month;
         }
     }
 
-    /**
-     * Get the month.
-     *
-     * @return int
-     */
-    public function getMonthProperty(): int
+    public function updatingYear(int $year): void
     {
-        if ($this->year == now()->year) {
-            return now()->subMonth()->month;
+        if ($year === now()->year) {
+            if (now()->month !== 12) {
+                $this->month = now()->subMonth()->month;
+            }
+        } else {
+            $this->month = null;
         }
-
-        return 12;
     }
 
     /**
@@ -139,22 +134,32 @@ public function getRecapsProperty(): Collection|LengthAwarePaginator
     /**
      * Get the user's recap years.
      *
-     * @return Collection|LengthAwarePaginator
+     * @return Collection
      */
-    public function getRecapYearsProperty(): Collection|LengthAwarePaginator
+    public function getRecapYearsProperty(): Collection
     {
         if (!$this->readyToLoad) {
             return collect();
         }
 
         $recapYears = auth()->user()->recaps()
+            ->select('year', 'month')
             ->distinct()
             ->orderBy('year', 'desc')
-            ->pluck('year');
+            ->orderBy('month')
+            ->get();
+
+        if (now()->month !== 12) {
+            $recapYears->push(Recap::make([
+                'year' => now()->year,
+                'month' => now()->month,
+            ]));
+        }
 
         $this->loadingScreenEnabled = false;
 
-        return $recapYears;
+        return $recapYears
+            ->groupBy('year');
     }
 
     /**

diff --git a/app/Models/Recap.php b/app/Models/Recap.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Carbon\Month;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -47,6 +48,16 @@ public function getBackgroundColor2Attribute(): string
         return generate_random_color($this->year - 3);
     }
 
+    /**
+     * The recap’s month’s name.
+     *
+     * @return string
+     */
+    public function getMonthNameAttribute(): string
+    {
+        return Month::from($this->month)->name;
+    }
+
     /**
      * Returns the model related to the media rating.
      *

diff --git a/resources/views/livewire/recap/index.blade.php b/resources/views/livewire/recap/index.blade.php
@@ -101,31 +101,81 @@ class="absolute pl-4 pr-4 w-full bg-black/30 backdrop-blur backdrop-saturate-200
             >
                 <div class="absolute top-0 left-0 bottom-0 right-0 blur backdrop-blur" style="z-index: -1;"></div>
 
-                <div class="max-w-7xl mx-auto pl-4 pr-4 py-6 sm:px-6">
+                <div class="max-w-7xl mx-auto pl-4 pr-4 py-6 sm:px-6 h-screen">
                     <ul class="m-0 mb-4">
                         <li class="pb-10">
                             <p class="text-2xl text-white font-semibold">{{ __('Select a year to see your recap') }}</p>
                         </li>
 
-                        @foreach ($this->recapYears as $recapYear)
+                        @foreach ($this->recapYears as $year => $recap)
                             <li
-                                wire:key="{{ uniqid($recapYear, true) }}"
+                                id="recap{{  $year }}"
+                                wire:key="{{ uniqid($year, true) }}"
                             >
+                                <style>
+                                    #recap{{  $year }} button:hover {
+                                        color: {{ $recap->first()->background_color_2 }};
+                                    }
+                                </style>
+
                                 <button
-                                    class="flex w-full pt-6 text-6xl text-white font-semibold hover:text-orange-500"
+                                    class="flex w-full pt-6 text-6xl text-white font-semibold"
                                     x-bind:class="{
-                                        'opacity-25 hover:opacity-100': year !== {{ $recapYear }}
+                                        'opacity-25 hover:opacity-100': year !== {{ $year }}
                                     }"
-                                    x-on:click="loadingScreenEnabled = true; year = {{ $recapYear }}"
+                                    x-on:click="loadingScreenEnabled = true; year = {{ $year }}"
                                 >
-                                    <p>{{ __('’:x', ['x' => substr($recapYear, -2)]) }}</p>
+                                    <p>{{ __('’:x', ['x' => substr($year, -2)]) }}</p>
                                 </button>
                             </li>
                         @endforeach
                     </ul>
                 </div>
             </div>
         </header>
+
+        <div class="max-w-7xl mx-auto pl-4 pr-4 py-6 sm:px-6">
+            <div
+                x-data="{
+                    month: @entangle('month').live
+                }"
+                class="flex justify-between gap-2 whitespace-nowrap overflow-x-scroll no-scrollbar"
+            >
+                @if ($this->year !== now()->year || now()->month === 12)
+                    <template x-if="month === null">
+                        <x-tinted-pill-button>
+                            <p class="pr-2 pl-2 text-base">{{ $this->year }}</p>
+                        </x-tinted-pill-button>
+                    </template>
+
+                    <template x-if="month !== null">
+                        <x-tinted-pill-button
+                            color="transparent"
+                            x-on:click="month = null"
+                        >
+                            <p class="pr-2 pl-2 text-base text-white">{{ $this->year }}</p>
+                        </x-tinted-pill-button>
+                    </template>
+                @endif
+
+                @foreach ($this->recapYears->get($this->year) as $recap)
+                    <template x-if="month === {{ $recap->month }}">
+                        <x-tinted-pill-button>
+                            <p class="pr-2 pl-2 text-base">{{ substr($recap->month_name, 0, 3) }}</p>
+                        </x-tinted-pill-button>
+                    </template>
+
+                    <template x-if="month !== {{ $recap->month }}">
+                        <x-tinted-pill-button
+                            color="transparent"
+                            x-on:click="month = {{ $recap->month }}"
+                        >
+                            <p class="pr-2 pl-2 text-base text-white">{{ substr($recap->month_name, 0, 3) }}</p>
+                        </x-tinted-pill-button>
+                    </template>
+                @endforeach
+            </div>
+        </div>
     @endif
 
     <div
@@ -145,7 +195,7 @@ class="mt-36"
                 <div class="flex flex-col items-center mt-12">
                     <h2 class="max-w-sm text-2xl text-center font-semibold md:text-4xl">
                         @if ($this->year == now()->year)
-                            {{ __('Series that defined your arc in :x', ['x' => now()->subMonth()->monthName]) }}
+                            {{ __('Series that defined your arc in :x', ['x' => now()->month($this->month)->monthName]) }}
                         @else
                             {{ __('Series that defined your arc in :x', ['x' => $this->year]) }}
                         @endif
@@ -384,6 +434,18 @@ class="pb-5"
                     </article>
                 @endif
             </section>
+        @elseif ($this->year === now()->year && $this->month === now()->month)
+            <div class="flex flex-col items-center justify-center" style="height: calc(100vh - 180px);">
+                <h2 class="max-w-sm text-center text-xl font-semibold md:max-w-2xl md:text-4xl">
+                    @if (now()->month === 12)
+                        {{ __(':x Re:CAP is still in progress. Check back in a week.', ['x' => now()->monthName]) }}
+                    @else
+                         {{ __(':x Re:CAP is still in progress. Check back in early :y.', ['x' => now()->monthName, 'y' => now()->addMonth()->monthName]) }}
+                    @endif
+                </h2>
+
+                <x-link-button class="mt-12" href="/">{{ __('Keep Tracking on :x', ['x' => config('app.name')]) }}</x-link-button>
+            </div>
         @endif
     </div>