speed, dynamic name, hover list

public/locales/de/cardText.json

@@ -3,10 +3,10 @@
   "gameOver": "Spiel beendet!",
   "playerWins": "{{winner}} hat das Spiel gewonnen!",
   "noMoreCards": "Keine Karten mehr",
-  "computerTurnButton": "Computer ist am Zug - Klicken, um fortzufahren",
+  "computerTurnButton": "{{computer}} ist am Zug - Klicken, um fortzufahren",
   "lastRound": "Letzte Runde:",
   "property": "Eigenschaft",
-  "player": "Spieler",
+  "player": "Du",
   "computer": "Satoshi",
   "drawPile": "Nachziehstapel: {{count}} Karten",
   "tieMessage": "Es ist ein Unentschieden!",

public/locales/en/cardText.json

@@ -3,11 +3,11 @@
   "gameOver": "Game Over!",
   "playerWins": "{{winner}} won the game!",
   "noMoreCards": "No more cards",
-  "computerTurnButton": "Computer's turn - Click to continue",
+  "computerTurnButton": "{{computer}}'s turn - Click to continue",
   "lastRound": "Last round:",
   "property": "Property",
-  "player": "Player",
-  "computer": "Computer",
+  "player": "You",
+  "computer": "Satoshi",
   "drawPile": "Draw Pile: {{count}} cards",
   "tieMessage": "It's a tie!",
   "winMessage": "{{winner}} wins this round!",

src/App.tsx

@@ -11,7 +11,7 @@ import StartAnimation from './components/StartAnimation';
 import MusicButton from './components/MusicButton';
 import BackgroundMusic from './components/BackgroundMusic';
 import EndAnimation from './components/EndAnimation';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import './styles/main.scss';
 
@@ -44,6 +44,14 @@ function App() {
     handleComputerTurn,
   } = useGameState(playerCards, computerCards, setPlayerCards, setComputerCards);
 
+  useEffect(() => {
+    if (isComputerTurn) {
+      document.body.classList.add('computer-turn');
+    } else {
+      document.body.classList.remove('computer-turn');
+    }
+  }, [isComputerTurn]);
+
   if (!isAnimationComplete) {
     return <StartAnimation onAnimationEnd={() => setIsAnimationComplete(true)} />;
   }
@@ -57,7 +65,6 @@ function App() {
   }
 
   if (gameOver) {
-    console.log('Game over, rendering EndAnimation');
     return (
       <div className="App">
         <EndAnimation playerWon={winner === 'Player'} /> {/* Füge die EndAnimation-Komponente hinzu */}
@@ -98,11 +105,14 @@ function App() {
       <WinnerMessage
         winner={winner}
         showWinnerMessage={showWinnerMessage}
+        selectedProperty={lastRoundDetails.selectedProperty}
+        playerValue={lastRoundDetails.playerValue}
+        computerValue={lastRoundDetails.computerValue}
       />
 
       {isComputerTurn && (
         <button onClick={handleComputerTurn} className="button-highlight" style={{ marginTop: '20px' }}>
-          {t('computerTurnButton')}
+          {t('computerTurnButton', { computer: t('computer') })}
         </button>
       )}
 

src/components/CardComponent.tsx

@@ -8,9 +8,10 @@ interface CardComponentProps {
   onSelectProperty?: (property: 'eigenschaft1' | 'eigenschaft2' | 'eigenschaft3' | 'eigenschaft4' | 'eigenschaft5') => void;
   isComputer?: boolean;
   isFlipped?: boolean;
+  className?: string; // Füge die className Prop hinzu
 }
 
-const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty, isComputer, isFlipped }) => {
+const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty, isComputer, isFlipped, className }) => {
   const { t } = useTranslation(); // useTranslation Hook von i18next verwenden
 
   const cardKey = cardId.toString();
@@ -59,11 +60,11 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
 
   return (
     <motion.div
-      className="card-flip"
+      className={`card-flip ${className}`} // Füge die className hier hinzu
       initial={isFlipped ? 'hidden' : 'visible'}
       animate={isFlipped ? 'hidden' : 'visible'}
       variants={flipAnimation}
-      transition={{ duration: 0.6 }}
+      transition={{ duration: 0.1 }}
       style={{ transformStyle: 'preserve-3d', perspective: '1000px' }}
     >
       <div className="card card-front">
@@ -84,7 +85,7 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
         </ul>
         <p className="card-description">{cardKey ? t(`cards.${cardKey}.textinfo`) : 'Beschreibung nicht verfügbar'}</p> {/* Übersetzung für die Kartentextinfo */}
       </div>
-      <div className="card card-back">
+      <div className="card-back">
         <img
           src={`${import.meta.env.BASE_URL}assets/images/backSite.png`} // Pfad für die Rückseite der Karte
           alt="Card Back"
@@ -94,4 +95,4 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
   );
 };
 
-export default CardComponent;
+export default CardComponent;

src/components/PlayerArea.tsx

