feat: migrate Supported Game Files to React

.eslintrc.yaml

@@ -102,6 +102,7 @@ rules:
   react/no-unescaped-entities: off
   react/prop-types: off
   react/react-in-jsx-scope: off
+  react/jsx-no-target-blank: off # we don't support the old browsers this rule tries to protect
 
   # disable some of the more aggressive unicorn rules
   unicorn/filename-case: off

app/Data/UserPermissionsData.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Data;
+
+use App\Models\User;
+use Spatie\LaravelData\Data;
+use Spatie\LaravelData\Lazy;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('UserPermissions')]
+class UserPermissionsData extends Data
+{
+    public function __construct(
+        public Lazy|bool $manageGameHashes,
+    ) {
+    }
+
+    public static function fromUser(?User $user): self
+    {
+        return new self(
+            manageGameHashes: Lazy::create(fn () => $user ? $user->can('manage', \App\Models\GameHash::class) : false),
+        );
+    }
+}

app/Platform/Controllers/GameHashController.php

@@ -5,13 +5,19 @@
 namespace App\Platform\Controllers;
 
 use App\Community\Enums\ArticleType;
+use App\Data\UserPermissionsData;
 use App\Http\Controller;
+use App\Models\Game;
 use App\Models\GameHash;
 use App\Models\User;
-use Illuminate\Contracts\View\View;
+use App\Platform\Data\GameData;
+use App\Platform\Data\GameHashData;
+use App\Platform\Data\GameHashesPagePropsData;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+use Inertia\Response as InertiaResponse;
 
 class GameHashController extends Controller
 {
@@ -20,12 +26,17 @@ protected function resourceName(): string
         return 'game-hash';
     }
 
-    public function index(Request $request): View
+    public function index(Request $request, Game $game): InertiaResponse
     {
         $this->authorize('viewAny', $this->resourceClass());
 
-        return view('resource.index')
-            ->with('resource', $this->resourceName());
+        $gameData = GameData::fromGame($game)->include('badgeUrl', 'forumTopicId', 'system');
+        $hashes = GameHashData::fromCollection($game->hashes);
+        $can = UserPermissionsData::fromUser($request->user())->include('manageGameHashes');
+
+        $props = new GameHashesPagePropsData($gameData, $hashes, $can);
+
+        return Inertia::render('game/[game]/hashes', $props);
     }
 
     public function show(GameHash $gameHash): void
@@ -70,7 +81,10 @@ public function update(Request $request, GameHash $gameHash): JsonResponse
         }
 
         $gameHash->update($updatedAttributes);
-        $this->logGameHashUpdate($gameHash, $changedAttributes, Auth::user());
+
+        /** @var User $user */
+        $user = Auth::user();
+        $this->logGameHashUpdate($gameHash, $changedAttributes, $user);
 
         return response()->json(['message' => __('legacy.success.update')]);
     }

app/Platform/Data/GameData.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Models\Game;
+use Spatie\LaravelData\Data;
+use Spatie\LaravelData\Lazy;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('Game')]
+class GameData extends Data
+{
+    public function __construct(
+        public int $id,
+        public string $title,
+        public Lazy|string $badgeUrl,
+        public Lazy|int $forumTopicId,
+        public Lazy|SystemData $system,
+    ) {
+    }
+
+    public static function fromGame(Game $game): self
+    {
+        return new self(
+            id: $game->id,
+            title: $game->title,
+            badgeUrl: Lazy::create(fn () => $game->badge_url),
+            forumTopicId: Lazy::create(fn () => $game->ForumTopicID),
+            system: Lazy::create(fn () => SystemData::fromSystem($game->system))
+        );
+    }
+}

app/Platform/Data/GameHashData.php

@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Models\GameHash;
+use Illuminate\Database\Eloquent\Collection;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+use Spatie\TypeScriptTransformer\Attributes\TypeScriptType;
+
+#[TypeScript('GameHash')]
+class GameHashData extends Data
+{
+    public function __construct(
+        public int $id,
+        public string $md5,
+        public ?string $name,
+        #[TypeScriptType('App\\Platform\\Data\\GameHashLabelData[]')]
+        public array $labels,
+        public ?string $patchUrl,
+    ) {
+    }
+
+    public static function fromGameHash(GameHash $gameHash): self
+    {
+        return new self(
+            id: $gameHash->id,
+            md5: $gameHash->md5,
+            name: $gameHash->name,
+            labels: GameHashLabelData::fromLabelsString($gameHash->labels),
+            patchUrl: $gameHash->patch_url,
+        );
+    }
+
+    /**
+     * @param Collection<int, GameHash> $gameHashes
+     * @return GameHashData[]
+     */
+    public static function fromCollection(Collection $gameHashes): array
+    {
+        return array_map(
+            fn ($gameHash) => self::fromGameHash($gameHash),
+            $gameHashes->all()
+        );
+    }
+}

app/Platform/Data/GameHashLabelData.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use Illuminate\Support\Facades\File;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('GameHashLabel')]
+class GameHashLabelData extends Data
+{
+    public function __construct(
+        public string $label,
+        public ?string $imgSrc
+    ) {
+    }
+
+    /**
+     * @return GameHashLabelData[]
+     */
+    public static function fromLabelsString(string $labels): array
+    {
+        $asArray = array_filter(explode(',', $labels));
+
+        return array_map(function (string $label) {
+            $imagePath = "/assets/images/labels/" . $label . '.png';
+            $publicPath = public_path($imagePath);
+
+            $imgSrc = File::exists($publicPath) ? asset($imagePath) : null;
+
+            return new self(
+                label: $label,
+                imgSrc: $imgSrc
+            );
+        }, $asArray);
+    }
+}

