add option to select caret style

jaroslaw-weber · Oct 18, 2023 · 2911830 · 2911830
1 parent 5da3b38
commit 2911830
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 23 deletions.
diff --git a/app/CaretType.ts b/app/CaretType.ts
@@ -0,0 +1,4 @@
+export enum CaretType{
+	Square= 'square',
+	Classic = 'classic',
+}
diff --git a/app/components/Letter.tsx b/app/components/Letter.tsx
@@ -1,9 +1,15 @@
 import { useAtom } from "jotai";
 import { TypingAnimation, getTypingAnimationClasses } from "../TypingAnimation";
-import { typingAnimationAtom } from "../state";
+import { caretTypeAtom, typingAnimationAtom } from "../state";
 import { SingleLetter } from "../types/SingleLetter";
+import { CaretType } from "../CaretType";
 
-function getLetterClasses(letter: SingleLetter, progress: number, typingAnimation: TypingAnimation) {
+function getLetterClasses(
+  letter: SingleLetter,
+  progress: number,
+  typingAnimation: TypingAnimation,
+  caretType: CaretType
+) {
   const result = ["flex-1"];
   if (letter.input) {
     if (letter.character != letter.input) {
@@ -17,11 +23,24 @@ function getLetterClasses(letter: SingleLetter, progress: number, typingAnimatio
   const isSpace = letter.character === " ";
   if (isActive) {
     if (isSpace) {
-      result.push("w-3");
+      if (caretType == CaretType.Square) {
+        result.push("w-3");
+      }else{
+        result.push("w-1");
+      }
     }
     {
       const animation = getTypingAnimationClasses(typingAnimation);
-      result.push("bg-primary", "px-1", "text-white", "rounded", ...animation);
+
+      if (caretType == CaretType.Square) {
+        result.push(
+          "bg-primary",
+          "px-1",
+          "text-white",
+          "rounded",
+          ...animation
+        );
+      }
     }
   } else {
     if (isSpace) {
@@ -37,10 +56,36 @@ function getLetterClasses(letter: SingleLetter, progress: number, typingAnimatio
 }
 
 export function Letter(letter: SingleLetter, progress: number) {
-  const [typingAnimation] = useAtom(typingAnimationAtom)
-  const classes = getLetterClasses(letter, progress, typingAnimation);
+  const [typingAnimation] = useAtom(typingAnimationAtom);
+  const [caretType] = useAtom(caretTypeAtom);
+  const classes = getLetterClasses(
+    letter,
+    progress,
+    typingAnimation,
+    caretType
+  );
 
-  let display = <div>{letter.character}</div>;
+  const isActive = letter.index === progress;
+  const caret =
+    isActive && caretType == CaretType.Classic ? (
+      <div
+        id="caret"
+        className="animate-pulse relative top-0 left-0 text-white flex-shrink "
+        style={{
+          width: '1px'
+        }}
+      >
+        |
+      </div>
+    ) : (
+      ""
+    );
+  let display = (
+    <div className="flex">
+      {caret}
+      <p>{letter.character}</p>
+    </div>
+  );
 
   return <div className={classes}>{display}</div>;
 }
diff --git a/app/pages/SettingsPage.tsx b/app/pages/SettingsPage.tsx
@@ -1,12 +1,18 @@
 import { useAtom } from "jotai";
 import WordsPerPageSlider from "../components/WordsPerPageSlider";
-import { currentUiAtom, themeAtom, typingAnimationAtom } from "../state";
+import {
+  caretTypeAtom,
+  currentUiAtom,
+  themeAtom,
+  typingAnimationAtom,
+} from "../state";
 import { Ui } from "../Ui";
 import ResetButton from "../components/ResetButton";
 import ImportButton from "../components/ImportButton";
 import ExportButton from "../components/ExportButton";
 import { TypingAnimation } from "../TypingAnimation";
 import { themes } from "../theme";
+import { CaretType } from "../CaretType";
 
 export default function SettingsPage() {
   const [currentUi] = useAtom(currentUiAtom);
@@ -16,30 +22,56 @@ export default function SettingsPage() {
   const importButton = ImportButton();
   const exportButton = ExportButton();
 
-
-  const [theme ,setTheme] = useAtom(themeAtom)
+  const [theme, setTheme] = useAtom(themeAtom);
+  const [caretType, setCaretType] = useAtom(caretTypeAtom);
 
   const themeSelect = (
     <div className="form-control w-full">
       <label className="label">
         <span className="label-text">Theme</span>
       </label>
-      <select className="select select-bordered" onChange={e =>{
-        console.log('e',e,e.target.value)
-        setTheme(e.target.value as TypingAnimation)
-      }}>
+      <select
+        className="select select-bordered"
+        onChange={(e) => {
+          console.log("e", e, e.target.value);
+          setTheme(e.target.value as TypingAnimation);
+        }}
+      >
         <option disabled selected>
           {theme}
         </option>
-        {
-          themes.map(t => {
-            return (
-              <option key={t} value={t}>
-                {t}
-              </option>
-            )
-          })
-        }
+        {themes.map((t) => {
+          return (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+  const caretTypeSelect = (
+    <div className="form-control w-full">
+      <label className="label">
+        <span className="label-text">Caret</span>
+      </label>
+      <select
+        className="select select-bordered"
+        onChange={(e) => {
+          console.log("e", e, e.target.value);
+          setCaretType(e.target.value as CaretType);
+        }}
+      >
+        <option disabled selected>
+          {caretType}
+        </option>
+        {[CaretType.Square, CaretType.Classic].map((t) => {
+          return (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          );
+        })}
       </select>
     </div>
   );
@@ -84,6 +116,7 @@ export default function SettingsPage() {
       </div>
       {typingAnimationSelection}
       {themeSelect}
+      {caretTypeSelect}
       <div className="w-full">{resetButton}</div>
     </div>
   );

diff --git a/app/state.ts b/app/state.ts
@@ -4,6 +4,7 @@ import { getCurrentPage, parseBook } from "./utils/bookUtils";
 import { Ui } from "./Ui";
 import { TypingAnimation } from "./TypingAnimation";
 import { defaultTheme } from "./theme";
+import { CaretType } from "./CaretType";
 
 //export const progressAtom = atom(0);
 const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam elit, venenatis ac augue quis, faucibus hendrerit libero. Phasellus mi orci, viverra eget aliquam eu, posuere non metus. Sed condimentum justo tellus, in elementum libero tempus non. Nulla purus erat, luctus ut volutpat efficitur, facilisis ac metus. Sed laoreet ipsum est, eu vehicula elit consectetur pellentesque. Nulla elementum lorem quis orci scelerisque varius. Nam venenatis tincidunt felis, eu posuere dui convallis vitae. Phasellus a congue leo. Nam lacinia eros id orci maximus rutrum. Nunc aliquam accumsan vulputate. Sed sed velit at ipsum elementum fermentum sed id sapien. Nam volutpat enim a semper tempor. Praesent hendrerit tortor ipsum, malesuada tempus dolor ullamcorper at. Curabitur neque diam, scelerisque nec sem sit amet, pharetra pretium est. Vivamus in nisl nec arcu elementum iaculis.
@@ -25,6 +26,8 @@ export const maxProgressAtom = atom((get) => get(bookAtom).length);
 
 export const themeAtom = atomWithStorage("theme", defaultTheme);
 
+export const caretTypeAtom = atomWithStorage("caret-type", CaretType.Square);
+
 export const defaultWordsPerPage = 200;
 export const wordsPerPageAtom = atomWithStorage(
   "words-per-page",