0fbd3743e7
- Added fields such as `nickname`, `age`, `gender`, `species`, `nationality`, `status`, and others to enhance character customization. - Modified localization files to include new field labels and placeholders. - Updated `CharacterComponent` and `CharacterDetail` components with UI elements for the newly added attributes. - Introduced "Advanced Mode" toggle to manage visibility of extended customization options. - Refactored database models and repository methods (`addNewCharacter`, `updateCharacter`, and `fetchCharacters`) to handle the extended schema. - Improved data encryption and decryption workflows for secure storage of added attributes. - Enhanced user experience by reorganizing character customization layouts.
472 lines
24 KiB
TypeScript
472 lines
24 KiB
TypeScript
import CollapsableArea from "@/components/CollapsableArea";
|
|
import InputField from "@/components/form/InputField";
|
|
import TexteAreaInput from "@/components/form/TexteAreaInput";
|
|
import TextInput from "@/components/form/TextInput";
|
|
import SelectBox from "@/components/form/SelectBox";
|
|
import {AlertContext} from "@/context/AlertContext";
|
|
import {SessionContext} from "@/context/SessionContext";
|
|
import {
|
|
Attribute,
|
|
CharacterAttribute,
|
|
characterCategories,
|
|
CharacterElement,
|
|
basicCharacterElements,
|
|
advancedCharacterElements,
|
|
CharacterProps,
|
|
characterStatus
|
|
} from "@/lib/models/Character";
|
|
import System from "@/lib/models/System";
|
|
import {
|
|
faArrowLeft,
|
|
faBook,
|
|
faPlus,
|
|
faSave,
|
|
faScroll,
|
|
faUser,
|
|
faSliders,
|
|
faGlobe,
|
|
faCommentDots,
|
|
faStickyNote
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {Dispatch, SetStateAction, useContext, useEffect, useState} from "react";
|
|
import CharacterSectionElement from "@/components/book/settings/characters/CharacterSectionElement";
|
|
import DeleteButton from "@/components/form/DeleteButton";
|
|
import {useTranslations} from "next-intl";
|
|
import {LangContext} from "@/context/LangContext";
|
|
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
|
import {BookContext} from "@/context/BookContext";
|
|
|
|
type AttributeResponse = { type: string; values: Attribute[] }[];
|
|
|
|
interface CharacterDetailProps {
|
|
selectedCharacter: CharacterProps | null;
|
|
setSelectedCharacter: Dispatch<SetStateAction<CharacterProps | null>>;
|
|
handleCharacterChange: (key: keyof CharacterProps, value: string) => void;
|
|
handleAddElement: (section: keyof CharacterProps, element: any) => void;
|
|
handleRemoveElement: (
|
|
section: keyof CharacterProps,
|
|
index: number,
|
|
attrId: string,
|
|
) => void;
|
|
handleSaveCharacter: () => void;
|
|
handleDeleteCharacter: (characterId: string) => Promise<void>;
|
|
}
|
|
|
|
export default function CharacterDetail(
|
|
{
|
|
setSelectedCharacter,
|
|
selectedCharacter,
|
|
handleCharacterChange,
|
|
handleRemoveElement,
|
|
handleAddElement,
|
|
handleSaveCharacter,
|
|
handleDeleteCharacter,
|
|
}: CharacterDetailProps
|
|
) {
|
|
const t = useTranslations();
|
|
const {lang} = useContext(LangContext);
|
|
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
|
const {book} = useContext(BookContext);
|
|
const {session} = useContext(SessionContext);
|
|
const {errorMessage} = useContext(AlertContext);
|
|
const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
|
|
|
|
useEffect((): void => {
|
|
if (selectedCharacter?.id !== null) {
|
|
getAttributes().then();
|
|
}
|
|
}, []);
|
|
|
|
async function getAttributes(): Promise<void> {
|
|
try {
|
|
let response: AttributeResponse;
|
|
if (isCurrentlyOffline()) {
|
|
response = await window.electron.invoke<AttributeResponse>('db:character:attributes', {
|
|
characterId: selectedCharacter?.id,
|
|
});
|
|
} else {
|
|
if (book?.localBook) {
|
|
response = await window.electron.invoke<AttributeResponse>('db:character:attributes', {
|
|
characterId: selectedCharacter?.id,
|
|
});
|
|
} else {
|
|
response = await System.authGetQueryToServer<AttributeResponse>(`character/attribute`, session.accessToken, lang, {
|
|
characterId: selectedCharacter?.id,
|
|
});
|
|
}
|
|
}
|
|
if (response) {
|
|
const attributes: CharacterAttribute = {};
|
|
response.forEach((item: {
|
|
type: string
|
|
values: Attribute[]
|
|
}):void => {
|
|
attributes[item.type] = item.values;
|
|
});
|
|
|
|
setSelectedCharacter({
|
|
id: selectedCharacter?.id ?? '',
|
|
name: selectedCharacter?.name ?? '',
|
|
lastName: selectedCharacter?.lastName ?? '',
|
|
nickname: selectedCharacter?.nickname ?? '',
|
|
age: selectedCharacter?.age ?? '',
|
|
gender: selectedCharacter?.gender ?? '',
|
|
species: selectedCharacter?.species ?? '',
|
|
nationality: selectedCharacter?.nationality ?? '',
|
|
status: selectedCharacter?.status ?? 'alive',
|
|
category: selectedCharacter?.category ?? 'none',
|
|
title: selectedCharacter?.title ?? '',
|
|
image: selectedCharacter?.image ?? '',
|
|
role: selectedCharacter?.role ?? '',
|
|
biography: selectedCharacter?.biography,
|
|
history: selectedCharacter?.history,
|
|
speechPattern: selectedCharacter?.speechPattern,
|
|
catchphrase: selectedCharacter?.catchphrase,
|
|
residence: selectedCharacter?.residence,
|
|
notes: selectedCharacter?.notes,
|
|
color: selectedCharacter?.color,
|
|
physical: attributes.physical ?? [],
|
|
psychological: attributes.psychological ?? [],
|
|
relations: attributes.relations ?? [],
|
|
skills: attributes.skills ?? [],
|
|
weaknesses: attributes.weaknesses ?? [],
|
|
strengths: attributes.strengths ?? [],
|
|
goals: attributes.goals ?? [],
|
|
motivations: attributes.motivations ?? [],
|
|
arc: attributes.arc ?? [],
|
|
secrets: attributes.secrets ?? [],
|
|
fears: attributes.fears ?? [],
|
|
flaws: attributes.flaws ?? [],
|
|
beliefs: attributes.beliefs ?? [],
|
|
conflicts: attributes.conflicts ?? [],
|
|
quotes: attributes.quotes ?? [],
|
|
distinguishingMarks: attributes.distinguishingMarks ?? [],
|
|
items: attributes.items ?? [],
|
|
affiliations: attributes.affiliations ?? [],
|
|
});
|
|
}
|
|
} catch (e: unknown) {
|
|
if (e instanceof Error) {
|
|
errorMessage(e.message);
|
|
} else {
|
|
errorMessage(t("characterDetail.fetchAttributesError"));
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div
|
|
className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
|
|
<button onClick={() => setSelectedCharacter(null)}
|
|
className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200">
|
|
<FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
|
|
<span className="text-text-primary font-medium">{t("characterDetail.back")}</span>
|
|
</button>
|
|
<span className="text-text-primary font-semibold text-lg">
|
|
{selectedCharacter?.name || t("characterDetail.newCharacter")}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
{selectedCharacter?.id && (
|
|
<DeleteButton
|
|
onDelete={(): Promise<void> => handleDeleteCharacter(selectedCharacter.id as string)}
|
|
confirmTitle={t("characterDetail.deleteTitle")}
|
|
confirmMessage={t("characterDetail.deleteMessage", {name: selectedCharacter.name})}
|
|
confirmButtonText={t("common.delete")}
|
|
cancelButtonText={t("common.cancel")}
|
|
/>
|
|
)}
|
|
<button onClick={handleSaveCharacter}
|
|
className="flex items-center justify-center bg-primary w-10 h-10 rounded-xl border border-primary-dark shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200">
|
|
<FontAwesomeIcon icon={selectedCharacter?.id ? faSave : faPlus}
|
|
className="text-text-primary w-5 h-5"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto max-h-[calc(100vh-350px)] space-y-4 px-2 pb-4">
|
|
<CollapsableArea title={t("characterDetail.basicInfo")} icon={faUser}>
|
|
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
|
<InputField
|
|
fieldName={t("characterDetail.name")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.name || ''}
|
|
setValue={(e) => handleCharacterChange('name', e.target.value)}
|
|
placeholder={t("characterDetail.namePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.lastName")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.lastName || ''}
|
|
setValue={(e) => handleCharacterChange('lastName', e.target.value)}
|
|
placeholder={t("characterDetail.lastNamePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.nickname")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.nickname || ''}
|
|
setValue={(e) => handleCharacterChange('nickname', e.target.value)}
|
|
placeholder={t("characterDetail.nicknamePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.role")}
|
|
input={
|
|
<SelectBox
|
|
defaultValue={selectedCharacter?.category || 'none'}
|
|
onChangeCallBack={(e) => setSelectedCharacter(prev =>
|
|
prev ? {...prev, category: e.target.value as CharacterProps['category']} : prev
|
|
)}
|
|
data={characterCategories}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.title")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.title || ''}
|
|
setValue={(e) => handleCharacterChange('title', e.target.value)}
|
|
placeholder={t("characterDetail.titlePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.gender")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.gender || ''}
|
|
setValue={(e) => handleCharacterChange('gender', e.target.value)}
|
|
placeholder={t("characterDetail.genderPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.age")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.age || ''}
|
|
setValue={(e) => handleCharacterChange('age', e.target.value)}
|
|
placeholder={t("characterDetail.agePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</CollapsableArea>
|
|
|
|
<CollapsableArea title={t("characterDetail.historySection")} icon={faUser}>
|
|
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
|
<InputField
|
|
fieldName={t("characterDetail.biography")}
|
|
input={
|
|
<TexteAreaInput
|
|
value={selectedCharacter?.biography || ''}
|
|
setValue={(e) => handleCharacterChange('biography', e.target.value)}
|
|
placeholder={t("characterDetail.biographyPlaceholder")}
|
|
/>
|
|
}
|
|
icon={faBook}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.history")}
|
|
input={
|
|
<TexteAreaInput
|
|
value={selectedCharacter?.history || ''}
|
|
setValue={(e) => handleCharacterChange('history', e.target.value)}
|
|
placeholder={t("characterDetail.historyPlaceholder")}
|
|
/>
|
|
}
|
|
icon={faScroll}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.roleFull")}
|
|
input={
|
|
<TexteAreaInput
|
|
value={selectedCharacter?.role || ''}
|
|
setValue={(e) => handleCharacterChange('role', e.target.value)}
|
|
placeholder={t("characterDetail.roleFullPlaceholder")}
|
|
/>
|
|
}
|
|
icon={faScroll}
|
|
/>
|
|
</div>
|
|
</CollapsableArea>
|
|
|
|
{/* Attributs de base - toujours visibles */}
|
|
{basicCharacterElements.map((item: CharacterElement, index: number) => (
|
|
<CharacterSectionElement
|
|
key={`basic-${index}`}
|
|
title={item.title}
|
|
section={item.section}
|
|
placeholder={item.placeholder}
|
|
icon={item.icon}
|
|
selectedCharacter={selectedCharacter as CharacterProps}
|
|
setSelectedCharacter={setSelectedCharacter}
|
|
handleAddElement={handleAddElement}
|
|
handleRemoveElement={handleRemoveElement}
|
|
/>
|
|
))}
|
|
|
|
{/* Toggle Mode Avancé */}
|
|
<div className="flex items-center justify-between p-4 bg-secondary/30 rounded-xl border border-secondary/50">
|
|
<div className="flex items-center gap-3">
|
|
<FontAwesomeIcon icon={faSliders} className="text-primary w-5 h-5"/>
|
|
<span className="text-text-primary font-medium">{t("characterDetail.advancedMode")}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowAdvanced(!showAdvanced)}
|
|
className={`px-4 py-2 rounded-lg transition-all duration-200 ${
|
|
showAdvanced
|
|
? 'bg-primary text-white'
|
|
: 'bg-secondary/50 text-text-primary hover:bg-secondary'
|
|
}`}
|
|
>
|
|
{showAdvanced ? t("characterDetail.hideAdvanced") : t("characterDetail.showAdvanced")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sections avancées - visibles uniquement si showAdvanced est true */}
|
|
{showAdvanced && (
|
|
<>
|
|
{/* Identité étendue */}
|
|
<CollapsableArea title={t("characterDetail.identitySection")} icon={faGlobe}>
|
|
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
|
<InputField
|
|
fieldName={t("characterDetail.species")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.species || ''}
|
|
setValue={(e) => handleCharacterChange('species', e.target.value)}
|
|
placeholder={t("characterDetail.speciesPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.nationality")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.nationality || ''}
|
|
setValue={(e) => handleCharacterChange('nationality', e.target.value)}
|
|
placeholder={t("characterDetail.nationalityPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.status")}
|
|
input={
|
|
<SelectBox
|
|
defaultValue={selectedCharacter?.status || 'alive'}
|
|
onChangeCallBack={(e) => setSelectedCharacter(prev =>
|
|
prev ? {...prev, status: e.target.value as CharacterProps['status']} : prev
|
|
)}
|
|
data={characterStatus}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.residence")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.residence || ''}
|
|
setValue={(e) => handleCharacterChange('residence', e.target.value)}
|
|
placeholder={t("characterDetail.residencePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</CollapsableArea>
|
|
|
|
{/* Voix du personnage */}
|
|
<CollapsableArea title={t("characterDetail.voiceSection")} icon={faCommentDots}>
|
|
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
|
<InputField
|
|
fieldName={t("characterDetail.speechPattern")}
|
|
input={
|
|
<TexteAreaInput
|
|
value={selectedCharacter?.speechPattern || ''}
|
|
setValue={(e) => handleCharacterChange('speechPattern', e.target.value)}
|
|
placeholder={t("characterDetail.speechPatternPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.catchphrase")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.catchphrase || ''}
|
|
setValue={(e) => handleCharacterChange('catchphrase', e.target.value)}
|
|
placeholder={t("characterDetail.catchphrasePlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</CollapsableArea>
|
|
|
|
{/* Notes de l'auteur */}
|
|
<CollapsableArea title={t("characterDetail.authorSection")} icon={faStickyNote}>
|
|
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
|
<InputField
|
|
fieldName={t("characterDetail.notes")}
|
|
input={
|
|
<TexteAreaInput
|
|
value={selectedCharacter?.notes || ''}
|
|
setValue={(e) => handleCharacterChange('notes', e.target.value)}
|
|
placeholder={t("characterDetail.notesPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
fieldName={t("characterDetail.colorLabel")}
|
|
input={
|
|
<TextInput
|
|
value={selectedCharacter?.color || ''}
|
|
setValue={(e) => handleCharacterChange('color', e.target.value)}
|
|
placeholder={t("characterDetail.colorPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</CollapsableArea>
|
|
|
|
{/* Attributs avancés */}
|
|
{advancedCharacterElements.map((item: CharacterElement, index: number) => (
|
|
<CharacterSectionElement
|
|
key={`advanced-${index}`}
|
|
title={item.title}
|
|
section={item.section}
|
|
placeholder={item.placeholder}
|
|
icon={item.icon}
|
|
selectedCharacter={selectedCharacter as CharacterProps}
|
|
setSelectedCharacter={setSelectedCharacter}
|
|
handleAddElement={handleAddElement}
|
|
handleRemoveElement={handleRemoveElement}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |