diff --git a/app.js b/app.js
index 5dbf249..9c65123 100644
--- a/app.js
+++ b/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()
- gui.settings.close()
- gui.stats.show()
+ menu.startButton.hide()
+ menu.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()
- gui.pauseButton.show()
+ menu.resumeButton.hide()
+ 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()
- gui.resumeButton.show()
+ menu.pauseButton.hide()
+ 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: `
GAME
OVER
` })
- gui.pauseButton.hide()
- gui.startButton.name("Rejouer")
- gui.startButton.show()
+ menu.pauseButton.hide()
+ menu.startButton.name("Rejouer")
+ 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)
-gui.load()
+const menu = new Menu(game, settings, stats, scene, controls, playfield)
+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
}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index b74cf26..18ec803 100644
--- a/css/style.css
+++ b/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;
}
diff --git a/jsm/TetraGUI.js b/jsm/Menu.js
similarity index 94%
rename from jsm/TetraGUI.js
rename to jsm/Menu.js
index ce680bd..e136853 100644
--- a/jsm/TetraGUI.js
+++ b/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")
- if (this.dev) {
- let dev = this.addFolder("dev")
+ this.settings.dev = window.location.search.includes("dev")
+ if (this.settings.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() {}
}
\ No newline at end of file