bullpen view progress

app/src/components/PlayerComponent.vue

@@ -77,46 +77,75 @@ generateItems();
 </script>
 
 <template>
+  <div>
+    <ion-label>hallo</ion-label>
+  </div>
   <ion-list :inset="false">
-    <ion-item v-for="(bullpen, index) in items" :key="index" class="custom-item" :button="true" :detail="false">
+    <ion-item v-for="(bullpen, index) in items" :key="index" class="custom-item" lines="none" :button="true" :detail="false">
       <!-- Top-left icon -->
       <ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>
       <ion-label>
         <strong>{{formatDate(bullpen.startedAt)}}</strong>
         <ion-label class="item-labels">
-          <!-- Horizontale Anordnung der Kreise -->
+          <div class="stats-container">
-          <div class="circle-container">
+            <div class="stat-item" :style="{ '--progress': '57%' }">
-            <div class="circle-wrapper">
+              <div class="stat-content">
-              <div class="progress-circle" :class="percentageClass(57)">
+                <span class="percentage">57%</span>
-                <span>{{ (0.57 * 100).toFixed(0) }}%</span>
+                <span class="label">Precision</span>
-                <div class="left-half-clipper">
-                  <div class="first50-bar"></div>
-                  <div class="value-bar"></div>
-                </div>
               </div>
-              <label>Precision</label>
             </div>
-            <div class="circle-wrapper">
+            <div class="stat-item" :style="{ '--progress': '77%' }">
-              <div class="progress-circle" :class="percentageClass(77)">
+              <div class="stat-content">
-                <span>{{ (0.77 * 100).toFixed(0) }}%</span>
+                <span class="percentage">77%</span>
-                <div class="left-half-clipper">
+                <span class="label">Strike</span>
-                  <div class="first50-bar"></div>
-                  <div class="value-bar"></div>
-                </div>
               </div>
-              <label>Strike</label>
             </div>
-            <div class="circle-wrapper">
+            <div class="stat-item" :style="{ '--progress': '33%' }">
-              <div class="progress-circle" :class="percentageClass(33)">
+              <div class="stat-content">
-                <span>{{ (0.33 * 100).toFixed(0) }}%</span>
+                <span class="percentage">33%</span>
-                <div class="left-half-clipper">
+                <span class="label">Balls</span>
-                  <div class="first50-bar"></div>
-                  <div class="value-bar"></div>
-                </div>
               </div>
-              <label>Balls</label>
             </div>
+<!--            <div class="stat-item" :style="{ '&#45;&#45;progress': '45%' }">-->
+<!--              <div class="stat-content">-->
+<!--                <span class="percentage">45%</span>-->
+<!--                <span class="label">Fastballs</span>-->
+<!--              </div>-->
+<!--            </div>-->
           </div>
+          <!-- Horizontale Anordnung der Kreise -->
+<!--          <div class="circle-container">-->
+<!--            <div class="circle-wrapper">-->
+<!--              <div class="progress-circle" :class="percentageClass(57)">-->
+<!--                <span>{{ (0.57 * 100).toFixed(0) }}%</span>-->
+<!--                <div class="left-half-clipper">-->
+<!--                  <div class="first50-bar"></div>-->
+<!--                  <div class="value-bar"></div>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <label>Precision</label>-->
+<!--            </div>-->
+<!--            <div class="circle-wrapper">-->
+<!--              <div class="progress-circle" :class="percentageClass(77)">-->
+<!--                <span>{{ (0.77 * 100).toFixed(0) }}%</span>-->
+<!--                <div class="left-half-clipper">-->
+<!--                  <div class="first50-bar"></div>-->
+<!--                  <div class="value-bar"></div>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <label>Strike</label>-->
+<!--            </div>-->
+<!--            <div class="circle-wrapper">-->
+<!--              <div class="progress-circle" :class="percentageClass(33)">-->
+<!--                <span>{{ (0.33 * 100).toFixed(0) }}%</span>-->
+<!--                <div class="left-half-clipper">-->
+<!--                  <div class="first50-bar"></div>-->
+<!--                  <div class="value-bar"></div>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <label>Balls</label>-->
+<!--            </div>-->
+<!--          </div>-->
         </ion-label>
       </ion-label>
       <div class="metadata-end-wrapper" slot="end">
@@ -198,4 +227,59 @@ ion-label strong{
   color: var(--ion-color-medium);
   margin-top: 8px;
 }
+
+.stats-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  width: 100%;
+  margin-top: 8px;
+  height: 70px;
+}
+
+.stat-item {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ion-color-light);
+}
+
+.stat-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--progress);
+  background: var(--ion-color-primary);
+  opacity: 0.15;
+  z-index: 0;
+}
+
+.stat-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 1;
+}
+
+.percentage {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--ion-color-dark);
+}
+
+.label {
+  font-size: 12px;
+  color: var(--ion-color-medium);
+  padding-bottom: 8px;
+}
+
 </style>