feat: Hide/Show Logo

src/app.css

@@ -19,11 +19,11 @@ html .dark {
 }
 
 .popin {
-  animation: popin 0.4s cubic-bezier(0.65, 0, 0.35, 1);
+  animation: popin 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
 .fadein {
-  animation: fadein 0.4s cubic-bezier(0.65, 0, 0.35, 1);
+  animation: fadein 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 
 @keyframes fadein {
@@ -46,14 +46,10 @@ html .dark {
 }
 
 ::-webkit-scrollbar {
-  width: 7px;
+  width: 0px;
 }
 
-::-webkit-scrollbar-track {
-  background: #b8b8b8;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 20px;
-}
+::selection {
+  background-color: #05d616;
+  color: #fff;
+}

src/lib/components/KeymapButton.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-
   export let nextChar: string
   export let keys: [string, string] = ['', '']
   export let glow: boolean = false
 
   let keyClasses
+  let isHomeCharacter = keys[0] === 'น' || keys[0] === 'า' ? 'text-blue-700 dark:text-blue-400' : ''
 
   $: if (nextChar === keys[0]) {
     keyClasses = `${
       glow ? 'key-glow' : ''
-    } bg-indigo-400 border-indigo-800 dark:bg-indigo-600 border-indigo-900 text-black dark:text-white`
+    } bg-indigo-400 border-indigo-800 dark:bg-indigo-600 border-indigo-900 text-black dark:text-white  ${isHomeCharacter}`
   } else if (nextChar === keys[1]) {
     keyClasses = `${
       glow ? 'key-shift-glow' : ''
-    } key-shiftHighlight bg-yellow-400 border-yellow-800 text-black dark:text-white`
+    } key-shiftHighlight bg-yellow-400 border-yellow-800 text-black dark:text-white
+     ${isHomeCharacter}`
   } else {
-    keyClasses = ''
+    keyClasses = `${isHomeCharacter}`
   }
 </script>
 
@@ -42,8 +42,8 @@
   }
 
   .key-glow {
-    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #6100b6, 0 0 40px #760094, 0 0 50px #a500e6,
-      0 0 60px #a500e6, 0 0 70px #a500e6;
+    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #6100b6, 0 0 20px #760094, 0 0 25px #a500e6,
+      0 0 30px #a500e6, 0 0 35px #a500e6;
   }
 
   .key-shift {

src/lib/components/LessonModal.svelte

@@ -32,16 +32,16 @@
             Lessons
           </h3>
           <h3
-            class="absolute top-0 right-0 m-6 text-lg leading-6 font-medium text-white font-bold bg-red-500 px-3 py-1 cursor-pointer rounded-lg hover:bg-red-700"
+            class="absolute top-0 right-0 m-6 text-lg leading-6 text-white font-bold bg-red-500 px-3 py-1 cursor-pointer rounded-lg hover:bg-red-700"
             on:click={() => closeModal()}
           >
             x
           </h3>
-          <div class="flex flex-col mt-4 w-full justify-between">
+          <div class="flex flex-col mt-4 max-h-screen justify-between overflow-scroll">
             <div class="text-sm text-gray-500">
               {#each lessons as lesson, idx}
                 <p
-                  class="text-center dark:text-white border-t border-b py-2 hover:bg-gray-200 dark:hover:bg-gray-500 active:bg-gray-400 border-gray-400 dark:active:bg-gray-800 rounded-md cursor-pointer"
+                  class="text-center dark:text-white border-b py-2 hover:bg-gray-200 dark:hover:bg-gray-500 active:bg-gray-400 border-gray-400 dark:active:bg-gray-800 rounded-md cursor-pointer"
                   on:click={() => {
                     $currentLessonName = lesson.name
                     closeModal()

src/lib/components/Modal.svelte

@@ -2,6 +2,7 @@
   export let closeModal: () => void
   export let showKeymap: boolean
   export let showPrevOrNextWord: boolean
+  export let showLogo: boolean
   export let TabToRestart: boolean
   export let DarkMode: boolean
   export let GlowKey: boolean
@@ -36,7 +37,7 @@
             class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
             id="modal-title"
           >
-            Settings
+            ⚙Settings
           </h3>
           <div class="flex flex-col gap-3 mt-4 w-full justify-between">
             <div class="text-sm text-gray-500 dark:text-white">
@@ -56,6 +57,14 @@
               />
             </div>
             <div class="text-sm text-gray-500">
+              <span class="text-sm text-gray-500 dark:text-white">Show Manoonchai Logo</span>
+              <input
+                type="checkbox"
+                class="scale-150 absolute right-4 checked:bg-blue-600 ml-2 checked:border-transparent"
+                bind:checked={showLogo}
+              >
+            </div>
+           <div class="text-sm text-gray-500">
               <span class="text-sm text-gray-500 dark:text-white">Press Esc to show setting</span>
               <input
                 type="checkbox"
@@ -80,7 +89,7 @@
               />
             </div>
             <div class="text-sm text-gray-500">
-              <span class="text-sm text-gray-500 dark:text-white">Glowing keys</span>
+              <span class="text-sm text-gray-500 dark:text-white">Glowing keys (Better with dark mode)</span>
               <input
                 type="checkbox"
                 class="scale-150 absolute right-4 checked:bg-blue-600 ml-2 checked:border-transparent"

src/lib/store.ts

@@ -8,6 +8,7 @@ interface ISetting {
   TabToRestart: boolean
   DarkMode: boolean
   GlowKey: boolean
+  ShowLogo: boolean
   currentLessonName?: string
 }
 
@@ -16,6 +17,7 @@ const DEFAULT: ISetting = {
   showPrevOrNextWord: true,
   EscToSetting: true,
   TabToRestart: true,
+  ShowLogo: true,
   DarkMode: false,
   GlowKey: false,
   currentLessonName: undefined,
@@ -39,6 +41,7 @@ export const EscToSetting = writable<boolean>(storage.EscToSetting ?? DEFAULT['E
 export const TabToRestart = writable<boolean>(storage.TabToRestart ?? DEFAULT['TabToRestart'])
 export const DarkMode = writable<boolean>(storage.DarkMode ?? DEFAULT['DarkMode'])
 export const GlowKey = writable<boolean>(storage.GlowKey ?? DEFAULT['GlowKey'])
+export const ShowLogo = writable<boolean>(storage.ShowLogo ?? DEFAULT['ShowLogo'])
 export const currentLessonName = writable(storage.currentLessonName ?? DEFAULT['currentLessonName'])
 
 showKeymap.subscribe((value) => {
@@ -71,6 +74,11 @@ GlowKey.subscribe((value) => {
   storeSettings()
 })
 
+ShowLogo.subscribe((value) => {
+  storage.ShowLogo = value
+  storeSettings()
+})
+
 currentLessonName.subscribe((value) => {
   storage.currentLessonName = value
   storeSettings()

src/routes/index.svelte

@@ -14,6 +14,7 @@
   import {
     showKeymap,
     showPrevOrNextWord,
+    ShowLogo,
     currentLessonName,
     TabToRestart,
     DarkMode,
@@ -84,9 +85,7 @@
       e.preventDefault()
     }
 
-    if (ended) {
-      return
-    }
+    if (ended) return;
 
     const manoonchaiKey = Manoonchai[e.code]?.[e.shiftKey ? 1 : 0] || ''
 
@@ -194,6 +193,7 @@
   <main
     class="main container min-h-screen mx-auto flex dark:bg-black flex-col gap-2 justify-center items-center py-20"
   >
+  {#if $ShowLogo}
     <div class="title dark:text-white font-sarabun text-black flex flex-row font-bold">
       <img
         src="https://manoonchai.com/_next/image?url=%2Fmanoonchai.png&w=64&q=75"
@@ -204,6 +204,7 @@
       />
       <h1>Learn {name}</h1>
     </div>
+    {/if}
 
     <p class="stat">{wpm} wpm</p>
     <p class="sentence">
@@ -261,15 +262,15 @@
     {/if}
 
     <button
-      class="btn hover:bg-gray-600 rounded-lg transition duration-300 m-2 dark:text-white"
+      class="btn hover:bg-gray-300 active:bg-gray-400 ring-offset-white ring-gray-300 dark:hover:bg-gray-600 hover:ring-2 dark:ring-white ring-offset-2 dark:ring-offset-black rounded-lg transition duration-300 m-2 dark:text-white"
       on:click={reset}
     >
       Reset
     </button>
 
     <div class="lesson dark:text-white font-sarabun">
       Lesson: <span
-        class="p-2 cursor-pointer border border-gray-400 dark:text-white rounded-lg"
+        class="transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-600 hover:ring-2 ring-offset-2 ring-offset-white ring-gray-300 dark:ring-white dark:ring-offset-black  p-2 cursor-pointer border border-gray-400 dark:text-white rounded-lg"
         on:click={() => (showLesson = true)}>{$currentLessonName}</span
       >
       {#if showLesson}
@@ -337,6 +338,7 @@
         bind:TabToRestart={$TabToRestart}
         bind:DarkMode={$DarkMode}
         bind:GlowKey={$GlowKey}
+        bind:showLogo={$ShowLogo}
         bind:EscToSetting={$EscToSetting}
       />
     {/if}

src/tailwind.postcss

@@ -30,6 +30,6 @@
 }
 
 .btn {
-  @apply border px-2 py-1 rounded;
+  @apply border px-3 py-1 rounded m-4;
   @apply text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl;
 }

tailwind.config.cjs

@@ -9,6 +9,7 @@ const config = {
         70: '17.5rem',
         100: '25rem',
       },
+      ringWidth: ['hover', 'active'],
     },
   },