+ {/* Logo */}
+ 
+
- Willkommen zur\u00fcck
+ Willkommen zurück
Melde dich an, um fortzufahren
diff --git a/client/src/features/auth/components/register-page.tsx b/client/src/features/auth/components/register-page.tsx
index 3c36328..0cbca4c 100644
--- a/client/src/features/auth/components/register-page.tsx
+++ b/client/src/features/auth/components/register-page.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Button, Input, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/shared/components/ui';
import { useAuthStore } from '../hooks/use-auth-store';
+import LogoVertical from '../../../../Logos/Logo_Vertikal.svg';
export function RegisterPage() {
const navigate = useNavigate();
@@ -41,25 +42,16 @@ export function RegisterPage() {
};
return (
-
-
-
-
+
+ {/* Logo */}
+
+
- Konto erstellen
Registriere dich f\u00fcr Dimension47
diff --git a/client/src/features/campaigns/components/add-member-modal.tsx b/client/src/features/campaigns/components/add-member-modal.tsx
new file mode 100644
index 0000000..a2f8ca3
--- /dev/null
+++ b/client/src/features/campaigns/components/add-member-modal.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { X, Search, UserPlus } from 'lucide-react';
+import { Button, Input, Spinner } from '@/shared/components/ui';
+import { api } from '@/shared/lib/api';
+import type { User } from '@/shared/types';
+
+interface AddMemberModalProps {
+ campaignId: string;
+ onClose: () => void;
+ onMemberAdded: () => void;
+}
+
+export function AddMemberModal({ campaignId, onClose, onMemberAdded }: AddMemberModalProps) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const [isAdding, setIsAdding] = useState(null);
+
+ const handleSearch = async () => {
+ if (searchQuery.length < 2) return;
+ setIsSearching(true);
+ try {
+ const results = await api.searchUsers(searchQuery);
+ setSearchResults(results);
+ } catch (error) {
+ console.error('Failed to search users:', error);
+ } finally {
+ setIsSearching(false);
+ }
+ };
+
+ const handleAddMember = async (userId: string) => {
+ setIsAdding(userId);
+ try {
+ await api.addCampaignMember(campaignId, userId);
+ onMemberAdded();
+ onClose();
+ } catch (error) {
+ console.error('Failed to add member:', error);
+ setIsAdding(null);
+ }
+ };
+
+ return (
+ (null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [showAddMember, setShowAddMember] = useState(false);
+ const [showEditCampaign, setShowEditCampaign] = useState(false);
+ const [showCreateCharacter, setShowCreateCharacter] = useState(false);
+ const [showImportCharacter, setShowImportCharacter] = useState(false);
+
+ const isGM = campaign?.gmId === user?.id;
+ const isAdmin = user?.role === 'ADMIN';
+ const canManage = isGM || isAdmin;
+
+ const fetchCampaign = async () => {
+ if (!id) return;
+ try {
+ const data = await api.getCampaign(id);
+ setCampaign(data);
+ } catch (error) {
+ console.error('Failed to fetch campaign:', error);
+ navigate('/');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchCampaign();
+ }, [id]);
+
+ const handleRemoveMember = async (userId: string) => {
+ if (!id || !confirm('Mitglied wirklich entfernen?')) return;
+ try {
+ await api.removeCampaignMember(id, userId);
+ fetchCampaign();
+ } catch (error) {
+ console.error('Failed to remove member:', error);
+ }
+ };
+
+ const handleDeleteCampaign = async () => {
+ if (!id || !confirm('Kampagne wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.')) return;
+ try {
+ await api.deleteCampaign(id);
+ navigate('/');
+ } catch (error) {
+ console.error('Failed to delete campaign:', error);
+ }
+ };
+
+ if (isLoading) {
+ return (
+
-
-
+
+
+ );
+}
diff --git a/client/src/features/campaigns/components/campaign-detail-page.tsx b/client/src/features/campaigns/components/campaign-detail-page.tsx
new file mode 100644
index 0000000..6d6c62f
--- /dev/null
+++ b/client/src/features/campaigns/components/campaign-detail-page.tsx
@@ -0,0 +1,337 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+ ArrowLeft,
+ Settings,
+ Users,
+ Swords,
+ UserPlus,
+ Trash2,
+ Crown,
+ Shield,
+ Heart,
+ FileJson
+} from 'lucide-react';
+import {
+ Button,
+ Card,
+ CardHeader,
+ CardTitle,
+ CardContent,
+ Spinner
+} from '@/shared/components/ui';
+import { api } from '@/shared/lib/api';
+import { useAuthStore } from '@/features/auth';
+import type { Campaign, CharacterSummary } from '@/shared/types';
+import { AddMemberModal } from './add-member-modal';
+import { EditCampaignModal } from './edit-campaign-modal';
+import { CreateCharacterModal, ImportCharacterModal } from '@/features/characters';
+
+export function CampaignDetailPage() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const { user } = useAuthStore();
+
+ const [campaign, setCampaign] = useState
+
+
+
+
+ Mitglied hinzufügen
+ +
+
+
+ setSearchQuery(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+ />
+
+
+
+ {searchResults.length > 0 && (
+
+ {searchResults.map((user) => (
+
+ )}
+
+ {searchQuery.length >= 2 && searchResults.length === 0 && !isSearching && (
+
+
+ ))}
+
+
+
+
+
+ {user.username.charAt(0).toUpperCase()}
+
+
+
+
+ {user.username}
+{user.email}
++ Keine Benutzer gefunden +
+ )} +
+
+ );
+ }
+
+ if (!campaign) {
+ return (
+
+
+ );
+ }
+
+ return (
+ Kampagne nicht gefunden
+
+ {/* Header */}
+ setShowAddMember(false)}
+ onMemberAdded={fetchCampaign}
+ />
+ )}
+ {showEditCampaign && (
+ setShowEditCampaign(false)}
+ onUpdated={fetchCampaign}
+ />
+ )}
+ {showCreateCharacter && (
+ setShowCreateCharacter(false)}
+ onCreated={fetchCampaign}
+ />
+ )}
+ {showImportCharacter && (
+ setShowImportCharacter(false)}
+ onImported={fetchCampaign}
+ />
+ )}
+
+ );
+}
diff --git a/client/src/features/campaigns/components/edit-campaign-modal.tsx b/client/src/features/campaigns/components/edit-campaign-modal.tsx
new file mode 100644
index 0000000..b9937cf
--- /dev/null
+++ b/client/src/features/campaigns/components/edit-campaign-modal.tsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { Button, Input, Spinner } from '@/shared/components/ui';
+import { api } from '@/shared/lib/api';
+import type { Campaign } from '@/shared/types';
+
+interface EditCampaignModalProps {
+ campaign: Campaign;
+ onClose: () => void;
+ onUpdated: () => void;
+}
+
+export function EditCampaignModal({ campaign, onClose, onUpdated }: EditCampaignModalProps) {
+ const [name, setName] = useState(campaign.name);
+ const [description, setDescription] = useState(campaign.description || '');
+ const [imageUrl, setImageUrl] = useState(campaign.imageUrl || '');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!name.trim()) {
+ setError('Name ist erforderlich');
+ return;
+ }
+
+ setIsSubmitting(true);
+ setError('');
+
+ try {
+ await api.updateCampaign(campaign.id, {
+ name: name.trim(),
+ description: description.trim() || undefined,
+ imageUrl: imageUrl.trim() || undefined,
+ });
+ onUpdated();
+ onClose();
+ } catch (err) {
+ setError('Fehler beim Aktualisieren der Kampagne');
+ console.error('Failed to update campaign:', err);
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+ {/* Campaign Image */}
+ {campaign.imageUrl && (
+
+
+
+ {canManage && (
+
+
+ {campaign.name}
+ {campaign.description && ( +{campaign.description}
+ )} +
+
+
+
+
+
+ )}
+
+ 
+
+ )}
+
+
+ {/* Members Section */}
+
+
+
+
+ {canManage && (
+
+ )}
+
+
+
+
+
+ {/* Characters Section */}
+
+
+
+
+
+
+ {!campaign.characters?.length ? (
+
+
+
+
+ {/* Quick Actions */}
+
+ {campaign.members.map((member) => (
+
+
+
+ ))}
+
+
+ {canManage && member.userId !== campaign.gmId && (
+
+ )}
+
+ {member.user.avatarUrl ? (
+ 
+ ) : (
+
+ {member.user.username.charAt(0).toUpperCase()}
+
+ )}
+
+
+
+
+ {member.user.username}
+ {member.userId === campaign.gmId && (
+
{member.user.email}
+
+
+
+
+
+
+ ) : (
+ Noch keine Charaktere
+
+ {campaign.characters.map((character: CharacterSummary) => (
+
+ )}
+ navigate(`/campaigns/${id}/characters/${character.id}`)}
+ >
+
+ ))}
+
+
+
+ {character.avatarUrl ? (
+ 
+ ) : (
+
+
+
+ {character.name}
++ Level {character.level} {character.type} + {character.owner && ` • ${character.owner.username}`} +
+
+
+
+ navigate(`/campaigns/${id}/battle`)}>
+
+
+
+
+
+
+
+ {/* Modals */}
+ {showAddMember && (
+
+
+
+
+
+
+ Kampfbildschirm
+Kämpfe verwalten
+
+
+
+
+
+
+ Dokumente
+Bald verfügbar
+
+
+
+
+
+
+ Notizen
+Bald verfügbar
+
+
+
+
+
+
+