tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- Add skin selector in lobby page
    - change div with info and selectors in lobby page
This commit is contained in:
Kum1ta
2024-09-25 00:10:43 +02:00
parent 10d466a964
commit 7b49d011df
8 changed files with 164 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
View File

@ -74,21 +74,52 @@
</div>
</div>
<div id="whatGame">
<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
<span class="line"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
<!--------- FOR MATHIS : I made some changes here ---------->
<div class="menuSelected" id="multiLocalSelected">
<div id="whatGame">
<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
<span class="line"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
</div>
</div>
<div class="skin-select">
<div id="bar">
<div class="menuSelected" id="multiOnlineSelected">
<div id="whatGame">
<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
<span class="line"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet velit vitae lorem tempor auctor. In tempor ac ex ut finibus. Duis lobortis non justo eu venenatis.</p>
</div>
<div id="goal">
<div class="skin-select">
<div id="bar">
</div>
<div id="goal">
</div>
</div>
</div>
<div class="menuSelected" id="rankedSelected">
<div id="whatGame">
<p>Bonsoir non ?</p>
</div>
<div class="skin-select">
<!-- Make sure you have ids and classes to make multiple "bars" and "goals" -->
</div>
</div>
<div class="menuSelected" id="tournamentSelected">
<div id="whatGame">
<p>Bonsoir non ?</p>
</div>
<div class="skin-select">
<!-- Make sure you have ids and classes to make multiple "bars" and "goals" -->
</div>
</div>
<!--------------------- END OF CHANGES --------------------->
</div>
</div>
<div class="bottom">

BIN
docker-compose/requirements/nginx/static/img/skin/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

BIN
docker-compose/requirements/nginx/static/img/skin/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docker-compose/requirements/nginx/static/img/skin/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
docker-compose/requirements/nginx/static/img/skin/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

81
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

@ -6,22 +6,33 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/09/13 15:36:35 by edbernar ### ########.fr */
/* Updated: 2024/09/25 00:05:55 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
let actualBarSelecor = null;
let actualGoalSelecter = null;
let actualBarSelecor = null;
let actualGoalSelecter = null;
let lastSelected = null;
class barSelecter
{
scene = null;
renderer = null;
camera = null;
ambiantLight = new THREE.AmbientLight(0xffffff, 35);
bar = this.createBarPlayer(0xe3e3e3)
spotLight = new THREE.SpotLight(0xffffff, 5);
availableSkins = [
{id: 0, color: 0xff53aa, texture: null},
{id: 1, color: 0xaa24ea, texture: null},
{id: 2, color: 0x2c9c49, texture: null},
{id: 3, color: 0x101099, texture: null},
{id: 4, color: null, texture: '/static/img/skin/1.jpg'},
{id: 5, color: null, texture: '/static/img/skin/2.jpg'},
{id: 6, color: null, texture: '/static/img/skin/3.jpg'},
{id: 7, color: null, texture: '/static/img/skin/4.jpg'},
]
selected = lastSelected ? lastSelected : this.availableSkins[0];
bar = this.createBarPlayer(this.selected.color ? this.selected.color : this.selected.texture);
constructor(div)
{
@ -32,20 +43,70 @@ class barSelecter
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.scene.add(this.ambiantLight);
this.scene.add(this.spotLight);
this.camera.position.set(0.7, 0.5, 0.7);
this.spotLight.position.set(0.7, 0.5, 0.7);
div.appendChild(this.renderer.domElement);
actualBarSelecor = this;
this.scene.add(this.bar);
actualBarSelecor.camera.lookAt(actualBarSelecor.bar.position);
this.spotLight.target = this.bar;
this.spotLight.lookAt(this.bar.position);
this.renderer.setAnimationLoop(this.#loop);
div.addEventListener('click', () => {
const popup = document.getElementById('popup-background');
const skins = document.getElementsByClassName('color-box');
popup.style.display = 'flex';
for (let i = 0; i < skins.length; i++)
{
skins[i].setAttribute('skinId', this.availableSkins[i].id);
if (this.availableSkins[i].color != null)
skins[i].style.backgroundColor = `#${this.availableSkins[i].color.toString(16)}`;
else
skins[i].style.backgroundImage = `url("${this.availableSkins[i].texture}")`
skins[i].removeEventListener('click', this.changeSkin.bind(this));
skins[i].addEventListener('click', this.changeSkin.bind(this));
}
popup.removeEventListener('click', this.hideSkinSelector);
popup.addEventListener('click', this.hideSkinSelector);
})
}
hideSkinSelector(event)
{
const popup = document.getElementById('popup-background');
if (event.target.getAttribute('class') == 'popup-background')
popup.style.display = 'none';
}
changeSkin (event)
{
const popup = document.getElementById('popup-background');
const id = event.target.getAttribute('skinId');
popup.style.display = 'none';
console.log(this.bar);
this.bar.material.dispose();
lastSelected = this.availableSkins[id];
if (this.availableSkins[id].color != null)
this.bar.material = new THREE.MeshPhysicalMaterial({color: this.availableSkins[id].color});
else
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(this.availableSkins[id].texture)});
this.selected = this.availableSkins[id];
}
createBarPlayer(color)
{
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
const material = new THREE.MeshPhysicalMaterial({color: color});
const mesh = new THREE.Mesh(geometry, material);
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
let material = null;
if (typeof(color) == 'number')
material = new THREE.MeshPhysicalMaterial({color: color});
else
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(color)});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
return (mesh);

45
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/22 23:43:07 by edbernar ### ########.fr */
/* Updated: 2024/09/24 23:56:38 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -64,10 +64,9 @@ class LobbyPage
{
document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
}
barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal'));
startButton.addEventListener('click', startMode);
methButton.addEventListener('click', goBackHome);
document.getElementsByClassName('menuSelected')[gameMode].style.display = 'flex';
}
static dispose()
@ -180,28 +179,68 @@ function hideGameMode()
function selectGameModeOne()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 0)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
}
document.getElementsByClassName('menuSelected')[0].style.display = 'flex';
gameMode = 0;
}
function selectGameModeTwo()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 1)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
}
document.getElementsByClassName('menuSelected')[1].style.display = 'flex';
if (barSelector)
barSelector.dispose();
if (goalSelector)
goalSelector.dispose();
document.getElementById('bar').innerHTML = '';
document.getElementById('goal').innerHTML = '';
barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal'));
gameMode = 1;
}
function selectGameModeThree()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 2)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
}
document.getElementsByClassName('menuSelected')[2].style.display = 'flex';
gameMode = 2;
}
function selectGameModeFour()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 3)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
{
menuList[i].style.display = 'none';
}
document.getElementsByClassName('menuSelected')[3].style.display = 'flex';
gameMode = 3;
}

12
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -74,8 +74,6 @@ body {
justify-content: space-between;
}
/* POUR EDDY : CHANGE HERE FOR SELECTING THE SKIN */
.popup-background {
display: none;
position: fixed;
@ -86,6 +84,7 @@ body {
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 700;
}
.popup-skin {
@ -424,4 +423,13 @@ body {
padding: 5px;
border-radius: 50%;
margin-left: 10px;
}
.menuSelected {
display: flex;
flex-direction: row;
}
.menuSelected {
display: none;
}