wcl.html

<main class="space-y-6">
    <h1 class="text-3xl font-bold text-center text-blue-450 mb-6">Warcraft Logs Gilden-Übersicht</h1>

    <section class="bg-slate-850 p-6 rounded-lg">
        <div class="flex justify-center">
            <button id="fetch-wcl-reports-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md">
                Letzte Raid-Logs laden
            </button>
        </div>
        
        <div id="wcl-reports-container" class="mt-6 space-y-4">
            </div>
    </section>
</main>


<script>
const WCL_CLIENT_ID = '-';
const WCL_CLIENT_SECRET = '-';
const GUILD_NAME = 'P Ä N I K';
const GUILD_SERVER = 'everlook'; // wichtig: klein geschrieben
const GUILD_REGION = 'EU';


document.getElementById('fetch-wcl-reports-btn').addEventListener('click', async () => {
    const container = document.getElementById('wcl-reports-container');
    container.innerHTML = '<p class="text-gray-400">Lade Logs...</p>';

    try {
        // 1. Token anfordern
        const tokenResponse = await fetch('https://classic.warcraftlogs.com/oauth/token', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/x-www-form-urlencoded' 
            },
            body: new URLSearchParams({
                grant_type: 'client_credentials',
                client_id: WCL_CLIENT_ID,
                client_secret: WCL_CLIENT_SECRET
            })
        });

        const tokenData = await tokenResponse.json();
        const accessToken = tokenData.access_token;

        // 2. GraphQL Query vorbereiten
const query = `
{
  guildData {
    guild(name: "${GUILD_NAME}", serverSlug: "${GUILD_SERVER}", region: EU) {
      name
      reports(limit: 5) {
        data {
          code
          title
          startTime
          endTime
          zone {
            name
          }
        }
      }
    }
  }
}`;

// ...
const response = await fetch('https://classic.warcraftlogs.com/api/v2/client', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${accessToken}`
    },
    body: JSON.stringify({ query })
});

const result = await response.json();

if (!result.data || !result.data.guildData || !result.data.guildData.guild) {
    console.error('Keine Gildendaten gefunden:', result);
    container.innerHTML = '<p class="text-red-400">Gilde nicht gefunden oder keine Logs vorhanden.</p>';
    return;
}

const reports = result.data.guildData.guild.reports.data;


        // 3. Anzeigen
        container.innerHTML = reports.length === 0
            ? '<p class="text-gray-400">Keine Logs gefunden.</p>'
            : reports.map(report => `
                <div class="bg-slate-900 p-4 rounded-md border border-slate-650">
                    <h3 class="text-lg font-bold text-blue-450">${report.title}</h3>
                    <p class="text-gray-400">${new Date(report.startTime).toLocaleString('de-DE')}</p>
                    <p class="text-gray-400">Zone: ${report.zone?.name || 'Unbekannt'}</p>
                    <a href="https://classic.warcraftlogs.com/reports/${report.code}" target="_blank" class="text-blue-400 hover:underline">Report ansehen</a>
                </div>
            `).join('');
        
    } catch (err) {
        console.error('Fehler beim Laden von Warcraft Logs:', err);
        container.innerHTML = `<p class="text-red-400">Fehler: ${err.message}</p>`;
    }
});
</script>