history/button center

Walpurga03 · Oct 31, 2024 · 20ce7f7 · 20ce7f7
1 parent 65fca06
commit 20ce7f7
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 35 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,8 @@ import BackgroundMusic from './components/BackgroundMusic';
 import EndAnimation from './components/EndAnimation';
 import { useState, useEffect } from 'react';
 import Navbar from './components/Navbar';
+import LastRoundDetails from './components/LastRoundDetails';
+
 
 
 import './styles/main.scss';
@@ -104,31 +106,31 @@ function App() {
         computerValue={lastRoundDetails.computerValue}
       />
 
-      {isComputerTurn && (
-        <button onClick={handleComputerTurn} className="button-highlight" style={{ marginTop: '20px' }}>
-          {t('computerTurnButton', { computer: t('computer') })}
-        </button>
-      )}
-
-      {lastRoundDetails.selectedProperty && (
-        <div className="last-round-details">
-          <h3>{t('lastRound')}</h3>
-          <p>
-            {lastRoundDetails.selectedProperty && t(`eigenschaften.${lastRoundDetails.selectedProperty}`)}
-            <br />
-            {t('player')}: {lastRoundDetails.playerValue}
-            <br />
-            {t('computer')}: {lastRoundDetails.computerValue}
-          </p>
-        </div>
-      )}
-
-      {drawPile.length > 0 && (
-        <div className="draw-pile">
-          <h3>{t('drawPile', { count: drawPile.length })}</h3>
-        </div>
-      )}
-    </div>
+       {/* Computer Turn Button mit conditional rendering */}
+    {isComputerTurn && (
+      <button 
+        onClick={handleComputerTurn} 
+        className="button-highlight"
+        aria-label={t('computerTurnButton', { computer: t('computer') })}
+      >
+        {t('computerTurnButton', { computer: t('computer') })}
+      </button>
+    )}
+
+    {lastRoundDetails.selectedProperty && (
+      <LastRoundDetails
+        selectedProperty={lastRoundDetails.selectedProperty}
+        playerValue={lastRoundDetails.playerValue}
+        computerValue={lastRoundDetails.computerValue}
+      />
+    )}
+
+    {drawPile.length > 0 && (
+      <div className="draw-pile">
+        <h3>{t('drawPile', { count: drawPile.length })}</h3>
+      </div>
+    )}
+  </div>
   );
 }
 

diff --git a/src/components/LastRoundDetails.tsx b/src/components/LastRoundDetails.tsx
@@ -0,0 +1,35 @@
+// src/components/LastRoundDetails.tsx
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PropertyKey } from '../types/Card';
+
+interface LastRoundDetailsProps {
+  selectedProperty: PropertyKey | null;
+  playerValue: number | null;
+  computerValue: number | null;
+}
+
+const LastRoundDetails: React.FC<LastRoundDetailsProps> = ({
+  selectedProperty,
+  playerValue,
+  computerValue
+}) => {
+  const { t } = useTranslation();
+
+  if (!selectedProperty) return null;
+
+  return (
+    <div className="last-round-details">
+      <h3>{t('lastRound')}</h3>
+      <p>
+        {t(`eigenschaften.${selectedProperty}`)}
+        <br />
+        {t('player')}: {playerValue}
+        <br />
+        {t('computer')}: {computerValue}
+      </p>
+    </div>
+  );
+};
+
+export default LastRoundDetails;
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -1,3 +1,5 @@
+// src/styles/components/_button.scss
+
 // Button Styling
 .button-highlight {
   background-color: #f5f5f5;
@@ -9,9 +11,54 @@
   cursor: pointer;
   outline: none;
   animation: blink-shadow 1s infinite;
-  transition: transform 0.3s;
+  transition: all 0.3s ease;
 
   &:hover {
     transform: scale(1.05);
   }
 }