app/Platform/Data/GameHashesPagePropsData.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Data\UserPermissionsData;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('GameHashesPageProps')]
+class GameHashesPagePropsData extends Data
+{
+    /**
+     * @param GameHashData[] $hashes
+     */
+    public function __construct(
+        public GameData $game,
+        public array $hashes,
+        public UserPermissionsData $can,
+    ) {
+    }
+}

app/Platform/Data/SystemData.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Data;
+
+use App\Models\System;
+use Spatie\LaravelData\Data;
+use Spatie\LaravelData\Lazy;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript('System')]
+class SystemData extends Data
+{
+    public function __construct(
+        public int $id,
+        public string $name,
+        public Lazy|string $nameFull,
+        public Lazy|string $nameShort,
+    ) {
+    }
+
+    public static function fromSystem(System $system): self
+    {
+        return new self(
+            id: $system->id,
+            name: $system->name,
+            nameFull: Lazy::create(fn () => $system->name_full),
+            nameShort: Lazy::create(fn () => $system->name_short),
+        );
+    }
+}

app/Platform/RouteServiceProvider.php

@@ -41,6 +41,10 @@ public function map(): void
     protected function mapWebRoutes(): void
     {
         Route::middleware(['web', 'csp'])->group(function () {
+            Route::middleware(['inertia'])->group(function () {
+                Route::get('game/{game}/hashes', [GameHashController::class, 'index'])->name('game.hashes.index');
+            });
+
             // Route::get('achievement/{achievement}{slug?}', [AchievementController::class, 'show'])->name('achievement.show');
             // Route::resource('achievements', AchievementController::class)->only('index')->names(['index' => 'achievement.index']);
             // Route::get(

app/Policies/GameHashPolicy.php

@@ -4,7 +4,6 @@
 
 namespace App\Policies;
 
-use App\Enums\Permissions;
 use App\Models\GameHash;
 use App\Models\Role;
 use App\Models\User;
@@ -20,8 +19,7 @@ public function manage(User $user): bool
             Role::GAME_HASH_MANAGER,
             Role::DEVELOPER_STAFF,
             Role::DEVELOPER,
-        ])
-            || $user->getAttribute('Permissions') >= Permissions::Developer;
+        ]);
     }
 
     public function viewAny(?User $user): bool
@@ -47,8 +45,9 @@ public function update(User $user): bool
     {
         return $user->hasAnyRole([
             Role::GAME_HASH_MANAGER,
-        ])
-            || $user->getAttribute('Permissions') >= Permissions::Developer;
+            Role::DEVELOPER_STAFF,
+            Role::DEVELOPER,
+        ]);
     }
 
     public function delete(User $user, GameHash $gameHash): bool

resources/js/common/components/+vendor/BaseBreadcrumb.tsx

@@ -51,7 +51,7 @@ const BaseBreadcrumbLink = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn('hover:text-neutral-50 light:hover:text-neutral-950', className)}
+      className={cn('hover:text-neutral-200 light:hover:text-neutral-950', className)}
       {...props}
     />
   );
@@ -65,7 +65,7 @@ const BaseBreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('font-normal text-neutral-50 light:text-neutral-950', className)}
+      className={cn('font-normal text-neutral-200 light:text-neutral-950', className)}
       {...props}
     />
   ),

resources/js/common/components/+vendor/BaseButton.tsx

@@ -8,17 +8,18 @@ import { cn } from '@/utils/cn';
 
 const baseButtonVariants = cva(
   [
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium light:ring-offset-white',
+    'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium light:ring-offset-white',
     'focus-visible:outline-none focus-visible:ring-2 light:focus-visible:ring-neutral-950 focus-visible:ring-offset-2',
-    'disabled:pointer-events-none disabled:opacity-50 ring-offset-neutral-950 focus-visible:ring-neutral-300',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'ring-offset-neutral-950 focus-visible:ring-neutral-300',
+    'lg:active:translate-y-[1px] lg:active:scale-[0.98] lg:transition-transform lg:duration-100',
   ],
   {
     variants: {
       variant: {
         default:
-          'light:bg-neutral-900 light:text-neutral-50 light:hover:bg-neutral-900/90 bg-neutral-50 text-neutral-900 hover:bg-neutral-50/90',
-        destructive:
-          'light:bg-red-500 light:text-neutral-50 light:hover:bg-red-500/90 bg-red-900 text-neutral-50 hover:bg-red-900/90',
+          'bg-embed text-link border border-neutral-700 hover:bg-embed-highlight hover:text-link-hover hover:border-menu-link light:bg-white light:border-link light:text-link light:hover:bg-neutral-100',
+        destructive: 'bg-embed border btn-danger hover:text-link-hover hover:border-menu-link',
         outline:
           'border light:border-neutral-200 light:bg-white light:hover:bg-neutral-100 light:hover:text-neutral-900 border-neutral-800 bg-neutral-950 hover:bg-neutral-800 hover:text-neutral-50',
         secondary:
@@ -28,8 +29,8 @@ const baseButtonVariants = cva(
         link: 'light:text-neutral-900 underline-offset-4 hover:underline text-neutral-50',
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        default: 'h-9 px-4 py-2',
+        sm: 'h-[30px] rounded-md px-3 !text-[13px]',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },

resources/js/common/components/Embed/Embed.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@/test';
+
+import { Embed } from './Embed';
+
+describe('Component: Embed', () => {
+  it('renders without crashing', () => {
+    // ARRANGE
+    const { container } = render(<Embed>stuff</Embed>);
+
+    // ASSERT
+    expect(container).toBeTruthy();
+  });
+
+  it('renders children', () => {
+    // ARRANGE
+    render(<Embed>stuff</Embed>);
+
+    // ASSERT
+    expect(screen.getByText(/stuff/i)).toBeVisible();
+  });
+});