text popup

Walpurga03 · Oct 30, 2024 · a14c26c · a14c26c
1 parent 90f2c5a
commit a14c26c
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 39 deletions.
diff --git a/public/locales/de/cardText.json b/public/locales/de/cardText.json
@@ -19,6 +19,8 @@
     "eigenschaft4": "Teilbarkeit",
     "eigenschaft5": "Transportfähigkeit"
   },
+  "showDescription": "Beschreibung anzeigen",
+  "close": "Schließen",
   "info": {
     "aboutMe": "Über mich",
     "description": "Wenn Ihnen meine Arbeit gefällt, bin ich sehr dankbar für ein paar Bitcoin Lightning Sats. Schauen Sie sich auch meine GitHub-Repos an. Kontaktaufnahme über Nostr. Hilfe bei einem Projekt? Melden Sie sich gerne.",

diff --git a/public/locales/en/cardText.json b/public/locales/en/cardText.json
@@ -19,6 +19,8 @@
     "eigenschaft4": "Divisibility",
     "eigenschaft5": "Transportability"
   },
+  "showDescription": "Show Description",
+  "close": "Close",
   "info": {
     "aboutMe": "About Me",
     "description": "If you like my work, I am very grateful for a few Bitcoin Lightning Sats. Also, check out my GitHub repos. Contact via Nostr. Need help with a project? Feel free to reach out.",

diff --git a/src/components/CardComponent.tsx b/src/components/CardComponent.tsx
@@ -1,18 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import cards from '../../public/assets/data/cards.json';
 
 interface CardComponentProps {
   cardId: number;
   onSelectProperty?: (property: 'eigenschaft1' | 'eigenschaft2' | 'eigenschaft3' | 'eigenschaft4' | 'eigenschaft5') => void;
   isComputer?: boolean;
   isFlipped?: boolean;
-  className?: string; // Füge die className Prop hinzu
+  className?: string;
 }
 
 const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty, isComputer, isFlipped, className }) => {
-  const { t } = useTranslation(); // useTranslation Hook von i18next verwenden
+  const { t } = useTranslation();
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false);
 
   const cardKey = cardId.toString();
   const card = cards.find((card) => card.id === cardId);
@@ -21,7 +22,6 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
     return <div>Karte nicht gefunden!</div>;
   }
 
