diff --git a/public/css/index.css b/public/css/index.css
index 4c70d82..7fffdaa 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -46,7 +46,7 @@ header h2 {
width: 20vw;
}
-.puzzleWord {
+.word {
font-family: "Rambla", sans-serif;
font-weight: 400;
font-size: 50pt;
@@ -56,7 +56,7 @@ header h2 {
display: flex;
flex-wrap: wrap;
}
-.puzzleWord .letter {
+.word .letter {
width: 3vw;
height: 70pt;
margin-left: 2vw;
@@ -65,7 +65,7 @@ header h2 {
justify-content: center;
align-items: flex-end;
}
-.puzzleWord .counter {
+.word .counter {
font-size: 40pt;
font-family: Arial, Helvetica, sans-serif;
margin-left: 3vw;
@@ -289,4 +289,17 @@ header h2 {
height: 50px;
}
+.letters-registered {
+ margin: 0px 5vw;
+ display: flex;
+ align-items: center;
+ font-family: "Times New Roman", Times, serif;
+ color: #918c6c;
+ font-size: 50pt;
+ height: 20vh;
+}
+.letters-registered span {
+ margin-left: 1vw;
+}
+
/*# sourceMappingURL=index.css.map */
diff --git a/public/css/index.css.map b/public/css/index.css.map
index a1155e1..b4a7d1d 100644
--- a/public/css/index.css.map
+++ b/public/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI","file":"index.css"}
\ No newline at end of file
diff --git a/public/sass/_game-container.scss b/public/sass/_game-container.scss
index 650b278..73dfce4 100644
--- a/public/sass/_game-container.scss
+++ b/public/sass/_game-container.scss
@@ -18,6 +18,6 @@
}
@import 'hangman';
-@import 'puzzleWord';
+@import 'word';
@import 'current-score';
@import 'categories';
\ No newline at end of file
diff --git a/public/sass/_puzzleWord.scss b/public/sass/_word.scss
similarity index 97%
rename from public/sass/_puzzleWord.scss
rename to public/sass/_word.scss
index 953f09f..cc9be67 100644
--- a/public/sass/_puzzleWord.scss
+++ b/public/sass/_word.scss
@@ -1,4 +1,4 @@
-.puzzleWord {
+.word {
@include bodyFont();
font-size: 50pt;
diff --git a/public/sass/index.scss b/public/sass/index.scss
index 0850e32..59a8369 100644
--- a/public/sass/index.scss
+++ b/public/sass/index.scss
@@ -23,4 +23,5 @@ html, body {
@import 'header';
@import 'game-container';
@import 'defeat-victory';
-@import 'loading';
\ No newline at end of file
+@import 'loading';
+@import 'letters-registered';
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index a74147e..63506a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,11 +15,20 @@ import { RecoveryCurrentScore } from "./Storage Scripts/RecoveryCurrentScore";
import { RecoveryCurrentCategory } from "./Storage Scripts/RecoveryCurrentCategory";
import { RecoveryCurrentLanguage } from "./Storage Scripts/RecoveryCurrentLanguage";
import { AlmacenateLanguage } from "./Storage Scripts/AlmacenateLanguage";
-import WrongLetters from "./components/WrongLetters/WrongLetters";
+import WrongLetters from "./components/LettersRegistered/LettersRegistered";
import Word from "./components/Word/Word";
+import LettersRegistered from "./components/LettersRegistered/LettersRegistered";
+import alphabet from "./General Scripts/alphabet"
+import checkVictory from "./General Scripts/checkVictory";
+import checkDefeat from "./General Scripts/checkDefeat";
function App() {
- const [displayApp, setDisplayApp] = useState(false)
+ const [displayApp, setDisplayApp] = useState(true)
+
+ const [selectedWord, setSelectedWord] = useState('TEST')
+
+ const [correctLetters, setCorrectLetters] = useState([])
+ const [lettersRegistered, setLettersRegistered] = useState([])
const [language, setLanguage] = useState('english')
const [languageIsReady, setLanguageIsReady] = useState(false)
@@ -36,7 +45,6 @@ function App() {
const [displayCategories, setDisplayCategories] = useState(false)
React.useEffect(() => {
-
RecoveryCurrentScore(setCurrentScore)
RecoveryCurrentCategory(setCategory)
@@ -48,10 +56,47 @@ function App() {
ChangeTitle(language)
setLanguageIsReady(true)
+ setSelectedWord(selectedWord.toLowerCase())
}, [])
- if (endOfGame) {
+ React.useEffect(() => {
+ const registerKeys = e => {
+
+ const currentKey = e.key.toLowerCase()
+
+ if (displayApp) {
+
+ if (alphabet.includes(currentKey)) {
+
+ setLettersRegistered([...lettersRegistered, currentKey])
+
+ if (selectedWord.includes(currentKey)) {
+
+ if (!correctLetters.includes(currentKey)) {
+
+ setCorrectLetters([...correctLetters, currentKey])
+
+ checkVictory(setEndOfGame)
+ }
+
+ }
+ else {
+ setHangmanFrame(hangmanFrame + 1)
+
+ checkDefeat(setEndOfGame, hangmanFrame)
+ }
+ }
+ }
+ }
+
+ window.addEventListener('keyup', registerKeys)
+
+ return () => window.removeEventListener('keyup', registerKeys)
+
+ }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord])
+
+ if (endOfGame) {
setTimeout(() => {
AlmacenateCurrentScore(currentScore)
@@ -97,11 +142,13 @@ function App() {
/>
-