diff --git a/css/style.css b/css/style.css
index 89d83a6..e42d485 100644
--- 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
index 1a9fee0..b64bb97 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,11 @@
Quantum minesweeper
+
+
@@ -54,7 +58,9 @@ Quantum minesweeper
diff --git a/js/UI.js b/js/UI.js
index b976c70..27d2481 100644
--- 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,6 +117,11 @@ 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");
+ }
}
});
@@ -115,6 +129,8 @@ const createUI = (game) => {
};
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);