diff --git a/README.md b/README.md
index d43759a5..4f6dc615 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# robotron-2000
\ No newline at end of file
+# Fuguetão-3000
diff --git a/css/style.css b/css/style.css
index 8880583c..f8c37a4b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,233 +1,231 @@
-:root {
- --main-cinza: #CCCCCC;
- --main-branco: #FFFFFF;
- --main-preto: #000000;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- background: url(../img/fundo.jpg);
- background-position: center center;
- background-size: cover cover;
- padding: 0;
- margin: 0;
- font-weight: 300;
-}
-
-body, input {
- font-family: 'Teko', sans-serif;
-}
-
-main {
- width: 80vw;
- height: 80vh;
- margin: 10vh 8vw 10vh 12vw;
- display: flex;
- gap: 1vw;
-}
-
-.robotron {
- background: url(../img/estrutura.png) no-repeat;
- background-position: center center;
- margin: 0;
- flex-basis: 40%;
- position: relative;
-}
-
-.robo {
- height: 110%;
- z-index: 1;
- position: absolute;
- left: -20%;
- top: -5%;
-}
-
-.titulo {
- transform: rotate(180deg);
- font-weight: 500;
- font-size: 130px;
- position: absolute;
- bottom: 7rem;
- left: -3rem;
- line-height: 0.8;
- writing-mode: vertical-rl;
- text-orientation: mixed;
- color: rgba(255,255,255,0.8)
-}
-
-.box {
- background: rgba(0,0,0,0.6);
- clip-path: polygon(calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px, 30px 0);
- border-left: 5px solid var(--main-cinza);
- height: 80%;
-}
-
-/****************************** Equipamentos *****/
-
-.equipamentos {
- flex-basis: 32%;
-}
-
-.montador {
- height: 100%;;
-}
-
-.montador-conteudo {
- padding: 2em 10%;
-}
-
-.peca {
- padding: 1em 0;
-}
-
-.peca-titulo {
- color: var(--main-branco);
- text-transform: uppercase;
- font-size: 2.5em;
-}
-
-.controle {
- background: var(--main-preto);
- border-radius: 25px;
- float: right;
- display: inline-flex;
- padding: 5px;
- align-items: center;
- align-self: flex-end;
-}
-
-.controle-contador {
- width: 40px;
- height: 35px;
- background: none;
- border: 0;
- margin: 0 1rem;
- color: var(--main-branco);
- text-align: center;
- font-size: 2.5em;
- display: inline-flex;
- align-items: center;
- padding-top: 8px;
-}
-
-.controle-ajuste {
- display: inline-block;
- width: 40px;
- height: 40px;
- line-height: 44px;
- border-radius: 50%;
- color: var(--main-cinza);
- font-size: 4em;
- background: var(--main-preto);
- text-align: center;
- border: 3px solid var(--main-cinza);
- cursor: pointer;
-}
-
-.linha {
- border-color: var(--main-cinza);
-}
-
-.producao {
- margin-top: 1em;
- font-size: 2em;
- text-transform: uppercase;
- padding: 0.2em 1em;
- float: right;
- border: 3px solid var(--main-branco);
- background: var(--main-branco);
- clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
- cursor: pointer;
-}
-
-.producao:hover {
- background: var(--main-preto);
- color: var(--main-branco)
-}
-
-
-
-/****************************** Estatísticas *****/
-.estatisticas {
- flex-basis: 23%;
- padding: 2em 2em 0;
-}
-
-.estatistica {
- color: var(--main-branco);
- display: flex;
- align-items: flex-start;
- height: 25%;
-}
-
-.estatistica-titulo {
- font-size: 1.5em;
- border-bottom: 1px solid var(--main-cinza);
- flex-basis: 40%;
- text-transform: uppercase;
- order: 1
-}
-
-.estatistica-valor {
- flex-basis: 60%;
- position: relative;
- margin: 10px 0 0;
- order: 2;
- margin: -10px 0 0;
-}
-
-.estatistica-valor::after {
- content: "";
- display: block;
- padding-bottom: 100%;
- border: 1px solid var(--main-cinza);
- border-radius: 50%;
-}
-
-.estatistica-numero {
- position: absolute;
- top: 50%;
- transform: translateY(-46%);
- width: 100%;
- line-height: 100%;
- text-align: center;
- font-size: 3em;
- margin: 0;
-}
-
-.estatistica:nth-child(2n) .estatistica-titulo {
- order: 2;
- text-align: right;
-}
-
-.estatistica:nth-child(2n) .estatistica-valor {
- order: 1;
- flex-basis: 35%;
- margin: 10px 0 0;
-}
-
-@media screen and (max-width: 1600px) {
- body {
- font-size: 14px;
- }
- main {
- width: 90vw;
- height: 80vh;
- margin: 5vh auto;
- }
-}
-
-@media screen and (max-width: 1200px) {
- body {
- font-size: 13px;
- }
-
- main {
- width: 96vw;
- height: 80vh;
- margin: 10vh auto;
- }
+:root {
+ --main-cinza: #CCCCCC;
+ --main-branco: #FFFFFF;
+ --main-preto: #000000;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background: url(../img/fundo1.jpg) no-repeat;
+ background-size: 100%;
+ padding: 0;
+ margin: 0;
+ font-weight: 300;
+}
+
+body, input {
+ font-family: 'Teko', sans-serif;
+}
+
+main {
+ width: 80vw;
+ height: 80vh;
+ margin: 10vh 8vw 10vh 12vw;
+ display: flex;
+ gap: 1vw;
+}
+
+.robotron {
+ background: url(../img/estrutura.png) no-repeat;
+ background-position: center center;
+ margin: 0;
+ flex-basis: 40%;
+ position: relative;
+}
+
+.robo {
+ height: 110%;
+ z-index: 1;
+ position: absolute;
+ left: -20%;
+ top: -5%;
+}
+
+.titulo {
+ transform: rotate(180deg);
+ font-weight: 500;
+ font-size: 70px;
+ position: absolute;
+ bottom: 7rem;
+ line-height: 0.8;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ color: rgba(255,255,255,0.8)
+}
+
+.box {
+ background: rgba(0,0,0,0.6);
+ clip-path: polygon(calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px, 30px 0);
+ border-left: 5px solid var(--main-cinza);
+ height: 80%;
+}
+
+/****************************** Equipamentos *****/
+
+.equipamentos {
+ flex-basis: 32%;
+}
+
+.montador {
+ height: 100%;;
+}
+
+.montador-conteudo {
+ padding: 2em 10%;
+}
+
+.peca {
+ padding: 1em 0;
+}
+
+.peca-titulo {
+ color: var(--main-branco);
+ text-transform: uppercase;
+ font-size: 2.5em;
+}
+
+.controle {
+ background: var(--main-preto);
+ border-radius: 25px;
+ float: right;
+ display: inline-flex;
+ padding: 5px;
+ align-items: center;
+ align-self: flex-end;
+}
+
+.controle-contador {
+ width: 40px;
+ height: 35px;
+ background: none;
+ border: 0;
+ margin: 0 1rem;
+ color: var(--main-branco);
+ text-align: center;
+ font-size: 2.5em;
+ display: inline-flex;
+ align-items: center;
+ padding-top: 8px;
+}
+
+.controle-ajuste {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ line-height: 44px;
+ border-radius: 50%;
+ color: var(--main-cinza);
+ font-size: 4em;
+ background: var(--main-preto);
+ text-align: center;
+ border: 3px solid var(--main-cinza);
+ cursor: pointer;
+}
+
+.linha {
+ border-color: var(--main-cinza);
+}
+
+.producao {
+ margin-top: 1em;
+ font-size: 2em;
+ text-transform: uppercase;
+ padding: 0.2em 1em;
+ float: right;
+ border: 3px solid var(--main-branco);
+ background: var(--main-branco);
+ clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
+ cursor: pointer;
+}
+
+.producao:hover {
+ background: var(--main-preto);
+ color: var(--main-branco)
+}
+
+
+
+/****************************** Estatísticas *****/
+.estatisticas {
+ flex-basis: 23%;
+ padding: 2em 2em 0;
+}
+
+.estatistica {
+ color: var(--main-branco);
+ display: flex;
+ align-items: flex-start;
+ height: 25%;
+}
+
+.estatistica-titulo {
+ font-size: 1.5em;
+ border-bottom: 1px solid var(--main-cinza);
+ flex-basis: 40%;
+ text-transform: uppercase;
+ order: 1
+}
+
+.estatistica-valor {
+ flex-basis: 60%;
+ position: relative;
+ margin: 10px 0 0;
+ order: 2;
+ margin: -10px 0 0;
+}
+
+.estatistica-valor::after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+ border: 1px solid var(--main-cinza);
+ border-radius: 50%;
+}
+
+.estatistica-numero {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-46%);
+ width: 100%;
+ line-height: 100%;
+ text-align: center;
+ font-size: 3em;
+ margin: 0;
+}
+
+.estatistica:nth-child(2n) .estatistica-titulo {
+ order: 2;
+ text-align: right;
+}
+
+.estatistica:nth-child(2n) .estatistica-valor {
+ order: 1;
+ flex-basis: 35%;
+ margin: 10px 0 0;
+}
+
+@media screen and (max-width: 1600px) {
+ body {
+ font-size: 14px;
+ }
+ main {
+ width: 90vw;
+ height: 80vh;
+ margin: 5vh auto;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ body {
+ font-size: 13px;
+ }
+
+ main {
+ width: 96vw;
+ height: 80vh;
+ margin: 10vh auto;
+ }
}
\ No newline at end of file
diff --git a/img/fundo1.jpg b/img/fundo1.jpg
new file mode 100644
index 00000000..bad84db0
Binary files /dev/null and b/img/fundo1.jpg differ
diff --git a/img/robotron.png b/img/robotron.png
index 852f0ebf..4644bda1 100644
Binary files a/img/robotron.png and b/img/robotron.png differ
diff --git a/index.html b/index.html
index 0deb0928..7141f379 100644
--- a/index.html
+++ b/index.html
@@ -1,102 +1,104 @@
-
-
-
-
-
-
-
- Robotron 2000
-
-
-
-
-
-
-
-
-
- 
- ROBOTRON
2000
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Fuguetão 3000
+
+
+
+
+ >
+
+
+
+
+
+ FUGUETÃO
3000
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 00000000..5eed0419
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,59 @@
+const controle = document.querySelectorAll("[data-controle]");
+const estatistica = document.querySelectorAll("[data-estatistica]");
+const pecas = {
+ "bracos": {
+ "forca": 29,
+ "poder": 35,
+ "energia": -21,
+ "velocidade": -5
+ },
+
+ "blindagem": {
+ "forca": 41,
+ "poder": 20,
+ "energia": 0,
+ "velocidade": -20
+ },
+ "nucleos":{
+ "forca": 0,
+ "poder": 7,
+ "energia": 48,
+ "velocidade": -24
+ },
+ "pernas":{
+ "forca": 27,
+ "poder": 21,
+ "energia": -32,
+ "velocidade": 42
+ },
+ "foguetes":{
+ "forca": 0,
+ "poder": 28,
+ "energia": 0,
+ "velocidade": -2
+ }
+}
+
+controle.forEach((elemento) => {
+ elemento.addEventListener("click", (evento => {
+ manipulaDados(evento.target.dataset.controle, evento.target.parentNode)
+ atualizaEstatistica(evento.target.dataset.peca);
+ }))
+})
+
+function manipulaDados(operacao, controle) {
+ const peca = controle.querySelector("[data-contador]")
+
+ if(operacao === "+"){
+ peca.value = parseInt(peca.value) + 1;
+ }
+ else {
+ peca.value = parseInt(peca.value) - 1;
+ }
+}
+
+function atualizaEstatistica(peca) {
+ estatistica.forEach((elemento) => {
+ elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica];
+ })
+}
\ No newline at end of file