harheimertc/pages/spielsysteme.vue

<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Spielsysteme
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <p class="text-xl text-gray-600 mb-12">
        Übersicht der verschiedenen Mannschafts-Spielsysteme im Tischtennis
      </p>

      <!-- Filter -->
      <div class="mb-8 flex flex-wrap gap-4">
        <button
          v-for="kategorie in verfuegbareKategorien"
          :key="kategorie"
          :class="[
            'px-4 py-2 rounded-lg font-medium transition-colors',
            selectedCategory === kategorie
              ? 'bg-primary-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
          ]"
          @click="selectedCategory = kategorie"
        >
          {{ kategorie }}
        </button>
        <button
          :class="[
            'px-4 py-2 rounded-lg font-medium transition-colors',
            selectedCategory === 'alle'
              ? 'bg-primary-600 text-white'
              : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
          ]"
          @click="selectedCategory = 'alle'"
        >
          Alle Kategorien
        </button>
      </div>

      <!-- Spielsysteme -->
      <div
        v-if="filteredSystems.length > 0"
        class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        <div
          v-for="system in filteredSystems"
          :key="system.name"
          class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow border border-gray-100"
        >
          <div class="flex items-start justify-between mb-4">
            <div class="flex-1">
              <h3 class="text-xl font-display font-bold text-gray-900 mb-2">
                {{ system.name }}
              </h3>
              <div class="flex items-center mb-3">
                <Users
                  :size="16"
                  class="text-primary-600 mr-2"
                />
                <span class="text-sm font-medium text-gray-600">{{ system.mannschaftsgroesse }}</span>
              </div>
            </div>
            <div
              :class="[
                'px-3 py-1 rounded-full text-xs font-medium',
                getCategoryColor(system.kategorie)
              ]"
            >
              {{ system.kategorie }}
            </div>
          </div>

          <p class="text-gray-700 mb-4 leading-relaxed">
            {{ system.description }}
          </p>

          <div class="space-y-2 text-sm">
            <div
              v-if="system.spielabfolge"
              class="flex items-center"
            >
              <Calendar
                :size="14"
                class="text-primary-600 mr-2 flex-shrink-0"
              />
              <span class="text-gray-600"><strong>Spielabfolge:</strong> {{ system.spielabfolge }}</span>
            </div>
            <div
              v-if="system.anzahl_spiele"
              class="flex items-center"
            >
              <Hash
                :size="14"
                class="text-primary-600 mr-2 flex-shrink-0"
              />
              <span class="text-gray-600"><strong>Anzahl Spiele:</strong> {{ system.anzahl_spiele }}</span>
            </div>
            <div
              v-if="system.besonderheiten"
              class="flex items-center"
            >
              <Star
                :size="14"
                class="text-primary-600 mr-2 flex-shrink-0"
              />
              <span class="text-gray-600"><strong>Besonderheiten:</strong> {{ system.besonderheiten }}</span>
            </div>
          </div>
        </div>
      </div>

      <div
        v-else
        class="text-center py-12 bg-white rounded-xl shadow-lg"
      >
        <Settings
          :size="48"
          class="text-gray-400 mx-auto mb-4"
        />
        <p class="text-gray-600">
          Keine Spielsysteme für die ausgewählte Kategorie gefunden.
        </p>
      </div>

      <!-- Zusätzliche Informationen -->
      <div class="mt-12 bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-8 text-white">
        <h3 class="text-2xl font-display font-bold mb-6 flex items-center">
          <BookOpen
            :size="28"
            class="mr-3"
          />
          Weitere Informationen
        </h3>
        <div class="space-y-4">
          <p class="text-primary-100 leading-relaxed">
            Die Spielsysteme werden je nach Liga und Verband unterschiedlich eingesetzt. 
            Die meisten regionalen Ligen verwenden das Bundessystem oder das Braunschweiger System.
          </p>
          <p class="text-primary-100 leading-relaxed">
            Internationale Wettkämpfe folgen meist den FIT-Systemen (Corbillon-Cup für Damen, 
            Swaythling-Cup für Herren).
          </p>
          <div class="mt-6">
            <a
              href="https://www.wikiwand.com/de/Tischtennis#Spielsysteme"
              target="_blank"
              class="inline-flex items-center px-6 py-3 bg-white text-primary-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
            >
              <ExternalLink
                :size="20"
                class="mr-2"
              />
              Detaillierte Erklärungen auf Wikiwand
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Users, Settings, BookOpen, ExternalLink, Calendar, Hash, Star } from 'lucide-vue-next'

const systems = ref([])
const selectedCategory = ref('alle')

const loadSystems = async () => {
  try {
    const response = await fetch('/data/spielsysteme.csv')
    if (!response.ok) return

    const csv = await response.text()
    const lines = csv.split('\n').filter(line => line.trim() !== '')

    if (lines.length < 2) return

    systems.value = lines.slice(1).map(line => {
      // CSV-Parser: Respektiert Anführungszeichen
      const values = []
      let current = ''
      let inQuotes = false

      for (let i = 0; i < line.length; i++) {
        const char = line[i]

        if (char === '"') {
          inQuotes = !inQuotes
        } else if (char === ',' && !inQuotes) {
          values.push(current.trim())
          current = ''
        } else {
          current += char
        }
      }
      values.push(current.trim())

      if (values.length < 8) return null

      return {
        name: values[0].trim(),
        description: values[1].trim(),
        mannschaftsgroesse: values[2].trim(),
        kategorie: values[3].trim(),
        details: values[4].trim(),
        spielabfolge: values[5].trim(),
        anzahl_spiele: values[6].trim(),
        besonderheiten: values[7].trim()
      }
    }).filter(system => system !== null)
  } catch (error) {
    console.error('Fehler beim Laden der Spielsysteme:', error)
  }
}

const verfuegbareKategorien = computed(() => {
  const kategorien = [...new Set(systems.value.map(s => s.kategorie).filter(k => k !== ''))]
  return kategorien.sort()
})

const filteredSystems = computed(() => {
  if (selectedCategory.value === 'alle') {
    return systems.value
  }
  return systems.value.filter(s => s.kategorie === selectedCategory.value)
})

const getCategoryColor = (kategorie) => {
  const colors = {
    'Klassisch': 'bg-blue-100 text-blue-800',
    'Flexibel': 'bg-green-100 text-green-800',
    'Strukturiert': 'bg-purple-100 text-purple-800',
    'Modifiziert': 'bg-orange-100 text-orange-800',
    'International': 'bg-red-100 text-red-800',
    'Standard': 'bg-gray-100 text-gray-800',
    'Professionell': 'bg-yellow-100 text-yellow-800'
  }
  return colors[kategorie] || 'bg-gray-100 text-gray-800'
}


onMounted(() => {
  loadSystems()
})

useHead({
  title: 'Spielsysteme - Harheimer TC',
})
</script>