@@ -38,6 +38,7 @@ const PlayerArea: React.FC<PlayerAreaProps> = ({
           <CardComponent
             cardId={currentPlayerCard.id}
             onSelectProperty={!isComputerTurn ? handlePropertySelect : undefined}
+            className="player-card" // Füge die Klasse hier hinzu
           />
         </motion.div>
       ) : (
@@ -47,4 +48,4 @@ const PlayerArea: React.FC<PlayerAreaProps> = ({
   );
 };
 
-export default PlayerArea;
+export default PlayerArea;

src/components/WinnerMessage.tsx

@@ -5,24 +5,38 @@ import { useTranslation } from 'react-i18next';
 interface WinnerMessageProps {
   winner: string | null;
   showWinnerMessage: boolean;
+  selectedProperty: string | null;
+  playerValue: number | null;
+  computerValue: number | null;
 }
 
-const WinnerMessage: React.FC<WinnerMessageProps> = ({ winner, showWinnerMessage }) => {
+const WinnerMessage: React.FC<WinnerMessageProps> = ({ winner, showWinnerMessage, selectedProperty, playerValue, computerValue }) => {
   const { t } = useTranslation();
 
   if (!showWinnerMessage) return null;
 
+  const winnerName = winner === 'Player' ? t('player') : t('computer');
+  const loserName = winner === 'Player' ? t('computer') : t('player');
+
   return (
     <motion.div
       className="winner-message"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
     >
-      <h3>{winner === 'Tie' ? t('tieMessage') : t('winMessage', { winner })}</h3>
+      <h3>
+        {winner === 'Tie'
+          ? t('tieMessage')
+          : t('winMessage', { winner: winnerName, loser: loserName })}
+      </h3>
+      {selectedProperty && (
+        <p>
+          {t(`eigenschaften.${selectedProperty}`)}: {playerValue} vs {computerValue}
+        </p>
+      )}
     </motion.div>
   );
 };
 
-export default WinnerMessage;
-
+export default WinnerMessage;

src/hooks/useGameState.ts

@@ -39,7 +39,6 @@ const useGameState = (
   }, [playerCards, computerCards]);
 
   useEffect(() => {
-    // Überprüfe das Spielende nur, wenn das Spiel initialisiert ist und es mindestens eine Karte gibt
     if ((playerCards.length > 0 || computerCards.length > 0) && !gameOver) {
       if (playerCards.length === 0) {
         setGameOver(true);
@@ -49,7 +48,7 @@ const useGameState = (
         setWinner('Player');
       }
     }
-  }, [playerCards, computerCards, gameOver]); // Überprüfe auch gameOver, um sicherzustellen, dass der Hook nicht erneut ausgeführt wird
+  }, [playerCards, computerCards, gameOver]);
 
   useEffect(() => {
     if (winner) {
@@ -98,7 +97,7 @@ const useGameState = (
           setIsComputerTurn(false);
           setAnimationDirection(null);
           setShowWinnerMessage(false);
-        }, 5000);
+        }, 2000);
       } else if (result.winner === 'Computer') {
         setWinner('Computer');
         setAnimationDirection('right');
@@ -111,7 +110,7 @@ const useGameState = (
           setAnimationDirection(null);
           setIsComputerTurn(true);
           setShowWinnerMessage(false);
-        }, 5000);
+        }, 2000);
       } else {
         setWinner('Tie');
         setAnimationDirection('up');
@@ -123,9 +122,12 @@ const useGameState = (
           setIsComputerCardFlipped(true);
           setAnimationDirection(null);
           setShowWinnerMessage(false);
-        }, 5000);
+          if (isComputerTurn) {
+            setIsComputerTurn(true);
+          }
+        }, 2000);
       }
-    }, 5000);
+    }, 3000);
   };
 
   const handleComputerTurn = () => {

src/styles/components/_card.scss

@@ -135,6 +135,17 @@
   font-weight: bold;
 }
 
+.property-label,
+.property-value {
+  transition: color 0.3s, background-color 0.3s; // Füge eine Übergangsanimation hinzu
+}
+
+body:not(.computer-turn) .player-card .property-label:hover,
+body:not(.computer-turn) .player-card .property-value:hover {
+  background-color: $secondary-color;
+  color: $text-color; // Ändere die Farbe beim Hover
+}
+
 .rating-scale {
   flex: 1;
   height: 10px;
@@ -213,5 +224,4 @@
   .card-properties-list li {
     font-size: 0.6em;
   }
-}
-
+}

src/utils/animations.ts

@@ -1,11 +1,11 @@
 export function getAnimation(animationDirection: string | null) {
   switch (animationDirection) {
     case 'left':
-      return { x: '-1000%', opacity: 0 }; // Karte nach links bewegen
+      return { x: '-3000%', opacity: 0 }; // Karte nach links bewegen
     case 'right':
-      return { x: '1000%', opacity: 0 }; // Karte nach rechts bewegen
+      return { x: '3000%', opacity: 0 }; // Karte nach rechts bewegen
     case 'up':
-      return { y: '-1000%', opacity: 0 }; // Karte nach oben bewegen
+      return { y: '-3000%', opacity: 0 }; // Karte nach oben bewegen
     default:
       return {};
   }