Merge branch 'main' into github-pages

yui10 · Jul 17, 2023 · fb561c9 · fb561c9
2 parents a5157fd + 94017d0
commit fb561c9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/css/style.css b/css/style.css
@@ -34,8 +34,9 @@ footer {
 }
 
 #status * {
-    font-size: small;
+    font-size: medium;
     margin: 1%;
+    text-align: center;
 }
 
 #touch-menu {
@@ -54,7 +55,7 @@ footer {
     background-color: white;
     border-radius: 50%;
     text-align: center;
-    line-height:24px;
+    line-height: 24px;
 }
 
 #field {
@@ -76,6 +77,15 @@ footer {
     font-weight: bold;
 }
 
+#field #cells:hover {
+    background: white;
+}
+
+#field #cells.hover {
+    outline: black solid 2px;
+    background: white;
+}
+
 #field #cells.Open {
     background: aliceblue;
 }

diff --git a/index.html b/index.html
@@ -42,7 +42,11 @@ <h1>Quantum minesweeper</h1>
             <div id="status">
                 <div>💣<span id="BombCounter"></span></div>
                 <div>⏱<span id="timer">000</span></div>
+            </div>
+            <br>
+            <div id="status">
                 <input type="button" id="observationButton" value="🔍observation">
+                <div id="observationCount">0000</div>
             </div>
             <div id="GameMessage"></div>
             <div id="field"></div>
@@ -54,7 +58,9 @@ <h1>Quantum minesweeper</h1>
     </main>
     <footer>
         <a href="https://github.com/yui10/quantum-minesweeper">
-            <img src="./img/github-mark.png" width="20px" alt="GitHub"></a>
+            <img src="./img/github-mark.png" width="20px" alt="GitHub">
+            FAQ & Help
+        </a>
         <p>&copy; 2023 <a href="https://github.com/yui10">yui10</a></p>
     </footer>
 

diff --git a/js/UI.js b/js/UI.js
@@ -7,10 +7,12 @@ const createUI = (game) => {
     const elemMessage = document.getElementById("GameMessage");
     const elemGameLevel = document.getElementById("gameLevel");
     const elemObservationButton = document.getElementById("observationButton");
+    const elemObservationCount = document.getElementById("observationCount");
     const elemTouch_menu = document.getElementById("touch-menu");
 
     let cells = [];
     let startTime = new Date();
+    let ObservationCount = 0;
 
     const resize = () => {
         // elemBoard.style.height = elemField.offsetHeight + elemStatus.offsetHeight;
@@ -75,6 +77,13 @@ const createUI = (game) => {
         elemTouch_menu.dataset.x = event.target.dataset.x;
         elemTouch_menu.dataset.y = event.target.dataset.y;
 
+        let rem = document.querySelectorAll(".hover");
+        for (let i = 0; i < rem.length; i++) {
+            rem.item(i).classList.remove("hover");
+        }
+        let set = document.querySelectorAll(`[data-y="${event.target.dataset.y}"][data-x="${event.target.dataset.x}"]#cells`)
+        set.item(0).classList.add("hover");
+
         const posX = event.touches[0].clientX;
         const posY = event.touches[0].clientY;
         elemTouch_menu.style.left = posX + 'px';
@@ -108,13 +117,20 @@ const createUI = (game) => {
             if (elemTouch_menu.classList.contains('show')) {
                 elemTouch_menu.classList.remove('show');
                 elemTouch_menu.dataset.x = elemTouch_menu.dataset.y = "";
+
+                let rem = document.querySelectorAll(".hover");
+                for (let i = 0; i < rem.length; i++) {
+                    rem.item(i).classList.remove("hover");
+                }
             }
         });
 
         setInterval(timerEvent, 1000);
     };
 
     const cellStatusChange = () => {
+        ObservationCount++;
+        elemObservationCount.innerHTML = ObservationCount.toString().padStart(4, "0");
         let map = game.GetBombCountMap();
         for (let i = 0; i < game.Height; i++) {
             for (let j = 0; j < game.Width; j++) {
@@ -157,6 +173,9 @@ const createUI = (game) => {
         elemBombCounter.innerHTML = bombCount.toString().padStart(3, "0");
         elemTimer.innerHTML = "000";
         elemMessage.innerHTML = "";
+
+        ObservationCount = 0;
+        elemObservationCount.innerHTML = "0000";
         //盤面削除
         while (elemField.firstChild) {
             elemField.removeChild(elemField.firstChild);