feat/Add toggle focus mode

.dockerignore

@@ -0,0 +1 @@
+node_modules

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,29 @@
+manifest.json,1724384726444,1a9784b8466475389b21e07611f74fb1dd8367643a277a29c503fee0b049140c
+robots.txt,1724384726444,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
+logo512.png,1724384726444,9ab6cb941e493973baf9755bd3fc76988762e6b514d5bc365aeaccefa0de034f
+index.html,1724384851220,512c7d1c4ed690764c74b8a1e8d05fd092a234aa083dbb536c6ee3b71a24f84f
+logo.png,1724384726444,fdc50634b1942f229d3b244fd91f8cc141a2fb301cebffecb325d9432f92e35d
+logo192.png,1724384726444,50bd60c6fefdd7de57fb652cf717e33c712106ffe0a32da5f75a12bf22cecbc0
+asset-manifest.json,1724384851260,b50ea49fa511bbcddd373781be4c24110f9e5401e6e006c9a274c9c8e40b77d1
+favicon.ico,1724384726440,fc26b72d1f6d47474d8993a667b2af803ede41c9996d0f69e62ed6e415d7fed0
+static/media/discord.b048131aab7bcf46e08115b432eece0a.svg,1724384851220,f5c2d6fa3ec5449e38ba567f81d867468dad78dc9f83c01495f27fce76d735ae
+static/media/typeSoft.3e307070c0d43972460c.wav,1724384851220,1dade6a0dc93ff4a2f1658ae9d71850d6a217993e9f008bbdff6124c4f26c3c2
+static/js/main.56113d4e.js.LICENSE.txt,1724384851220,863f9d79659576d4828dd820b2b96ab72da24b2f7b5034e53556f00ba3a08263
+static/js/911.b91b008e.chunk.js.map,1724384851264,fbb41c8f77ac4e7474fc506d4cbff453d6577cfa5101b81a26fa9e42a501f5a5
+static/js/911.b91b008e.chunk.js,1724384851224,9bbb3492a5e45ae74d30a52e06e97ce762b8f36aead1520e2f2e9a148cf1052f
+static/js/845.d88f7a05.chunk.js.LICENSE.txt,1724384851224,4be0b6eb0f1a4fd054f85b6a21a7380e9bb7287a99bc268e626a709df6d9a60e
+static/js/845.d88f7a05.chunk.js,1724384851224,b92104d5a535577378ceb2317c7babe9d122808be04c04ae04c965eacef5712e
+static/js/514.489e435b.chunk.js.map,1724384851264,68d375a86e92d47d24bfa1924a8b74f1720d1f15eb0752b69779022b8b7a9e28
+static/js/514.489e435b.chunk.js,1724384851224,45f4d679735604e53c02fcc5452e77d34d85a662b62088b932d66d4d9435f7ff
+static/js/268.39edc2bf.chunk.js.map,1724384851264,67195ad3fc7b932c5be1cdc5652e975194bd639445ce11a0b5a00348a227cd47
+static/js/268.39edc2bf.chunk.js,1724384851224,91b9fbc53657799ac65d53a0505f8d93d5b6171b3e78ef0da74b553fa32172ba
+static/js/110.abadb285.chunk.js.map,1724384851264,5296d2a652aba7123952a2bda651109556f9f68bc9a575ffc05762c1b67a7e42
+static/js/110.abadb285.chunk.js,1724384851224,5149fe8447d33c2b6c3c10bd7e0627d205e14e9b47ca558a0a81cf0847324716
+static/css/main.e6c13ad2.css.map,1724384851260,e845e6a28aaddc1902a601eeb9df71ac53bdd9c9a922c6d49febaf4035e42c47
+static/css/main.e6c13ad2.css,1724384851220,20ddccbcb290095bc023db15e46a257ec7d8ee4783d17704654f62d527804f71
+static/media/cherryBlue.f4cad75e8a5792bb3d25.wav,1724384851220,22a637101f4b2aaef7335ed58a20e7db780ae522ef535506c05f1594b5e2b8d2
+static/media/keyboard.f9440324ce3fbfc79f5b.wav,1724384851224,1b248ff6cd5a2ffdc7f24c03f1dba874b01a1c285162a60589a6bb3e17f4b250
+static/media/WeChatSupport.d4d0b5b8d76008986829.png,1724384851220,a2dfd32d2be076a4e5c356ba97001789d403665f3dd90a01a631e9649f2fc32d
+static/js/845.d88f7a05.chunk.js.map,1724384851264,acc2fa06363004ca40b27d587ff87677dc97002c7d9a8c52db739433716f8b94
+static/js/main.56113d4e.js.map,1724384851260,0c9b60cb194a8c7e0d91efb47986caabc8f62d407f7c898c9d3ecc5f4087d7b2
+static/js/main.56113d4e.js,1724384851220,127aa2b52cbfe8cdef95584dbf398cdb6d9b65a7cb9ea28ac9cbc4c3e0b3dc90

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "eletypes"
+  }
+}

