From a8cc979dd2c0bf61010c4ccaa5be9ba55398f121 Mon Sep 17 00:00:00 2001
From: Joel <jflor999@gmail.com>
Date: Fri, 29 Oct 2021 07:49:21 -0300
Subject: [PATCH] tateti

---
 tateti.html | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 tateti.html
diff --git a/tateti.html b/tateti.html
new file mode 100644
index 0000000..34cfece
--- /dev/null
+++ b/tateti.html
@@ -0,0 +1,137 @@
+<!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">
+    <title>Ta te ti</title>
+    <style>
+        table{
+            width: 300px;
+            height: 300px;
+            margin-top: 10%;
+            margin-left: 40%;
+            table-layout: fixed;
+            text-align: center;
+        }
+        table, th, td {
+  border: 1px solid black;
+}
+        tr.fila{
+            margin:0;
+	        padding:0;
+            width: 30px;
+            height: 30px;
+        }
+
+        .gano{
+            background-color: aqua;
+        }
+    </style>
+</head>
+<body>
+    Turno del jugador <p id="jugador">X</p>
+    <button onclick="location.reload()">Reset</button>
+    <table id="tablero">
+    </table>
+
+    <script>
+        let tablero = document.querySelector("#tablero");
+        let jugador = document.querySelector("#jugador");
+        let primero = true;
+        var tableroValue = [[],[],[]];
+        var contador = 0;
+        function creacionTabla(){
+            for (let fila = 0; fila < 3; fila++) {
+                let tr = document.createElement("tr")
+                tr.setAttribute('data-fila',fila)
+                tr.classList.add('fila')
+                for (let columna = 0; columna < 3; columna++) {
+                    let td = document.createElement("td") 
+                    td.setAttribute('data-columna',columna)
+                    tr.append(td)
+                }
+                tablero.append(tr)
+            }
+        }
+        function ganar(){
+            if(contador<5)return false;
+            let match = 0;
+            //control por columna
+            for (let fila = 0; fila < 3; fila++) {
+                let anterior = tableroValue[fila][0]
+                match = 0;
+                for (let columna = 1; columna < 3; columna++) {
+                    let actual = tableroValue[fila][columna]
+                    if(actual==anterior && (actual == "X" || actual == "O")) {
+                        match++;
+                    }
+                    anterior = actual
+                }
+                if(match==2) {
+                    
+                    tablero.children[fila].classList.add('gano')
+                    return true
+                }   
+            }
+            //control por fila
+            for (let columna = 0; columna < 3; columna++) {
+                let anterior = tableroValue[0][columna]
+                match = 0;
+                for (let fila = 1; fila < 3; fila++) {
+                    let actual = tableroValue[fila][columna]
+                    if(actual==anterior && (actual == "X" || actual == "O")) {
+                        match++;
+                    }
+                    anterior = actual
+                }
+                if(match==2) {
+                    document.querySelectorAll(`td[data-columna="${columna}"]`).forEach(
+                        td => td.classList.add("gano")
+                    );
+                    return true
+                }   
+            }
+       
+            //diagonales
+            if((tableroValue[0][0] == "O"||tableroValue[0][0] == "X")&&tableroValue[0][0]==tableroValue[1][1]&&tableroValue[1][1]==tableroValue[2][2]) {
+                for (let index = 0; index < 3; index++) {
+                    document.querySelector(`tr[data-fila="${index}"] > td[data-columna="${index}"]`).classList.add("gano")
+                    
+                }
+                
+                return true;
+            }
+            if((tableroValue[0][2] == "O"||tableroValue[0][2] == "X")&&tableroValue[0][2]==tableroValue[1][1]&&tableroValue[1][1]==tableroValue[2][0]) {
+                for (let index = 0; index < 3; index++) {
+                    document.querySelector(`tr[data-fila="${index}"] > td[data-columna="${2-index}"]`).classList.add("gano")
+                    
+                }
+                return true;
+            }
+            return false;
+        }
+
+        function entrada(evt){
+            if(evt.target.innerHTML.length!=0) return ;
+            const fila = evt.target.parentElement.getAttribute('data-fila');
+            const col = evt.target.getAttribute('data-columna');
+            let valor = primero ? "X" : "O";
+            evt.target.innerHTML = valor;
+            primero = !primero; 
+            
+            if(tableroValue[fila]==null) tableroValue[fila]=[]
+            tableroValue[fila][col] = valor;
+            contador++;
+            if(ganar()) console.log("ganooo");
+            jugador.innerHTML = primero ? "X" : "O";;
+        }
+        creacionTabla()
+        document.querySelectorAll('td').forEach(
+                td =>{
+                    td.addEventListener('click',entrada)
+                }
+        )
+    </script>
+</body>
+</html>
\ No newline at end of file
--
libgit2 0.26.0

