feat: Add DatabaseManager and LinkPlayer components, implement authentication and linking logic

- Created DatabaseManager component for managing database access via phpMyAdmin.
- Developed LinkPlayer component to link Discord accounts with game characters, including user authentication and error handling.
- Added mock data files for players, organizations, and projects to handle backend unavailability.
- Implemented AuthService for managing user authentication and session checks.
- Created DatabaseService to fetch and manage player, organization, and project data with fallback to mock data.
- Added HTML page for handling authentication unavailability.
- Developed a test script for validating Docker setup and required files.

pages/Projects.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from 'react';
-import { MOCK_PROJECTS } from '../constants';
+import React, { useState, useEffect } from 'react';
 import { Project } from '../types';
 import { Icons } from '../components/IconSet';
+import { dbService } from '../services/DatabaseService';
+import { authService } from '../services/AuthService';
+import { DiscordUser } from '../types';
+import CreateProjectModal from '../components/CreateProjectModal';
 
 interface ProjectsProps {
     onSelectProject?: (id: string) => void;
@@ -113,11 +116,69 @@ const VentureCard = ({ project, onClick }: { project: Project, onClick?: () => v
 
 const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {
   const [filter, setFilter] = useState<'all' | Project['status']>('all');
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [user, setUser] = useState<DiscordUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [showCreateForm, setShowCreateForm] = useState(false);
 
-  const filteredProjects = MOCK_PROJECTS.filter(p => 
+  // Subscribe to auth and data updates
+  useEffect(() => {
+    const unsubAuth = authService.subscribe(setUser);
+    const unsubDb = dbService.subscribe(() => {
+      setProjects(dbService.getProjects());
+    });
+
+    // Initial data load
+    setProjects(dbService.getProjects());
+    setLoading(false);
+
+    return () => {
+      unsubAuth();
+      unsubDb();
+    };
+  }, []);
+
+  const filteredProjects = projects.filter(p =>
     filter === 'all' ? true : p.status === filter
   );
 
+  // Berechne den Namen des verknüpften Charakters für die Modal-Anzeige
+  const getLinkedPlayerName = () => {
+    if (!user) return null;
+    if (user.linkedPlayerUuid) {
+      const linkedPlayer = dbService.getPlayer(user.linkedPlayerUuid);
+      return linkedPlayer ? linkedPlayer.username : null;
+    }
+    return null;
+  };
+
+  const linkedPlayerName = getLinkedPlayerName();
+
+  const createProject = async (projectData: { title: string; description: string; category: Project['category'] }) => {
+    if (!user) {
+      throw new Error('Nicht eingeloggt');
+    }
+
+    console.log('Creating project with data:', projectData);
+    console.log('User will be resolved to Minecraft name in backend');
+
+    const success = await dbService.createProject(projectData);
+
+    if (!success) {
+      throw new Error('Fehler beim Erstellen des Projekts');
+    }
+  };
+
+  const handleCreateClick = () => {
+    if (!user) {
+      // Redirect to login or show message
+      alert('Sie müssen sich zuerst anmelden, um ein Unternehmen zu erstellen.');
+      authService.login();
+      return;
+    }
+    setShowCreateForm(true);
+  };
+
   const tabs = [
     { id: 'all', label: 'Alle Unternehmen' },
     { id: 'active', label: 'Aktive Firmen' },
@@ -132,7 +193,11 @@ const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {
            <h1 className="text-3xl font-bold mb-1">Unternehmen & Projekte</h1>
            <p className="text-textMuted">Spielergeführte Firmen, aktive Rollenspiel-Stränge und Dienstleister.</p>
         </div>
-        <button className="bg-textMain text-background hover:bg-white font-medium px-4 py-2 rounded-lg text-sm transition-colors flex items-center gap-2">
+        <button
+          onClick={handleCreateClick}
+          className="bg-textMain text-background hover:bg-white font-medium px-4 py-2 rounded-lg text-sm transition-colors flex items-center gap-2"
+        >
+          <Icons.ShoppingBag className="w-4 h-4" />
           <span>+ Firma registrieren</span>
         </button>
       </div>
@@ -157,11 +222,12 @@ const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {
       {/* Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
         {filteredProjects.map(project => (
-          <VentureCard 
-            key={project.id} 
-            project={project} 
-            onClick={() => onSelectProject && onSelectProject(project.id)}
-          />
+          <div key={project.id}>
+            <VentureCard
+              project={project}
+              onClick={() => onSelectProject && onSelectProject(project.id)}
+            />
+          </div>
         ))}
       </div>
       
@@ -170,8 +236,16 @@ const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {
           <p>Keine Unternehmen in dieser Kategorie gefunden.</p>
         </div>
       )}
+
+      {/* Create Project Modal */}
+      <CreateProjectModal
+        isOpen={showCreateForm}
+        onClose={() => setShowCreateForm(false)}
+        onCreate={createProject}
+        linkedPlayerName={linkedPlayerName}
+      />
     </div>
   );
 };
 
-export default Projects;
+export default Projects;