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

Pannel control styles done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-22 17:19:10 -03:00
parent 28a85f63ec
commit 2e9a2cee45
25 changed files with 489 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -22,4 +22,5 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
/src/Firebase/Firebase_Config.js
/src/Firebase/Firebase_Config.js
/public/Hover.css/css

160
public/css/index.css
View File

@@ -478,4 +478,164 @@ header .redirect-button:hover {
margin: 0;
}
.control-panel {
height: 60vh;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 5vh 15vw;
}
.control-panel button {
width: 16vw;
max-width: 250px;
height: 16vw;
max-height: 250px;
margin: 0px 3vw;
font-size: 1.8vw;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
}
.control-panel button.add-words {
background-color: #77b3d6;
border: 1px solid #77a3bd;
transition: ease-in-out 0.4s;
}
.control-panel button.add-words {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.control-panel button.add-words:hover, .control-panel button.add-words:focus, .control-panel button.add-words:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.add-words:hover {
background-color: #9ec9e2;
transition: ease-in-out 0.4s;
}
.control-panel button.add-category {
background-color: #c469cc;
border: 1px solid #ad69b3;
transition: ease-in-out 0.4s;
}
.control-panel button.add-category {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.control-panel button.add-category:hover, .control-panel button.add-category:focus, .control-panel button.add-category:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.add-category:hover {
background-color: #d38fd9;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-category {
background-color: #f79143;
border: 1px solid #de8643;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-category {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.control-panel button.delete-category:hover, .control-panel button.delete-category:focus, .control-panel button.delete-category:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.delete-category:hover {
background-color: #f9ae74;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-word {
background-color: #df6767;
border: 1px solid #c66767;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-word {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.control-panel button.delete-word:hover, .control-panel button.delete-word:focus, .control-panel button.delete-word:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.delete-word:hover {
background-color: #e89191;
transition: ease-in-out 0.4s;
}
.control-panel button.edit-word {
background-color: #7dbb4e;
border: 1px solid #72a24e;
transition: ease-in-out 0.4s;
}
.control-panel button.edit-word {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.control-panel button.edit-word:hover, .control-panel button.edit-word:focus, .control-panel button.edit-word:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.edit-word:hover {
background-color: #98c973;
transition: ease-in-out 0.4s;
}
@media (max-width: 991.98px) {
.control-panel {
height: auto;
flex-direction: column;
justify-content: space-around;
align-items: initial;
flex-wrap: nowrap;
}
.control-panel button {
max-width: none;
max-height: none;
width: 66vw;
height: 20vh;
font-size: 3vw;
margin-bottom: 3vh;
}
}
/*# sourceMappingURL=index.css.map */

2
public/css/index.css.map
View File

@@ -1 +1 @@
{"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","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.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;;AAGJ;EACI;EACA;EAEA;EACA;EAIA,kBAFkB;EAGlB;EACA;EAEA;EACA;EAEA;EAEA;;AAEA;EACI;EAEA;;;AAMZ;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AAMhB;EAIQ;IACI;IACA;;;AClFZ;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;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;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;ACvBR;EAEI;;AAEA;EAEI;EAGA;EACA;;AAEA;EAGI;EACA,kBAHkB;EAKlB;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAMZ;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACI;EAEA;EACA;;AAMZ;EACI;;;AAIR;EAEI;IAEI;;;ACnFR;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA","file":"index.css"}
{"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","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/_control-panel.scss"],"names":[],"mappings":"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","file":"index.css"}

126
public/sass/_control-panel.scss Normal file
View File

@@ -0,0 +1,126 @@
.control-panel {
height: 60vh;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 5vh 15vw;
button {
width: 16vw;
max-width: 250px;
height: 16vw;
max-height: 250px;
margin: 0px 3vw;
font-size: 1.8vw;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
@mixin generateColors($background-color) {
background-color: $background-color;
border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
transition: ease-in-out 0.4s;
& {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
&:hover, &:focus, &:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
&:hover {
background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
transition: ease-in-out 0.4s;
}
}
&.add-words {
$background-color: #77b3d6;
@include generateColors($background-color);
}
&.add-category {
$background-color: #c469cc;
@include generateColors($background-color);
}
&.delete-category {
$background-color: #f79143;
@include generateColors($background-color);
}
&.delete-word {
$background-color: #df6767;
@include generateColors($background-color);
}
&.edit-word {
$background-color: #7dbb4e;
@include generateColors($background-color)
}
}
}
@media (max-width: 991.98px) {
.control-panel {
height: auto;
flex-direction: column;
justify-content: space-around;
align-items: initial;
flex-wrap: nowrap;
button {
max-width: none;
max-height: none;
width: 66vw;
height: 20vh;
font-size: 3vw;
margin-bottom: 3vh;
}
}
}
@media (max-width: 576px) {
}

3
public/sass/index.scss
View File

@@ -27,4 +27,5 @@ html, body {
@import 'letters-registered';
@import 'letter-input';
@import 'form';
@import 'message';
@import 'message';
@import 'control-panel';

14
src/App.js
View File

@@ -9,11 +9,11 @@ import {
Link
} from "react-router-dom";
import AppHeader from "./components/Game/components/AppHeader/AppHeader";
import AdminHeader from "./components/AdminIdentify/Header/AdminHeader";
import ControlPanel from "./components/AdminIdentify/Identify/Identify";
import Identify from "./components/AdminIdentify/Identify/Identify";
import AdminHeader from "./components/Admin/Header/AdminHeader";
import ControlPanel from "./components/Admin/Control Panel/ControlPanel";
import Identify from "./components/Admin/AdminIdentify/Identify/Identify";
import Game from "./components/Game/Game";
import AdminIdentify from "./components/AdminIdentify/AdminIdentify";
import AdminIdentify from "./components/Admin/AdminIdentify/AdminIdentify";
function App() {
return (
@@ -21,7 +21,11 @@ function App() {
<>
<Switch>
<Route path='/admin-place'>
<ControlPanel />
</Route>
<Route path='/identify'>

2
src/components/AdminIdentify/AdminIdentify.jsx → src/components/Admin/AdminIdentify/AdminIdentify.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import AdminHeader from './Header/AdminHeader'
import AdminHeader from '../Header/AdminHeader'
import Identify from './Identify/Identify'
const AdminIdentify = () => {

2
src/components/AdminIdentify/Identify/Form/Firebase Querys/BringAdminCode.js → src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/BringAdminCode.js
View File

@@ -1,5 +1,5 @@
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { firestore } from '../../../../../Firebase/Firebase_Config';
import { firestore } from '../../../../../../Firebase/Firebase_Config';
const BringAdminCode = async () => {

2
src/components/AdminIdentify/Identify/Form/Firebase Querys/RegisterNewUser.js → src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/RegisterNewUser.js
View File

@@ -1,4 +1,4 @@
import { firestore } from '../../../../../Firebase/Firebase_Config'
import { firestore } from '../../../../../../Firebase/Firebase_Config'
import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth'
const RegisterNewUser = async (email, password, setMessage) => {

2
src/components/AdminIdentify/Identify/Form/Firebase Querys/Sign In.js → src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/Sign In.js
View File

@@ -1,4 +1,4 @@
import { firestore } from "../../../../../Firebase/Firebase_Config"
import { firestore } from "../../../../../../Firebase/Firebase_Config"
import {getAuth, signInWithEmailAndPassword} from 'firebase/auth'
const SignIn = async (data, setMessage) => {

2
src/components/AdminIdentify/Identify/Form/Form.jsx → src/components/Admin/AdminIdentify/Identify/Form/Form.jsx
View File

@@ -1,5 +1,5 @@
import React, {useState} from 'react'
import Loading from '../../../Game/components/Loading/Loading'
import Loading from '../../../../Game/components/Loading/Loading'
import MessageContainer from './MessageContainer'
import FormActions from './Scripts/FormActions'

0
src/components/AdminIdentify/Identify/Form/MessageContainer.jsx → src/components/Admin/AdminIdentify/Identify/Form/MessageContainer.jsx
View File

0
src/components/AdminIdentify/Identify/Form/Scripts/FormActions.js → src/components/Admin/AdminIdentify/Identify/Form/Scripts/FormActions.js
View File

0
src/components/AdminIdentify/Identify/Form/Scripts/ValidateRegister.js → src/components/Admin/AdminIdentify/Identify/Form/Scripts/ValidateRegister.js
View File

0
src/components/AdminIdentify/Identify/Identify.jsx → src/components/Admin/AdminIdentify/Identify/Identify.jsx
View File

41
src/components/Admin/Control Panel/Actions/Actions.jsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react'
import AddCategory from './AddCategory/AddCategory'
import AddWord from './AddWord/AddWord'
import DeleteCategory from './DeleteCategory/DeleteCategory';
import DeleteWord from './DeleteWord/DeleteWord';
import EditWord from './EditWord/EditWord';
const Actions = ({actualAction}) => {
return (
<>
{
actualAction === 'Add Word(s)' ?
<AddWord action={actualAction} />
: null
}
{
actualAction === 'Add Category' ?
<AddCategory action={actualAction} />
: null
}
{
actualAction === 'Delete Category' ?
<DeleteCategory action={actualAction} />
: null
}
{
actualAction === 'Delete Word' ?
<DeleteWord action={actualAction} />
: null
}
{
actualAction === 'Edit Word' ?
<EditWord action={actualAction} />
: null
}
</>
)
}
export default Actions

14
src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
const AddCategory = () => {
console.log('category');
return (
<div>
</div>
)
}
export default AddCategory

14
src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
const AddWord = () => {
console.log('word');
return (
<div>
</div>
)
}
export default AddWord

11
src/components/Admin/Control Panel/Actions/DeleteCategory/DeleteCategory.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const DeleteCategory = () => {
return (
<div>
</div>
)
}
export default DeleteCategory

11
src/components/Admin/Control Panel/Actions/DeleteWord/DeleteWord.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const DeleteWord = () => {
return (
<div>
</div>
)
}
export default DeleteWord

11
src/components/Admin/Control Panel/Actions/EditWord/EditWord.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const EditWord = () => {
return (
<div>
</div>
)
}
export default EditWord

13
src/components/Admin/Control Panel/Actions/Scripts/DefineClassName.js Normal file
View File

@@ -0,0 +1,13 @@
const DefineClassName = (action) => {
let className = action.split(' ')
className = className.map(word => word.toLowerCase())
className = className.join('-')
className = className.replaceAll('(', '')
className = className.replaceAll(')', '')
return className
}
export default DefineClassName

18
src/components/Admin/Control Panel/AdminFunctionButton.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import DefineClassName from './Actions/Scripts/DefineClassName'
const AdminFunctionButton = ({action, setActualAction}) => {
const classButton = DefineClassName(action)
return (
<button
className={classButton}
onClick={() => setActualAction(action)}
>
{action}
</button>
)
}
export default AdminFunctionButton

51
src/components/Admin/Control Panel/ControlPanel.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React from "react";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import AdminFunctionButton from "./AdminFunctionButton";
import {withRouter} from 'react-router'
import Actions from "./Actions/Actions";
import AdminHeader from "../Header/AdminHeader";
const ControlPanel = (props) => {
const [userLogged, setUserLogged] = React.useState(false)
const [actualAction, setActualAction] = React.useState('')
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
if (!user) {
props.history.push('/identify')
} else {
setUserLogged(true)
}
})
return (
<>
<AdminHeader />
<div className="control-panel">
{
userLogged ?
<>
<AdminFunctionButton action={'Add Word(s)'} setActualAction={setActualAction}/>
<AdminFunctionButton action={'Add Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Word'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Edit Word'} setActualAction={setActualAction}/>
</>
: null
}
{
actualAction ?
<Actions actualAction={actualAction}/>
: null
}
</div>
</>
)
}
export default withRouter(ControlPanel)

0
src/components/AdminIdentify/Header/AdminHeader.jsx → src/components/Admin/Header/AdminHeader.jsx
View File