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

Site

Browse Source 
- Add real text to game mode
    - Add WASD ZQSD select (front)
This commit is contained in:
Mathis Degryck
2024-10-02 22:10:07 +02:00
parent aab0b9397c
commit d3fcde1f0b
5 changed files with 144 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
View File

@ -66,7 +66,7 @@
</div>
</div>
<div class="centered-text">Click on the screen to play</div>
<div class="centered-text">Click on the TV screen to play</div>
<div id="chatButton">
<span class="notification-badge"></span>
<img src="/static/img/homePage/bulle.png">

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

@ -91,17 +91,50 @@
<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 class="keys">
<div class="key">
<p>W</p>
</div>
<div class="key">
<p>S</p>
</div>
<div class="key">
<img src="/static/img/lobbyPage/up-arrow.svg"></img>
</div>
<div class="key">
<img id="down-key" src="/static/img/lobbyPage/up-arrow.svg"></img>
</div>
</div>
<div class="select-line">
<div class="select-keys">US</div>
<div class="not-select-keys">FR</div>
</div>
</div>
</div>
<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>
<p>Face off in a revolutionary Pong game like never before, where the action takes place on both the floor and ceiling thanks to gravity inverters, offering a fun and unique gameplay experience!</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 class="keys">
<div class="key">
<p>W</p>
</div>
<div class="key">
<p>A</p>
</div>
<div class="key">
<p>S</p>
</div>
<div class="key">
<p>D</p>
</div>
</div>
<div class="select-line">
<div class="select-keys">US</div>
<div class="not-select-keys">FR</div>
</div>
</div>
<div class="skin-select">
<div class="barSelection" id="bar">
@ -114,9 +147,26 @@
<div class="menuSelected" id="rankedSelected">
<div id="whatGame">
<p>AAAAAAAAAA</p>
<p>Prove your skills in ranked Pong mode! Compete against players worldwide, climb the leaderboard, and show everyone you've got what it takes to reach the top!</p>
<span class="line"></span>
<p>BBBBBBBBBB</p>
<div class="keys">
<div class="key">
<p>W</p>
</div>
<div class="key">
<p>A</p>
</div>
<div class="key">
<p>S</p>
</div>
<div class="key">
<p>D</p>
</div>
</div>
<div class="select-line">
<div class="select-keys">US</div>
<div class="not-select-keys">FR</div>
</div>
</div>
<div class="skin-select">
@ -131,13 +181,28 @@
<div class="menuSelected" id="tournamentSelected">
<div id="whatGame">
<p>CCCCCCCCCC</p>
<p>Compete in the ultimate Pong Tournament with up to 8 players, only the best will claim victory!</p>
<span class="line"></span>
<p>DDDDDDDDDD</p>
<br/><br/><br/><br/>
<div class="keys">
<div class="key">
<p>W</p>
</div>
<div class="key">
<p>A</p>
</div>
<div class="key">
<p>S</p>
</div>
<div class="key">
<p>D</p>
</div>
</div>
<div class="select-line">
<div class="select-keys">US</div>
<div class="not-select-keys">FR</div>
</div>
<span class="line"></span>
<p style="text-align: center;">Tournament code</p>
<br/>
<input id="tournamentCode" class="search-input" type="text" placeholder="Enter the tournament code (empty for create one)">
</div>

1
docker-compose/requirements/nginx/static/img/lobbyPage/up-arrow.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12"><path fill="white" d="M6 10.5a.75.75 0 0 0 .75-.75V3.81l1.97 1.97a.75.75 0 0 0 1.06-1.06L6.53 1.47a.75.75 0 0 0-1.06 0L2.22 4.72a.75.75 0 1 0 1.06 1.06l1.97-1.97v5.94c0 .414.336.75.75.75"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

6
docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* typeInvitation.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/28 00:22:31 by edbernar #+# #+# */
/* Updated: 2024/09/28 16:50:17 by edbernar ### ########.fr */
/* Updated: 2024/10/02 16:35:15 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
@ -15,7 +15,7 @@ import { pageRenderer } from '/static/javascript/main.js'
function typeInvitation(content)
{
CN.new("New invitation", content.username + " invit you to play !", null, () => {
CN.new("New invitation", content.username + " invited you to play !", null, () => {
pageRenderer.changePage('waitingGamePage', false, {username: content.username, id: content.invitor});
}, 'Join', 30000);
}

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

@ -241,6 +241,70 @@ body {
align-items: center;
}
.keys {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
align-items: center;
height: 100px;
width: 100%;
}
.key {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: transparent;
border: 4px solid white;
width: 80px;
height: 80px;
font-size: 1.2em;
transition: transform 0.3s ease;
}
.key img {
width: 35px;
height: 35px;
}
#down-key {
transform: scaleY(-1);
}
.select-line {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
}
.select-keys {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
height: 35px;
width: 45%;
background-color: white;
color: #020202;
margin-top: 20px;
}
.not-select-keys {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
height: 35px;
width: 45%;
background-color: transparent;
color: white;
border: 2px solid white;
margin-top: 20px;
}
.barSelection{
margin: 25px;
width: 250px;