Kevin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Menu

Browse Source 
Still a WIP, but users will be able to choose some settings, select language or maybe use the static website version
This commit is contained in:
LJ5O
2024-03-06 16:37:11 +01:00
parent 5b78deb8af
commit 7b31a9a632
5 changed files with 107 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -4,8 +4,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Kévin Sailly - Portfolio</title> <title>Kévin Sailly - Portfolio</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/menu.css">
</head> </head>
<body> <body>
<!-- That menu is shown at startup, so users can choose their settings -->
<div id="menu">
<h1>Hello world !</h1>
<button>Start</button><!-- See menu.js for threejs startup -->
</div>
<div id="loading"> <div id="loading">
<p>Chargement...<br>Loading...</p> <p>Chargement...<br>Loading...</p>
</div> </div>
@@ -22,6 +29,7 @@
<div id="key_down"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(180deg);"/></div> <div id="key_down"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(180deg);"/></div>
<div id="key_right"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(90deg);"/></div> <div id="key_right"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(90deg);"/></div>
</div> </div>
<script type="module" src="/src/menu.js"></script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

42
public/menu.css Normal file
View File

@@ -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;
}

2
public/style.css
View File

@@ -20,7 +20,7 @@ a {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 2em; font-size: 2em;
z-index:-1; z-index:-2;
} }
#notification_bar { #notification_bar {

34
src/main.js
View File

@@ -5,24 +5,26 @@ import * as PlayerMovement from './utils/playerMovement.js';
import * as Animations from './utils/animateMesh.js'; import * as Animations from './utils/animateMesh.js';
import * as PlayerCollisions from './utils/playerCollisions.js'; import * as PlayerCollisions from './utils/playerCollisions.js';
let Clock = new THREE.Clock(); // Function used to start Threejs, called from index.html
THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader 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 const APP_DEBUG = false;//Turn true to show player position in browser console
/* --------------------- */ /* --------------------- */
/* | SCENE CREATION | */ /* | SCENE CREATION | */
/* --------------------- */ /* --------------------- */
const scene = new THREE.Scene(); const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0EB1D2); scene.background = new THREE.Color(0x0EB1D2);
const camera = getCamera(); const camera = getCamera();
const renderer = new THREE.WebGLRenderer(); const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
//Here, we create/load every asset used, and add it in the scene //Here, we create/load every asset used, and add it in the scene
addAssetsOnScene(scene).then(assets => { addAssetsOnScene(scene).then(assets => {
/* --------------------- */ /* --------------------- */
/* | MOVEMENT | */ /* | MOVEMENT | */
@@ -59,4 +61,6 @@ addAssetsOnScene(scene).then(assets => {
console.log("Ready to render scene, placed objects : "+scene.children.length); console.log("Ready to render scene, placed objects : "+scene.children.length);
animate(); animate();
}); });
}
document.startThreeJS = startThreeJS; // So I'm sure this function is available in index.html

9
src/menu.js Normal file
View File

@@ -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();
});