Botão de zerar e paleta de cores

CA1RO · Dec 24, 2023 · a62c57a · a62c57a
1 parent 71db0e0
commit a62c57a
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Outfit:wght@300;400;600&family=Preahvihear&display=swap"
+      rel="stylesheet"
+    />
     <title>Jogo da Velha - MACHADÂMBAR</title>
   </head>
   <body>

diff --git 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 (
     <div className='App'>
       <Pontuacao pontos={pontos} xJogando={xJogando}/>
       <Tabuleiro tabuleiro={tabuleiro} onClick={fimdeJogo ? recomecarJogo : handleCelulaClick} />
-      <BotaoRecomeca recomecarJogo={recomecarJogo} />      
+      <BotaoRecomeca recomecarJogo={recomecarJogo} /> 
+      <ZerarPontuacao zerarJogo={zerarJogo}/>     
     </div>
   )
 

diff --git 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
@@ -1,13 +1,13 @@
 .celula {
-    background-color: #fff;
+    background-color:  rgba(204, 92, 41, 0.7);;
     border: none;
     border-radius: 10%;
     box-shadow: 0px 0px 8px #000000;
     width: 5rem;
     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
@@ -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;
 }
diff --git 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;
+}
diff --git 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 (
+        <button className="zerarJogo" onClick={zerarJogo}>Zerar placar</button>
+    )
+}
diff --git 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;