Aula 7

ImGabreuw · Mar 30, 2021 · ec5885b · ec5885b
1 parent a595311
commit ec5885b
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 0 deletions.
diff --git a/aula-7/index.html b/aula-7/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="style.css">
+
+    <title>Imersão Dev - Aula 07</title>
+</head>
+
+<body>
+    <div class="container">
+        <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-super-trunfo.png" class="page-logo" alt="">
+        <h1 class="page-title">Super Trunfo</h1>
+
+        <button onclick="sortearCarta()" id="btnSortear">Sortear carta</button>
+
+        <form id="form">
+            <h2>Escolha o seu atributo</h2>
+            <div class="opcoes" id="opcoes"></div>
+            <button type="button" id="btnJogar" onclick="jogar()" disabled="false">Jogar</button>
+        </form>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/aula-7/script.js b/aula-7/script.js
@@ -0,0 +1,82 @@
+var cartaPaulo = {
+    nome: "Seiya de Pegaso",
+    atributos: {
+        ataque: 80,
+        defesa: 60,
+        magia: 90
+    }
+}
+
+var cartaRafa = {
+    nome: "Bulbasauro",
+    atributos: {
+        ataque: 70,
+        defesa: 65,
+        magia: 85
+    }
+
+}
+
+var cartaGui = {
+    nome: "Lorde Darth Vader",
+    atributos: {
+        ataque: 88,
+        defesa: 62,
+        magia: 90
+    }
+}
+
+var cartaMaquina
+var cartaJogador
+var cartas = [cartaRafa, cartaGui, cartaPaulo]
+
+function sortearCarta() {
+    var numeroCartaMaquinas = parseInt(Math.random() * 3)
+    cartaMaquina = cartas[numeroCartaMaquinas]
+
+    var numeroCartaJogador = parseInt(Math.random() * 3)
+
+    while (numeroCartaJogador == numeroCartaMaquinas) {
+        numeroCartaJogador = parseInt(Math.random() * 3)
+    }
+
+    cartaJogador = cartas[numeroCartaJogador]
+
+    document.getElementById('btnSortear').disabled = true
+    document.getElementById('btnJogar').disabled = false
+
+    exibirOpcoes()
+}
+
+function exibirOpcoes() {
+    var opcoes = document.getElementById('opcoes')
+    var opcoesTexto = ""
+
+    for (var atributo in cartaJogador.atributos) {
+        opcoesTexto += "<input type='radio' name='atributo' value='" + atributo + "'>" + atributo
+    }
+
+    opcoes.innerHTML = opcoesTexto
+}
+
+function obtemAtributoSelecionado() {
+    var radioAtributo = document.getElementsByName('atributo')
+
+    for (var i = 0; i < radioAtributo.length; i++) {
+        if (radioAtributo[i].checked) {
+            return radioAtributo[i].value
+        }
+    }
+}
+
+function jogar() {
+    var atributoSelecionado = obtemAtributoSelecionado()
+
+    if (cartaJogador.atributos[atributoSelecionado] > cartaMaquina.atributo[atributoSelecionado]) {
+        alert("Você venceu,")
+    } else if (cartaJogador.atributos[atributoSelecionado] < cartaJogador.atributos[atributoSelecionado]) {
+        alert("Você perdeu.")
+    } else {
+        alert("Empate.")
+    }
+}
diff --git a/aula-7/style.css b/aula-7/style.css
@@ -0,0 +1,71 @@
+body {
+    font-family: 'Roboto Mono', monospace;
+    min-height: 854px;
+    background-image: url('https://www.alura.com.br/assets/img/imersoes/dev-2021/dia-07-super-trunfo-bg.png');
+    background-color: #000000;
+    background-size: cover;
+    background-position: center top;
+    background-repeat: no-repeat;
+    padding-bottom: 20vh;
+}
+
+.container {
+    text-align: center;
+    padding: 20px;
+}
+
+.page-title {
+    color: #ffffff;
+    margin: 5px 0;
+}
+
+button {
+    padding: .8rem 1.5rem;
+    margin: 1rem 0;
+    border-radius: 5px;
+    border: none;
+    font-size: 1rem;
+}
+
+h2 {
+    color: white;
+}
+
+#carta-jogador {
+    width: 360px;
+    height: 500px;
+    overflow: auto;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-end;
+}
+
+#carta-jogador h3 {
+    text-align: center;
+}
+
+.carta-imagem {
+    border: 1px solid black;
+    height: 100px;
+    margin: 10px;
+}
+
+.carta-imagem img {
+    width: 100%;
+    height: 100%;
+}
+
+.carta-status {
+    height: 160px;
+    margin: 1.5rem;
+}
+
+.carta-status input {
+    margin: 20px 10px;
+}
+
+.opcoes {
+    color: white;
+}