diff --git a/src/index.scss b/src/index.scss index 93842ec..93c0ce7 100644 --- a/src/index.scss +++ b/src/index.scss @@ -41,31 +41,37 @@ body { left: 0; width: 100%; height: 100%; - backdrop-filter: blur(2px) brightness(80%); + animation: unbrighten ease-in-out 0.5s; + backdrop-filter: brightness(69%); + + @keyframes unbrighten { + from { + backdrop-filter: none; + } + + to { + backdrop-filter: brightness(69%); + } + } &, .menu-content { @include flex-column-center; } - .menu-content { background-color: #C1C1C1; width: 60%; height: 60%; border-radius: 2rem; - animation: scale ease-in-out 0.5s; - - @keyframes scale { - from { - transform: scale(0%); - } + animation: opacify ease-in-out 1s; - 50% { - transform: scale(120%); + @keyframes opacify { + from, 50% { + opacity: 0; } to { - transform: scale(100%); + opacity: 1; } } diff --git a/src/main.js b/src/main.js index 684e1e4..6c41fcf 100644 --- a/src/main.js +++ b/src/main.js @@ -160,7 +160,6 @@ function eventHandler(type, event, childInfo) { if (cell.type === CELL_TYPES.BOMB) { i++; setTimeout(() => { - console.log("ran bomb timeout"); board[x][y] = { ...cell, hidden: false, @@ -233,7 +232,7 @@ const Cell = { grid-row: ${y + 1}; `, tabindex: gameState.playState === GAME_PLAY_STATES.PLAYING ? "0" : "-1", - class: `${flagged ? "flagged" : hidden ? "hidden" : type + (type === CELL_TYPES.NUM ? "-" + neighbourBombs : "")} type-${type}`, + class: `${flagged ? "flagged" : hidden ? "hidden" : type + (type === CELL_TYPES.NUM ? "-" + neighbourBombs : "")}`, onclick(event) { eventHandler(event.button === 0 ? EVENTS.PRIMARYCLICK : EVENTS.SECONDARYCLICK, event, { cell: attrs.cell }); }