From a62c57acc127b5c4f2e9e0c4c9377b2e51ec8b10 Mon Sep 17 00:00:00 2001 From: RafaelWasconcelos Date: Sat, 23 Dec 2023 23:00:13 -0300 Subject: [PATCH] =?UTF-8?q?Bot=C3=A3o=20de=20zerar=20e=20paleta=20de=20cor?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 ++++++ src/App.jsx | 15 ++++++++++++++- src/components/BotaoRecomeca.css | 1 + src/components/Celula.css | 6 +++--- src/components/Pontuacao.css | 11 ++++++----- src/components/ZerarPontuacao.css | 11 +++++++++++ src/components/ZerarPontuacao.jsx | 9 +++++++++ src/index.css | 3 ++- 8 files changed, 52 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index b4d02cf..56cdaa0 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + Jogo da Velha - MACHADÂMBAR diff --git a/src/App.jsx b/src/App.jsx index 00ed5f7..e5202bb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,6 +5,7 @@ import './App.css' import {Tabuleiro} from "./components/Tabuleiro" import { Pontuacao } from "./components/Pontuacao"; import { BotaoRecomeca } from "./components/BotaoRecomeca"; +import { ZerarPontuacao } from "./components/ZerarPontuacao"; function App() { @@ -66,12 +67,24 @@ function App() { setFimdeJogo(false) setTabuleiro(Array(9).fill(null)) } + const zerarJogo = (updatedTabuleiro) => { + setFimdeJogo(false) + setTabuleiro(Array(9).fill(null)) + let {oPontos} = pontos; + oPontos = 0 + setPontos({...pontos, oPontos}) + let {xPontos} = pontos; + xPontos = 0 + setPontos({...pontos, xPontos}) + + } return (
- + +
) diff --git a/src/components/BotaoRecomeca.css b/src/components/BotaoRecomeca.css index dfc09a7..86031b2 100644 --- a/src/components/BotaoRecomeca.css +++ b/src/components/BotaoRecomeca.css @@ -4,6 +4,7 @@ background-color: #3d0505; color: white; font-size: 2rem; + font-family: 'Preahvihear', sans-serif; padding: 0.5rem 1rem; margin: 2rem auto; display: block; diff --git a/src/components/Celula.css b/src/components/Celula.css index c2d6d4a..09d9bc5 100644 --- a/src/components/Celula.css +++ b/src/components/Celula.css @@ -1,5 +1,5 @@ .celula { - background-color: #fff; + background-color: rgba(204, 92, 41, 0.7);; border: none; border-radius: 10%; box-shadow: 0px 0px 8px #000000; @@ -7,7 +7,7 @@ height: 5rem; text-align: center; font-size: 5em; - font-family: 'Courier New', Courier, monospace; + font-family: 'Preahvihear', sans-serif; font-weight: bold; line-height: 5rem; margin: 0.5rem; @@ -18,7 +18,7 @@ } .o { - color: rgb(44,135,255); + color: rgb(255, 196, 0); } .celula:hover { diff --git a/src/components/Pontuacao.css b/src/components/Pontuacao.css index 6466c6a..ee12a84 100644 --- a/src/components/Pontuacao.css +++ b/src/components/Pontuacao.css @@ -5,7 +5,8 @@ justify-content: space-evenly; width: 20rem; font-size: 1.5em; - background-color: #ffff; + font-family: 'Preahvihear', sans-serif; + background-color: rgba(63, 18, 18, 0.7);; margin: 3rem auto; box-shadow: 0px 0px 8px #888; border-radius: 0.5rem; @@ -20,16 +21,16 @@ .x-ponto { color: red; - border-bottom: 5px solid red; + border: 5px solid red; border-radius: 0.5rem 0 0 0.5rem; } .o-ponto { - color: blue; - border-bottom: 5px solid blue; + color: rgb(255, 196, 0); + border: 5px solid rgb(255, 196, 0); border-radius: 0 0.5rem 0.5rem 0; } .inactive { - border-bottom: 5px solid transparent; + border: 5px solid transparent; } \ No newline at end of file diff --git a/src/components/ZerarPontuacao.css b/src/components/ZerarPontuacao.css index e69de29..e0792fb 100644 --- a/src/components/ZerarPontuacao.css +++ b/src/components/ZerarPontuacao.css @@ -0,0 +1,11 @@ +.zerarJogo{ + border: none; + border-radius: 0.5rem; + background-color: #3d0505; + color: white; + font-size: 2rem; + font-family: 'Preahvihear', sans-serif; + padding: 0.5rem 1rem; + margin: 2rem auto; + display: block; +} \ No newline at end of file diff --git a/src/components/ZerarPontuacao.jsx b/src/components/ZerarPontuacao.jsx index e69de29..f50c36d 100644 --- a/src/components/ZerarPontuacao.jsx +++ b/src/components/ZerarPontuacao.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +import "./ZerarPontuacao.css" + +export const ZerarPontuacao = ({zerarJogo}) => { + return ( + + ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 82328a6..00a92fa 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ :root { - /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + + /* line-height: 1.5; font-weight: 400;