From ff57d0a0fe54d14716f043c794942d02579b0faa Mon Sep 17 00:00:00 2001
From: Jeroham Miranda <verdizone@gmail.com>
Date: Thu, 22 Apr 2021 16:13:43 -0500
Subject: [PATCH] Se le agregaron las funciones y la logica

---
 blackjackApp/assets/js/juego.js | 139 +++++++++++++++++++++++---------
 blackjackApp/index.html         |  27 ++-----
 2 files changed, 106 insertions(+), 60 deletions(-)

diff --git a/blackjackApp/assets/js/juego.js b/blackjackApp/assets/js/juego.js
index 6911981..c58839e 100644
--- a/blackjackApp/assets/js/juego.js
+++ b/blackjackApp/assets/js/juego.js
@@ -1,49 +1,55 @@
+let deck = [];
+const tipos = ["C", "D", "H", "S"];
+const especiales = ["A", "J", "Q", "K"];
+let puntosJugador = 0;
+let puntosComputadora = 0;
 
+//Referencias del HTML
+const btnDetener = document.querySelector("#btnDetener");
+const btnPedir = document.querySelector("#btnPedir");
 
-let deck = [];
-const tipos = ['C', 'D', 'H', 'S'];
-const especiales = ['A', 'J', 'Q', 'K'];
+const cartaComputadora = document.querySelector("#computadora-cartas");
+const cartaJugador = document.querySelector("#jugador-cartas");
+
+const puntosHTML = document.querySelectorAll("small");
+
+// console.log(cartaJugador);
 
 //función que crea un nuevo deck
 const crearDeck = () => {
-
-    for (let i = 2 ; i <= 10 ; i++){
-        for (let tipo of tipos){
-            deck.push (i + tipo);
-            
-        }
+  for (let i = 2; i <= 10; i++) {
+    for (let tipo of tipos) {
+      deck.push(i + tipo);
     }
+  }
 
-    for (let tipo of tipos){
-        for (let esp of especiales){
-            deck.push(esp + tipo);
-        }
+  for (let tipo of tipos) {
+    for (let esp of especiales) {
+      deck.push(esp + tipo);
     }
-        
-    deck = _.shuffle(deck);
-    console.log(deck);
-    return deck;
-}
+  }
 
+  deck = _.shuffle(deck);
+  //   console.log(deck);
+  return deck;
+};
 
 //Mandar llamar al deck
 crearDeck();
 
-
 //Esta función me permite pedir una carta
 
 const pedirCarta = () => {
+  if (deck.length <= 0) {
+    throw " No hay más cartas el el deck.";
+  }
 
-    if(deck.length <= 0){
-        throw ' No hay más cartas el el deck.';
-    }
-    
-    const carta = deck.shift();
+  const carta = deck.shift();
 
-    console.log(deck);
-    console.log(carta);
-    return carta;
-}
+  //   console.log(deck);
+  //   console.log(carta);
+  return carta;
+};
 
 //pedirCarta();
 
@@ -51,14 +57,69 @@ const pedirCarta = () => {
 //     pedirCarta();
 // }
 
-
-const valorCarta = ( carta ) =>{
-
-    const valor = carta.substring( 0, carta.length - 1 );
-    return(isNaN (valor))?
-        (valor ==='A')? 11 : 10
-        :(valor * 1 );
-   
-}
-const valor = valorCarta( pedirCarta() );
-console.log({valor});
\ No newline at end of file
+const valorCarta = (carta) => {
+  const valor = carta.substring(0, carta.length - 1);
+  return isNaN(valor) ? (valor === "A" ? 11 : 10) : valor * 1;
+};
+
+// Turno de la computadora
+
+const turnoComputadora = (puntosMinimos) => {
+  do {
+    const carta = pedirCarta();
+    puntosComputadora = puntosComputadora + valorCarta(carta);
+    puntosHTML[1].innerText = puntosComputadora;
+
+    const imgCarta = document.createElement("img");
+    imgCarta.src = `assets/cartas/${carta}.png`;
+    imgCarta.alt = `${carta}`;
+    imgCarta.className = "carta";
+    cartaComputadora.append(imgCarta);
+
+    if (puntosComputadora > 21) {
+      console.warn("Ganaste.");
+      btnPedir.disabled = true;
+      btnDetener.disabled = true;
+    } else if (puntosComputadora === 21) {
+      console.log("La casa gana");
+      btnPedir.disabled = true;
+      btnDetener.disabled = true;
+    }
+    if (puntosMinimos > 21) {
+      break;
+    }
+  } while (puntosComputadora < puntosMinimos && puntosMinimos <= 21);
+};
+
+btnDetener.addEventListener("click", () => {
+  btnPedir.disabled = true;
+  btnDetener.disabled = true;
+  turnoComputadora(puntosJugador);
+});
+
+//Eventos Jugador
+btnPedir.addEventListener("click", () => {
+  const carta = pedirCarta();
+
+  puntosJugador = puntosJugador + valorCarta(carta);
+
+  puntosHTML[0].innerText = puntosJugador;
+
+  const imgCarta = document.createElement("img");
+  imgCarta.src = `assets/cartas/${carta}.png`;
+  imgCarta.alt = `${carta}`;
+  imgCarta.className = "carta";
+  cartaJugador.append(imgCarta);
+
+  if (puntosJugador > 21) {
+    console.warn("Lo siento mucho, perdiste.");
+    btnPedir.disabled = true;
+    btnDetener.disabled = true;
+    turnoComputadora(puntosJugador);
+  } else if (puntosJugador === 21) {
+    console.log("Ganaste");
+    btnPedir.disabled = true;
+    btnDetener.disabled = true;
+    turnoComputadora(puntosJugador);
+  }
+});
diff --git a/blackjackApp/index.html b/blackjackApp/index.html
index d07a196..e57e6a3 100644
--- a/blackjackApp/index.html
+++ b/blackjackApp/index.html
@@ -19,14 +19,14 @@
         <header class="titulo">
           <h1 class="display-5">Blackjack</h1>
           <div class="row mt-0 ">
-            <div class="col text-center">
-              <button class="btn btn-danger rounded-2">
+            <div id="divBotones" class="col text-center">
+              <button id="btnNuevo" class="btn btn-danger rounded-2">
                 Nuevo Juego
               </button>
-              <button class="btn btn-light rounded-2">
+              <button id="btnPedir" class="btn btn-light rounded-2">
                 Pedir Carta
               </button>
-              <button class="btn btn-light rounded-2">
+              <button id="btnDetener" class="btn btn-light rounded-2">
                 Detener Juego
               </button>
             </div>
@@ -38,15 +38,7 @@ <h1 class="display-5">Blackjack</h1>
           <div class="col">
             <h2>Jugador 1 - <small>0</small></h2>
             <div id="jugador-cartas">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-                <img class="carta" src="assets/cartas/10C.png" alt="3C">
-
-
+                <!-- <img class="carta" src="assets/cartas/10C.png" alt="3C"> -->
             </div>
           </div>
         </div>
@@ -56,14 +48,7 @@ <h2>Jugador 1 - <small>0</small></h2>
           <div class="col">
             <h2>Contrincante - <small>0</small></h2>
             <div id="computadora-cartas">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-              <img class="carta" src="assets/cartas/10C.png" alt="3C">
-
+              <!-- <img class="carta" src="assets/cartas/10C.png" alt="3C"> -->
             </div>
           </div>
         </div>