feat: always display word length on click

Author: julienc91

frontend/components/game/article.tsx

@@ -18,8 +18,6 @@ import {
 } from "@caviardeul/utils/caviarding";
 
 const _WordContainer: React.FC<{ word: string }> = ({ word }) => {
-  const { settings } = useContext(SettingsContext);
-
   const { revealedWords, isOver, selection } = useContext(GameContext);
   if (word === undefined) {
     return null;
@@ -35,12 +33,7 @@ const _WordContainer: React.FC<{ word: string }> = ({ word }) => {
     );
   } else {
     return (
-      <span
-        className={
-          "word caviarded" + (settings.displayWordLength ? " word-length" : "")
-        }
-        data-word-length={word.length}
-      >
+      <span className="word caviarded" data-word-length={word.length}>
         {"█".repeat(word.length)}
       </span>
     );

frontend/components/modals/settingsModal.tsx

@@ -8,16 +8,12 @@ const SettingsModal: React.FC<{ open: boolean; onClose: () => void }> = ({
   onClose,
 }) => {
   const { settings, onChangeSettings } = useContext(SettingsContext);
-  const { lightMode, displayWordLength, autoScroll } = settings;
+  const { lightMode, autoScroll } = settings;
 
   const handleToggleLightMode = useCallback(() => {
     onChangeSettings({ lightMode: !lightMode });
   }, [lightMode, onChangeSettings]);
 
-  const handleToggleDisplayWordLength = useCallback(() => {
-    onChangeSettings({ displayWordLength: !displayWordLength });
-  }, [displayWordLength, onChangeSettings]);
-
   const handleToggleAutoscroll = useCallback(() => {
     onChangeSettings({ autoScroll: !autoScroll });
   }, [autoScroll, onChangeSettings]);
@@ -39,15 +35,6 @@ const SettingsModal: React.FC<{ open: boolean; onClose: () => void }> = ({
           Activer le mode sombre
         </label>
         <br />
-        <label>
-          <input
-            type="checkbox"
-            checked={displayWordLength}
-            onChange={handleToggleDisplayWordLength}
-          />
-          Afficher le nombre de lettres au clic
-        </label>
-        <br />
         <label>
           <input
             type="checkbox"

frontend/components/settings/manager.tsx

@@ -7,7 +7,6 @@ import SaveManagement from "@caviardeul/utils/save";
 
 const defaultSettings: Settings = {
   lightMode: false,
-  displayWordLength: true,
   autoScroll: true,
 };
 const getInitialSettings = (): Settings => {
@@ -19,8 +18,6 @@ const getInitialSettings = (): Settings => {
   }
   return {
     lightMode: settings?.lightMode ?? defaultSettings.lightMode,
-    displayWordLength:
-      settings?.displayWordLength ?? defaultSettings.displayWordLength,
     autoScroll: settings?.autoScroll ?? defaultSettings.autoScroll,
   };
 };

frontend/styles/style.scss

@@ -455,7 +455,8 @@ main {
       height: calc(100% - #{$guessInputHeight});
     }
 
-    h1, h2 {
+    h1,
+    h2 {
       line-height: normal;
     }
 
@@ -490,28 +491,27 @@ main {
         border-radius: 30px 255px 30px 225px/30px 225px 30px 250px;
       }
 
-      &.word-length {
-        cursor: pointer;
-        user-select: none;
-        &::after {
-          align-items: center;
-          content: attr(data-word-length);
-          color: var(--color-background);
-          display: flex;
-          height: 100%;
-          left: 0;
-          justify-content: center;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          transition: opacity 0.2s ease-in-out;
-          width: 100%;
-        }
-        &:active::after,
-        &:focus::after,
-        &:focus-within::after {
-          opacity: 1;
-        }
+      // word length indicator
+      cursor: pointer;
+      user-select: none;
+      &::after {
+        align-items: center;
+        content: attr(data-word-length);
+        color: var(--color-background);
+        display: flex;
+        height: 100%;
+        left: 0;
+        justify-content: center;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        transition: opacity 0.2s ease-in-out;
+        width: 100%;
+      }
+      &:active::after,
+      &:focus::after,
+      &:focus-within::after {
+        opacity: 1;
       }
     }
   }