Refactor character class handling across components: Replace hardcoded character class definitions with a centralized CHARACTER_CLASSES import, enhancing maintainability and consistency. Update ProfileForm, Leaderboard, and LeaderboardSection components to utilize new utility functions for character class icons and names, improving code clarity and reducing duplication.

2025-12-15 10:08:12 +01:00
parent 7dfd426d1f
commit 1e865330a0
7 changed files with 191 additions and 199 deletions
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -14,6 +14,7 @@ import {
  BackgroundSection,
  SectionTitle,
 } from "@/components/ui";
+import { CHARACTER_CLASSES } from "@/lib/character-classes";

 export default function RegisterPage() {
  const router = useRouter();
@@ -397,22 +398,7 @@ export default function RegisterPage() {
                    Classe de Personnage (optionnel)
                  </label>
                  <div className="grid grid-cols-2 gap-2">
-                    {[
-                      { value: "WARRIOR", name: "Guerrier", icon: "⚔️" },
-                      { value: "MAGE", name: "Mage", icon: "🔮" },
-                      { value: "ROGUE", name: "Voleur", icon: "🗡️" },
-                      { value: "RANGER", name: "Rôdeur", icon: "🏹" },
-                      { value: "PALADIN", name: "Paladin", icon: "🛡️" },
-                      { value: "ENGINEER", name: "Ingénieur", icon: "⚙️" },
-                      { value: "MERCHANT", name: "Marchand", icon: "💰" },
-                      { value: "SCHOLAR", name: "Érudit", icon: "📚" },
-                      { value: "BERSERKER", name: "Berserker", icon: "🔥" },
-                      {
-                        value: "NECROMANCER",
-                        name: "Nécromancien",
-                        icon: "💀",
-                      },
-                    ].map((cls) => (
+                    {CHARACTER_CLASSES.map((cls) => (
                      <button
                        key={cls.value}
                        type="button"
--- a/components/leaderboard/Leaderboard.tsx
+++ b/components/leaderboard/Leaderboard.tsx
@@ -2,6 +2,7 @@

 import { useEffect, useState } from "react";
 import { Avatar } from "@/components/ui";
+import { getCharacterClassIcon, getCharacterClassName, type CharacterClass } from "@/lib/character-classes";

 interface LeaderboardEntry {
  rank: number;
@@ -11,7 +12,7 @@ interface LeaderboardEntry {
  level: number;
  avatar?: string | null;
  bio?: string | null;
-  characterClass?: string | null;
+  characterClass?: CharacterClass | null;
 }

 // Format number with consistent locale to avoid hydration mismatch
@@ -98,18 +99,7 @@ export default function Leaderboard() {
                    </span>
                    {entry.characterClass && (
                      <span className="text-xs text-gray-400 uppercase tracking-wider">
-                        [{entry.characterClass === "WARRIOR" && "⚔️ Guerrier"}
-                        {entry.characterClass === "MAGE" && "🔮 Mage"}
-                        {entry.characterClass === "ROGUE" && "🗡️ Voleur"}
-                        {entry.characterClass === "RANGER" && "🏹 Rôdeur"}
-                        {entry.characterClass === "PALADIN" && "🛡️ Paladin"}
-                        {entry.characterClass === "ENGINEER" && "⚙️ Ingénieur"}
-                        {entry.characterClass === "MERCHANT" && "💰 Marchand"}
-                        {entry.characterClass === "SCHOLAR" && "📚 Érudit"}
-                        {entry.characterClass === "BERSERKER" && "🔥 Berserker"}
-                        {entry.characterClass === "NECROMANCER" &&
-                          "💀 Nécromancien"}
-                        ]
+                        [{getCharacterClassIcon(entry.characterClass)} {getCharacterClassName(entry.characterClass)}]
                      </span>
                    )}
                  </div>
@@ -177,34 +167,10 @@ export default function Leaderboard() {
                  {selectedEntry.characterClass && (
                    <div className="flex items-center gap-2">
                      <span className="text-2xl">
-                        {selectedEntry.characterClass === "WARRIOR" && "⚔️"}
-                        {selectedEntry.characterClass === "MAGE" && "🔮"}
-                        {selectedEntry.characterClass === "ROGUE" && "🗡️"}
-                        {selectedEntry.characterClass === "RANGER" && "🏹"}
-                        {selectedEntry.characterClass === "PALADIN" && "🛡️"}
-                        {selectedEntry.characterClass === "ENGINEER" && "⚙️"}
-                        {selectedEntry.characterClass === "MERCHANT" && "💰"}
-                        {selectedEntry.characterClass === "SCHOLAR" && "📚"}
-                        {selectedEntry.characterClass === "BERSERKER" && "🔥"}
-                        {selectedEntry.characterClass === "NECROMANCER" && "💀"}
+                        {getCharacterClassIcon(selectedEntry.characterClass)}
                      </span>
                      <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
-                        {selectedEntry.characterClass === "WARRIOR" &&
-                          "Guerrier"}
-                        {selectedEntry.characterClass === "MAGE" && "Mage"}
-                        {selectedEntry.characterClass === "ROGUE" && "Voleur"}
-                        {selectedEntry.characterClass === "RANGER" && "Rôdeur"}
-                        {selectedEntry.characterClass === "PALADIN" &&
-                          "Paladin"}
-                        {selectedEntry.characterClass === "ENGINEER" &&
-                          "Ingénieur"}
-                        {selectedEntry.characterClass === "MERCHANT" &&
-                          "Marchand"}
-                        {selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
-                        {selectedEntry.characterClass === "BERSERKER" &&
-                          "Berserker"}
-                        {selectedEntry.characterClass === "NECROMANCER" &&
-                          "Nécromancien"}
+                        {getCharacterClassName(selectedEntry.characterClass)}
                      </span>
                    </div>
                  )}
--- a/components/leaderboard/LeaderboardSection.tsx
+++ b/components/leaderboard/LeaderboardSection.tsx
@@ -9,6 +9,11 @@ import {
  BackgroundSection,
  SectionTitle,
 } from "@/components/ui";
+import {
+  getCharacterClassIcon,
+  getCharacterClassName,
+  type CharacterClass,
+} from "@/lib/character-classes";

 interface LeaderboardEntry {
  rank: number;
@@ -18,7 +23,7 @@ interface LeaderboardEntry {
  level: number;
  avatar?: string | null;
  bio?: string | null;
-  characterClass?: string | null;
+  characterClass?: CharacterClass | null;
 }

 interface LeaderboardSectionProps {
@@ -111,16 +116,7 @@ export default function LeaderboardSection({
                  </span>
                  {entry.characterClass && (
                    <span className="text-xs text-gray-400 uppercase tracking-wider">
-                      [{entry.characterClass === "WARRIOR" && "⚔️"}
-                      {entry.characterClass === "MAGE" && "🔮"}
-                      {entry.characterClass === "ROGUE" && "🗡️"}
-                      {entry.characterClass === "RANGER" && "🏹"}
-                      {entry.characterClass === "PALADIN" && "🛡️"}
-                      {entry.characterClass === "ENGINEER" && "⚙️"}
-                      {entry.characterClass === "MERCHANT" && "💰"}
-                      {entry.characterClass === "SCHOLAR" && "📚"}
-                      {entry.characterClass === "BERSERKER" && "🔥"}
-                      {entry.characterClass === "NECROMANCER" && "💀"}]
+                      [{getCharacterClassIcon(entry.characterClass)}]
                    </span>
                  )}
                  {entry.rank <= 3 && (
@@ -190,32 +186,10 @@ export default function LeaderboardSection({
                {selectedEntry.characterClass && (
                  <div className="flex items-center gap-2">
                    <span className="text-2xl">
-                      {selectedEntry.characterClass === "WARRIOR" && "⚔️"}
-                      {selectedEntry.characterClass === "MAGE" && "🔮"}
-                      {selectedEntry.characterClass === "ROGUE" && "🗡️"}
-                      {selectedEntry.characterClass === "RANGER" && "🏹"}
-                      {selectedEntry.characterClass === "PALADIN" && "🛡️"}
-                      {selectedEntry.characterClass === "ENGINEER" && "⚙️"}
-                      {selectedEntry.characterClass === "MERCHANT" && "💰"}
-                      {selectedEntry.characterClass === "SCHOLAR" && "📚"}
-                      {selectedEntry.characterClass === "BERSERKER" && "🔥"}
-                      {selectedEntry.characterClass === "NECROMANCER" && "💀"}
+                      {getCharacterClassIcon(selectedEntry.characterClass)}
                    </span>
                    <span className="text-lg font-bold text-pixel-gold uppercase tracking-wider">
-                      {selectedEntry.characterClass === "WARRIOR" && "Guerrier"}
-                      {selectedEntry.characterClass === "MAGE" && "Mage"}
-                      {selectedEntry.characterClass === "ROGUE" && "Voleur"}
-                      {selectedEntry.characterClass === "RANGER" && "Rôdeur"}
-                      {selectedEntry.characterClass === "PALADIN" && "Paladin"}
-                      {selectedEntry.characterClass === "ENGINEER" &&
-                        "Ingénieur"}
-                      {selectedEntry.characterClass === "MERCHANT" &&
-                        "Marchand"}
-                      {selectedEntry.characterClass === "SCHOLAR" && "Érudit"}
-                      {selectedEntry.characterClass === "BERSERKER" &&
-                        "Berserker"}
-                      {selectedEntry.characterClass === "NECROMANCER" &&
-                        "Nécromancien"}
+                      {getCharacterClassName(selectedEntry.characterClass)}
                    </span>
                  </div>
                )}
--- a/components/profile/ProfileForm.tsx
+++ b/components/profile/ProfileForm.tsx
@@ -1,22 +1,23 @@
 "use client";

 import { useState, useRef, useTransition, type ChangeEvent } from "react";
-import { Avatar, Input, Textarea, Button, Alert, Card, BackgroundSection, SectionTitle, ProgressBar } from "@/components/ui";
+import {
+  Avatar,
+  Input,
+  Textarea,
+  Button,
+  Alert,
+  Card,
+  BackgroundSection,
+  SectionTitle,
+  ProgressBar,
+} from "@/components/ui";
 import { updateProfile } from "@/actions/profile/update-profile";
 import { updatePassword } from "@/actions/profile/update-password";
-
-type CharacterClass =
-  | "WARRIOR"
-  | "MAGE"
-  | "ROGUE"
-  | "RANGER"
-  | "PALADIN"
-  | "ENGINEER"
-  | "MERCHANT"
-  | "SCHOLAR"
-  | "BERSERKER"
-  | "NECROMANCER"
-  | null;
+import {
+  CHARACTER_CLASSES,
+  type CharacterClass,
+} from "@/lib/character-classes";

 interface UserProfile {
  id: string;
@@ -24,7 +25,7 @@ interface UserProfile {
  username: string;
  avatar: string | null;
  bio: string | null;
-  characterClass: CharacterClass;
+  characterClass: CharacterClass | null;
  hp: number;
  maxHp: number;
  xp: number;
@@ -55,7 +56,7 @@ export default function ProfileForm({
  const [username, setUsername] = useState(initialProfile.username);
  const [avatar, setAvatar] = useState<string | null>(initialProfile.avatar);
  const [bio, setBio] = useState<string | null>(initialProfile.bio || null);
-  const [characterClass, setCharacterClass] = useState<CharacterClass>(
+  const [characterClass, setCharacterClass] = useState<CharacterClass | null>(
    initialProfile.characterClass || null
  );
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -120,12 +121,15 @@ export default function ProfileForm({
      if (result.success && result.data) {
        setProfile({
          ...result.data,
-          createdAt: result.data.createdAt instanceof Date 
+          createdAt:
+            result.data.createdAt instanceof Date
              ? result.data.createdAt.toISOString()
              : result.data.createdAt,
        } as UserProfile);
        setBio(result.data.bio || null);
-        setCharacterClass(result.data.characterClass as CharacterClass || null);
+        setCharacterClass(
+          (result.data.characterClass as CharacterClass) || null
+        );
        setSuccess("Profil mis à jour avec succès");
        setTimeout(() => setSuccess(null), 3000);
      } else {
@@ -154,7 +158,9 @@ export default function ProfileForm({
        setShowPasswordForm(false);
        setTimeout(() => setSuccess(null), 3000);
      } else {
-        setError(result.error || "Erreur lors de la modification du mot de passe");
+        setError(
+          result.error || "Erreur lors de la modification du mot de passe"
+        );
      }
    });
  };
@@ -163,7 +169,12 @@ export default function ProfileForm({
    <BackgroundSection backgroundImage={backgroundImage}>
      <div className="w-full max-w-4xl mx-auto px-8">
        {/* Title Section */}
-        <SectionTitle variant="gradient" size="lg" subtitle="Gérez votre profil" className="mb-12">
+        <SectionTitle
+          variant="gradient"
+          size="lg"
+          subtitle="Gérez votre profil"
+          className="mb-12"
+        >
          PROFIL
        </SectionTitle>

@@ -238,8 +249,15 @@ export default function ProfileForm({
                  id="avatar-upload"
                />
                <label htmlFor="avatar-upload">
-                  <Button variant="primary" size="md" as="span" className="cursor-pointer">
-                    {uploadingAvatar ? "Upload en cours..." : "Upload un avatar custom"}
+                  <Button
+                    variant="primary"
+                    size="md"
+                    as="span"
+                    className="cursor-pointer"
+                  >
+                    {uploadingAvatar
+                      ? "Upload en cours..."
+                      : "Upload un avatar custom"}
                  </Button>
                </label>
              </div>
@@ -276,68 +294,7 @@ export default function ProfileForm({
                Classe de Personnage
              </label>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {[
-                  {
-                    value: "WARRIOR",
-                    name: "Guerrier",
-                    icon: "⚔️",
-                    desc: "Maître du combat au corps à corps",
-                  },
-                  {
-                    value: "MAGE",
-                    name: "Mage",
-                    icon: "🔮",
-                    desc: "Manipulateur des arcanes",
-                  },
-                  {
-                    value: "ROGUE",
-                    name: "Voleur",
-                    icon: "🗡️",
-                    desc: "Furtif et mortel",
-                  },
-                  {
-                    value: "RANGER",
-                    name: "Rôdeur",
-                    icon: "🏹",
-                    desc: "Chasseur des terres sauvages",
-                  },
-                  {
-                    value: "PALADIN",
-                    name: "Paladin",
-                    icon: "🛡️",
-                    desc: "Protecteur sacré",
-                  },
-                  {
-                    value: "ENGINEER",
-                    name: "Ingénieur",
-                    icon: "⚙️",
-                    desc: "Créateur d'artefacts",
-                  },
-                  {
-                    value: "MERCHANT",
-                    name: "Marchand",
-                    icon: "💰",
-                    desc: "Maître du commerce",
-                  },
-                  {
-                    value: "SCHOLAR",
-                    name: "Érudit",
-                    icon: "📚",
-                    desc: "Gardien du savoir",
-                  },
-                  {
-                    value: "BERSERKER",
-                    name: "Berserker",
-                    icon: "🔥",
-                    desc: "Rage destructrice",
-                  },
-                  {
-                    value: "NECROMANCER",
-                    name: "Nécromancien",
-                    icon: "💀",
-                    desc: "Maître des morts",
-                  },
-                ].map((cls) => (
+                {CHARACTER_CLASSES.map((cls) => (
                  <button
                    key={cls.value}
                    type="button"
@@ -435,8 +392,15 @@ export default function ProfileForm({

            {/* Submit Button */}
            <div className="flex justify-end gap-4 pt-4 border-t border-pixel-gold/20">
-              <Button type="submit" variant="primary" size="md" disabled={isPending}>
-                {isPending ? "Enregistrement..." : "Enregistrer les modifications"}
+              <Button
+                type="submit"
+                variant="primary"
+                size="md"
+                disabled={isPending}
+              >
+                {isPending
+                  ? "Enregistrement..."
+                  : "Enregistrer les modifications"}
              </Button>
            </div>
          </form>
--- a/lib/character-classes.ts
+++ b/lib/character-classes.ts
@@ -0,0 +1,118 @@
+export type CharacterClass =
+  | "WARRIOR"
+  | "MAGE"
+  | "ROGUE"
+  | "RANGER"
+  | "PALADIN"
+  | "ENGINEER"
+  | "MERCHANT"
+  | "SCHOLAR"
+  | "BERSERKER"
+  | "NECROMANCER";
+
+export interface CharacterClassConfig {
+  value: CharacterClass;
+  name: string;
+  icon: string;
+  desc?: string;
+}
+
+export const CHARACTER_CLASSES: CharacterClassConfig[] = [
+  {
+    value: "WARRIOR",
+    name: "Guerrier",
+    icon: "⚔️",
+    desc: "Maître du combat au corps à corps",
+  },
+  {
+    value: "MAGE",
+    name: "Mage",
+    icon: "🔮",
+    desc: "Manipulateur des arcanes",
+  },
+  {
+    value: "ROGUE",
+    name: "Voleur",
+    icon: "🗡️",
+    desc: "Furtif et mortel",
+  },
+  {
+    value: "RANGER",
+    name: "Rôdeur",
+    icon: "🏹",
+    desc: "Chasseur des terres sauvages",
+  },
+  {
+    value: "PALADIN",
+    name: "Paladin",
+    icon: "🛡️",
+    desc: "Protecteur sacré",
+  },
+  {
+    value: "ENGINEER",
+    name: "Ingénieur",
+    icon: "⚙️",
+    desc: "Créateur d'artefacts",
+  },
+  {
+    value: "MERCHANT",
+    name: "Marchand",
+    icon: "💰",
+    desc: "Maître du commerce",
+  },
+  {
+    value: "SCHOLAR",
+    name: "Érudit",
+    icon: "📚",
+    desc: "Gardien du savoir",
+  },
+  {
+    value: "BERSERKER",
+    name: "Berserker",
+    icon: "🔥",
+    desc: "Rage destructrice",
+  },
+  {
+    value: "NECROMANCER",
+    name: "Nécromancien",
+    icon: "💀",
+    desc: "Maître des morts",
+  },
+];
+
+export const CHARACTER_CLASS_MAP: Record<CharacterClass, CharacterClassConfig> =
+  CHARACTER_CLASSES.reduce(
+    (acc, cls) => {
+      acc[cls.value] = cls;
+      return acc;
+    },
+    {} as Record<CharacterClass, CharacterClassConfig>
+  );
+
+export function getCharacterClassIcon(
+  characterClass: CharacterClass | null | undefined
+): string {
+  if (!characterClass) return "";
+  return CHARACTER_CLASS_MAP[characterClass]?.icon || "";
+}
+
+export function getCharacterClassName(
+  characterClass: CharacterClass | null | undefined
+): string {
+  if (!characterClass) return "";
+  return CHARACTER_CLASS_MAP[characterClass]?.name || "";
+}
+
+export function getCharacterClassConfig(
+  characterClass: CharacterClass | null | undefined
+): CharacterClassConfig | null {
+  if (!characterClass) return null;
+  return CHARACTER_CLASS_MAP[characterClass] || null;
+}
+
+export function isValidCharacterClass(
+  characterClass: string | null | undefined
+): characterClass is CharacterClass {
+  if (!characterClass) return false;
+  return characterClass in CHARACTER_CLASS_MAP;
+}
--- a/services/users/user-stats.service.ts
+++ b/services/users/user-stats.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from "../database";
-import type { User, Role, Prisma } from "@/prisma/generated/prisma/client";
+import type { User, Role, Prisma, CharacterClass } from "@/prisma/generated/prisma/client";
 import { NotFoundError } from "../errors";
 import { userService } from "./user.service";

@@ -19,7 +19,7 @@ export interface LeaderboardEntry {
  level: number;
  avatar: string | null;
  bio: string | null;
-  characterClass: string | null;
+  characterClass: CharacterClass | null;
 }

 /**
--- a/services/users/user.service.ts
+++ b/services/users/user.service.ts
@@ -6,20 +6,7 @@ import type {
  Prisma,
 } from "@/prisma/generated/prisma/client";
 import { ValidationError, NotFoundError, ConflictError } from "../errors";
-
-// Constantes de validation
-const VALID_CHARACTER_CLASSES = [
-  "WARRIOR",
-  "MAGE",
-  "ROGUE",
-  "RANGER",
-  "PALADIN",
-  "ENGINEER",
-  "MERCHANT",
-  "SCHOLAR",
-  "BERSERKER",
-  "NECROMANCER",
-] as const;
+import { isValidCharacterClass } from "@/lib/character-classes";

 const USERNAME_MIN_LENGTH = 3;
 const USERNAME_MAX_LENGTH = 20;
@@ -305,10 +292,7 @@ export class UserService {
    }

    // Validation du characterClass
-    if (
-      data.characterClass &&
-      !VALID_CHARACTER_CLASSES.includes(data.characterClass as CharacterClass)
-    ) {
+    if (data.characterClass && !isValidCharacterClass(data.characterClass)) {
      throw new ValidationError(
        "Classe de personnage invalide",
        "characterClass"
@@ -402,7 +386,7 @@ export class UserService {
    if (
      data.characterClass !== undefined &&
      data.characterClass !== null &&
-      !VALID_CHARACTER_CLASSES.includes(data.characterClass as CharacterClass)
+      !isValidCharacterClass(data.characterClass)
    ) {
      throw new ValidationError(
        "Classe de personnage invalide",