From 7b31a9a6325ad90cbb586794420d0d60039009bb Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Wed, 6 Mar 2024 16:37:11 +0100
Subject: [PATCH] WIP Menu
Still a WIP, but users will be able to choose some settings, select language or maybe use the static website version
---
index.html | 8 +++++
public/menu.css | 42 ++++++++++++++++++++++
public/style.css | 2 +-
src/main.js | 90 +++++++++++++++++++++++++-----------------------
src/menu.js | 9 +++++
5 files changed, 107 insertions(+), 44 deletions(-)
create mode 100644 public/menu.css
create mode 100644 src/menu.js
diff --git a/index.html b/index.html
index 6c5cd56..af7a255 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,15 @@
Kévin Sailly - Portfolio
+
+
+
+
@@ -22,6 +29,7 @@
+
diff --git a/public/menu.css b/public/menu.css
new file mode 100644
index 0000000..aca7aa3
--- /dev/null
+++ b/public/menu.css
@@ -0,0 +1,42 @@
+/* This file is reserved for the menu style */
+
+#menu{
+ background-color: #131415;
+ position: absolute;
+ top:0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: -1;
+}
+
+#menu h1{
+ position: absolute;
+ top:20%;
+ left:50%;
+ transform: translate(-50%,-50%);
+ font-size: 3em;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #EAEAEA;
+}
+
+#menu button{
+ position: absolute;
+ top: 70%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ padding-left: 50px;
+ padding-right: 50px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ border-radius: 8px;
+ border: 2px #4f5c69 solid;
+ background-color: #2E86AB;
+ font-size: 1.5em;
+ color: #EAEAEA;
+ font-family: Arial, Helvetica, sans-serif;
+}
+#menu button:hover{
+ background-color: #46aad4;
+ border: 4px #4f5c69 solid;
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 371d4ac..e572f72 100644
--- a/public/style.css
+++ b/public/style.css
@@ -20,7 +20,7 @@ a {
transform: translate(-50%, -50%);
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
- z-index:-1;
+ z-index:-2;
}
#notification_bar {
diff --git a/src/main.js b/src/main.js
index 0d1a3d9..da14500 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,58 +5,62 @@ import * as PlayerMovement from './utils/playerMovement.js';
import * as Animations from './utils/animateMesh.js';
import * as PlayerCollisions from './utils/playerCollisions.js';
-let Clock = new THREE.Clock();
-THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
+// Function used to start Threejs, called from index.html
+function startThreeJS(){
+ let Clock = new THREE.Clock();
+ THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
-const APP_DEBUG = false;//Turn true to show player position in browser console
-
-/* --------------------- */
-/* | SCENE CREATION | */
-/* --------------------- */
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x0EB1D2);
-const camera = getCamera();
-
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-document.body.appendChild( renderer.domElement );
-
-//Here, we create/load every asset used, and add it in the scene
-addAssetsOnScene(scene).then(assets => {
+ const APP_DEBUG = false;//Turn true to show player position in browser console
/* --------------------- */
- /* | MOVEMENT | */
+ /* | SCENE CREATION | */
/* --------------------- */
- // Events to listen keyboard inputs
- document.addEventListener('keydown', PlayerMovement.handleKeyDown);
- document.addEventListener('keyup', PlayerMovement.handleKeyUp);
- PlayerMovement.initPhoneMovement();
+ const scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x0EB1D2);
+ const camera = getCamera();
+
+ const renderer = new THREE.WebGLRenderer();
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ document.body.appendChild( renderer.domElement );
+
+ //Here, we create/load every asset used, and add it in the scene
+ addAssetsOnScene(scene).then(assets => {
+
+ /* --------------------- */
+ /* | MOVEMENT | */
+ /* --------------------- */
+ // Events to listen keyboard inputs
+ document.addEventListener('keydown', PlayerMovement.handleKeyDown);
+ document.addEventListener('keyup', PlayerMovement.handleKeyUp);
+ PlayerMovement.initPhoneMovement();
- /* --------------------- */
- /* | ANIMATIONS | */
- /* --------------------- */
- //We can add an animationMixer on objects, and define ready to play actions on objects
- //https://threejs.org/docs/#api/en/animation/AnimationAction
- Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
- Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play();
- Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
- Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();
+ /* --------------------- */
+ /* | ANIMATIONS | */
+ /* --------------------- */
+ //We can add an animationMixer on objects, and define ready to play actions on objects
+ //https://threejs.org/docs/#api/en/animation/AnimationAction
+ Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
+ Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play();
+ Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
+ Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();
- function animate() {
- requestAnimationFrame( animate );
+ function animate() {
+ requestAnimationFrame( animate );
- if(APP_DEBUG)console.log("Player position X : "+assets.player.scene.position.x+ " Y : "+assets.player.scene.position.y);
+ if(APP_DEBUG)console.log("Player position X : "+assets.player.scene.position.x+ " Y : "+assets.player.scene.position.y);
- PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
- PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player
- Animations.updateAnimations(Clock.getDelta());//Playing animations
+ PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
+ PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player
+ Animations.updateAnimations(Clock.getDelta());//Playing animations
- renderer.render( scene, camera );//Calculating and redering new frame
+ renderer.render( scene, camera );//Calculating and redering new frame
- }
- console.log("Ready to render scene, placed objects : "+scene.children.length);
- animate();
-
-});
+ }
+ console.log("Ready to render scene, placed objects : "+scene.children.length);
+ animate();
+
+ });
+}
+document.startThreeJS = startThreeJS; // So I'm sure this function is available in index.html
diff --git a/src/menu.js b/src/menu.js
new file mode 100644
index 0000000..63f0540
--- /dev/null
+++ b/src/menu.js
@@ -0,0 +1,9 @@
+'use strict';
+// Small script used for the menu
+
+import $ from 'jquery';
+
+$("#menu button").on("click", event=>{
+ $("#menu").fadeOut(300);
+ document.startThreeJS();
+});
\ No newline at end of file
