principal screen done

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/src/Firebase/Firebase_Config.js

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "firebase": "^9.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",

public/css/index.css

@@ -27,8 +27,56 @@ header h2 {
   cursor: pointer;
 }
 
+.app {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 2vh;
+}
+.app .column-2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.hangman {
+  user-select: none;
+}
 .hangman img {
   width: 20vw;
 }
 
+.puzzleWord {
+  font-family: "Rambla", sans-serif;
+  font-weight: 400;
+  font-size: 60pt;
+  display: flex;
+  align-items: center;
+  max-width: 70vw;
+  display: flex;
+  flex-wrap: wrap;
+}
+.puzzleWord .letter {
+  width: 3vw;
+  height: 70pt;
+  margin-left: 2vw;
+  border-bottom: 3px solid #000;
+}
+.puzzleWord .counter {
+  font-size: 40pt;
+  font-family: Arial, Helvetica, sans-serif;
+  margin-left: 3vw;
+}
+
+.current-score {
+  display: flex;
+  flex-direction: row-reverse;
+  font-family: "Raleway", sans-serif;
+  font-weight: bold;
+  font-size: 18pt;
+  color: #58ff6b;
+}
+.current-score .text {
+  user-select: none;
+}
+
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_hangman.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;;;ACrBJ;EACI","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.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;;AAGJ;EACI;EAEA;EAEA;;;AC1BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI","file":"index.css"}

public/index.html

@@ -11,6 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Rambla&display=swap" rel="stylesheet"> 
 
     <link rel="stylesheet" href="./css/index.css">
     <!--

public/sass/_app.scss

@@ -1,5 +1,22 @@
-@import 'hangman';
-
 .app {
     
-}
+    display: flex;
+    justify-content: space-around;
+
+    margin-top: 2vh;
+
+    .column-1 {
+
+    }
+
+    .column-2 {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: space-between
+    }
+}
+
+@import 'hangman';
+@import 'puzzleWord';
+@import 'current-score';

public/sass/_current-score.scss

@@ -0,0 +1,16 @@
+.current-score {
+    
+    display: flex;
+
+    flex-direction: row-reverse;
+
+    @include titleFont();
+
+    font-size: 18pt;
+
+    color: rgb(88, 255, 107);
+
+    .text {
+        user-select: none;
+    }
+}

public/sass/_hangman.scss

@@ -1,4 +1,7 @@
 .hangman {
+
+    user-select: none;
+
     img {
         width: 20vw;
     }

public/sass/_puzzleWord.scss

@@ -0,0 +1,29 @@
+.puzzleWord {
+    @include bodyFont();
+
+    font-size: 60pt;
+
+    display: flex;
+    align-items: center;
+
+    max-width: 70vw;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    .letter {
+        width: 3vw;
+        height: 70pt;
+        margin-left: 2vw;
+
+        border-bottom: 3px solid #000;
+    }
+
+    .counter {
+        font-size: 40pt;
+
+        font-family:Arial, Helvetica, sans-serif;
+
+        margin-left: 3vw;
+    }
+}

public/sass/index.scss

@@ -16,7 +16,7 @@ html, body {
 
 @mixin bodyFont() {
 
-    font-family: 'Raleway', sans-serif;
+    font-family: 'Rambla', sans-serif;
     font-weight: 400;
 }
 

src/App.js

@@ -2,6 +2,7 @@ import React, {useState} from "react";
 import CurrentScore from "./components/CurrentScore";
 import Hangman from "./components/Hangman/Hangman";
 import Header from "./components/Header";
+import PuzzleWord from "./components/PuzzleWord";
 
 function App() {
 
@@ -13,9 +14,17 @@ function App() {
     <Header language={language}/>
     
     <div className="app">
-      <Hangman />
+
+      <div className='column-1'>
+        <Hangman />
+      </div>
       
-      <CurrentScore currentScore={currentScore} />
+      <div className='column-2'>
+        <CurrentScore currentScore={currentScore} />
+        <PuzzleWord />
+
+      </div>
+
     </div>
    </>
   );

src/components/CurrentScore.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 const CurrentScore = (props) => {
     return (
-        <div>
-            <h2>Current Score: {props.currentScore}</h2>
+        <div className='current-score'>
+            <h2><span className='text'>Current Score: </span>{props.currentScore}</h2>
         </div>
     )
 }

src/components/PuzzleWord.jsx

@@ -0,0 +1,40 @@
+import React, {useState} from 'react'
+
+const PuzzleWord = () => {
+
+    const [actualWord, setActualWord] = useState('murcielagos')
+    const [hiddenWord, setHiddenWord] = useState('')
+
+    console.log(actualWord.length)
+
+    React.useEffect(() => {
+
+        const puzzleWord = document.getElementById('puzzleWord')
+        
+        for (let i = 0; i < actualWord.length; i++) {
+
+            let letter = document.createElement('span')
+            
+            letter.className = 'letter'
+            letter.textContent = ''
+
+            puzzleWord.appendChild(letter)
+        }
+
+        const counter = document.createElement('span')
+        counter.className = 'counter'
+        counter.textContent = '(' + actualWord.length + ')'
+
+        puzzleWord.appendChild(counter)
+
+    }, [])
+
+    return (
+        <div className="puzzleWord" id="puzzleWord">
+            {hiddenWord}
+        </div>
+        
+    )
+}
+
+export default PuzzleWord