fix audio restart, game restart, pause on gui

app.js

@@ -23,32 +23,22 @@ let game = {
     playing: false,
 
     start: function() {
-        gui.startButton.hide()
         stats.init()
-        gui.stats.show()
+
+        gui.startButton.hide()
         gui.settings.close()
+        gui.stats.show()
 
         Mino.mesh.clear()
 
-        holdQueue.remove(holdQueue.piece)
+        nextQueue.init()
         holdQueue.piece = undefined
-        if (nextQueue.pieces) nextQueue.pieces.forEach(piece => nextQueue.remove(piece))
+        holdQueue.clear()
         playfield.init()
 
-        scene.remove(playfield.piece)
-        if (playfield.piece) playfield.remove(playfield.piece)
-        playfield.piece = null
-        scene.music.currentTime = 0
-        playfield.visible = true
-
         this.playing = true
         stats.clock.start()
 
-        renderer.domElement.tabIndex = 1
-        gui.domElement.tabIndex = 1
-
-        nextQueue.init()
-
         stats.level = settings.startLevel
         this.resume()
     },
@@ -57,7 +47,7 @@ let game = {
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
         window.onblur = game.pause
-        if (!gui.debug) gui.domElement.onfocus = game.pause
+        gui.settings.domElement.onclick = game.pause
 
         document.body.classList.remove("pause")
         gui.resumeButton.hide()
@@ -65,10 +55,14 @@ let game = {
 
         stats.clock.start()
         stats.clock.elapsedTime = stats.elapsedTime
+        
         if (settings.musicVolume) scene.music.play()
 
-        if (playfield.piece) scheduler.setInterval(game.fall, stats.fallPeriod)
+        if (playfield.piece) {
-        else this.generate()
+            scheduler.setInterval(game.fall, stats.fallPeriod)
+        } else {
+            this.generate()
+        }
     },
 
     generate: function(nextPiece=nextQueue.shift()) {
@@ -94,13 +88,12 @@ let game = {
         if (playfield.lock(playfield.piece)) {
             let tSpin = playfield.piece.tSpin
             let nbClearedLines = playfield.clearLines()
-            playfield.remove(playfield.piece)
             if (settings.sfxVolume) {
                 if (nbClearedLines == 4 || (tSpin && nbClearedLines)) {
-                    scene.tetrisSound.currentTime = 0
+                    scene.tetrisSound.stop()
                     scene.tetrisSound.play()
                 } else if (nbClearedLines || tSpin) {
-                    scene.lineClearSound.currentTime = 0
+                    scene.lineClearSound.stop()
                     scene.lineClearSound.play()
                 }
             }
@@ -113,6 +106,8 @@ let game = {
     },
 
     pause: function() {
+        gui.settings.domElement.onclick = null
+
         stats.elapsedTime = stats.clock.elapsedTime
         stats.clock.stop()
     
@@ -137,9 +132,9 @@ let game = {
         document.onkeydown = null
         window.onblur = null
         renderer.domElement.onfocus = null
-        gui.domElement.onfocus = null
+        gui.settings.domElement.onfocus = null
         game.playing = false
-        scene.music.pause()
+        scene.music.stop()
         stats.clock.stop()
         messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>GAME<br/>OVER</h1>` })
 
@@ -167,9 +162,8 @@ let playerActions = {
 
     hardDrop: function () {
         scheduler.clearTimeout(game.lockDown)
-        scene.hardDropSound.play()
         if (settings.sfxVolume) {
-            scene.hardDropSound.currentTime = 0
+            scene.hardDropSound.stop()
             scene.hardDropSound.play()
         }
         while (playfield.piece.move(TRANSLATION.DOWN)) stats.score += 2
@@ -263,6 +257,7 @@ renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setClearColor(0x000000, 10)
 renderer.toneMapping = THREE.ACESFilmicToneMapping
 document.body.appendChild(renderer.domElement)
+renderer.domElement.tabIndex = 1
 
 
 const stats     = new Stats()

jsm/TetraGUI.js

@@ -7,7 +7,6 @@ import { Mino, environnement } from './gamelogic.js'
 export 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()
@@ -45,7 +44,7 @@ export class TetraGUI extends GUI {
                     })
                     loadingManager.onLoad = function() {
                         scene.vortex.darkCylinder.material.map = darkTexture
-                        scene.vortex.darkCylinder.material.opacity = 0.006
+                        scene.vortex.darkCylinder.material.opacity = 0.03
                         scene.vortex.colorFullCylinder.material.map = colorfullTexture
                         scene.vortex.colorFullCylinder.material.opacity = 0.7
                         

jsm/Vortex.js

@@ -27,7 +27,7 @@ export class Vortex extends THREE.Group {
                     texture.repeat.set(1, 1)
                 }),
                 blending: THREE.AdditiveBlending,
-                opacity: 0.006
+                opacity: 0.03
             })
         )
         this.add(this.darkCylinder)

jsm/gamelogic.js

@@ -141,12 +141,16 @@ class Mino extends THREE.Object3D {
         this.position.addScaledVector(this.velocity, delta)
         this.rotateOnWorldAxis(this.rotationAngle, delta * this.angularVelocity)
         if (Math.sqrt(this.position.x * this.position.x + this.position.z * this.position.z) > 40 || this.position.y < -50) {
-            this.constructor.mesh.delete(this)
+            this.dispose()
             return false
         } else {
             return true
         }
     }
+
+    dispose() {
+        this.constructor.mesh.delete(this)
+    }
 }
 
 
@@ -388,16 +392,18 @@ class Playfield extends THREE.Group {
         this.hardDropAnimation.setDuration(0.2)
 
         this.freedMinoes = new Set()
-
-        this.init()
     }
 
     init() {
         this.cells = Array(ROWS).fill().map(() => Array(COLUMNS))
+        if (this.piece) this.remove(this.piece)
+        this.piece = undefined
 
         this.ghost = new Ghost()
         this.ghost.visible = false
         this.add(this.ghost)
+
+        this.visible = true
     }
 
     cellIsEmpty(p) {
@@ -421,12 +427,16 @@ class Playfield extends THREE.Group {
 
     lock() {
         this.piece.locking = false
-        return Array.from(this.piece.children).every(mino => {
+        let minoes = Array.from(this.piece.children)
+        minoes.forEach(mino => {
             this.add(mino)
             mino.position.add(this.piece.position)
+        })
+        if (minoes.every(mino => mino.position.y >= SKYLINE)) return false
+        return minoes.every(mino => {
             if (this.cellIsEmpty(mino.position)) {
                 this.cells[mino.position.y][mino.position.x] = mino
-                return mino.position.y < SKYLINE
+                return true
             } else {
                 return false
             }
@@ -490,17 +500,14 @@ class NextQueue extends THREE.Group {
     }
 
     init() {
-        this.positions.forEach((position) => {
+        this.clear()
-            this.add(new Tetromino.random(position))
+        this.positions.forEach(position => this.add(new Tetromino.random(position)))
-        })
     }
 
     shift() {
         let fistPiece = this.children.shift()
         this.add(new Tetromino.random())
-        this.positions.forEach((position, i) => {
+        this.positions.forEach((position, i) => this.children[i].position.copy(position))
-            this.children[i].position.copy(position)
-        })
         return fistPiece
     }