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 {

4
src/main.js
View File

@@ -5,6 +5,8 @@ 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';
// Function used to start Threejs, called from index.html
function startThreeJS(){
let Clock = new THREE.Clock(); 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 THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
@@ -60,3 +62,5 @@ addAssetsOnScene(scene).then(assets => {
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();
});