diff --git a/app.js b/app.js index 7a316bb..661fb1f 100644 --- a/app.js +++ b/app.js @@ -990,6 +990,7 @@ let game = { document.onkeydown = onkeydown document.onkeyup = onkeyup + pauseSpan.className = "" stats.clock.start() stats.clock.elapsedTime = stats.elapsedTime music.play() @@ -1056,10 +1057,10 @@ let game = { music.pause() document.onkeydown = null - renderer.domElement.tabIndex = 1 - renderer.domElement.onfocus = game.resume - - messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `

PAUSE

` }) + + pauseSpan.tabIndex = 1 + pauseSpan.onfocus = game.resume + pauseSpan.className = "pause" }, over: function() { diff --git a/index.html b/index.html index c67d605..97b60f4 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ + PAUSE diff --git a/style.css b/style.css index 30605d4..72c93e1 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,10 @@ body { margin: 0; + padding: 0; background-color: #222; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", + "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } span { @@ -39,9 +43,6 @@ canvas { transform: translate(-50%, 0); color: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px rgba(0, 0, 0, 0.8); - font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", - "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; line-height: 1.5; font-size: 3vmin; @@ -156,3 +157,24 @@ h1 { animation-timing-function: (0.4, 0, 0.6, 1); animation-duration: 2s; } + +#pauseSpan { + display: none; +} + +#pauseSpan.pause { + display: flex; + position:absolute; + display: flex; + top: 0; + left: 0; + backdrop-filter: blur(10px); + width: 100%; + height: 100%; + z-index: 10; + color: rgba(255, 255, 255, 20%); + text-align: center; + justify-content: center; + align-items: center; + font-size: 10vh; +} \ No newline at end of file