fix: small lighthouse fixes (#14)

* fix: small lighthouse fixes

* fix: remove confusing aria-label

* fix: allow sourcemaps in production, its MIT anyways

* fix: ensure scenario 28 special rule is applied

* chore: add husky for precommit hooks

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run ci:tsc
+npm run ci:eslint

next.config.js

@@ -30,6 +30,7 @@ const securityHeaders = [
 const nextConfig = {
   reactStrictMode: true,
   outputFileTracing: true,
+  poweredByHeader: false,
   typescript: {
     ignoreBuildErrors: true,
   },
@@ -38,6 +39,7 @@ const nextConfig = {
   },
   swcMinify: true,
   optimizeFonts: false,
+  productionBrowserSourceMaps: true,
   transpilePackages: ['auto-text-size'],
   headers: () => {
     return [

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "prepare": "panda codegen",
+    "prepare": "panda codegen && husky install",
     "build:svg": "tsx scripts/svg-sprite.ts",
     "dev": "rm -rf .next && next dev -p 4000",
     "build": "next build",
@@ -45,6 +45,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "glob": "^10.3.10",
+    "husky": "^8.0.3",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",
     "svg-sprite": "^2.0.2",

src/components/@navigation/LogoLink.tsx

@@ -11,7 +11,7 @@ const LogoLink = ({ title }: Props) => {
   return (
     <Link
       href="/"
-      aria-label="Go to start page"
+      aria-label={title}
       className={css({
         display: 'flex',
         alignItems: 'center',

src/components/@scenario/CardThumbnail.tsx

@@ -29,7 +29,7 @@ const CardThumbnail = ({ name }: Props) => {
             })}.png`}
             alt="monster"
             fill
-            sizes="128px"
+            sizes="92px"
             style={{
               objectFit: 'cover',
             }}

src/components/@scenario/PlaceholderCard.tsx

@@ -21,7 +21,8 @@ const PlaceholderCard = ({ deckNames, onSelectDeck }: Props) => {
         alignItems="center"
         justifyContent="center"
       >
-        <Card.Title fontSize="2xl" fontWeight="normal">
+        {/* @ts-expect-error not working with as property */}
+        <Card.Title fontSize="2xl" fontWeight="normal" as="h2">
           Select a Monster deck
         </Card.Title>
       </Card.Header>
@@ -60,6 +61,7 @@ const PlaceholderCard = ({ deckNames, onSelectDeck }: Props) => {
                   })}.png`}
                   alt="monster"
                   fill
+                  priority
                   sizes="128px"
                   style={{
                     objectFit: 'cover',

src/data/scenarios.ts

@@ -1,13 +1,3 @@
-//special_rules should be treated with some kind of macro that recognises them and applies them when loading
-export const SPECIAL_RULES = {
-  living_corpse_two_levels_extra: {
-    description:
-      'All living corpses are two levels higher than the scenario level, up to a max of 7',
-    affected_deck: 'Living Corpse',
-    extra_levels: 2,
-  },
-};
-
 export const SCENARIO_DEFINITIONS = [
   {
     name: '#1 Black Barrow',
@@ -291,15 +281,13 @@ export const SCENARIO_DEFINITIONS = [
       { name: 'Night Demon' },
       { name: 'Sun Demon' },
     ],
-    special_rules: [
+    id: 28,
+    specialRules: [
       {
-        description:
-          'All living corpses are two levels higher than the scenario level, up to a max of 7',
-        affected_deck: 'Living Corpse',
+        deck: 'Living Corpse',
         extra_levels: 2,
       },
     ],
-    id: 28,
   },
   {
     name: '#29 Sanctuary of Gloom',
@@ -922,4 +910,4 @@ export const SCENARIO_DEFINITIONS = [
     ],
     id: 95,
   },
-] as const;
+];

src/hooks/useDecks.ts

@@ -33,6 +33,19 @@ export interface BossDeck {
   cards: (typeof DECK_DEFINITIONS)['Boss']['cards'];
 }
 
+const getScenarioLevelForDeck = (
+  scenario: Scenario,
+  level: number,
+  deck: DeckNames,
+) => {
+  if (!scenario.specialRules?.length) return level;
+  const matchingSpecialRule = scenario.specialRules.find(
+    (rule) => rule.deck === deck,
+  );
+  if (!matchingSpecialRule) return level;
+  return Math.min(7, matchingSpecialRule.extra_levels + level);
+};
+
 export const useDecks = (
   scenario: Scenario | undefined,
   level: number,
@@ -58,8 +71,11 @@ export const useDecks = (
       const deckName = scenarioDeck.name as Exclude<DeckNames, 'Boss'>;
       const deckClass = DECKS[deckName]?.class;
       const deck = DECK_DEFINITIONS[deckClass];
-
-      const stats = getMonsterStats(deckName as ScenarioMonsterNames, level);
+      const adjustedLevel = getScenarioLevelForDeck(scenario, level, deckName);
+      const stats = getMonsterStats(
+        deckName as ScenarioMonsterNames,
+        adjustedLevel,
+      );
 
       return {
         name: deckName,