Added Gamedays

src/App.vue

@@ -1,31 +1,171 @@
 <template>
   <div id="app">
-    <h1>Team Dienste</h1>
+    <h1>DJK Saarbrücken-Rastpfuhl - Herren 1</h1>
     <div class="container">
       <DutyDisplay :duties="duties" />
     </div>
+    <div class="container">
+      <GameDisplay :games="games" />
+    </div>
   </div>
 </template>
 
 <script>
-import DutyDisplay from './components/DutyDisplay.vue';
+import DutyDisplay from "./components/DutyDisplay.vue";
+import GameDisplay from "./components/GameDisplay.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    DutyDisplay
+    DutyDisplay,
+    GameDisplay,
   },
   data() {
     return {
       duties: [
-        { week: 1, courtDuty: ["Jason", "Tim", "Jacob"], cashDuty: ["Simon", "Max", "Dima"] },
+        {
-          { week: 2, courtDuty: ["Niclas, Bruno"], cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"] },
+          week: 1,
-          { week: 3, courtDuty: ["Benedikt", "MJ"], cashDuty: ["Jason", "Tim", "Jacob"] },
+          courtDuty: ["Jason", "Tim", "Jacob"],
-          { week: 4, courtDuty: ["Ali", "Niklas"], cashDuty: ["Niclas", "Bruno"] },
+          cashDuty: ["Simon", "Max", "Dima"],
-          { week: 5, courtDuty: ["Daniel", "Stephan"], cashDuty: ["Benedikt", "MJ"] },
+        },
-          { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
+        {
-          { week: 7, courtDuty: ["Simon", "Max", "Dima"], cashDuty: ["Daniel", "Stephan"] },
+          week: 2,
-          { week: 8, courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"], cashDuty: ["Kieran", "Marcel"]}
+          courtDuty: ["Niclas, Bruno"],
+          cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
+        },
+        {
+          week: 3,
+          courtDuty: ["Benedikt", "MJ"],
+          cashDuty: ["Jason", "Tim", "Jacob"],
+        },
+        {
+          week: 4,
+          courtDuty: ["Ali", "Niklas"],
+          cashDuty: ["Niclas", "Bruno"],
+        },
+        {
+          week: 5,
+          courtDuty: ["Daniel", "Stephan"],
+          cashDuty: ["Benedikt", "MJ"],
+        },
+        { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
+        {
+          week: 7,
+          courtDuty: ["Simon", "Max", "Dima"],
+          cashDuty: ["Daniel", "Stephan"],
+        },
+        {
+          week: 8,
+          courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
+          cashDuty: ["Kieran", "Marcel"],
+        },
+      ],
+      games: [
+        {
+          date: "2024-09-21",
+          gameNr: 1,
+          team1: "Tv Saarwellingen",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2024-09-28",
+          gameNr: 1,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "SVK Blieskastel-Zweibrücken",
+          host: 1,
+        },
+        {
+          date: "2024-09-28",
+          gameNr: 2,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "TV Klarenthal",
+          host: 1,
+        },
+        {
+          date: "2024-11-02",
+          gameNr: 1,
+          team1: "TV Düppenweiler",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2024-11-09",
+          gameNr: 1,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "TV Brebach",
+          host: 1,
+        },
+        {
+          date: "2024-11-09",
+          gameNr: 2,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "TV 06 Limbach",
+          host: 1,
+        },
+        {
+          date: "2024-11-30",
+          gameNr: 2,
+          team1: "TV Saarwellingen 2",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2024-12-14",
+          gameNr: 2,
+          team1: "TV Wiesbach 2",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2025-01-11",
+          gameNr: 1,
+          team1: "TV Klarenthal",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2025-01-18",
+          gameNr: 1,
+          team1: "TV Brebach",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2025-02-01",
+          gameNr: 1,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "TV Düppenweiler",
+          host: 1,
+        },
+        {
+          date: "2025-02-01",
+          gameNr: 2,
+          team1: "DJK Saarbrücken-Rastpfuhl",
+          team2: "TV Wiesbach 2",
+          host: 1,
+        },
+        {
+          date: "2025-02-15",
+          gameNr: 1,
+          team1: "TV 06 Limbach",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 1,
+        },
+        {
+          date: "2025-03-08",
+          gameNr: 1,
+          team1: "SVK Blieskastel-Zweibrücken",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 2,
+        },
+        {
+          date: "2025-03-08",
+          gameNr: 2,
+          team1: "TV Saarwellingen",
+          team2: "DJK Saarbrücken-Rastpfuhl",
+          host: 2,
+        },
       ],
     };
   },

src/components/DutyDisplay.vue

@@ -1,23 +1,31 @@
 <template>
   <div class="duties">
-    <h2>Dienste für Woche {{ currentWeek }}</h2>
+    <h2>Mannschaftsdienste für Woche {{ currentWeek }}</h2>
     <div class="duty-container">
       <div class="duty-section">
+        <div class="icon-top-right">
+          <i class="fa-solid fa-volleyball"></i>
+        </div>
         <div class="section-header">
-          <i class="fas fa-basketball-ball"></i>
           <h3>Hallendienst</h3>
         </div>
         <ul>
-          <li v-for="person in currentDuties.courtDuty" :key="person">{{ person }}</li>
+          <li v-for="person in currentDuties.courtDuty" :key="person">
+            {{ person }}
+          </li>
         </ul>
       </div>
       <div class="duty-section">
-        <div class="section-header">
+        <div class="icon-top-right">
           <i class="fas fa-money-bill-wave"></i>
+        </div>
+        <div class="section-header">
           <h3>Kassendienst</h3>
         </div>
         <ul>
-          <li v-for="person in currentDuties.cashDuty" :key="person">{{ person }}</li>
+          <li v-for="person in currentDuties.cashDuty" :key="person">
+            {{ person }}
+          </li>
         </ul>
       </div>
     </div>
@@ -29,8 +37,8 @@ export default {
   props: {
     duties: {
       type: Array,
-      required: true
+      required: true,
-    }
+    },
   },
   computed: {
     currentWeek() {
@@ -41,30 +49,65 @@ export default {
       return Math.ceil(diff / oneWeek);
     },
     currentDuties() {
-      return this.duties.find(duty => duty.week === (this.currentWeek + 6) % this.duties.length);
+      return this.duties.find(
-    }
+        (duty) => duty.week === (this.currentWeek + 6) % this.duties.length
-  }
+      );
+    },
+  },
 };
 </script>
 
 <style scoped>
 .duties {
   text-align: center;
+  margin-top: 40px;
+}
+
+h2 {
+  color: #34495e;
+  margin-bottom: 20px;
+  font-size: 2.2em;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
 }
 
 .duty-container {
   display: flex;
-  gap: 30px;
+  justify-content: center;
-  justify-content: space-around;
+  align-items: flex-start;
-  margin-top: 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .duty-section {
-  background-color: #ecf0f1;
+  background: linear-gradient(145deg, #dfe4ea, #f1f2f6);
-  padding: 15px;
+  padding: 20px;
-  border-radius: 8px;
+  border-radius: 12px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  width: 45%;
+  width: 100%;
+  max-width: 45%;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.duty-section::before {
+  content: "";
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 100px;
+  height: 100px;
+  background-color: rgba(0, 123, 255, 0.15);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.duty-section:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }
 
 .section-header {
@@ -72,27 +115,55 @@ export default {
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
-}
+  z-index: 2;
-
+  position: relative;
-.section-header i {
-  margin-right: 10px;
-  font-size: 1.5em;
-  color: #2980b9;
 }
 
 h3 {
   color: #16a085;
+  font-size: 1.5em;
+  z-index: 2;
 }
 
 ul {
   list-style: none;
   padding: 0;
+  z-index: 2;
+  position: relative;
 }
 
 li {
   background-color: #bdc3c7;
   margin: 5px 0;
-  padding: 8px;
+  padding: 10px;
-  border-radius: 4px;
+  border-radius: 8px;
+  font-size: 1.2em;
+  transition: background-color 0.2s ease;
+}
+
+li:hover {
+  background-color: #ecf0f1;
+}
+
+.icon-top-right {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 2em;
+  color: #2980b9;
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .duty-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .duty-section {
+    width: 100%;
+    max-width: 90%;
+    margin-bottom: 20px;
+  }
 }
 </style>

src/components/GameDisplay.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="games">
+    <h2>Anstehende Spiele</h2>
+    <div v-if="upcomingGames.length" class="game-cards">
+      <div
+        class="game-card"
+        v-for="(game, index) in upcomingGames"
+        :key="index"
+      >
+        <div class="icon-top-right">
+          <i class="fa-solid fa-volleyball"></i>
+        </div>
+        <h3>{{ formatDate(game.date) }} - Spiel{{ game.gameNr }}</h3>
+        <div class="teams">
+          <div class="team">
+            <span>🏅</span>
+            <p>{{ game.team1 }}</p>
+          </div>
+          <p class="versus">VS</p>
+          <div class="team">
+            <span>🏅</span>
+            <p>{{ game.team2 }}</p>
+          </div>
+        </div>
+        <p class="host">
+          <strong>Gastgeber:</strong>
+          {{ game.host === 1 ? game.team1 : game.team2 }}
+        </p>
+      </div>
+    </div>
+    <p v-else>Keine anstehended Spiele</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    games: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    upcomingGames() {
+      const today = new Date();
+      return this.games.filter((game) => {
+        const gameDate = new Date(game.date);
+        return gameDate >= today;
+      });
+    },
+  },
+  methods: {
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.games {
+  margin-top: 40px;
+  text-align: center;
+}
+
+h2 {
+  color: #34495e;
+  margin-bottom: 20px;
+  font-size: 2.2em;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+.game-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+}
+
+.game-card {
+  background: linear-gradient(145deg, #dfe4ea, #f1f2f6);
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 600px;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.game-card::before {
+  content: "";
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 100px;
+  height: 100px;
+  background-color: rgba(0, 123, 255, 0.15);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.game-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+
+.icon-top-right {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 2em;
+  color: #2980b9;
+  opacity: 0.7;
+}
+
+.game-card h3 {
+  color: #16a085;
+  font-size: 1.5em;
+  z-index: 2;
+  position: relative;
+}
+
+.teams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+  z-index: 2;
+  position: relative;
+}
+
+.team {
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+  width: 40%;
+}
+
+.team span {
+  margin-right: 10px;
+  font-size: 1.5em;
+}
+
+.versus {
+  font-size: 1.3em;
+  color: #e74c3c;
+  font-weight: bold;
+  z-index: 2;
+  width: 20%;
+  text-align: center;
+}
+
+.host {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: #2980b9;
+  z-index: 2;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .game-card {
+    width: 100%;
+    max-width: 90%;
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  .teams {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .team,
+  .versus {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>