From 5f623b19cb0f0510dea5d355e7e33981904679c3 Mon Sep 17 00:00:00 2001
From: Geir Okkenhaug Jerstad <geir@geokkjer.eu>
Date: Tue, 3 Sep 2024 13:34:37 +0200
Subject: [PATCH] minesweeper some progress

---
 MVC/gjett_nummer.html      | 52 ++++++++++++++++++++++++++++
 MVC/minesweeper/index.html | 70 +++++++++++++++++++++++---------------
 MVC/select.html            | 40 ++++++++++++++++++++++
 MVC/tallpuslespill.html    | 42 +++++++++++++++++++++++
 4 files changed, 176 insertions(+), 28 deletions(-)
 create mode 100644 MVC/gjett_nummer.html
 create mode 100644 MVC/select.html
 create mode 100644 MVC/tallpuslespill.html
diff --git a/MVC/gjett_nummer.html b/MVC/gjett_nummer.html
new file mode 100644
index 0000000..f0d4696
--- /dev/null
+++ b/MVC/gjett_nummer.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body onload="init()">
+    <div id="app">
+
+    </div>
+    <script>
+        // modell
+        let guessNumber;
+        let secretNumber;
+        let guessCount = 0;
+
+        //view
+        function updateView() {
+            let text;
+            document.getElementById('app').innerHTML = /*HTML*/ `
+            <div>${text}</div>
+            <div>Du har gjettet ${guessCount} ganger.</div>  
+            <input
+                type="number"
+                min="1"
+            />
+            <button onclick="guess()">Gjett</button>
+            <button onclick="reset()">Start på nytt</button>  
+            `;
+        }
+        function getMessage() {
+            if (!guessNumber) return '';
+            if(guessNumber==secretNumber) return 'Riktig';
+            if(guessNumber<secretNumber) return 'For lavt';
+            return 'For høyt';
+
+        }
+        // controller
+
+        function init(){
+            secretNumber = Math.floor(Math.random() * 100) + 1;
+            updateView();
+        }
+        function guess(){
+            guessCount++
+            updateView()
+        }
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/MVC/minesweeper/index.html b/MVC/minesweeper/index.html
index 0617f4e..368f86c 100644
--- a/MVC/minesweeper/index.html
+++ b/MVC/minesweeper/index.html
@@ -42,25 +42,47 @@
     <table id="matrix"></table>
     <script>
         var matrixModel;
-        var matrxiView = document.getElementById('matrix');
+        var matrixView = document.getElementById('matrix');
         var totalNumberOfBombs = 7;
         var size = 16;
-        var matrixModel;
+
 
         init(size);
         placeBombs();
         calculateNearByBombs();
         showMatrix();
 
-        matrix.rows[0].cells[0].isBomb = true;
-        matrix.rows[0].cells[0].isOpen = true;
-        matrix.rows[0].cells[1].bombsNearby = 9;
-        matrix.rows[0].cells[1].isOpen = true;
-        matrix.rows[0].cells[2].isOpen = true;
+
+        function showMatrix() {
+            matrixView.innerHTML = '';
+
+            for (var rowCounter = 0; rowCounter < matrixModel.rows.lenght; rowCounter++) {
+                var viewRow = matrixView.insertRow();
+                var modelRow = matrixModel.rows[rowCounter];
+                for (var cellCounter = 0; cellCounter < modelRow.cells.lenght; cellCounter++) {
+                    var viewCell = viewRow.insertCell();
+                    var modelCell = modelRow.cells[cellCounter];
+                    if (true) {//(modelCell.isOpen) {
+                        viewCell.style.backgroundcolor = 'lightcyan';
+                        if (modelCell.isBomb) {
+                            viewCell.innerHTML = '💣';
+                        } else if (modelCell.bombsNearby > 0) {
+                            viewCell.innerHTML = modelCell.bombsNearby;
+                            viewCell.classList.add('x' + modelCell.bombsNearby)
+                        }
+                        else {
+                            viewCell.addEventListener("click", handleClick, false)
+                        }
+                    }
+                }
+            }
+        }
 
         function init(size) {
-            var matrixModel = {};
+            matrixModel = {};
             matrixModel.rows = [];
+
+
             for (var rowCounter = 0; rowCounter < size; rowCounter++) {
                 var newRow = {};
                 newRow.cells = [];
@@ -73,37 +95,29 @@
                 }
                 matrixModel.rows.push(newRow);
             }
+            console.log('init ' + `${matrixModel.rows}`);
         }
-        function showMatrix() {
-            matrxiView.innerHTML = '';
-            for (var rowCounter = 0; rowCounter < size; rowCounter++) {
-                var viewRow = matrxiView.insertRow();
-                var modelRow = matrixModel.rows[rowCounter];
-                for (var cellCounter = 0; cellCounter < modelRow.cells.lenght; cellCounter++) {
-                    var viewCell = viewRow.insertCell();
-                    var modelCell = modelRow.cells[cellCounter];
-                    if (modelCell.isOpen) {
-                        viewCell.style.backgroundcolor = 'lightcyan';
-                        if (modelCell.isBomb) {
-                            viewCell.innerHTML = '💣';
-                        } else if (modelCell.bombsNearby > 0) {
-                            viewCell.innerHTML = modelCell.bombsNearby;
-                            viewCell.classList.add('x' + modelCell.bombsNearby)
-                        }
-                    }
-                }
-            }
-        }
+
 
 
         function placeBombs() {
+            for (var bombCount = 0; bombCount < totalNumberOfBombs; bombCount--) {
+                var rowIndex = Math.floor(Math.random() * size);
+                var columnIndex = Math.floor(Math.random() * size);
+                var modelCell = matrixModel.rows[rowIndex].cells[columnIndex];
+                modelCell.isBomb = true;
+            }
 
         }
 
         function calculateNearByBombs() {
 
         }
+        function handleClick(aMouseEvent) {
 
+            // Forandre modellen
+            showMatrix();
+        }
 
     </script>
 </body>
diff --git a/MVC/select.html b/MVC/select.html
new file mode 100644
index 0000000..ca7df9e
--- /dev/null
+++ b/MVC/select.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        app {
+            display: grid;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <label for=""></label>
+        <div>Forgrunnsfarge: </div>
+        <select onchange="foreColor=this.value">
+            <option></option>
+            <option value="black">Sort</option>
+            <option value="red">Rød</option>
+        </select>
+        <br>
+        Bakgrunnsfarge: <select name="" id=""></select><br>
+        <button onclick="">Oppdater</button>
+    </div>
+
+    <script>
+        let foreColor = null;
+        let backColor = null;
+
+        updateView()
+        function updateView(){
+
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/MVC/tallpuslespill.html b/MVC/tallpuslespill.html
new file mode 100644
index 0000000..4ede501
--- /dev/null
+++ b/MVC/tallpuslespill.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app"></div>
+
+    <script>
+        // modell
+        let board = "73541 286";
+
+        // view
+        updateView();
+        function updateView(){
+            createSquareHtml(1)
+            + createSquareHtml(2)
+        }
+
+        function createSquareHtml(index1, index2){
+            return /*HTML*/ `
+                <div onclick="swap(${index})">${board.charAt(index)}</div>
+            `;
+        }
+        // controller
+        function swap(){
+            let blankIndex = board.indexOf(' ');
+            let selectedNumber = board.charAt(index);
+            board = board.replace(' ', selectedNumber);
+
+            updateView();
+        };
+        function areNeighbours(){
+
+        };
+
+    </script>
+    
+</body>
+</html>
\ No newline at end of file
