franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Categories started

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-15 18:56:07 -03:00
parent 0d1f51ded8
commit 844f0f6673
5 changed files with 85 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -34,7 +34,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Hangman game</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

17
src/App.js
View File

@@ -8,6 +8,7 @@ import Defeat from "./components/Hangman/PuzzleWord/Defeat";
import Loading from "./components/Loading"; import Loading from "./components/Loading";
import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore"; import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore";
import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage"; import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage";
import Categories from "./components/Categories/Categories";
function App() { function App() {
@@ -22,6 +23,7 @@ function App() {
const [isDefeat, setIsDefeat] = useState(false) const [isDefeat, setIsDefeat] = useState(false)
const [displayApp, setDisplayApp] = useState(false) const [displayApp, setDisplayApp] = useState(false)
const [displayCategories, setDisplayCategories] = useState(false)
React.useEffect(() => { React.useEffect(() => {
@@ -60,11 +62,14 @@ function App() {
}, 3000) }, 3000)
} }
return ( return (
<> <>
<Header language={language}/> <Header
language={language}
displayCategories={displayCategories}
setDisplayCategories={setDisplayCategories}
/>
<div className="app"> <div className="app">
@@ -86,6 +91,12 @@ function App() {
{!displayApp ? <Loading /> : null } {!displayApp ? <Loading /> : null }
{displayCategories ?
<Categories hidden={false}/>
:
<Categories hidden={true}/>
}
<PuzzleWord <PuzzleWord
language={language} language={language}

35
src/components/Categories/Categories.jsx Normal file
View File

@@ -0,0 +1,35 @@
import React from "react"
import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
const Categories = ({hidden}) => {
const [categories, setCategories] = React.useState([])
React.useEffect (() => {
Bring_All_Categories(setCategories)
console.log(categories)
}, [])
return (
<div
className={ hidden ? 'categories' : 'categories show'}
>
{
categories.length > 0 ?
categories.map((categorie) => (
<button key={categorie}> { categorie } </button>
))
: null
}
</div>
)
}
export default Categories

27
src/components/Categories/Firebase Querys/Bring All Categories.js Normal file
View File

@@ -0,0 +1,27 @@
import { firestore } from "../../../Firebase/Firebase_Config"
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
const Bring_All_Categories = async (setCategories) => {
const capitalize = (str, lower = false) =>
(lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase()); /* CREDITS: https://stackoverflow.com/a/7592235*/
try {
const db = getFirestore(firestore)
const data = await collection(db, 'categories')
const result = await getDocs(data)
let categories = await result.docs.map(doc => doc.id)
categories = categories.map(word => capitalize(word, true))
console.log(categories)
setCategories(await categories)
} catch (error) {
console.log(error)
}
}
export default Bring_All_Categories

12
src/components/Header.jsx
View File

@@ -1,19 +1,19 @@
import React, {useState} from 'react' import React, {useState} from 'react'
const Header = (props) => { const Header = ({language, displayCategories, setDisplayCategories}) => {
const [title, setTitle] = useState('') const [title, setTitle] = useState('')
const [categoryText, setCategoryText] = useState('') const [categoryText, setCategoryText] = useState('')
React.useEffect( () => { React.useEffect( () => {
if (props.language === 'english') { if (language === 'english') {
setTitle('Hangman game') setTitle('Hangman game')
setCategoryText('Select category') setCategoryText('Select category')
} }
if (props.language === 'spanish') { if (language === 'spanish') {
setTitle('Ahorcado') setTitle('Ahorcado')
setCategoryText('Seleccionar categoría') setCategoryText('Seleccionar categoría')
@@ -23,7 +23,11 @@ const Header = (props) => {
return ( return (
<header> <header>
<h1>{title}</h1> <h1>{title}</h1>
<h2>{categoryText}</h2> <h2
onClick={() => setDisplayCategories(!displayCategories)}
>
{categoryText}
</h2>
</header> </header>
) )
} }