adrien/teTra
adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pauseSpan

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-07-01 22:30:03 +02:00
parent 3d70e2689b
commit 1499dddb10
3 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app.js
View File

@ -990,6 +990,7 @@ let game = {
document.onkeydown = onkeydown document.onkeydown = onkeydown
document.onkeyup = onkeyup document.onkeyup = onkeyup
pauseSpan.className = ""
stats.clock.start() stats.clock.start()
stats.clock.elapsedTime = stats.elapsedTime stats.clock.elapsedTime = stats.elapsedTime
music.play() music.play()
@ -1056,10 +1057,10 @@ let game = {
music.pause() music.pause()
document.onkeydown = null document.onkeydown = null
renderer.domElement.tabIndex = 1
renderer.domElement.onfocus = game.resume
messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>PAUSE</h1>` }) pauseSpan.tabIndex = 1
pauseSpan.onfocus = game.resume
pauseSpan.className = "pause"
}, },
over: function() { over: function() {

1
index.html
View File

@ -30,6 +30,7 @@
</div> </div>
</div> </div>
<span id="messagesSpan"></span> <span id="messagesSpan"></span>
<span id="pauseSpan">PAUSE</span>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="module" src="app.js"></script> <script type="module" src="app.js"></script>
</body> </body>

28
style.css
View File

@ -1,6 +1,10 @@
body { body {
margin: 0; margin: 0;
padding: 0;
background-color: #222; 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 { span {
@ -39,9 +43,6 @@ canvas {
transform: translate(-50%, 0); transform: translate(-50%, 0);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px rgba(0, 0, 0, 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; font-weight: 400;
line-height: 1.5; line-height: 1.5;
font-size: 3vmin; font-size: 3vmin;
@ -156,3 +157,24 @@ h1 {
animation-timing-function: (0.4, 0, 0.6, 1); animation-timing-function: (0.4, 0, 0.6, 1);
animation-duration: 2s; 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;
}