rename gui to menu

app.js

@@ -3,9 +3,10 @@ import { scheduler } from './jsm/scheduler.js'
 import { TRANSLATION, ROTATION, environment, Mino, Playfield, HoldQueue, NextQueue } from './jsm/Tetrominoes.js'
 import Settings from './jsm/Settings.js'
 import { Stats } from './jsm/Stats.js'
-import { TetraGUI } from './jsm/TetraGUI.js'
+import { Menu } from './jsm/Menu.js'
 import TetraControls from './jsm/TetraControls.js'
 import { TetraScene } from './jsm/TetraScene.js'
+import * as FPS from 'three/addons/libs/stats.module.js'
 
 
 HTMLElement.prototype.addNewChild = function (tag, properties) {
@@ -25,9 +26,9 @@ let game = {
     start: function() {
         stats.init()
 
-        gui.startButton.hide()
+        menu.startButton.hide()
-        gui.settings.close()
+        menu.stats.show()
-        gui.stats.show()
+        menu.settings.close()
 
         Mino.meshes.clear()
 
@@ -49,11 +50,11 @@ let game = {
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
         window.onblur = game.pause
-        gui.settings.domElement.onclick = game.pause
+        menu.settings.domElement.onclick = game.pause
 
         document.body.classList.remove("pause")
-        gui.resumeButton.hide()
+        menu.resumeButton.hide()
-        gui.pauseButton.show()
+        menu.pauseButton.show()
 
         stats.clock.start()
         stats.clock.elapsedTime = stats.elapsedTime
@@ -106,7 +107,7 @@ let game = {
     },
 
     pause: function() {
-        gui.settings.domElement.onclick = null
+        menu.settings.domElement.onclick = null
 
         stats.elapsedTime = stats.clock.elapsedTime
         stats.clock.stop()
@@ -123,8 +124,8 @@ let game = {
         
         pauseSpan.onfocus = game.resume
         document.body.classList.add("pause")
-        gui.pauseButton.hide()
+        menu.pauseButton.hide()
-        gui.resumeButton.show()
+        menu.resumeButton.show()
     },
 
     over: function() {
@@ -133,15 +134,15 @@ let game = {
         document.onkeydown = null
         window.onblur = null
         renderer.domElement.onfocus = null
-        gui.settings.domElement.onfocus = null
+        menu.settings.domElement.onfocus = null
         game.playing = false
         scene.music.pause()
         stats.clock.stop()
         messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>GAME<br/>OVER</h1>` })
 
-        gui.pauseButton.hide()
+        menu.pauseButton.hide()
-        gui.startButton.name("Rejouer")
+        menu.startButton.name("Rejouer")
-        gui.startButton.show()
+        menu.startButton.show()
     },
 }
 
@@ -278,7 +279,7 @@ renderer.domElement.tabIndex = 1
 let loadingManager = new THREE.LoadingManager(
     function() {
         loadingDiv.style.display = "none"
-        gui.startButton.show()
+        menu.startButton.show()
         renderer.setAnimationLoop(animate)
     },
     function (url, itemsLoaded, itemsTotal) {
@@ -306,8 +307,14 @@ scene.add(playfield)
 const nextQueue = new NextQueue()
 scene.add(nextQueue)
 
-const gui = new TetraGUI(game, settings, stats, scene, controls, playfield)
+const menu = new Menu(game, settings, stats, scene, controls, playfield)
-gui.load()
+menu.load()
+
+let fps
+if (window.location.search.includes("fps")) {
+    let fps = new FPS.default()
+    document.body.appendChild(fps.dom)
+}
 
 messagesSpan.onanimationend = function (event) {
     event.target.remove()
@@ -327,7 +334,7 @@ function animate() {
     renderer.render(scene, scene.camera)
     environment.camera.update(renderer, scene)
 
-    gui.update()
+    fps?.update()
 }
 
 window.addEventListener("resize", () => {
@@ -337,7 +344,7 @@ window.addEventListener("resize", () => {
 })
 
 window.onbeforeunload = function (event) {
-    gui.save()
+    menu.save()
     localStorage["teTraHighScore"] = stats.highScore
     return !game.playing
 }

css/style.css

@@ -11,12 +11,12 @@ span {
     position: absolute;
 }
 
-.lil-gui {
+.lil-menu {
     --background-color: rgba(33, 37, 41, 30%);
     --width: 200px;
 }
 @supports (backdrop-filter: blur()) {
-    .lil-gui {
+    .lil-menu {
         backdrop-filter: blur(15px);
     }
 }
@@ -27,11 +27,11 @@ span {
     left: 15px;
 }
 
-.lil-gui.root > .title {
+.lil-menu.root > .title {
     font-size: 1.5em;
 }
 
-.lil-gui .controller.disabled {
+.lil-menu .controller.disabled {
     opacity: .8;
 }
 

jsm/Menu.js

@@ -1,10 +1,9 @@
 import * as THREE from 'three'
 import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
-import * as FPS from 'three/addons/libs/stats.module.js'
 import { Mino, environment } from './Tetrominoes.js'
 
 
-export class TetraGUI extends GUI {
+export class Menu extends GUI {
     constructor(game, settings, stats, scene, controls, playfield) {
         super({title: "ᵀᴱTᴿᴬ"})
         
@@ -24,8 +23,8 @@ export class TetraGUI extends GUI {
         this.stats.add(stats, "maxCombo").name("Combos max").disable().listen()
         this.stats.add(stats, "maxB2B").name("BàB max").disable().listen()
 
-        this.settings = this.addFolder("Options").open()
 
+        this.settings = this.addFolder("Options")
         this.settings.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1)
 
         this.settings.add(settings, "theme", ["Plasma", "Espace", "Rétro"]).name("Thème").onChange(theme => {
@@ -74,9 +73,9 @@ export class TetraGUI extends GUI {
             scene.hardDropSound.setVolume(volume/100)
         })
 
-        this.dev = window.location.search.includes("dev")
+        this.settings.dev = window.location.search.includes("dev")
-        if (this.dev) {
+        if (this.settings.dev) {
-            let dev = this.addFolder("dev")
+            let dev = this.settings.addFolder("dev")
             let cameraPosition = dev.addFolder("camera").close()
             cameraPosition.add(scene.camera.position, "x")
             cameraPosition.add(scene.camera.position, "y")
@@ -146,7 +145,7 @@ export class TetraGUI extends GUI {
                 if ("thickness"           in Mino.meshes.material) material.add(Mino.meshes.material, "thickness"          ).min(0).max(5).listen()
                 if ("transmission"        in Mino.meshes.material) material.add(Mino.meshes.material, "transmission"       ).min(0).max(1).listen()
             }
-            changeMaterial(this.materialType)
+            changeMaterial(this.settings.materialType)
             material.close()
 
             controls.addEventListener("change", () => cameraPosition.controllersRecursive().forEach((control) => {
@@ -154,15 +153,6 @@ export class TetraGUI extends GUI {
             }))
 
         }
-
-        if (window.location.search.includes("fps")) {
-            let fps = new FPS.default()
-            document.body.appendChild(fps.dom)
-
-            this.update = function() {
-                fps.update()
-            }
-        }
     }
 
     load() {
@@ -176,7 +166,7 @@ export class TetraGUI extends GUI {
     }
 
     changeKey() {
-        let controller = this
+        let controller = this.settings
         let input = controller.domElement.getElementsByTagName("input")[0]
         input.select()
         input.onkeydown = function (event) {
@@ -184,6 +174,4 @@ export class TetraGUI extends GUI {
             input.blur()
         }
     }
-
-    update() {}
 }