Merge pull request #54 from recursivezero:feature/RZA-2500050

Feature/RZA-2500050

Author: xkeshav

.vscode/dictionaries/project-words.txt

@@ -8,6 +8,7 @@ audiorecorder
 bincount
 clsx
 cmdk
+controlslist
 datetime
 dhaga
 ensurepip
@@ -24,6 +25,7 @@ kmeans
 linalg
 lucide
 matras
+nodownload
 Organja
 orgenja
 Peina

src/assets/styles/varnmala/barahkhadi/consonant.css

@@ -6,7 +6,12 @@
     display: flex;
     align-items: center;
     gap: 2rem;
-    margin-bottom: 2rem;
+
+    & .consonant {
+      margin: 0 auto;
+      font-size: 2rem;
+      color: aquamarine;
+    }
   }
 
   & .back__link {
@@ -31,7 +36,7 @@
   & .combination__card {
     background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
     border-radius: 0.5rem;
-    padding: 2rem 1rem;
+    padding: 1.25rem;
     display: grid;
     place-items: center;
     gap: 0.5rem;
@@ -45,8 +50,8 @@
   }
 
   & .combination__result {
-    font-size: 3rem;
-    font-weight: bold;
+    font-size: 7rem;
+    font-weight: normal;
   }
 
   @container (min-width: 768px) {
@@ -60,4 +65,4 @@
       grid-template-columns: 1fr;
     }
   }
-}
+}

src/assets/styles/varnmala/number.css

@@ -119,7 +119,6 @@
 
   & .variation {
     font-size: 2.75rem;
-    padding: 0.4rem;
     text-align: center;
     background: color-mix(in srgb, var(--text) 5%, var(--background) 95%);
     border-radius: 4px;

src/assets/styles/varnmala/reader.css

@@ -3,23 +3,20 @@
   --mute-button__bg: hsla(255, 100%, 50%, 0.281);
 }
 
-#container__reader {
+.container__reader {
   font-size: min(40rem, 35vw);
   display: grid;
   place-items: center;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
-  place-content: center;
   color: var(--main__txt);
   outline: none;
   text-transform: uppercase;
   transform: rotate(0deg);
   transition: all 0.3s ease-in-out;
   will-change: contents;
-  text-align: center;
   line-height: 1;
-  padding: 1rem;
   gap: 0.5rem;
-  overflow: hidden;
+  height: 80%;
 }
 
 .hide {
@@ -68,7 +65,7 @@
   cursor: pointer;
 }
 
-.speaker > span {
+.speaker>span {
   padding: 0.5rem;
   border: 1px solid var(--primary);
   border-radius: 5px;
@@ -80,17 +77,17 @@
 }
 
 @media screen and (max-width: 768px) {
-  #container__reader {
+  .container__reader {
     font-size: min(30rem, 55vw);
   }
 }
 
 @media screen and (max-width: 480px) {
-  #container__reader {
+  .container__reader {
     font-size: min(200rem, 70vw);
   }
 
   .mute-button {
     font-size: min(2.5rem, 8vw);
   }
-}
+}

src/components/ui/backButton.astro

@@ -7,7 +7,6 @@
     border: 1px solid var(--border);
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
-    margin-bottom: 1rem;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

src/pages/varnmala/barahkhadi/[consonant].astro

@@ -19,7 +19,7 @@ const combinations = [consonant, ...Object.values(matras).map((matra) => consona
   <div class="container__consonant">
     <div class="consonant__header">
       <BackButton />
-      <h1>{consonant}</h1>
+      <div class="consonant">{consonant}</div>
     </div>
     <div class="combinations__grid">
       {

src/pages/varnmala/reader.astro

@@ -2,11 +2,10 @@
 import "@/assets/styles/varnmala/reader.css";
 import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
-
 import BackButton from "@/components/ui/backButton.astro";
 ---
 
-<BaseLayout meta={{ title: "Reader" }}>
+<BaseLayout meta={{ title: "Audio Reader" }}>
   <Fragment slot="header-right">
     <div class="action">
       <button type="button" title="click audio" id="mute" class="mute-button mute-button-audio"></button>
@@ -23,7 +22,7 @@ import BackButton from "@/components/ui/backButton.astro";
   </Fragment>
 
   <BackButton />
-  <article id="container__reader">a🍎</article>
+  <article id="container__reader" class="container__reader">a🍎</article>
   <section class="section--audio hide">
     <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
   </section>
@@ -69,9 +68,10 @@ import BackButton from "@/components/ui/backButton.astro";
       const target = e.target as HTMLButtonElement;
       target.classList.toggle("mute");
     });
-
     const getEmoji = (letter: string) => {
-      const { [letter.toUpperCase()]: list = [] } = emojiList as { [key: string]: number[] };
+      type List = { [key: string]: number[] };
+      const upperCase = letter.toUpperCase();
+      const list = (emojiList as List)[upperCase];
       if (list.length) {
         const codePoint = random(list);
         return String.fromCodePoint(codePoint);

src/utils/common.ts

@@ -46,17 +46,16 @@ export const matras = {
   ee: String.fromCharCode(2368),
   u: String.fromCharCode(2369),
   uu: String.fromCharCode(2370),
+  ru: String.fromCharCode(2371),
   ae: String.fromCharCode(2375),
   aie: String.fromCharCode(2376),
   au: String.fromCharCode(2379),
   aau: String.fromCharCode(2380),
   an: String.fromCharCode(2306),
-  ah: String.fromCharCode(2307),
-  ru: String.fromCharCode(2371)
+  ah: String.fromCharCode(2307)
 };
 
 export const barahkhadi = (code: number) => {
-  console.log({ code });
   const sanyukat = Object.values(matras);
   const list = [String.fromCharCode(code)];
   return list.concat(sanyukat);