fixed: back button, typing animation playground, added: image on letter change

Author: Ciphrox

src/assets/styles/alphabets/[alphabet]/playground.css

@@ -8,8 +8,8 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 35% auto auto;
-  grid-template-areas: 
-    "letter emoji" 
+  grid-template-areas:
+    "letter content-display"
     "spelling spelling"
     "description description";
   grid-auto-flow: row;
@@ -26,17 +26,46 @@
     padding: 0;
     transition: color 0.5s ease-in;
     text-align: center;
-    width: 100%; 
+    width: 100%;
+    line-height: 1;
+  }
+
+  & .content__display {
+    grid-area: content-display;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 1rem;
   }
 
   & .emoji {
-    grid-area: emoji;
     font-size: clamp(6em, 15vw, 18em);
   }
 
+  & .image__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    display: none;
+  }
+
+  & .image__container img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
   & .animation {
     animation:
-      typing 1s steps(var(--steps, 10)),
+      typing 1.5s steps(var(--steps, 10)),
       blink 0.5s step-end infinite alternate;
   }
 
@@ -52,6 +81,8 @@
     font-size: clamp(4em, 10vw, 12em);
     transition: all 0.5s ease-in-out;
     color: var(--spelling__txt--3);
+    max-width: fit-content;
+    margin: 0 auto;
   }
 
   & .description {
@@ -65,12 +96,33 @@
     color: var(--spelling__txt--3);
     min-height: 2em;
   }
+
+  & .description.animation {
+    display: inline-block;
+    animation:
+      typing 2s steps(var(--steps-desc, 30)) forwards,
+      blink 0.5s step-end infinite alternate;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 0;
+    border-right: 3px solid;
+    max-width: fit-content;
+    margin: 0 auto;
+  }
+
+  & .description:empty {
+    border-right: none;
+  }
 }
 
 @keyframes typing {
   from {
     width: 0;
   }
+
+  to {
+    width: 100%;
+  }
 }
 
 @keyframes blink {

src/data/alphabets.json

@@ -7,7 +7,7 @@
         "id": 1,
         "letter": "A",
         "code": 65,
-        "text": "Apple", 
+        "text": "Apple",
         "description": "",
         "image": "apple.jpg"
       },
@@ -1128,7 +1128,7 @@
       }
     ]
   },
-  "indian_mythology": {
+  "Indian": {
     "description": "Mythological Indian culture Alphabets",
     "icon": "🕉️",
     "data": [

src/pages/alphabets/[alphabet]/playground.astro

@@ -32,14 +32,18 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData];
   <BackButton />
   <article class="tv container__typing">
     <div class="letter">A</div>
-    <div class="emoji">{currentCategory.icon}</div>
-    <div class="spelling animation" id="spelling"></div>
+    <div class="content__display">
+      <div class="emoji">{currentCategory.icon}</div>
+      <div class="image__container"></div>
+    </div>
+    <div class="spelling" id="spelling"></div>
     <div class="description" id="description"></div>
   </article>
 
   <script define:vars={{ alphabetData: currentCategory.data, category: alphabet }}>
     const letterDiv = document.querySelector(".letter");
     const emojiDiv = document.querySelector(".emoji");
+    const imageContainer = document.querySelector(".image__container");
     const spellDiv = document.querySelector(".spelling");
     const descriptionDiv = document.querySelector(".description");
 
@@ -59,22 +63,62 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData];
     const drawInfo = (letter, color) => {
       const info = alphabetData.find((item) => item.letter === letter);
       if (info) {
-        // Display text
         spellDiv.innerHTML = info.text;
         spellDiv.style.color = color;
-        document.documentElement.style.setProperty("--steps", info.text.length);
 
-        // Display description
-        descriptionDiv.innerHTML = info.description;
-        descriptionDiv.style.color = color;
+        document.documentElement.style.setProperty("--steps", info.text.length * 2);
 
-        // Animation handling
+        // Animation handling to spelling
         spellDiv.classList.remove("animation");
-        void spellDiv.offsetWidth;
         spellDiv.classList.add("animation");
+
+        if (info.description && info.description.trim() !== "") {
+          descriptionDiv.innerHTML = info.description;
+          descriptionDiv.style.color = color;
+          document.documentElement.style.setProperty("--steps-desc", info.description.length * 2);
+
+          // Animation handling for description
+          descriptionDiv.classList.remove("animation");
+          descriptionDiv.classList.add("animation");
+        } else {
+          descriptionDiv.classList.remove("animation");
+          descriptionDiv.innerHTML = "";
+        }
+
+        if (info.image) {
+          const img = new Image();
+          img.onload = function () {
+            emojiDiv.style.display = "none";
+            imageContainer.style.display = "flex";
+            imageContainer.innerHTML = "";
+            imageContainer.appendChild(img);
+
+            img.style.width = "auto";
+            img.style.height = "auto";
+            img.style.maxWidth = "100%";
+            img.style.maxHeight = "100%";
+          };
+          img.onerror = function () {
+            emojiDiv.style.display = "block";
+            imageContainer.style.display = "none";
+          };
+          img.src = `/assets/images/alphabets/${category}/${info.image}`;
+          img.alt = info.text;
+
+          emojiDiv.style.display = "block";
+          imageContainer.style.display = "none";
+        } else {
+          emojiDiv.style.display = "block";
+          imageContainer.style.display = "none";
+        }
       }
     };
 
+    window.addEventListener("DOMContentLoaded", () => {
+      spellDiv.classList.remove("animation");
+      descriptionDiv.classList.remove("animation");
+    });
+
     const colorBox = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5", "#9B59B6", "#3498DB"];
     const random = (arr) => arr[Math.floor(Math.random() * arr.length)];
     const isAlphabet = (keyCode) => keyCode >= 65 && keyCode <= 90;
@@ -88,7 +132,7 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData];
         if (isAlphabet(keyCode)) {
           const keyCapital = key.toUpperCase();
           drawLetter(keyCapital, color);
-          drawInfo(keyCapital, color); // Pass color as parameter
+          drawInfo(keyCapital, color);
         }
       },
       false