Marces/dndmaster
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

stuffsa ddsabps fjz glkjfsfhbv hg<akjyfeczdkfhjzub lichpfcljtblfcjg

Browse Source
This commit is contained in:
Marces Zastrow
2025-02-28 16:44:29 +01:00
parent abac91ccd7
commit 212b6a58d9
2 changed files with 204 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/database.db
BIN
View File
Binary file not shown.
frontend/src/pages/gameMasterPage.jsx
+149 -176
View File
@@ -271,152 +271,99 @@ const handleUpdate = async () => {
}; };
// Add new handler for form changes // Add new handler for form changes
const handleFormChange = (key, value) => { const handleFormChange = (newFormData) => {
setFormData(prev => ({ setFormData(newFormData);
...prev,
[key]: value
}));
}; };
// Update the EditModal component // Optimiere Select-Komponenten mit React.memo
const EditModal = () => { const SelectField = React.memo(({ name, value, label, options, onChange, sx }) => (
const nonEditableFields = [ <FormControl fullWidth sx={{ mb: 2, ...sx }}>
'GameID', 'CharID', 'ItemID', 'NPCID', 'Img', 'img', <InputLabel>{label}</InputLabel>
'GameId', 'NpcID', 'itemID', 'PlayerID', 'OwnerName'
];
const renderField = (key) => {
if (key === 'Allied') {
return (
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
<InputLabel>Status</InputLabel>
<Select <Select
value={formData[key] || 0} value={value || ''}
label="Status" label={label}
onChange={(e) => handleFormChange(key, e.target.value)} onChange={(e) => onChange(name, e.target.value)}
> >
<MenuItem value={0}>Allied</MenuItem> {options.map(option => (
<MenuItem value={1}>Neutral</MenuItem> <MenuItem key={option.value} value={option.value}>
<MenuItem value={2}>Enemy</MenuItem> {option.label}
</MenuItem>
))}
</Select> </Select>
</FormControl> </FormControl>
); ));
}
if (key === 'Sex') { // Add this before the EditModal component
return ( const nonEditableFields = ['ItemID', 'NpcID', 'CharID', 'GameID', 'Img', 'OwnerName'];
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
<InputLabel>Sex</InputLabel>
<Select
value={formData[key] || ''}
label="Sex"
onChange={(e) => handleFormChange(key, e.target.value)}
>
<MenuItem value="Male">Male</MenuItem>
<MenuItem value="Female">Female</MenuItem>
<MenuItem value="Other">Other</MenuItem>
</Select>
</FormControl>
);
}
if (key === 'Rarity') { // Add the RenderField component
return ( const RenderField = React.memo(({ field, formData, handleFormChange, commonStyles }) => {
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}> // Convert field name to label
<InputLabel>Rarity</InputLabel> const getLabel = (fieldName) => {
<Select const labels = {
value={formData[key] || 1} ItemName: 'Name',
label="Rarity" CharName: 'Name',
onChange={(e) => handleFormChange(key, e.target.value)} Name: 'Name',
> Type: 'Typ',
<MenuItem value={1}>Poor</MenuItem> Art: 'Art',
<MenuItem value={2}>Common</MenuItem> Rarity: 'Seltenheit',
<MenuItem value={3}>Uncommon</MenuItem> MaxDurability: 'Max. Haltbarkeit',
<MenuItem value={4}>Rare</MenuItem> CurrentDurability: 'Aktuelle Haltbarkeit',
<MenuItem value={5}>Epic</MenuItem> GoldValue: 'Goldwert',
<MenuItem value={6}>Legendary</MenuItem> Abilities: 'Fähigkeiten',
<MenuItem value={7}>Artifact</MenuItem> AP: 'Angriffspunkte',
</Select> Race: 'Rasse',
</FormControl> 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;
};
if (key === 'Type') { // Special fields that should use Select instead of TextField
return ( const selectFields = {
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}> Allied: [
<InputLabel>Type</InputLabel> { value: 0, label: 'Verbündet' },
<Select { value: 1, label: 'Neutral' },
value={formData[key] || ''} { value: 2, label: 'Feindlich' }
label="Type" ],
onChange={(e) => handleFormChange(key, e.target.value)} Rarity: [
> { value: 'common', label: 'Gewöhnlich' },
<MenuItem value="Weapon">Weapon</MenuItem> { value: 'uncommon', label: 'Ungewöhnlich' },
<MenuItem value="Armor">Armor</MenuItem> { value: 'rare', label: 'Selten' },
<MenuItem value="Consumable">Consumable</MenuItem> { value: 'epic', label: 'Episch' },
<MenuItem value="Quest">Quest Item</MenuItem> { value: 'legendary', label: 'Legendär' }
<MenuItem value="Other">Other</MenuItem> ]
</Select> };
</FormControl>
);
}
if (key === 'Art') { if (selectFields[field]) {
return ( return (
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}> <FormControl fullWidth sx={{ mb: 2, ...commonStyles.select }}>
<InputLabel>Art</InputLabel> <InputLabel>{getLabel(field)}</InputLabel>
<Select <Select
value={formData[key] || ''} value={formData[field] || ''}
label="Art" label={getLabel(field)}
onChange={(e) => handleFormChange(key, e.target.value)} onChange={(e) => handleFormChange(field, e.target.value)}
> >
<MenuItem value="Sword">Sword</MenuItem> {selectFields[field].map(option => (
<MenuItem value="Axe">Axe</MenuItem>
<MenuItem value="Bow">Bow</MenuItem>
<MenuItem value="Shield">Shield</MenuItem>
<MenuItem value="Staff">Staff</MenuItem>
<MenuItem value="Potion">Potion</MenuItem>
<MenuItem value="Other">Other</MenuItem>
</Select>
</FormControl>
);
}
if (key === 'OwnerID') {
return (
<FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
<InputLabel sx={{ color: '#fff' }}>Owner</InputLabel>
<Select
value={formData[key] || ''}
label="Owner"
onChange={(e) => handleFormChange(key, e.target.value)}
sx={{
color: '#fff',
'& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: '#764ACB' },
}}
>
{allOwners.map((owner) => (
<MenuItem <MenuItem
key={owner.id} key={option.value}
value={owner.id || ''} value={option.value}
sx={{ sx={commonStyles.menuItem}
...commonStyles.menuItem,
display: 'flex',
justifyContent: 'space-between'
}}
> >
<span>{owner.name}</span> {option.label}
{owner.type !== 'None' && (
<Typography
variant="caption"
sx={{
ml: 2,
color: '#764ACB'
}}
>
{owner.type}
</Typography>
)}
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
@@ -426,14 +373,50 @@ const handleUpdate = async () => {
return ( return (
<TextField <TextField
key={key}
fullWidth fullWidth
label={key} label={getLabel(field)}
value={formData[key] || ''} value={formData[field] || ''}
onChange={(e) => handleFormChange(key, e.target.value)} onChange={(e) => handleFormChange(field, e.target.value)}
sx={{ ...commonStyles.input, mb: 2 }} 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
}));
};
// Handle final update
const handleFinalUpdate = () => {
handleFormChange(localFormData); // Update parent state
handleUpdate(); // Save changes
}; };
return ( return (
@@ -441,57 +424,39 @@ const handleUpdate = async () => {
open={editModalOpen} open={editModalOpen}
onClose={handleModalClose} onClose={handleModalClose}
sx={commonStyles.dialog} sx={commonStyles.dialog}
scroll="paper"
> >
<DialogTitle sx={{ <DialogTitle sx={{ color: '#fff' }}>
borderBottom: '1px solid #444', {editType === 'item' ? 'Gegenstand Bearbeiten' :
color: '#fff', editType === 'npc' ? 'NSC Bearbeiten' :
backgroundColor: '#2e2e3f', 'Charakter Bearbeiten'}
padding: '16px 24px'
}}>
{editType === 'item'
? 'Gegenstand Bearbeiten'
: editType === 'npc'
? 'NSC Bearbeiten'
: 'Charakter Bearbeiten'}
</DialogTitle> </DialogTitle>
<DialogContent sx={{ <DialogContent ref={dialogContentRef}>
p: 3, {localFormData && (
backgroundColor: '#1e1e2f'
}}>
{formData && (
<Box sx={{ p: 2 }}> <Box sx={{ p: 2 }}>
{Object.keys(formData) {Object.keys(localFormData)
.filter(key => !nonEditableFields.includes(key)) .filter(key => !nonEditableFields.includes(key))
.map(key => renderField(key))} .map(key => (
<RenderField
key={key}
field={key}
formData={localFormData}
handleFormChange={handleLocalFormChange}
commonStyles={commonStyles}
/>
))}
</Box> </Box>
)} )}
</DialogContent> </DialogContent>
<DialogActions sx={{ <DialogActions>
borderTop: '1px solid #444',
p: 2,
backgroundColor: '#2e2e3f',
'& .MuiButton-root': {
textTransform: 'none',
fontSize: '1rem',
padding: '6px 16px'
}
}}>
<Button <Button
onClick={handleModalClose} onClick={handleModalClose}
variant="outlined" sx={{ color: '#fff' }}
sx={{
color: '#fff',
borderColor: '#444',
'&:hover': {
borderColor: '#764ACB',
backgroundColor: 'rgba(118, 74, 203, 0.1)'
}
}}
> >
Abbrechen Abbrechen
</Button> </Button>
<Button <Button
onClick={handleUpdate} onClick={handleFinalUpdate}
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: '#764ACB', backgroundColor: '#764ACB',
@@ -506,7 +471,7 @@ const handleUpdate = async () => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );
}; });
const Section = ({ title, items, createPath, createText }) => ( const Section = ({ title, items, createPath, createText }) => (
<Box sx={{ <Box sx={{
@@ -767,7 +732,15 @@ const handleUpdate = async () => {
createPath="/create-item" createPath="/create-item"
createText="Gegenstand Erstellen" createText="Gegenstand Erstellen"
/> />
<EditModal /> <EditModal
editModalOpen={editModalOpen}
handleModalClose={handleModalClose}
formData={formData}
editType={editType}
handleUpdate={handleUpdate}
handleFormChange={handleFormChange}
commonStyles={commonStyles}
/>
</Box> </Box>
); );
}; };