-  // Log die Übersetzungsschlüssel, um zu sehen, ob sie geladen werden
   const imagePath = `${import.meta.env.BASE_URL}assets/images/${card.image}`;
 
   const flipAnimation = {
@@ -30,7 +30,7 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
   };
 
   const renderProperty = (propertyKey: 'eigenschaft1' | 'eigenschaft2' | 'eigenschaft3' | 'eigenschaft4' | 'eigenschaft5') => {
-    const propertyLabel = t(`eigenschaften.${propertyKey}`); // Übersetzung für die Eigenschaft
+    const propertyLabel = t(`eigenschaften.${propertyKey}`);
     const propertyValue = card.eigenschaften[propertyKey];
 
     return (
@@ -59,39 +59,75 @@ const CardComponent: React.FC<CardComponentProps> = ({ cardId, onSelectProperty,
   };
 
   return (
-    <motion.div
-      className={`card-flip ${className}`} // Füge die className hier hinzu
-      initial={isFlipped ? 'hidden' : 'visible'}
-      animate={isFlipped ? 'hidden' : 'visible'}
-      variants={flipAnimation}
-      transition={{ duration: 0.1 }}
-      style={{ transformStyle: 'preserve-3d', perspective: '1000px' }}
-    >
-      <div className="card card-front">
-        <div className="card-header">
-          <h2>{cardKey ? t(`cards.${cardKey}.name`) : 'Name nicht verfügbar'}</h2> {/* Übersetzung für den Kartenname */}
+    <>
+      <motion.div
+        className={`card-flip ${className}`}
+        initial={isFlipped ? 'hidden' : 'visible'}
+        animate={isFlipped ? 'hidden' : 'visible'}
+        variants={flipAnimation}
+        transition={{ duration: 0.1 }}
+        style={{ transformStyle: 'preserve-3d', perspective: '1000px' }}
+      >
+        <div className="card card-front">
+          <div className="card-header">
+            <h2>{cardKey ? t(`cards.${cardKey}.name`) : 'Name nicht verfügbar'}</h2>
+          </div>
+          <img
+            src={imagePath}
+            alt={cardKey ? t(`cards.${cardKey}.name`) : ''}
+            className="card-image"
+          />
+          <ul className="card-properties-list">
+            {renderProperty('eigenschaft1')}
+            {renderProperty('eigenschaft2')}
+            {renderProperty('eigenschaft3')}
+            {renderProperty('eigenschaft4')}
+            {renderProperty('eigenschaft5')}
+          </ul>
+          <button 
+            className="description-button"
+            onClick={() => setIsDescriptionOpen(true)}
+          >
+            {t('showDescription')}
+          </button>
+        </div>
+        <div className="card-back">
+          <img
+            src={`${import.meta.env.BASE_URL}assets/images/backSite.png`}
+            alt="Card Back"
+          />
         </div>
-        <img
-          src={imagePath} // Verwende den generierten Bildpfad
-          alt={cardKey ? t(`cards.${cardKey}.name`) : ''}
-          className="card-image"
-        />
-        <ul className="card-properties-list">
-          {renderProperty('eigenschaft1')}
-          {renderProperty('eigenschaft2')}
-          {renderProperty('eigenschaft3')}
-          {renderProperty('eigenschaft4')}
-          {renderProperty('eigenschaft5')}
-        </ul>
-        <p className="card-description">{cardKey ? t(`cards.${cardKey}.textinfo`) : 'Beschreibung nicht verfügbar'}</p> {/* Übersetzung für die Kartentextinfo */}
-      </div>
-      <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"
-        />
-      </div>
-    </motion.div>
+      </motion.div>
+
+      <AnimatePresence>
+        {isDescriptionOpen && (
+          <motion.div
+            className="description-overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsDescriptionOpen(false)}
+          >
+            <motion.div
+              className="description-popup"
+              initial={{ y: 50, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: 50, opacity: 0 }}
+              onClick={e => e.stopPropagation()}
+            >
+              <h3>{cardKey ? t(`cards.${cardKey}.name`) : 'Name nicht verfügbar'}</h3>
+              <p>{cardKey ? t(`cards.${cardKey}.textinfo`) : 'Beschreibung nicht verfügbar'}</p>
+              <button 
+                className="close-button"
+                onClick={() => setIsDescriptionOpen(false)}
+              >
+                {t('close')}
+              </button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
   );
 };
 

diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
@@ -202,7 +202,7 @@ body:not(.computer-turn) .player-card .property-value:focus {
   }
 
   .card-front img {
-    width: 80%; // Verkleinert das Bild auf der Vorderseite
+    width: 100%; // Verkleinert das Bild auf der Vorderseite
     margin: 0 auto; // Zentriert das Bild auf der Vorderseite
   }
 }
@@ -258,6 +258,10 @@ body:not(.computer-turn) .player-card .property-value:focus {
   .card-header {
     font-size: 0.65em;
   }
+  .card-front {
+    padding: 8px;
+    border: 0.4em solid #444444;
+  }
 }
 @media (max-width: 700px) {
   .card-description {
@@ -297,4 +301,109 @@ body:not(.computer-turn) .player-card .property-value:focus {
   .rating-scale {
     height: 5px;
   }
+  .card-front {
+    padding: 4px;
+    border: 0.4em solid #444444;
+  }
+}
+
+// Bestehende Styles beibehalten und neue Styles hinzufügen
+
+.description-button {
+  width: calc(100% + 40px);
+  margin: 0 -20px;
+  padding: 10px 20px;
+  background-color: $secondary-color;
+  color: $text-color;
+  border: none;
+  cursor: pointer;
+  font-size: $font-size;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: lighten($secondary-color, 10%);
+  }
+}
+
+.description-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.description-popup {
+  background-color: $primary-color;
+  border-radius: $card-radius;
+  padding: 20px;
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: $card-shadow;
+
+  h3 {
+    color: $text-color;
+    margin-top: 0;
+    margin-bottom: 15px;
+    font-size: 1.2em;
+  }
+
+  p {
+    color: $text-color;
+    line-height: 1.5;
+    margin: 0 0 20px 0;
+  }
+}
+
+.close-button {
+  background-color: $secondary-color;
+  color: $text-color;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: lighten($secondary-color, 10%);
+  }
+}
+
+@media (max-width: 900px) {
+  .description-popup {
+    width: 95%;
+    padding: 15px;
+
+    h3 {
+      font-size: 1.1em;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .description-button {
+    font-size: 0.9em;
+    padding: 8px 15px;
+  }
+
+  .description-popup {
+    padding: 10px;
+
+    h3 {
+      font-size: 1em;
+    }
+
+    p {
+      font-size: 0.9em;
+    }
+  }
 }