+
+// Media Query für mobile Ansicht
+@media (max-width: 991px) {
+  .button-highlight {
+    position: fixed;
+    left: 50%;
+    top: 50%; // Vertikale Zentrierung
+    transform: translate(-50%, -50%); // Zentrierung in beide Richtungen
+    z-index: 900;
+    background-color: rgba(245, 245, 245, 0.9);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+
+    // Hover-Effekt angepasst für zentrierte Position
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+
+    // Wenn die Navbar expandiert ist, leicht nach rechts verschieben
+    .navbar.mobile.expanded ~ .App & {
+      transform: translate(calc(-50% + 100px), -50%);
+
+      &:hover {
+        transform: translate(calc(-50% + 100px), -50%) scale(1.05);
+      }
+    }
+  }
+}
+
+// Kleine Bildschirme
+@media (max-width: 576px) {
+  .button-highlight {
+    font-size: 0.9em;
+    padding: 8px 16px;
+  }
+}
+
+// Animation
+@keyframes blink-shadow {
+  0%, 100% {
+    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
+  }
+  50% {
+    box-shadow: 0 0 20px 4px $secondary-color;
+  }
+}
diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
@@ -284,21 +284,22 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 }
 
-// Medium (Tablet): 768px - 991px
+// Medium (Tablet): 800px - 991px
 @media (max-width: 991px) {
   .battlefield {
     padding-top: 0px;
+    height: 100vh;
   }
   .card-container {
     max-width: 450px;
-    font-size: 0.7em;
+    font-size: 0.6em;
   }
   .card-spieler, .card-computer{
     width: 60%;
   }
 
   .card-description {
-    font-size: 0.85em;
+    font-size: 0.6em;
   }
 
   .card-properties-list li {
@@ -307,6 +308,7 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 
   .card-header {
+    top: 5px;
     font-size: 0.8em;
   }
 ƒ
@@ -318,12 +320,20 @@ body:not(.computer-turn) .player-card .property-value:focus {
     padding: 15px;
     border: 0.6em solid $secondary-color;
   }
+  .description-button {
+    margin: 0 -20px;
+    padding: 5px 0px;
+    font-size: 1em;
+  }
 }
 
-// Small (Tablet Portrait): 576px - 767px
-@media (max-width: 767px) {
+// Small (Tablet Portrait): 700px - 800px
+@media (max-width: 800px) {
   .card-container {
-    max-width: 400px;
+    font-size: 0.5em;
+  }
+  .card-spieler, .card-computer{
+    width: 50%;
   }
 
   .card-description {
@@ -355,10 +365,14 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 }
 
-// Extra Small (Mobile Landscape): < 576px
-@media (max-width: 575px) {
+// Extra Small (Mobile Landscape): < 700px
+@media (max-width: 700px) {
   .card-container {
     max-width: 350px;
+    font-size: 0.4em;
+  }
+  .card-spieler, .card-computer{
+    width: 40%;
   }
 
   .card-description {

diff --git a/src/styles/components/_lastRoundDetails.scss b/src/styles/components/_lastRoundDetails.scss
@@ -0,0 +1,61 @@
+// src/styles/components/_lastRoundDetails.scss
+
+.last-round-details {
+    text-align: center;
+    margin: 20px auto;
+    padding: 10px;
+    color: $text-color;
+    transition: all 0.3s ease;
+    width: 100%;
+    max-width: 300px;
+
+    h3 {
+      margin-bottom: 10px;
+      font-size: 1.2em;
+    }
+
+    p {
+      margin: 5px 0;
+      font-size: 1em;
+    }
+  }
+
+  @media (max-width: 991px) {
+    .last-round-details {
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 20px;
+      background-color: transparent;
+      border-radius: 10px;
+      padding: 15px;
+      z-index: 900;
+
+      .navbar.expanded ~ & {
+        bottom: 30px;
+      }
+
+      h3 {
+        font-size: 1.1em;
+      }
+
+      p {
+        font-size: 0.9em;
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    .last-round-details {
+      max-width: 250px;
+      padding: 10px;
+
+      h3 {
+        font-size: 1em;
+      }
+
+      p {
+        font-size: 0.8em;
+      }
+    }
+  }
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -6,4 +6,5 @@
 @import './components/navbar';
 @import './components/winner-message';
 @import './components/endAnimation';
-@import './components/infoPopup';
+@import './components/infoPopup';
+@import './components/lastRoundDetails';