Skip to content

Commit 34f365d

Browse files
Maek0sMaek0s
committed
v0.0.1 some fixed bugs
1 parent 2032a4b commit 34f365d

File tree

11 files changed

+276
-42
lines changed

11 files changed

+276
-42
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "textcode",
33
"private": true,
4-
"version": "0.0.0",
4+
"version": "0.0.1",
55
"type": "module",
66
"homepage": "https://maek0s.github.io/TextCode",
77
"scripts": {

‎src/App.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,8 +290,8 @@ footer {
290290
align-items: center;
291291
justify-content: center;
292292
position: relative;
293-
height: 60px;
294-
padding: 0 20px;
293+
height: 50px;
294+
padding: 0px 10px 0px 5px;
295295
}
296296

297297
.githubCreator {

‎src/App.jsx‎

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import './App.css'
22

3+
import { useState } from "react"
4+
35
import logo from './assets/images/logotextcode.png'
46

57
import Game from './logic/Game.jsx'
@@ -8,41 +10,61 @@ import Footer from './components/Footer.jsx';
810

911
import OptionNav from './components/OptionNav.jsx';
1012

11-
import { FaUser, FaCodeBranch } from "react-icons/fa";
12-
import { IoMdSettings, IoLogoGithub } from "react-icons/io";
13+
import { FaUser } from "react-icons/fa";
14+
import { IoMdSettings } from "react-icons/io";
1315
import { MdLeaderboard } from "react-icons/md";
1416

17+
import SettingsModal from "./components/SettingsModal.jsx";
18+
1519
function App() {
16-
return (
17-
<>
18-
<header>
19-
<div className="headerLeft">
20-
<a id="logo" href="./">
21-
<div className="icon">
22-
<img src={logo}/>
20+
// Header
21+
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
22+
23+
// Settings
24+
const [ tabulado, setTabulacion ] = useState(() => {
25+
const tabuladoSetting = window.localStorage.getItem("tabulado")
26+
27+
return tabuladoSetting ? JSON.parse(tabuladoSetting) : false
28+
})
29+
30+
return (
31+
<>
32+
<header>
33+
<div className="headerLeft">
34+
<a id="logo" href="./">
35+
<div className="icon">
36+
<img src={logo}/>
37+
</div>
38+
<h1 className="iconLogo">Text&Code</h1>
39+
</a>
2340
</div>
24-
<h1 className="iconLogo">Text&Code</h1>
25-
</a>
26-
</div>
27-
<div className="headerRight">
28-
<OptionNav nameClass="username">
29-
<MdLeaderboard size={22}/>
30-
</OptionNav>
31-
<OptionNav nameClass="username">
32-
<IoMdSettings size={22}/>
33-
</OptionNav>
34-
<OptionNav nameClass="username">
35-
<FaUser size={18}/>
36-
Username
37-
</OptionNav>
41+
<div className="headerRight">
42+
<OptionNav nameClass="username">
43+
<MdLeaderboard size={22}/>
44+
</OptionNav>
45+
<OptionNav nameClass="username">
46+
<IoMdSettings size={22} onClick={() => setIsSettingsOpen(true)}/>
47+
</OptionNav>
48+
<OptionNav nameClass="username">
49+
<FaUser size={18}/>
50+
Username
51+
</OptionNav>
52+
</div>
53+
</header>
54+
<div>
55+
<SettingsModal
56+
isOpen={isSettingsOpen}
57+
onClose={() => setIsSettingsOpen(false)}
58+
tabuladoSetting={tabulado}
59+
setTabulacion={setTabulacion}
60+
/>
3861
</div>
39-
</header>
4062

41-
<Game/>
63+
<Game tabuladoSetting={tabulado}/>
4264

43-
<Footer/>
44-
</>
45-
)
65+
<Footer/>
66+
</>
67+
)
4668
}
4769

4870
export default App

‎src/components/Footer.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { FaCodeBranch } from "react-icons/fa";
22
import { IoLogoGithub } from "react-icons/io";
33

4+
import packageJson from '/package.json';
5+
46
function Footer() {
57
return (
68
<footer>
@@ -13,7 +15,7 @@ function Footer() {
1315
<span className="madeWith">
1416
<a href="https://github.com/Maek0s/TextCode" target="_blank" rel="noopener noreferrer">
1517
<FaCodeBranch/>
16-
<p>v0.0.0</p>
18+
<p>v{packageJson.version}</p>
1719
</a>
1820
</span>
1921
</footer>

‎src/components/SettingsModal.jsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import '../styles/SettingsModal.css'
2+
3+
import { saveSettings } from "../logic/storage/settings.js"
4+
5+
export default function SettingsModal({ isOpen, onClose, tabuladoSetting, setTabulacion }) {
6+
if (!isOpen) return null
7+
8+
return (
9+
<div className="modal-overlay" onClick={onClose}>
10+
<div
11+
className="modal-content"
12+
onClick={(e) => e.stopPropagation()}
13+
>
14+
<h2>Configuración</h2>
15+
16+
<label className="setting-row">
17+
<span>Tabulación automática</span>
18+
<div
19+
className={`toggle-switch ${tabuladoSetting ? "on" : "off"}`}
20+
onClick={() => {
21+
let newState = !tabuladoSetting
22+
23+
saveSettings({ value: newState })
24+
setTabulacion(newState)
25+
}}
26+
>
27+
<div className="toggle-thumb" />
28+
</div>
29+
</label>
30+
31+
<hr/>
32+
33+
<h3 className="coming-soon-title">Próximamente</h3>
34+
<div className="coming-soon">
35+
<span>🌐 Idioma</span>
36+
<span>📜 Ventana al finalizar</span>
37+
<span>🕹️ Subir textos personalizados</span>
38+
</div>
39+
40+
<div className="modal-actions">
41+
<button onClick={onClose}>Cerrar</button>
42+
</div>
43+
</div>
44+
</div>
45+
)
46+
}

‎src/logic/Game.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { PiTextAaBold } from "react-icons/pi";
1212
import TextMode from './modes/TextMode.jsx'
1313
import CodeMode from './modes/CodeMode.jsx'
1414

15-
function Game() {
15+
16+
function Game({ tabuladoSetting }) {
1617
const { phraseRandom, resetPhrase } = useRandomPhrase();
1718
const [ phrase, setPhrase ] = useState("");
1819
const [ inputCode, setInputCode ] = useState("")
@@ -60,6 +61,7 @@ function Game() {
6061
progLanguage={progLanguage}
6162
inputCode={inputCode}
6263
setInputCode={setInputCode}
64+
tabuladoSetting={tabuladoSetting}
6365
/>
6466
default:
6567
return (

‎src/logic/ManageFiles.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export function useFragmentCode(language) {
3838
const [fragmentRandom, setCodeFragment] = useState("")
3939
const lastFragmentRef = useRef(null)
4040

41+
console.log("useFragmentCode ", language)
42+
4143
let file
4244

4345
switch (language) {

‎src/logic/modes/CodeMode.jsx‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import 'prismjs/components/prism-java';
1010
import 'prismjs/components/prism-c';
1111
import 'prismjs/components/prism-cpp';
1212
import 'prismjs/components/prism-jsx';
13+
import confetti from 'canvas-confetti';
1314

14-
function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setInputCode }) {
15+
function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setInputCode, tabuladoSetting }) {
1516
const containerRef = useRef(null)
1617

1718
const resetGame = () => {
@@ -27,20 +28,36 @@ function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setI
2728
if (inputCode.endsWith('\n')) {
2829
const container = containerRef.current;
2930
const maxScroll = container.scrollHeight - container.clientHeight;
30-
const nextScrollTop = container.scrollTop + 20;
31+
const nextScrollTop = container.scrollTop + 17;
3132

3233
container.scrollTop = nextScrollTop > maxScroll ? maxScroll : nextScrollTop;
3334
}
3435
}
3536
}, [inputCode])
3637

38+
useEffect(() => {
39+
const handleBeforeInput = (e) => {
40+
e.preventDefault();
41+
const char = e.data; // Esto será "^" directamente si es lo que el usuario escribe
42+
const expectedChar = fragmentRandom.charAt(inputCode.length);
43+
if (char === expectedChar) {
44+
setInputCode(prev => prev + char);
45+
}
46+
};
47+
document.addEventListener("beforeinput", handleBeforeInput);
48+
return () => document.removeEventListener("beforeinput", handleBeforeInput);
49+
}, [fragmentRandom, inputCode]);
50+
51+
3752
const handleKeyDown = (e) => {
3853
e.preventDefault()
3954

4055
const expectedChar = fragmentRandom.charAt(inputCode.length)
4156

4257
let key = e.key
4358

59+
console.log("key", key)
60+
4461
// Controlar el reinicio del juego
4562
const isCtrl = e.ctrlKey || e.metaKey
4663
if (isCtrl && e.key.toLowerCase() === 'r') {
@@ -49,9 +66,30 @@ function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setI
4966
return
5067
}
5168

69+
// Evitar que el usuario meta espacios donde va un tab
70+
if (e.key === ' ' && fragmentRandom.slice(inputCode.length, inputCode.length + 4) === ' ') {
71+
e.preventDefault()
72+
return
73+
}
74+
5275
if (key === 'Enter' && '\n' === expectedChar) {
5376
key = '\n'
5477
setInputCode((prev) => prev + key);
78+
79+
if (tabuladoSetting) {
80+
81+
let newCode = inputCode + "\n"
82+
83+
let index = newCode.length
84+
85+
while (fragmentRandom.slice(index, index + 4) === " ") {
86+
newCode += " "
87+
index += 4
88+
}
89+
90+
setInputCode(newCode)
91+
}
92+
5593
return
5694
}
5795

@@ -68,10 +106,11 @@ function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setI
68106
return
69107
}
70108

71-
if (e.key === 'Backspace') {
72-
setInputCode((prev) => prev.slice(0, -1))
73-
return
74-
}
109+
// Opción de borrar deshabilitada de forma experimental
110+
//if (e.key === 'Backspace') {
111+
// setInputCode((prev) => prev.slice(0, -1))
112+
// return
113+
//}
75114

76115
if (key === expectedChar) {
77116
setInputCode((prev) => prev + key)
@@ -125,6 +164,12 @@ function CodeMode({ fragmentRandom, resetFragment, progLanguage, inputCode, setI
125164
return () => document.removeEventListener('keydown', handleKeyDown)
126165
})
127166

167+
if (inputCode.length === fragmentRandom.length) {
168+
confetti()
169+
//resetGame()
170+
resetFragment()
171+
}
172+
128173
return (
129174
<>
130175
<div className="gameCodeContainer">

‎src/logic/modes/TextMode.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ import { FaRedo } from "react-icons/fa";
55
import confetti from 'canvas-confetti'
66

77
function TextMode({ phrase, setPhrase, numberLetter, setNumberLetter, phraseRandom, timer, resetGame} ) {
8-
9-
console.log("Timer actual: ", timer)
10-
118
useEffect(() => {
129
function handleKeyDown(event) {
1310

@@ -50,6 +47,7 @@ function TextMode({ phrase, setPhrase, numberLetter, setNumberLetter, phraseRand
5047
resetGame()
5148
} else {
5249
console.log("Frase incompleta o con errores:", phrase)
50+
resetGame()
5351
}
5452
}
5553
}, [numberLetter, phrase, phraseRandom]);

‎src/logic/storage/settings.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const saveSettings = ({ value }) => {
2+
window.localStorage.setItem('tabulado', value)
3+
4+
console.log(window.localStorage.getItem('tabulado'))
5+
}

0 commit comments

Comments
 (0)