Dockerfile

@@ -1,15 +1,13 @@
-FROM node:18
+FROM node
 
 WORKDIR /eletypes_react
 
-ADD package.json package-lock.json /eletypes_react
+COPY package*.json ./ 
 
 RUN npm install
 
-ADD src/ ./src
-ADD public/ ./public
-
+COPY . .
 
 EXPOSE 3000
 
-CMD [ "npm", "start" ]
+CMD npm start

docker-compose.yml

@@ -1,7 +1,7 @@
-version: '3.3'
 services:
   eletypes-react:
     build:
+      context: .
       dockerfile: Dockerfile
     image: eletypes_react
     ports:

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/App.js

@@ -66,6 +66,11 @@ function App() {
   // musicMode setting
   const [isMusicMode, setIsMusicMode] = useState(false);
 
+  // ultraZenMode setting
+  const [isUltraZenMode, setIsUltraZenMode] = useState(
+    localStorage.getItem("ultra-zen-mode") === "true"
+  );
+
   // coffeeMode setting
   const [isCoffeeMode, setIsCoffeeMode] = useState(false);
 
@@ -110,6 +115,10 @@ function App() {
     setIsMusicMode(!isMusicMode);
   };
 
+  const toggleUltraZenMode = () => {
+    setIsUltraZenMode(!isUltraZenMode);
+  };
+
   const toggleCoffeeMode = () => {
     setIsCoffeeMode(!isCoffeeMode);
     setIsTrainerMode(false);
@@ -132,6 +141,10 @@ function App() {
     localStorage.setItem("focused-mode", isFocusedMode);
   }, [isFocusedMode]);
 
+  useEffect(() => {
+    localStorage.setItem("ultra-zen-mode", isUltraZenMode);
+  }, [isUltraZenMode]);
+
   const textInputRef = useRef(null);
   const focusTextInput = () => {
     textInputRef.current && textInputRef.current.focus();
@@ -181,6 +194,7 @@ function App() {
           <Logo isFocusedMode={isFocusedMode} isMusicMode={isMusicMode}></Logo>
           {isWordGameMode && (
             <TypeBox
+              isUltraZenMode={isUltraZenMode}
               textInputRef={textInputRef}
               isFocusedMode={isFocusedMode}
               soundMode={soundMode}
@@ -218,19 +232,22 @@ function App() {
           )}
           <div className="bottomBar">
             <FooterMenu
+              isWordGameMode={isWordGameMode}
               themesOptions={themesOptions}
               theme={theme}
               soundMode={soundMode}
               toggleSoundMode={toggleSoundMode}
               soundOptions={soundOptions}
               soundType={soundType}
+              toggleUltraZenMode={toggleUltraZenMode}
               handleSoundTypeChange={handleSoundTypeChange}
               handleThemeChange={handleThemeChange}
               toggleFocusedMode={toggleFocusedMode}
               toggleMusicMode={toggleMusicMode}
               toggleCoffeeMode={toggleCoffeeMode}
               isCoffeeMode={isCoffeeMode}
               isMusicMode={isMusicMode}
+              isUltraZenMode={isUltraZenMode}
               isFocusedMode={isFocusedMode}
               gameMode={gameMode}
               handleGameModeChange={handleGameModeChange}

src/components/common/ChineseModeWords.js

@@ -0,0 +1,66 @@
+import React, { memo, useCallback, useRef } from "react";
+
+const ChineseModeWords = ({
+  currentWords,
+  currWordIndex,
+  isUltraZenMode,
+  wordsKey,
+  status,
+  wordSpanRefs,
+  getChineseWordKeyClassName,
+  getChineseWordClassName,
+  getCharClassName,
+  getExtraCharsDisplay,
+}) => {
+  const containerRef = useRef(null);
+
+  // Get word opacity for focus mode
+  const getWordOpacity = useCallback(
+    (index) => Math.max(1 - Math.abs(index - currWordIndex) * 0.1, 0.1),
+    [currWordIndex]
+  );
+
+  return (
+    <div
+      className="type-box-chinese"
+      style={{ visibility: status === "finished" ? "hidden" : "visible" }}
+      ref={containerRef}
+    >
+      <div className="words">
+        {currentWords.map((word, i) => {
+          const opacityValue = isUltraZenMode ? getWordOpacity(i) : 1;
+
+          return (
+            <div
+              key={i}
+              style={{
+                opacity: opacityValue,
+                transition: "500ms",
+              }}
+            >
+              <span
+                className={getChineseWordKeyClassName(i)}
+                ref={wordSpanRefs[i]}
+              >
+                {wordsKey[i]}
+              </span>
+              <span className={getChineseWordClassName(i)}>
+                {word.split("").map((char, idx) => (
+                  <span
+                    key={`word${i}_${idx}`}
+                    className={getCharClassName(i, idx, char, word)}
+                  >
+                    {char}
+                  </span>
+                ))}
+                {getExtraCharsDisplay(word, i)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChineseModeWords);

src/components/common/EnglishModeWords.js

@@ -0,0 +1,60 @@
+import React, { memo, useCallback, useRef } from "react";
+
+const EnglishModeWords = ({
+  currWordIndex,
+  isUltraZenMode,
+  currentWords,
+  status,
+  wordSpanRefs,
+  getWordClassName,
+  getCharClassName,
+  startIndex,
+  getExtraCharsDisplay,
+}) => {
+  const containerRef = useRef(null);
+
+  // Get word opacity for focus mode
+  const getWordOpacity = useCallback(
+    (globalIndex) =>
+      Math.max(1 - Math.abs(globalIndex - currWordIndex) * 0.1, 0.1),
+    [currWordIndex]
+  );
+
+  return (
+    <div
+      className="type-box"
+      style={{ visibility: status === "finished" ? "hidden" : "visible" }}
+      ref={containerRef}
+    >
+      <div className="words">
+        {currentWords.map((word, i) => {
+          const globalIndex = startIndex + i;
+
+          return (
+            <span
+              key={globalIndex}
+              ref={wordSpanRefs[globalIndex]}
+              style={{
+                opacity: isUltraZenMode ? getWordOpacity(globalIndex) : "1",
+                transition: "500ms",
+              }}
+              className={getWordClassName(globalIndex)}
+            >
+              {word.split("").map((char, idx) => (
+                <span
+                  key={`word${globalIndex}_${idx}`}
+                  className={getCharClassName(globalIndex, idx, char, word)}
+                >
+                  {char}
+                </span>
+              ))}
+              {getExtraCharsDisplay(word, globalIndex)}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default memo(EnglishModeWords);

src/components/common/FooterMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
 import { Grid, AppBar } from "@mui/material";
 import { Box } from "@mui/system";
 import { Tooltip } from "@mui/material";
@@ -16,6 +17,7 @@ import {
   GAME_MODE_SENTENCE,
   TRAINER_MODE,
   WORDS_CARD_MODE,
+  ULTRA_ZEN_MODE,
 } from "../../constants/Constants";
 import { Link } from "@mui/material";
 import SupportMe from "../features/SupportMe";
@@ -45,6 +47,8 @@ const FooterMenu = ({
   handleThemeChange,
   toggleFocusedMode,
   toggleMusicMode,
+  toggleUltraZenMode,
+  isUltraZenMode,
   toggleCoffeeMode,
   isMusicMode,
   isFocusedMode,
@@ -54,6 +58,7 @@ const FooterMenu = ({
   isTrainerMode,
   toggleTrainerMode,
   isWordsCardMode,
+  isWordGameMode,
   toggleWordsCardMode,
 }) => {
   const isSiteInfoDisabled = isMusicMode || isFocusedMode;
@@ -75,8 +80,11 @@ const FooterMenu = ({
   };
 
   return (
-    <AppBar position="static"
-    color="transparent" className="bottomBar">
+    <AppBar
+      position="static"
+      color="transparent"
+      className={`bottomBar ${isFocusedMode && "fade-element"}`}
+    >
       <Grid container justifyContent="space-between" alignItems="center">
         <Box display="flex" flexDirection="row">
           <Select
@@ -168,6 +176,15 @@ const FooterMenu = ({
                   {WORD_MODE_LABEL}
                 </span>
               </IconButton>
+              {isWordGameMode && (
+                <IconButton onClick={toggleUltraZenMode}>
+                  <Tooltip title={ULTRA_ZEN_MODE}>
+                    <span className={getModeButtonClassName(isUltraZenMode)}>
+                      <ZoomInMapIcon fontSize="small" />
+                    </span>
+                  </Tooltip>{" "}
+                </IconButton>
+              )}
               <IconButton
                 onClick={() => {
                   handleGameModeChange(GAME_MODE_SENTENCE);