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