pause style

app.js

@@ -110,6 +110,7 @@ let game = {
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
         window.onblur = game.pause
+        gui.domElement.onfocus = game.pause
 
         document.body.classList.remove("pause")
         gui.resumeButton.hide()

index.html

@@ -31,7 +31,7 @@
         </div>
       </div>
       <span id="messagesSpan"></span>
-      <span id="pauseSpan" tabindex="1">PAUSE</span>
+      <span id="pauseSpan" tabindex="1">II</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 type="module" src="app.js"></script>
     </body>

jsm/TetraGUI.js

@@ -6,6 +6,7 @@ import { I, J, L, O, S, T, Z } from './gamelogic.js'
 class TetraGUI extends GUI {
     constructor(game, settings, stats, scene) {
         super({title: "teTra"})
+        this.domElement.tabIndex = 1
 
         this.startButton = this.add(game, "start").name("Jouer").hide()
         this.pauseButton = this.add(game, "pause").name("Pause").hide()

jsm/gamelogic.js

@@ -425,7 +425,7 @@ class Matrix extends THREE.Group {
     updateUnlockedMinoes(delta) {
         this.unlockedMinoes.forEach(mino => {
             mino.update(delta)
-            if (Math.sqrt(mino.position.x * mino.position.x + mino.position.z * mino.position.z) > 40) {
+            if (Math.sqrt(mino.position.x * mino.position.x + mino.position.z * mino.position.z) > 40 || mino.position.y < -50) {
                 this.remove(mino)
                 this.unlockedMinoes.delete(mino)
             }

style.css

@@ -176,8 +176,9 @@ h1 {
     height: 100%;
     z-index: 10;
     color: rgba(255, 255, 255, 20%);
-    text-align: center;
     justify-content: center;
     align-items: center;
-    font-size: 10vh;
+    font-size: 20vh;
+    font-weight: 800;
+    letter-spacing: .1em;
 }