Saper prawie skończony, zostało tylko odkrycie wszystkich pól po przegranej/wygranej

Lekcja_04/index.html

@@ -79,16 +79,13 @@
         }
 
         .odkryte-pole {
-            background-color: transparent;
+            background-color: darkgray;
+            font-weight: bold;
         }
 
         #message {
             text-align: center;
         }
-
-        .debug-czerwony {
-            background-color: red;
-        }
     </style>
 </head>
 
@@ -132,43 +129,98 @@
         let m = 0
 
         let gra = true
+        let polozono_miny = false
         let odkryte_pola = 0
 
         // tablica z polami
         let plansza = [] // tablice obiektów (pól) { x: int, y: int, mina: true/false, sasiednie_miny: int }
         const kolorki = ["red", "green", "blue", "darkseagreen", "cornflowerblue", "beige", "orange", "navy"]
 
-        function flaga() {
+        function flaga(btn) {
-            console.log(this, this.dataset.x, this.dataset.y)
+            let x = btn.dataset.x
-
+            let y = btn.dataset.y
-            let x = this.dataset.x
-            let y = this.dataset.y
 
             if (!gra) { return }
             event.preventDefault()
 
-            console.log(`Oflagowano pole (${x}, ${y})`)
+            if (btn.classList.contains("nieodkryte-pole")) {
+                plansza[y][x].flaga = !plansza[y][x].flaga;
+                plansza[y][x].flaga ? btn.innerHTML = '&#128681;' : btn.innerHTML = '';
+            }
         }
 
-        function klik() {
+        function klik(btn) {
-            console.log(this, this.dataset.x, this.dataset.y)
+            let x = btn.dataset.x
+            let y = btn.dataset.y
 
-            let x = this.dataset.x
+            if (!polozono_miny) {
-            let y = this.dataset.y
+                losuj_miny(x, y)
+                polozono_miny = true
+            }
 
             if (!gra) { return }
-            console.log(`Kliknięto pole (${x}, ${y})`)
+            if (plansza[y][x].flaga) { return }
+            if (document.getElementById(`p${x}${y}`).classList.contains("odkryte-pole")) { return }
 
             if (plansza[y][x].mina) {
-                alert("xdddd No i kurna przegrałeś")
+                alert("Koniec gry, przegrana!")
+                document.getElementById(`p${x}${y}`).style.backgroundColor = "red";
                 gra = false
+            } else {
+                btn.classList.remove("nieodkryte-pole")
+                btn.classList.add("odkryte-pole")
+                if (plansza[y][x].sasiednie_miny != 0) {
+                    btn.innerText = plansza[y][x].sasiednie_miny
+                    btn.style.color = kolorki[plansza[y][x].sasiednie_miny - 1]
+                }
+                odkryte_pola++
+                if (odkryte_pola == (w * h) - m) {
+                    alert("Koniec gry, wygrana!")
+                    gra = false
+                }
+            }
+
+            // jeśli nie ma min dookoła to odkryj pola sąsiednie
+            if (plansza[y][x].sasiednie_miny == 0) {
+                let i = y;
+                let j = x - 1;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                j += 2;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                j = x;
+                i = y - 1;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
+
+                i += 2;
+
+                if (i >= 0 && i < h && j >= 0 && j < w) {
+                    if (document.getElementById(`p${j}${i}`).classList.contains("nieodkryte-pole")) {
+                        klik(document.getElementById(`p${j}${i}`))
+                    }
+                }
             }
         }
 
         function przygotuj() {
             plansza = []
 
-
             const plansza_table = document.getElementById("plansza")
             plansza_table.innerHTML = ''
 
@@ -178,36 +230,28 @@
                 plansza.push([])
                 n_html += '<tr>'
                 for (let j = 0; j < w; j++) {
-                    plansza[i].push({ x: j, y: i, mina: false, sasiednie_miny: 0 })
+                    plansza[i].push({ x: j, y: i, mina: false, sasiednie_miny: 0, flaga: false })
-                    n_html += `<td class="nieodkryte-pole" id="p${j}${i}" onclick="klik" oncontextmenu="flaga" data-x="${j}" data-y="${j}"></td>`
+                    n_html += `<td class="nieodkryte-pole" id="p${j}${i}" onclick="klik(this)" oncontextmenu="flaga(this)" oncontextmenu="flaga" data-x="${j}" data-y="${i}"></td>`
                 }
                 n_html += '</tr>'
             }
             plansza_table.innerHTML += n_html
         }
 
-        function losuj_miny() {
+        function losuj_miny(unikaj_x = 0, unikaj_y = 0) {
-            let max = w * h;
-            let miny = []
             let wspolrzedne_min = []
 
-            while (miny.length < 10) {
+            while (wspolrzedne_min.length < m) {
-                let losowa = Math.floor(Math.random() * max)
+                let random_x = Math.floor(Math.random() * w)
-                if (miny.find(mina => mina == losowa) == undefined) {
+                let random_y = Math.floor(Math.random() * h)
-                    miny.push(losowa)
+
+                if (!wspolrzedne_min.find(wspolrzedna => (wspolrzedna.x == random_x && wspolrzedna.y == random_y))) {
+                    if (!(random_x == unikaj_x && random_y == unikaj_y)) {
+                        wspolrzedne_min.push({ x: random_x, y: random_y })
+                    }
                 }
             }
 
-            miny.forEach(mina => {
-                let w_m = Math.floor(mina / w)
-                let h_m = mina % h
-
-                wspolrzedne_min.push({ x: w_m, y: h_m })
-
-                // debug
-                document.getElementById(`p${w_m}${h_m}`).classList.add("debug-czerwony")
-            })
-
             wspolrzedne_min.forEach(wspolrzedna => {
                 // znajdz pole
                 plansza[wspolrzedna.y][wspolrzedna.x].mina = true
@@ -224,8 +268,6 @@
                         if (j == wspolrzedna.x && i == wspolrzedna.y) { continue }
 
                         plansza[i][j].sasiednie_miny += 1
-
-                        document.getElementById(`p${j}${i}`).innerText = plansza[i][j].sasiednie_miny
                     }
                 }
             })
@@ -247,14 +289,14 @@
                 return
             }
 
+            gra = true
+            polozono_miny = false
+            odkryte_pola = 0
             w = w_t
             h = h_t
             m = m_t
 
             przygotuj()
-            losuj_miny()
-
-
         }
     </script>
 </body>

Lekcja_05/codeshare_zdarzenia.md

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        function zmiana(d) {
+            d.innerText = "Szymek";
+        }
+
+        function init() {
+            const els = document.getElementsByTagName("button");
+            console.log(els);
+            for (let i = 0; i < els.length; i++) {
+                // els[i].onclick = function () {
+                //     console.log("click", this);
+                // }
+
+                els[i].onclick = (e) => {
+                    console.log("click", this, e, e.target);
+                    e.target.style.backgroundColor = "pink"
+                }
+
+                //els[i].onclick = function () {
+                //    console.log("test");
+                //}
+                // nadpisuje tego samego typu zdarzenie
+            }
+
+            // Listenery
+            const inner = document.getElementById("inner");
+            inner.addEventListener("click", function (e) {
+                console.log("INNER1", e)
+                e.stopPropagation();
+            }, false);
+
+            const outer = document.getElementById("outer");
+            outer.addEventListener("click", function () {
+                console.log("OUTER")
+
+            }, false); // true/false event capturing bubbling
+
+            // inner.addEventListener("click", function () {
+            //     console.log("INNER2")
+            // }, false);
+            // zdarzenie sie "dopisuje"
+            // removeEventListener
+        }
+    </script>
+</head>
+
+<body onload="init();" oncontextmenu="console.log('menu');event.preventDefault();">
+    <!--
+    <button onclick="console.log('click',this);zmiana(this)" onmouseover="console.log('over')">A</button>
+    <button onclick="console.log('click',this);zmiana(this)">B</button>
+    <button onclick="console.log('click',this);zmiana(this)">C</button>
+-->
+    <button>A</button>
+    <button>B</button>
+    <button>C</button>
+
+    <div id="outer">OUTER
+        <div id="inner">INNER</div>
+    </div>
+</body>
+
+</html>