diff --git a/backend/database.db b/backend/database.db index 8705d7e..30b8b85 100644 Binary files a/backend/database.db and b/backend/database.db differ diff --git a/frontend/src/pages/gameMasterPage.jsx b/frontend/src/pages/gameMasterPage.jsx index c160d9b..ebe3569 100644 --- a/frontend/src/pages/gameMasterPage.jsx +++ b/frontend/src/pages/gameMasterPage.jsx @@ -271,243 +271,208 @@ const handleUpdate = async () => { }; // Add new handler for form changes - const handleFormChange = (key, value) => { - setFormData(prev => ({ + const handleFormChange = (newFormData) => { + setFormData(newFormData); + }; + + // Optimiere Select-Komponenten mit React.memo +const SelectField = React.memo(({ name, value, label, options, onChange, sx }) => ( + + {label} + + +)); + +// Add this before the EditModal component +const nonEditableFields = ['ItemID', 'NpcID', 'CharID', 'GameID', 'Img', 'OwnerName']; + +// Add the RenderField component +const RenderField = React.memo(({ field, formData, handleFormChange, commonStyles }) => { + // Convert field name to label + const getLabel = (fieldName) => { + const labels = { + ItemName: 'Name', + CharName: 'Name', + Name: 'Name', + Type: 'Typ', + Art: 'Art', + Rarity: 'Seltenheit', + MaxDurability: 'Max. Haltbarkeit', + CurrentDurability: 'Aktuelle Haltbarkeit', + GoldValue: 'Goldwert', + Abilities: 'Fähigkeiten', + AP: 'Angriffspunkte', + Race: 'Rasse', + Sex: 'Geschlecht', + Age: 'Alter', + Job: 'Beruf', + Description: 'Beschreibung', + MaxHealth: 'Max. Gesundheit', + CurrentHealth: 'Aktuelle Gesundheit', + MaxMana: 'Max. Mana', + CurrentMana: 'Aktuelles Mana', + Strength: 'Stärke', + Dexterity: 'Geschicklichkeit', + Agility: 'Beweglichkeit', + Endurance: 'Ausdauer', + Level: 'Level', + Allied: 'Status', + Gold: 'Gold' + }; + return labels[fieldName] || fieldName; + }; + + // Special fields that should use Select instead of TextField + const selectFields = { + Allied: [ + { value: 0, label: 'Verbündet' }, + { value: 1, label: 'Neutral' }, + { value: 2, label: 'Feindlich' } + ], + Rarity: [ + { value: 'common', label: 'Gewöhnlich' }, + { value: 'uncommon', label: 'Ungewöhnlich' }, + { value: 'rare', label: 'Selten' }, + { value: 'epic', label: 'Episch' }, + { value: 'legendary', label: 'Legendär' } + ] + }; + + if (selectFields[field]) { + return ( + + {getLabel(field)} + + + ); + } + + return ( + handleFormChange(field, e.target.value)} + sx={{ mb: 2, ...commonStyles.input }} + type={typeof formData[field] === 'number' ? 'number' : 'text'} + multiline={field === 'Description' || field === 'Abilities'} + rows={field === 'Description' || field === 'Abilities' ? 4 : 1} + /> + ); +}); + +// First, create a memoized EditModal component outside the main component +const EditModal = React.memo(({ + editModalOpen, + handleModalClose, + formData, + editType, + handleUpdate, + handleFormChange, + commonStyles +}) => { + const dialogContentRef = React.useRef(null); + + // Store form state locally + const [localFormData, setLocalFormData] = React.useState(formData); + + // Update local form data when parent formData changes + React.useEffect(() => { + setLocalFormData(formData); + }, [formData]); + + // Local form change handler + const handleLocalFormChange = (key, value) => { + setLocalFormData(prev => ({ ...prev, [key]: value })); }; - // Update the EditModal component - const EditModal = () => { - const nonEditableFields = [ - 'GameID', 'CharID', 'ItemID', 'NPCID', 'Img', 'img', - 'GameId', 'NpcID', 'itemID', 'PlayerID', 'OwnerName' - ]; - - const renderField = (key) => { - if (key === 'Allied') { - return ( - - Status - - - ); - } - - if (key === 'Sex') { - return ( - - Sex - - - ); - } - - if (key === 'Rarity') { - return ( - - Rarity - - - ); - } - - if (key === 'Type') { - return ( - - Type - - - ); - } - - if (key === 'Art') { - return ( - - Art - - - ); - } - - if (key === 'OwnerID') { - return ( - - Owner - - - ); - } - - return ( - handleFormChange(key, e.target.value)} - sx={{ ...commonStyles.input, mb: 2 }} - /> - ); - }; - - return ( - - - {editType === 'item' - ? 'Gegenstand Bearbeiten' - : editType === 'npc' - ? 'NSC Bearbeiten' - : 'Charakter Bearbeiten'} - - - {formData && ( - - {Object.keys(formData) - .filter(key => !nonEditableFields.includes(key)) - .map(key => renderField(key))} - - )} - - - - - - - ); + // Handle final update + const handleFinalUpdate = () => { + handleFormChange(localFormData); // Update parent state + handleUpdate(); // Save changes }; + return ( + + + {editType === 'item' ? 'Gegenstand Bearbeiten' : + editType === 'npc' ? 'NSC Bearbeiten' : + 'Charakter Bearbeiten'} + + + {localFormData && ( + + {Object.keys(localFormData) + .filter(key => !nonEditableFields.includes(key)) + .map(key => ( + + ))} + + )} + + + + + + + ); +}); + const Section = ({ title, items, createPath, createText }) => ( { createPath="/create-item" createText="Gegenstand Erstellen" /> - + ); };