Updated data.js

src/App.vue

@@ -12,6 +12,11 @@
       <SectionContainer title="Anstehende Spiele">
         <GameDisplay :games="games" />
       </SectionContainer>
+
+      <!-- PastGames Component -->
+      <SectionContainer title="Vergangene Spiele">
+        <PastGames :games="games" />
+      </SectionContainer>
     </div>
   </div>
 </template>
@@ -19,20 +24,22 @@
 <script>
 import DutyDisplay from "./components/DutyDisplay.vue";
 import GameDisplay from "./components/GameDisplay.vue";
-import SectionContainer from "./components/SectionContainer.vue"; // New reusable container
+import SectionContainer from "./components/SectionContainer.vue";
-import { duties, games } from "./data"; // Importing duties and games
+import PastGames from "./components/PastGames.vue";
+import { duties, games } from "./data";
 
 export default {
   name: "App",
   components: {
     DutyDisplay,
     GameDisplay,
-    SectionContainer, // Reusable container for sections
+    PastGames,
+    SectionContainer,
   },
   data() {
     return {
-      duties, // Use imported duties data
+      duties,
-      games, // Use imported games data
+      games,
     };
   },
 };
@@ -42,17 +49,17 @@ export default {
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
-  background-color: #f4f4f9;
+  background-color: var(--color-background);
   min-height: 100vh;
   padding: 20px;
   display: flex;
   flex-direction: column;
-  justify-content: center; /* Center content vertically */
+  justify-content: center;
-  align-items: center; /* Center content horizontally */
+  align-items: center;
 }
 
 h1 {
-  color: #34495e;
+  color: var(--color-text);
   margin-bottom: 40px;
   font-size: 2.5em;
   font-weight: bold;
@@ -60,30 +67,30 @@ h1 {
 
 .main-container {
   display: flex;
-  flex-direction: column; /* Stack items vertically */
+  flex-direction: column;
   gap: 20px;
   width: 100%;
   max-width: 1200px;
-  align-items: center; /* Center the containers horizontally */
+  align-items: center;
 }
 
 @media (max-width: 768px) {
   #app {
-    padding: 10px; /* Reduce padding on mobile */
+    padding: 10px;
   }
 
   h1 {
-    font-size: 2em; /* Smaller heading on mobile */
+    font-size: 2em;
   }
 
   .main-container {
-    gap: 20px; /* Consistent spacing between sections */
+    gap: 20px;
   }
 }
 
 @media (max-width: 480px) {
   h1 {
-    font-size: 1.8em; /* Further reduce font size for smaller screens */
+    font-size: 1.8em;
   }
 }
 </style>

src/assets/global.css

@@ -1,26 +1,205 @@
-.section-container {
+:root {
-  background-color: white;
+  --color-primary: #e9f1fa;
-  padding: 20px;
+  --color-secondary: #00abe4;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --color-accent: #dc3f03;
-  border-radius: 10px;
+  --color-heading: #34495e;
-  width: 100%;
+  --color-background: #ffffff;
-  max-width: 500px;
+  --color-text: #000000;
-  margin: 0 auto;
+  --color-light-green: #27ae60;
+  --color-light-red: #dc3545;
+
+  --font-size-h1: 2.5em;
+  --font-size-h2: 1.8em;
+  --font-size-h3: 1.5em;
+  --font-size-h4: 1.3em;
+  --font-size-base: 1em;
+  --font-size-small: 0.9em;
+
+  --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  --box-shadow-small: 0 5px 10px rgba(0, 0, 0, 0.1);
+  --box-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 h1,
-h2 {
+h2,
-  color: #34495e;
+h3,
+h4 {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  color: var(--color-text);
   font-weight: bold;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: var(--font-size-h1);
 }
 
 h2 {
-  font-size: 1.8em;
+  font-size: var(--font-size-h2);
   text-transform: uppercase;
-  border-bottom: 2px solid #16a085;
+  border-bottom: 2px solid var(--color-primary);
   padding-bottom: 10px;
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+  z-index: 2;
+  position: relative;
+}
+
+h4 {
+  font-size: var(--font-size-h4);
+}
+
+.section-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: var(--color-primary);
+  box-shadow: var(--box-shadow-small);
+  border-radius: 10px;
+  width: 100%;
+}
+
+.flex-container-base {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.flex-column {
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-row {
+  align-items: flex-start;
+  margin: 0 auto;
+}
+
+.card-base {
+  background: var(--color-background);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: var(--box-shadow);
+  width: 100%;
+  max-width: 350px;
   text-align: left;
-  color: #16a085;
+  position: relative;
+  overflow: hidden;
+  margin: 10px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-base:hover {
+  transform: translateY(-10px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+.card-base::before {
+  display: ;
+}
+
+.card-base h3 {
+  position: relative;
+}
+
+.card-large {
+  max-width: 700px;
+}
+
+.card-small {
+  max-width: 45%;
+}
+
+.small-cards {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.small-card {
+  flex: 1;
+  min-width: 150px;
+  background-color: var(--color-primary);
+  border-radius: 6px;
+  padding: 10px;
+  text-align: center;
+  box-shadow: var(--box-shadow-small);
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.small-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+.small-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 100%;
+  background-color: var(--color-secondary);
+}
+
+.icon-top-right {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+  opacity: 0.7;
+}
+
+.teams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 30px 0;
+}
+
+.team {
+  display: flex;
+  align-items: center;
+  font-size: 1.1em;
+  color: var(--color-text);
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.team i {
+  margin-right: 10px;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+}
+
+.team p {
+  margin: 0;
+}
+
+.versus {
+  font-size: 1em;
+  color: var(--color-secondary);
+  font-weight: bold;
+  text-align: center;
+}
+
+.host {
+  font-size: 1.1em;
+  color: var(--color-text);
 }
 
 @media (max-width: 768px) {
@@ -32,9 +211,37 @@ h2 {
     font-size: 1.5em;
   }
 
+  h3 {
+    font-size: 1.2em;
+  }
+
   .section-container {
     padding: 15px;
   }
+
+  .card-base {
+    padding: 15px;
+    margin: 15px;
+  }
+
+  .card-base h3 {
+    font-size: 1.2em;
+  }
+
+  .icon-top-right {
+    font-size: 1.5em;
+  }
+
+  .teams {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .team,
+  .versus {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 @media (max-width: 480px) {
@@ -49,4 +256,9 @@ h2 {
   .section-container {
     padding: 10px;
   }
+
+  .card-base {
+    padding: 10px;
+    margin: 10px;
+  }
 }

src/components/DutyDisplay.vue

@@ -1,30 +1,40 @@
 <template>
-  <div class="duty-container">
+  <div class="flex-container-base flex-row">
-    <div class="duty-section">
+    <div class="card-base card-small">
       <div class="icon-top-right">
         <i class="fa-solid fa-house"></i>
       </div>
       <div class="section-header">
         <h3>Hallendienst</h3>
       </div>
-      <ul>
+      <div class="small-cards">
-        <li v-for="person in currentDuties.courtDuty" :key="person">
+        <div
+          v-for="person in currentDuties.courtDuty"
+          :key="person"
+          class="small-card"
+        >
+          <i class="fas fa-user"></i>
           {{ person }}
-        </li>
-      </ul>
         </div>
-    <div class="duty-section">
+      </div>
+    </div>
+    <div class="card-base card-small">
       <div class="icon-top-right">
         <i class="fas fa-money-bill-wave"></i>
       </div>
       <div class="section-header">
         <h3>Kassendienst</h3>
       </div>
-      <ul>
+      <div class="small-cards">
-        <li v-for="person in currentDuties.cashDuty" :key="person">
+        <div
+          v-for="person in currentDuties.cashDuty"
+          :key="person"
+          class="small-card"
+        >
+          <i class="fas fa-user"></i>
           {{ person }}
-        </li>
+        </div>
-      </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -46,91 +56,20 @@ export default {
       return Math.ceil(diff / oneWeek);
     },
     currentDuties() {
-      return this.duties.find(
+      return (
-        (duty) => duty.week === (this.currentWeek + 6) % this.duties.length
+        this.duties.find(
+          (duty) => duty.week - 1 === (this.currentWeek + 6) % this.duties.length
+        ) || {}
       );
     },
   },
 };
 </script>
-
 <style scoped>
 * {
   box-sizing: border-box;
 }
 
-.duties {
-  text-align: center;
-  margin-top: 40px;
-  padding: 0 15px; /* Add padding to prevent cut-off */
-}
-
-h2 {
-  color: #34495e;
-  margin-bottom: 20px;
-  font-size: 2em;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-align: center; /* Ensure h2 is centered */
-}
-
-.duty-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 20px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin: 0 auto; /* Center the container */
-}
-
-.duty-section {
-  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: 45%;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  margin: 0 auto; /* Center the card */
-}
-
-.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);
-}
-
-.icon-top-right {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 1.8em;
-  color: #2980b9;
-  opacity: 0.7;
-}
-
-h3 {
-  color: #16a085;
-  font-size: 1.5em;
-  z-index: 2;
-}
-
 ul {
   list-style: none;
   padding: 0;
@@ -152,19 +91,16 @@ li:hover {
 }
 
 @media (max-width: 768px) {
-  .duty-container {
+  .flex-container-base.flex-column {
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
     padding: 0 15px;
   }
 
-  .duty-section {
+  .card-base.card-small {
-    max-width: 100%; /* Take full width on small screens */
+    max-width: 100%;
-    margin: 0 auto; /* Center the card */
+    margin: 0 auto;
   }
 
-  h2 {
+  h3 {
     font-size: 1.8em;
   }
 

src/components/GameDisplay.vue

@@ -1,10 +1,17 @@
 <template>
-  <div v-if="upcomingGames.length" class="game-cards">
+  <div v-if="upcomingGames.length" class="flex-container-base flex-column">
-    <div class="game-card" v-for="(game, index) in upcomingGames" :key="index">
+    <div
+      class="card-base card-large"
+      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>
+      <h3>
+        {{ formatDate(game.date) }} - {{ game.time }} Uhr - Spiel
+        {{ game.gameNr }}
+      </h3>
       <div class="teams">
         <div class="team">
           <i :class="getIconClass(game.team1)"></i>
@@ -65,155 +72,47 @@ export default {
   box-sizing: border-box;
 }
 
-.games {
+.flex-container-base.flex-row {
   margin-top: 40px;
   text-align: center;
   padding: 0 15px;
 }
 
-h2 {
-  color: #34495e;
-  margin-bottom: 20px;
-  font-size: 2em;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  text-align: center;
-}
-
-.game-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: center;
-  width: 100%;
-  justify-content: 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;
-  margin: 0 auto;
-  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: 1.8em;
-  color: #2980b9;
-  opacity: 0.7;
-}
-
-.game-card h3 {
-  color: #16a085;
-  font-size: 1.3em;
-  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.1em;
   width: 40%;
 }
 
-.team i {
-  margin-right: 10px;
-  font-size: 1.5em;
-  color: #2980b9; /* Color of the icon */
-}
-.team span {
-  margin-right: 10px;
-  font-size: 1.5em;
-}
-
 .versus {
-  font-size: 1.2em;
-  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-cards {
-    width: 100%;
-    padding: 0 15px;
-    justify-content: center;
-  }
-
-  .game-card {
-    max-width: 100%;
-    margin: 0 auto;
-  }
-
-  h2 {
-    font-size: 1.8em;
-  }
-
   .teams {
     flex-direction: column;
     align-items: center;
-    gap: 10px;
   }
 
   .team,
   .versus {
     width: 100%;
     text-align: center;
+    margin: 10px 0;
   }
 
-  .icon-top-right {
+  .team {
-    font-size: 1.5em;
+    font-size: 1em;
   }
 
-  .game-card h3 {
+  .versus {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 }
 </style>

src/components/PastGames.vue

@@ -0,0 +1,315 @@
+<template>
+  <div v-if="previousGames.length" class="flex-container-base flex-column">
+    <div
+      class="card-base card-large"
+      v-for="(game, index) in previousGames"
+      :key="index"
+    >
+      <!-- Conditional Icon Display -->
+      <div class="icon-top-right">
+        <i
+          :class="{
+            'fa-solid fa-trophy': didWeWin(game),
+            'fa-solid fa-poo': !didWeWin(game),
+          }"
+        ></i>
+      </div>
+
+      <h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
+
+      <!-- Teams and Sets Won Display -->
+      <div class="teams">
+        <div
+          class="team"
+          :class="{
+            'our-team': game.team1 === ourTeam,
+            'winning-team': isWinner(game, game.team1),
+          }"
+        >
+          <p class="team-name">{{ game.team1 }}</p>
+          <p class="sets-won" v-if="game.team1Wins !== null">
+            Sätze: {{ game.team1Wins }}
+          </p>
+        </div>
+        <p class="versus">VS</p>
+        <div
+          class="team"
+          :class="{
+            'our-team': game.team2 === ourTeam,
+            'winning-team': isWinner(game, game.team2),
+          }"
+        >
+          <p class="team-name">{{ game.team2 }}</p>
+          <p class="sets-won" v-if="game.team2Wins !== null">
+            Sätze: {{ game.team2Wins }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Winner Display -->
+      <p
+        class="winner"
+        :class="{
+          won: didWeWin(game),
+          lost: didWeLose(game),
+        }"
+        v-if="game.winner !== null"
+      >
+        <strong>{{
+          didWeWin(game)
+            ? "Gewonnen"
+            : didWeLose(game)
+            ? "Verloren"
+            : "Unentschieden"
+        }}</strong>
+      </p>
+      <p v-else class="winner"><strong>Result not available</strong></p>
+
+      <!-- Set Results Card-based Display -->
+      <div class="sets" v-if="game.results && game.results.sets">
+        <h4>Satzergebnisse:</h4>
+        <div class="small-cards">
+          <div
+            class="small-card"
+            v-for="(set, setIndex) in Object.values(game.results.sets)"
+            :key="setIndex"
+            :class="{
+              'team1-wins': set[0] > set[1],
+              'team2-wins': set[1] > set[0],
+              draw: set[0] === set[1],
+            }"
+          >
+            <p class="set-number">Satz {{ setIndex + 1 }}</p>
+            <div class="set-scores">
+              <p class="score">{{ set[0] }} : {{ set[1] }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Additional Data Links (YouTube/Instagram) as Buttons with Logos -->
+      <div
+        v-if="
+          game.results &&
+          game.results.additional_data &&
+          game.results.additional_data.length
+        "
+        class="additional-data"
+      >
+        <h4>Links:</h4>
+        <div class="button-group">
+          <button
+            v-for="(data, dataIndex) in game.results.additional_data"
+            :key="dataIndex"
+            @click="openLink(data.url)"
+            class="link-button"
+          >
+            <i
+              :class="{
+                'fab fa-youtube': data.type === 'YouTube',
+                'fab fa-instagram': data.type === 'Instagram',
+              }"
+            ></i>
+            {{ data.title }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Separator between cards -->
+      <hr
+        class="game-card-separator"
+        v-if="index !== previousGames.length - 1"
+      />
+    </div>
+  </div>
+  <p v-else>Noch keine Spiele</p>
+</template>
+
+<script>
+export default {
+  props: {
+    games: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      ourTeam: "DJK Saarbrücken-Rastpfuhl",
+    };
+  },
+  computed: {
+    previousGames() {
+      const today = new Date();
+      return this.games
+        .filter((game) => {
+          const gameDate = new Date(game.date);
+          return gameDate < today;
+        })
+        .map((game) => {
+          let team1Wins = null;
+          let team2Wins = null;
+          let winner = null;
+          if (game.results && game.results.sets) {
+            team1Wins = 0;
+            team2Wins = 0;
+            Object.values(game.results.sets).forEach((set) => {
+              if (set[0] > set[1]) {
+                team1Wins++;
+              } else if (set[1] > set[0]) {
+                team2Wins++;
+              }
+            });
+            if (team1Wins > team2Wins) {
+              winner = game.team1;
+            } else if (team2Wins > team1Wins) {
+              winner = game.team2;
+            } else {
+              winner = "Draw";
+            }
+          }
+          return {
+            ...game,
+            team1Wins,
+            team2Wins,
+            winner,
+          };
+        });
+    },
+  },
+  methods: {
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    },
+    isWinner(game, team) {
+      return game.winner === team;
+    },
+    didWeWin(game) {
+      return game.winner === this.ourTeam;
+    },
+    didWeLose(game) {
+      return (
+        game.winner !== null &&
+        game.winner !== this.ourTeam &&
+        game.winner !== "Draw"
+      );
+    },
+    openLink(url) {
+      window.open(url, "_blank");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.teams {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  margin: 20px 0;
+}
+
+.team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.team.winning-team {
+  border: 2px solid var(--color-light-green);
+}
+
+.team-name {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: var(--color-text);
+  text-align: center;
+  margin: 5px 0;
+}
+
+.sets-won {
+  font-size: 1em;
+  color: var(--color-light-green);
+  margin-top: 5px;
+}
+
+.versus {
+  font-size: 1em;
+  font-weight: bold;
+  color: var(--color-secondary);
+  margin: 0 10px;
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.winner {
+  font-size: 1.5em;
+  margin-top: 15px;
+  text-align: center;
+}
+
+.winner.won {
+  color: var(--color-light-green);
+}
+
+.winner.lost {
+  color: var(--color-light-red);
+}
+
+.set-number {
+  font-weight: bold;
+  font-size: 0.9em;
+  margin-bottom: 5px;
+}
+
+.set-scores .score {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.link-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--color-secondary);
+  color: white;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 0.9em;
+}
+
+.link-button i {
+  font-size: 1.2em;
+  vertical-align: middle;
+}
+
+.link-button:hover {
+  background-color: var(--color-primary);
+}
+
+.game-card-separator {
+  border: 0;
+  height: 1px;
+  margin: 20px 0;
+}
+</style>

src/data.js

@@ -6,7 +6,7 @@ export const duties = [
   },
   {
     week: 2,
-        courtDuty: ["Niclas, Bruno"],
+    courtDuty: ["Niclas", "Bruno"],
     cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
   },
   {
@@ -24,7 +24,7 @@ export const duties = [
     courtDuty: ["Daniel", "Stephan"],
     cashDuty: ["Benedikt", "MJ"],
   },
-    { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
+  { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali", "Niklas"] },
   {
     week: 7,
     courtDuty: ["Simon", "Max", "Dima"],
@@ -40,48 +40,128 @@ export const duties = [
 export const games = [
   {
     date: "2024-09-21",
+    time: "19:00",
     gameNr: 1,
     team1: "Tv Saarwellingen",
     team2: "DJK Saarbrücken-Rastpfuhl",
     host: 1,
+    results: {
+      sets: {
+        1: [25, 15],
+        2: [25, 13],
+        3: [25, 14],
+      },
+      additional_data: [
+        {
+          type: "YouTube",
+          title: "Replay",
+          url: "https://youtu.be/IaTdoH1HPVk",
+        },
+        {
+          type: "Instagram",
+          title: "Highlight Saarwellingen",
+          url: "https://www.instagram.com/reel/DAV1mC9sB45/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==",
+        },
+      ],
+    },
   },
   {
     date: "2024-09-28",
+    time: "14:30",
     gameNr: 1,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "SVK Blieskastel-Zweibrücken",
     host: 1,
+    results: {
+      sets: {
+        1: [25, 23],
+        2: [21, 25],
+        3: [23, 25],
+        4: [24, 26],
+      },
+      additional_data: [],
+    },
   },
   {
     date: "2024-09-28",
+    time: "14:30",
     gameNr: 2,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "TV Klarenthal",
     host: 1,
+    results: {
+      sets: {
+        1: [25, 22],
+        2: [26, 24],
+        3: [25, 23],
+      },
+      additional_data: [],
+    },
   },
   {
     date: "2024-11-02",
+    time: "19:00",
     gameNr: 1,
     team1: "TV Düppenweiler",
     team2: "DJK Saarbrücken-Rastpfuhl",
     host: 1,
+    results: {
+      sets: {
+        1: [25, 23],
+        2: [23, 25],
+        3: [25, 10],
+        4: [25, 14],
+      },
+      additional_data: [],
+    },
   },
   {
     date: "2024-11-09",
+    time: "18:30",
     gameNr: 1,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "TV Brebach",
     host: 1,
+    results: {
+      sets: {
+        1: [22, 25],
+        2: [22, 25],
+        3: [16, 25],
+      },
+      additional_data: [
+        {
+          type: "YouTube",
+          title: "Replay",
+          url: "https://www.youtube.com/watch?v=7vRUhVHEAcQ",
+        },
+      ],
+    },
   },
   {
     date: "2024-11-09",
+    time: "18:30",
     gameNr: 2,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "TV 06 Limbach",
     host: 1,
+    results: {
+      sets: {
+        1: [20, 25],
+        2: [22, 25],
+        3: [23, 25],
+      },
+      additional_data: [
+        {
+          type: "YouTube",
+          title: "Replay",
+          url: "https://youtu.be/L4yv4clg-XQ",
+        },
+      ],
+    },
   },
   {
     date: "2024-11-30",
+    time: "19:00",
     gameNr: 2,
     team1: "TV Saarwellingen 2",
     team2: "DJK Saarbrücken-Rastpfuhl",
@@ -89,6 +169,7 @@ export const games = [
   },
   {
     date: "2024-12-14",
+    time: "14:00",
     gameNr: 2,
     team1: "TV Wiesbach 2",
     team2: "DJK Saarbrücken-Rastpfuhl",
@@ -96,6 +177,7 @@ export const games = [
   },
   {
     date: "2025-01-11",
+    time: "19:00",
     gameNr: 1,
     team1: "TV Klarenthal",
     team2: "DJK Saarbrücken-Rastpfuhl",
@@ -103,6 +185,7 @@ export const games = [
   },
   {
     date: "2025-01-18",
+    time: "16:00",
     gameNr: 1,
     team1: "TV Brebach",
     team2: "DJK Saarbrücken-Rastpfuhl",
@@ -110,6 +193,7 @@ export const games = [
   },
   {
     date: "2025-02-01",
+    time: "14:30",
     gameNr: 1,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "TV Düppenweiler",
@@ -117,6 +201,7 @@ export const games = [
   },
   {
     date: "2025-02-01",
+    time: "14:30",
     gameNr: 2,
     team1: "DJK Saarbrücken-Rastpfuhl",
     team2: "TV Wiesbach 2",
@@ -124,6 +209,7 @@ export const games = [
   },
   {
     date: "2025-02-15",
+    time: "15:00",
     gameNr: 1,
     team1: "TV 06 Limbach",
     team2: "DJK Saarbrücken-Rastpfuhl",
@@ -131,16 +217,26 @@ export const games = [
   },
   {
     date: "2025-03-08",
+    time: "15:00",
     gameNr: 1,
     team1: "SVK Blieskastel-Zweibrücken",
     team2: "DJK Saarbrücken-Rastpfuhl",
-        host: 2,
+    host: 1,
   },
   {
-        date: "2025-03-08",
+    date: "2025-03-15",
+    time: "18:30",
+    gameNr: 1,
+    team1: "DJK Saarbrücken-Rastpfuhl",
+    team2: "TV Saarwellingen",
+    host: 1,
+  },
+  {
+    date: "2025-03-15",
+    time: "18:30",
     gameNr: 2,
-        team1: "TV Saarwellingen",
+    team1: "DJK Saarbrücken-Rastpfuhl",
-        team2: "DJK Saarbrücken-Rastpfuhl",
+    team2: "TV Saarwellingen 2",
-        host: 2,
+    host: 1,
   },
 ];