v0.0.3 released - Customizable cursor color

Introduced a new setting allowing users to customize the cursor color using a color picker in SettingsModal.

Author: Maek0s

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "textcode",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "homepage": "https://maek0s.github.io/TextCode",
   "scripts": {
@@ -18,6 +18,7 @@
     "gh-pages": "^6.3.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
+    "react-color": "^2.19.3",
     "react-confetti": "^6.4.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0"

package.json

@@ -379,29 +379,28 @@ footer {
 
 .cursor {
   position: relative;
-  color: #007acc;
   font-weight: bold;
 }
 
 .cursor::after {
   content: "";
   position: absolute;
   left: 0;
-  bottom: 0;
+  bottom: -2px;
   width: 2px;
-  height: 1em;
-  background-color: #007acc;
+  height: 0.90em;
+  background-color: var(--cursor-color, #007acc);
   animation: blink 1s steps(2, start) infinite;
 }
 
+.cursor.cursorCode::after {
+  bottom: 0px;
+  height: 1.1em;
+}
+
 @keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
 }
 
 /* Cambios situacionales */

src/App.css

@@ -21,7 +21,7 @@ import UpdatesModal from './components/UpdatesModal.jsx';
 
 function App() {
     // Header
-    const [ isSettingsOpen, setIsSettingsOpen ] = useState(false);
+    const [ isSettingsOpen, setIsSettingsOpen ] = useState(false)
 
     // Settings
     const [ settings, setSettings ] = useState(() => {
@@ -35,7 +35,7 @@ function App() {
     })
 
     // Footer
-    const [ isUpdatesOpen, setIsUpdatesOpen ] = useState(false);
+    const [ isUpdatesOpen, setIsUpdatesOpen ] = useState(false)
 
     const handleSave = (newSettings) => {
         setSettings(newSettings)

src/App.jsx

@@ -1,13 +1,25 @@
+import { ChromePicker } from "react-color";
+import { useState } from "react";
+
 import '../styles/SettingsModal.css'
 
-export default function SettingsModal({ isOpen, onClose, settings, onSave }) {
+export default function SettingsModal({ isOpen, onClose, settings, onSave }) {  
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
   if (!isOpen) return null
 
   const toggleSetting = (key) => {
     const newSettings = { ...settings, [key]: !settings[key] }
     onSave(newSettings)
   }
 
+  const handleColorChange = (newColor) => {
+    const updatedSettings = { ...settings, cursorColor: newColor.hex }
+    onSave(updatedSettings)
+  }
+
+  console.log(settings.cursorColor)
+
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
@@ -33,6 +45,45 @@ export default function SettingsModal({ isOpen, onClose, settings, onSave }) {
           </div>
         </label>
 
+        <label className="setting-row">
+          <span>Mostrar cursor</span>
+          <div
+            className={`toggle-switch ${settings.cursor ? "on" : "off"}`}
+            onClick={() => toggleSetting("cursor")}
+          >
+            <div className="toggle-thumb" />
+          </div>
+        </label>
+
+        {
+          settings.cursor &&
+          (
+            <div className="setting-row">
+              <span>Color cursor</span>
+              <span className="reset"
+                    onClick={() => handleColorChange({ hex: "#007acc" })}>Reset</span>
+              <div
+                className="color-square"
+                style={{ backgroundColor: settings.cursorColor || "#000000" }}
+                onClick={() => setShowColorPicker(!showColorPicker)}
+              />
+
+              {showColorPicker && (
+                <div className="popover">
+                  <div className="cover" onClick={() => setShowColorPicker(false)} />
+                  
+                  <ChromePicker
+                    className="custom-chrome-picker"
+                    color={settings.cursorColor || "#007acc"}
+                    onChange={handleColorChange}
+                    disableAlpha={true}
+                  />
+                </div>
+              )}
+            </div>
+          )
+        }
+
         <h2>Sonido 🎶</h2>
 
         <label className="setting-row">

src/components/SettingsModal.jsx

@@ -9,15 +9,6 @@ export default function UpdatesModal({ isOpen, onClose }) {
         <h2>📢 Próximas actualizaciones</h2>
 
         <div className="updates-list">
-          <div className="update-block">
-            <h3>v0.0.3</h3>
-            <ul>
-              <li>Lista de controles</li>
-              <li>Mejoras en los cursores y configuración</li>
-              <li>Más settings</li>
-            </ul>
-          </div>
-
           <div className="update-block">
             <h3>v0.0.4</h3>
             <ul>

src/components/UpdatesModal.jsx

@@ -16,14 +16,14 @@ import TimeMode from './modes/TimeMode.jsx';
 import OneWord from './modes/OneWord.jsx';
 
 function Game({ settings }) {
-    const { phraseRandom, resetPhrase } = useRandomPhrase();
-    const [ phrase, setPhrase ] = useState("");
+    const { phraseRandom, resetPhrase } = useRandomPhrase()
+    const [ phrase, setPhrase ] = useState("")
     const [ inputCode, setInputCode ] = useState("")
-    const [ numberLetter, setNumberLetter ] = useState(0);
-    const [ gamemode, setGamemode ] = useState("text");
-    const [ progLanguage, setProgLanguage ] = useState("java");
-    const { fragmentRandom, resetFragment } = useFragmentCode(progLanguage);
-    const [ timer, setTimer ] = useState(0);
+    const [ numberLetter, setNumberLetter ] = useState(0)
+    const [ gamemode, setGamemode ] = useState("text")
+    const [ progLanguage, setProgLanguage ] = useState("java")
+    const { fragmentRandom, resetFragment } = useFragmentCode(progLanguage)
+    const [ timer, setTimer ] = useState(0)
 
     const resetGame = () => {
         resetPhrase()