Merge pull request #63 from enheit/develop

Develop

package.json

@@ -4,7 +4,7 @@
     "name": "Roman Mahotskyi",
     "email": "roman.mahotskyi@gmail.com"
   },
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "dev": "svelte-kit dev --port 5555",
     "build": "svelte-kit build",

src/components/symbol/symbol.svelte

@@ -1,31 +1,47 @@
 <script lang="ts">
+  import type { CaretType } from "src/helpers/caret-type";
+  import { createEventDispatcher } from "svelte";
+
   export let symbol: string
   export let invalid: boolean = false
   export let active: boolean = false
   export let typed: boolean = false
   export let isCapsLock: boolean = false
+  export let caretType: CaretType
+
+  const dispatch = createEventDispatcher<{ caretChange: void }>()
 
   $: space = symbol === ' '
-  $: activeBackground = active ? 'dark:bg-slate-600 bg-slate-300' : ''
   $: textColor = typed && !invalid ? 'text-slate-400 dark:text-slate-500' : 'dark:text-slate-100'
   $: textInvalid = invalid ? 'text-rose-500 dark:text-rose-500' : ''
 
-  $: dynamicClasses = `${textColor} ${activeBackground} ${textInvalid}`
+  $: dynamicClasses = `${textColor} ${textInvalid}`
 </script>
 
-<div class="flex relative">
+<div on:click={() => active && dispatch('caretChange')} class:cursor-pointer={active} class="flex relative">
+  {#if active}
+    {#if caretType === 'box'}
+      <div class="absolute h-full -left-0.5 -right-0.5 border-2 p-1 dark:border-slate-500 border-slate-400 rounded-sm"></div>
+    {:else if caretType === 'background'}
+      <div class="absolute h-full w-full rounded-sm dark:bg-slate-600 bg-slate-300"></div>
+    {:else if caretType === 'line'}
+      <div class="flex self-center absolute h-5/6 w-0.5 rounded-sm -left-0.5 dark:bg-white bg-black"></div>
+    {:else}
+      <div class="absolute h-1 w-full rounded-sm bottom-0.5 dark:bg-white bg-black"></div>
+    {/if}
+  {/if}
+
   {#if isCapsLock && active}
-  <div class="absolute w-[125px] -top-14 flex flex-col justify-center">
-    <div class="asd flex gap-2 bg-[#F9E7EC] dark:bg-[#3F2136] p-2 rounded-lg text-rose-500">
-      <span class="bi-exclamation-triangle-fill"></span>
-      <p class="font-semibold">Caps Lock</p>
+    <div class="absolute w-[125px] -top-14 flex flex-col justify-center">
+      <div class="asd flex gap-2 bg-[#F9E7EC] dark:bg-[#3F2136] p-2 rounded-lg text-rose-500">
+        <span class="bi-exclamation-triangle-fill"></span>
+        <p class="font-semibold">Caps Lock</p>
+      </div>
+      <div class="arrow-down border-[#F9E7EC] dark:border-[#3F2136]"></div>
     </div>
-    <div class="arrow-down border-[#F9E7EC] dark:border-[#3F2136]"></div>
-  </div>
-
   {/if}
 
-  <h3 class:space class="symbol rounded-sm {dynamicClasses}">
+  <h3 class:space class="symbol z-10 rounded-sm {dynamicClasses}">
     {#if space}
       {#if invalid}
         <div class="circle bg-rose-500" />

src/components/word/word.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { CaretType } from 'src/helpers/caret-type';
+
   import Letter from '../symbol/symbol.svelte'
 
   export let word: string;
@@ -8,6 +10,7 @@
   export let typosIndexes: Set<number>
   export let done: boolean = false;
   export let isCapsLock = false
+  export let caretType: CaretType
 
   const symbols = word.split("")
 </script>
@@ -24,6 +27,8 @@
       active={caretIndex === symbolIndex}
       typed={typed}
       isCapsLock={isCapsLock}
+      caretType={caretType}
+      on:caretChange
     />
   {/each}
 </div>

src/helpers/caret-type.ts

@@ -0,0 +1 @@
+export type CaretType = 'box' | 'background' | 'line' | 'underline'

src/routes/index.svelte

@@ -1,10 +1,42 @@
 <script lang="ts">
   import "bootstrap-icons/font/bootstrap-icons.css";
   import shuffle from "lodash.shuffle";
+  import type { CaretType } from "src/helpers/caret-type";
   import { writable } from "svelte/store";
   import { words as commonEnglishWords } from "../../static/data/1000-most-common-words.json";
   import Word from "../components/word/word.svelte";
   import { ignoredKeys,Key } from "../helpers/key.enum";
+  import { browser } from "$app/env";
+
+  function getCaretTypoFromLocalStorage (): CaretType {
+    if (browser) {
+      return localStorage.getItem("caret") as CaretType || 'background'
+    }
+
+    return 'background'
+  }
+
+  function syncCaretTypewithLocalStorage (caretType: CaretType): void {
+    if (browser) {
+      localStorage.setItem('caret', caretType)
+    }
+  }
+
+  let caretType = writable<CaretType>(getCaretTypoFromLocalStorage())
+
+  caretType.subscribe(syncCaretTypewithLocalStorage)
+
+  function changeCaretType (): void {
+    if ($caretType === 'background') {
+      $caretType = 'underline'
+    } else if ($caretType === 'underline') {
+      $caretType = 'line'
+    } else if ($caretType === 'line') {
+      $caretType = 'box'
+    } else {
+      $caretType = 'background'
+    }
+  }
 
   function getShuffledWords(): string[] {
     return shuffle(commonEnglishWords);
@@ -203,6 +235,8 @@
         actualSentece={$typedSymbols}
         typosIndexes={$typosIndexes}
         isCapsLock={isCapslockTurnedOn}
+        caretType={$caretType}
+        on:caretChange={changeCaretType}
       />
     {/each}
   </div>