diff --git a/app.js b/app.js
index 3f2ac33..1b845f9 100644
--- a/app.js
+++ b/app.js
@@ -276,9 +276,9 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping
document.body.appendChild(renderer.domElement)
renderer.domElement.tabIndex = 1
-const loadingManager = new THREE.LoadingManager(
+let loadingManager = new THREE.LoadingManager(
function() {
- loaddingCircle.remove()
+ loaddingCircle.style.display = "none"
gui.startButton.show()
renderer.setAnimationLoop(animate)
},
@@ -291,15 +291,13 @@ const loadingManager = new THREE.LoadingManager(
)
loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
loadingPercent.innerText = "0%"
+ loaddingCircle.style.display = "block"
}
const stats = new Stats()
const settings = new Settings()
-
const scene = new TetraScene(settings, loadingManager)
-
const controls = new TetraControls(scene.camera, renderer.domElement)
-
const gui = new TetraGUI(game, settings, stats, scene, controls)
scene.add(Mino.mesh)
@@ -319,7 +317,6 @@ messagesSpan.onanimationend = function (event) {
const clock = new THREE.Clock()
function animate() {
-
const delta = clock.getDelta()
scene.updateMatrixWorld()
scene.update(delta)
diff --git a/jsm/Settings.js b/jsm/Settings.js
index 182245f..066c923 100644
--- a/jsm/Settings.js
+++ b/jsm/Settings.js
@@ -76,6 +76,8 @@ class Settings {
this.musicVolume = 50
this.sfxVolume = 50
+
+ this.theme = "Plasma"
}
}
diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js
index 4d872ba..ba735b0 100644
--- a/jsm/TetraGUI.js
+++ b/jsm/TetraGUI.js
@@ -4,9 +4,86 @@ import * as FPS from 'three/addons/libs/stats.module.js'
import { Mino, environnement } from './gamelogic.js'
+let jsKeyRenamer = new Proxy({
+ ["←"]: "ArrowLeft",
+ ["→"]: "ArrowRight",
+ ["↑"]: "ArrowUp",
+ ["↓"]: "ArrowDown",
+ ["Espace"]: " ",
+ ["Échap."]: "Escape",
+ ["Ret. arrière"]: "Backspace",
+ ["Entrée"]: "Enter",
+}, {
+ get(obj, keyName) {
+ return keyName in obj ? obj[keyName] : keyName
+ }
+})
+let friendyKeyRenamer = new Proxy({
+ ["ArrowLeft"]: "←",
+ ["ArrowRight"]: "→",
+ ["ArrowUp"]: "↑",
+ ["ArrowDown"]: "↓",
+ [" "]: "Espace",
+ ["Escape"]: "Échap.",
+ ["Backspace"]: "Ret. arrière",
+ ["Enter"]: "Entrée",
+}, {
+ get(obj, keyName) {
+ return keyName in obj ? obj[keyName] : keyName.toUpperCase()
+ }
+})
+
+
export class TetraGUI extends GUI {
constructor(game, settings, stats, scene, controls) {
super({title: "teTra"})
+ this.startLevel = 1
+
+ let keyMaps = {
+ key: {},
+ action: {}
+ }
+
+ this.key = new Proxy(keyMaps, {
+ set(km, action, key) {
+ key = jsKeyRenamer[key]
+ km.action[key.toLowerCase()] = action
+ return km.key[action] = key
+ },
+ has(km, action) {
+ return action in km.key
+ },
+ get(km, action) {
+ return friendyKeyRenamer[km.key[action]]
+ }
+ })
+ this.action = new Proxy(keyMaps, {
+ set(km, key, action) {
+ km.key[action] = key
+ return km.action[key.toLowerCase()] = action
+ },
+ has(km, key) {
+ return key.toLowerCase() in km.action
+ },
+ get(km, key) {
+ return km.action[key.toLowerCase()]
+ }
+ })
+
+ this.key.moveLeft = "ArrowLeft"
+ this.key.moveRight = "ArrowRight"
+ this.key.rotateCCW = "w"
+ this.key.rotateCW = "ArrowUp"
+ this.key.softDrop = "ArrowDown"
+ this.key.hardDrop = " "
+ this.key.hold = "c"
+ this.key.pause = "Escape"
+
+ this.arrDelay = 50
+ this.dasDelay = 300
+
+ this.musicVolume = 50
+ this.sfxVolume = 50
this.startButton = this.add(game, "start").name("Jouer").hide()
this.pauseButton = this.add(game, "pause").name("Pause").hide()
@@ -27,71 +104,24 @@ export class TetraGUI extends GUI {
this.settings = this.addFolder("Options").open()
this.settings.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1)
- this.settings.add(scene.vortex, "background", ["Plasma", "Espace"]).name("Fond").onChange(background => {
- const loadingManager = new THREE.LoadingManager()
- let darkTexture, colorfullTexture
- switch (background) {
+ this.settings.add(settings, "theme", ["Plasma", "Espace"]).name("Thème").onChange(theme => {
+ scene.vortex.theme = theme
+ switch (theme) {
case "Plasma":
- darkTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", texture => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(1, 1)
- })
- colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", texture => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(2, 1)
- })
- loadingManager.onLoad = function() {
- scene.vortex.darkCylinder.material.map = darkTexture
- scene.vortex.darkCylinder.material.opacity = 0.17
- scene.vortex.colorFullCylinder.material.map = colorfullTexture
- scene.vortex.colorFullCylinder.material.opacity = 0.7
-
- scene.vortex.globalRotation = 0.028
- scene.vortex.darkTextureRotation = 0.005
- scene.vortex.darkMoveForward = 0.009
- scene.vortex.colorFullTextureRotation = 0.006
- scene.vortex.colorFullMoveForward = 0.025
-
- scene.ambientLight.intensity = 0.6
- scene.directionalLight.intensity = 5
-
- Mino.mesh.material.opacity = 0.7
- Mino.mesh.material.roughness = 0.48
- Mino.mesh.material.metalness = 0.9
- }
+ scene.ambientLight.intensity = 0.6
+ scene.directionalLight.intensity = 5
+
+ Mino.mesh.material.opacity = 0.7
+ Mino.mesh.material.roughness = 0.48
+ Mino.mesh.material.metalness = 0.9
break
case "Espace":
- darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(2, 2)
- })
- colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(2, 2)
- })
- loadingManager.onLoad = function() {
- scene.vortex.darkCylinder.material.map = darkTexture
- scene.vortex.darkCylinder.material.opacity = 0.05
- scene.vortex.colorFullCylinder.material.map = colorfullTexture
- scene.vortex.colorFullCylinder.material.opacity = 0.25
-
- scene.vortex.globalRotation = 0.028
- scene.vortex.darkTextureRotation = 0.006
- scene.vortex.darkMoveForward = 0.03
- scene.vortex.colorFullTextureRotation = 0.006
- scene.vortex.colorFullMoveForward = 0.012
-
- scene.ambientLight.intensity = 20
- scene.directionalLight.intensity = 10
-
- //Mino.mesh.material.opacity = 0.6
- //Mino.mesh.material.roughness = 0.08
- //Mino.mesh.material.metalness = 0.98
- }
+ scene.ambientLight.intensity = 20
+ scene.directionalLight.intensity = 10
+
+ Mino.mesh.material.opacity = 0.6
+ Mino.mesh.material.roughness = 0.05
+ Mino.mesh.material.metalness = 0.997
break
}
})
@@ -193,17 +223,17 @@ export class TetraGUI extends GUI {
})
break
}
- if ("opacity" in Mino.mesh.material) material.add(Mino.mesh.material, "opacity").min(0).max(1)
- if ("reflectivity" in Mino.mesh.material) material.add(Mino.mesh.material, "reflectivity").min(0).max(1)
- if ("roughness" in Mino.mesh.material) material.add(Mino.mesh.material, "roughness").min(0).max(1)
- if ("metalness" in Mino.mesh.material) material.add(Mino.mesh.material, "metalness").min(0).max(1)
- if ("attenuationDistance" in Mino.mesh.material) material.add(Mino.mesh.material, "attenuationDistance").min(0)
- if ("ior" in Mino.mesh.material) material.add(Mino.mesh.material, "ior").min(1).max(2)
- if ("sheen" in Mino.mesh.material) material.add(Mino.mesh.material, "sheen").min(0).max(1)
- if ("sheenRoughness" in Mino.mesh.material) material.add(Mino.mesh.material, "sheenRoughness").min(0).max(1)
- if ("specularIntensity" in Mino.mesh.material) material.add(Mino.mesh.material, "specularIntensity").min(0).max(1)
- if ("thickness" in Mino.mesh.material) material.add(Mino.mesh.material, "thickness").min(0).max(5)
- if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission").min(0).max(1)
+ if ("opacity" in Mino.mesh.material) material.add(Mino.mesh.material, "opacity" ).min(0).max(1).listen()
+ if ("reflectivity" in Mino.mesh.material) material.add(Mino.mesh.material, "reflectivity" ).min(0).max(1).listen()
+ if ("roughness" in Mino.mesh.material) material.add(Mino.mesh.material, "roughness" ).min(0).max(1).listen()
+ if ("metalness" in Mino.mesh.material) material.add(Mino.mesh.material, "metalness" ).min(0).max(1).listen()
+ if ("attenuationDistance" in Mino.mesh.material) material.add(Mino.mesh.material, "attenuationDistance").min(0).listen()
+ if ("ior" in Mino.mesh.material) material.add(Mino.mesh.material, "ior" ).min(1).max(2).listen()
+ if ("sheen" in Mino.mesh.material) material.add(Mino.mesh.material, "sheen" ).min(0).max(1).listen()
+ if ("sheenRoughness" in Mino.mesh.material) material.add(Mino.mesh.material, "sheenRoughness" ).min(0).max(1).listen()
+ if ("specularIntensity" in Mino.mesh.material) material.add(Mino.mesh.material, "specularIntensity" ).min(0).max(1).listen()
+ if ("thickness" in Mino.mesh.material) material.add(Mino.mesh.material, "thickness" ).min(0).max(5).listen()
+ if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission" ).min(0).max(1).listen()
}
changeMaterial(this.materialType)
material.close()
diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js
index 805e045..1fc618b 100644
--- a/jsm/TetraScene.js
+++ b/jsm/TetraScene.js
@@ -30,17 +30,17 @@ export class TetraScene extends THREE.Scene {
this.lineClearSound = new THREE.Audio(listener)
audioLoader.load('audio/line-clear.ogg', function( buffer ) {
this.lineClearSound.setBuffer(buffer)
- this.lineClearSound.setVolume(settings.sfxVolume/100)
}.bind(this))
this.tetrisSound = new THREE.Audio(listener)
audioLoader.load('audio/tetris.ogg', function( buffer ) {
this.tetrisSound.setBuffer(buffer)
+ this.lineClearSound.setVolume(settings.sfxVolume/100)
this.tetrisSound.setVolume(settings.sfxVolume/100)
+ this.hardDropSound.setVolume(settings.sfxVolume/100)
}.bind(this))
this.hardDropSound = new THREE.Audio(listener)
audioLoader.load('audio/hard-drop.wav', function( buffer ) {
this.hardDropSound.setBuffer(buffer)
- this.hardDropSound.setVolume(settings.sfxVolume/100)
}.bind(this))
}
diff --git a/jsm/Vortex.js b/jsm/Vortex.js
index ad12f35..365ef55 100644
--- a/jsm/Vortex.js
+++ b/jsm/Vortex.js
@@ -5,6 +5,8 @@ export class Vortex extends THREE.Group {
constructor(loadingManager) {
super()
+ this.loadingManager = loadingManager
+
this.globalRotation = 0.028
this.darkTextureRotation = 0.006
@@ -14,20 +16,12 @@ export class Vortex extends THREE.Group {
this.colorFullMoveForward = 0.025
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true)
-
- this.background = "Plasma"
this.darkCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshLambertMaterial({
side: THREE.BackSide,
- map: new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", (texture) => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(1, 1)
- }),
blending: THREE.AdditiveBlending,
- opacity: 0.17
})
)
this.add(this.darkCylinder)
@@ -36,13 +30,7 @@ export class Vortex extends THREE.Group {
commonCylinderGeometry,
new THREE.MeshBasicMaterial({
side: THREE.BackSide,
- map: new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", (texture) => {
- texture.wrapS = THREE.RepeatWrapping
- texture.wrapT = THREE.MirroredRepeatWrapping
- texture.repeat.set(2, 1)
- }),
blending: THREE.AdditiveBlending,
- opacity: 0.7
})
)
this.add(this.colorFullCylinder)
@@ -50,6 +38,58 @@ export class Vortex extends THREE.Group {
this.position.set(5, 10, -10)
}
+ set theme(theme) {
+ switch (theme) {
+ case "Plasma":
+ new THREE.TextureLoader(this.loadingManager).load("./images/plasma.jpg", texture => {
+ texture.wrapS = THREE.RepeatWrapping
+ texture.wrapT = THREE.MirroredRepeatWrapping
+ texture.repeat.set(1, 1)
+ this.darkCylinder.material.map = texture
+ })
+ this.darkCylinder.material.opacity = 0.17
+
+ new THREE.TextureLoader(this.loadingManager).load("./images/plasma2.jpg", texture => {
+ texture.wrapS = THREE.RepeatWrapping
+ texture.wrapT = THREE.MirroredRepeatWrapping
+ texture.repeat.set(2, 1)
+ this.colorFullCylinder.material.map = texture
+ })
+ this.colorFullCylinder.material.opacity = 0.7
+
+ this.globalRotation = 0.028
+ this.darkTextureRotation = 0.005
+ this.darkMoveForward = 0.009
+ this.colorFullTextureRotation = 0.006
+ this.colorFullMoveForward = 0.025
+ break
+
+ case "Espace":
+ new THREE.TextureLoader(this.loadingManager).load("./images/dark.jpg", texture => {
+ texture.wrapS = THREE.RepeatWrapping
+ texture.wrapT = THREE.MirroredRepeatWrapping
+ texture.repeat.set(2, 2)
+ this.darkCylinder.material.map = texture
+ })
+ this.darkCylinder.material.opacity = 0.05
+
+ new THREE.TextureLoader(this.loadingManager).load("./images/colorfull.jpg", texture => {
+ texture.wrapS = THREE.RepeatWrapping
+ texture.wrapT = THREE.MirroredRepeatWrapping
+ texture.repeat.set(2, 2)
+ this.colorFullCylinder.material.map = texture
+ })
+ this.colorFullCylinder.material.opacity = 0.34
+
+ this.globalRotation = 0.028
+ this.darkTextureRotation = 0.006
+ this.darkMoveForward = 0.03
+ this.colorFullTextureRotation = 0.006
+ this.colorFullMoveForward = 0.012
+ break
+ }
+ }
+
update(delta) {
this.rotation.y += this.globalRotation * delta