mirror of
https://github.com/MaciejkaG/statki.git
synced 2024-11-30 00:42:54 +01:00
Major improvements and a brand new landing page with login
This commit is contained in:
MaciejkaG
parent
99d26fffdc
commit
8e5682dad8
21
index.js
21
index.js
@ -92,7 +92,14 @@ app.get('/', async (req, res) => {
|
||||
let login = loginState(req);
|
||||
|
||||
if (login != 2) {
|
||||
res.redirect('/login');
|
||||
const locale = new Lang(req.acceptsLanguages());
|
||||
|
||||
res.render('landing', {
|
||||
helpers: {
|
||||
t: (key) => { return locale.t(key) }
|
||||
}
|
||||
});
|
||||
// res.redirect('/login');
|
||||
} else if (req.session.nickname == null) {
|
||||
auth.getLanguage(req.session.userId).then(language => {
|
||||
var locale;
|
||||
@ -348,12 +355,18 @@ io.on('connection', async (socket) => {
|
||||
const req = socket.request;
|
||||
const session = req.session;
|
||||
socket.session = session;
|
||||
if (session.nickname==null) {
|
||||
socket.disconnect();
|
||||
return;
|
||||
if (session.loginState != 2) {
|
||||
socket.on('email login', (email, callback) => {
|
||||
callback(session.nickname);
|
||||
});
|
||||
}
|
||||
|
||||
if (!await GInfo.isPlayerInGame(socket)) {
|
||||
if (session.nickname == null) {
|
||||
socket.disconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
socket.on('whats my nick', (callback) => {
|
||||
callback(session.nickname);
|
||||
});
|
||||
|
||||
@ -172,7 +172,7 @@ h1,h2,h3,h4,h5,h6 {
|
||||
#secondaryBoard, #board {
|
||||
position: absolute;
|
||||
transition: transform 0.3s;
|
||||
background: black;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.ownBoardInfo {
|
||||
@ -228,7 +228,7 @@ h1,h2,h3,h4,h5,h6 {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: rgb(0, 0, 0, 0.6);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
z-index: 999;
|
||||
|
||||
127
public/assets/css/landing.css
Normal file
127
public/assets/css/landing.css
Normal file
@ -0,0 +1,127 @@
|
||||
.landing {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translateY(-3rem);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.landing p {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.landing span {
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bgShip {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.bgShip#bgs1 {
|
||||
left: 15vw;
|
||||
rotate: -15deg;
|
||||
top: 15vh;
|
||||
}
|
||||
|
||||
.bgShip#bgs2 {
|
||||
right: 15vw;
|
||||
rotate: 15deg;
|
||||
top: 25vh;
|
||||
}
|
||||
|
||||
.bgShip#bgs3 {
|
||||
left: 20vw;
|
||||
rotate: 65deg;
|
||||
bottom: 25vh;
|
||||
}
|
||||
|
||||
.bgShip#bgs4 {
|
||||
right: 20vw;
|
||||
rotate: -50deg;
|
||||
bottom: 25vh;
|
||||
}
|
||||
|
||||
.bgShip .field {
|
||||
/* background-color: var(--field); */
|
||||
width: 2rem;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 20%;
|
||||
|
||||
scale: 0;
|
||||
transition: scale 0.25s 0.05s;
|
||||
}
|
||||
|
||||
.bgShip.ally .field {
|
||||
background-color: var(--ship-valid);
|
||||
}
|
||||
|
||||
.bgShip.enemy .field {
|
||||
background-color: var(--ship-invalid);
|
||||
}
|
||||
|
||||
.bgShip.big {
|
||||
scale: 2;
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.bgShip.small {
|
||||
scale: 1.25;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.loginContainer {
|
||||
position: fixed;
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
transition: all 0.5s 0.3s ease, top 0.6s ease-in-out;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
|
||||
.loginContainer.active {
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container div.outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.bshipstoast {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(15px);
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
@ -253,7 +253,7 @@ nav span:hover {
|
||||
}
|
||||
|
||||
#profileView .matchList .match {
|
||||
background: rgba(24, 24, 24, 1);
|
||||
background-color: rgba(24, 24, 24, 1);
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
padding: 0.7rem;
|
||||
|
||||
43
public/assets/js/landing.js
Normal file
43
public/assets/js/landing.js
Normal file
@ -0,0 +1,43 @@
|
||||
String.prototype.replaceAt = function (index, replacement) {
|
||||
return this.substring(0, index) + replacement + this.substring(index + replacement.length);
|
||||
}
|
||||
|
||||
const charset = ["0", "1", "!", "@", "#", "$", "%", "&"];
|
||||
|
||||
setInterval(() => {
|
||||
var content = $("#scrolldowntext").html();
|
||||
const len = content.length;
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const duration = Math.random() * 20 + 40;
|
||||
|
||||
setTimeout(() => {
|
||||
let previousChar = content.charAt(i);
|
||||
|
||||
let randomChar = charset[Math.floor(Math.random() * charset.length)];
|
||||
content = content.replaceAt(i, randomChar);
|
||||
|
||||
$("#scrolldowntext").html(content);
|
||||
|
||||
setTimeout(() => {
|
||||
content = content.replaceAt(i, previousChar);
|
||||
$("#scrolldowntext").html(content);
|
||||
}, duration * len + duration * i);
|
||||
}, duration * i);
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
document.addEventListener("wheel", (event) => {
|
||||
if (event.deltaY > 0) {
|
||||
$(".loginContainer").addClass("active");
|
||||
setTimeout(() => {
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
setTimeout(() => {
|
||||
$(`#f${i}`).css("scale", "1");
|
||||
}, 100 * (i - 1));
|
||||
}
|
||||
}, 400);
|
||||
} else if (event.deltaY < 0) {
|
||||
$(".loginContainer").removeClass("active");
|
||||
}
|
||||
});
|
||||
@ -2,7 +2,7 @@ var activeView;
|
||||
var returnLock = false;
|
||||
|
||||
function switchView(viewContainerId, useReplaceState=false) {
|
||||
if (!returnLock) {
|
||||
if (!returnLock && viewContainerId !== activeView) {
|
||||
$(`.container`).css({ opacity: 0, animation: "OutAnim 0.2s 1 ease" });
|
||||
setTimeout(() => {
|
||||
$(`.container`).css("display", "none");
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<nav><span onclick="switchView('settingsView')">{{ t 'menu.navbar.Settings' }}</span><span onclick="switchView('mainMenuView')">{{ t 'menu.navbar.Main menu' }}</span> <span id="profileButton" onclick="switchView('profileView')">{{ t 'menu.navbar.Profile' }}</span></nav>
|
||||
{{!-- <h1 class="header">Statki</h1> --}}
|
||||
<div class="container" id="mainMenuView" data-path="/">
|
||||
<div>
|
||||
|
||||
|
||||
62
views/landing.handlebars
Normal file
62
views/landing.handlebars
Normal file
@ -0,0 +1,62 @@
|
||||
<link rel="stylesheet" href="/assets/css/landing.css">
|
||||
|
||||
<div class="loginContainer">
|
||||
<div class="background">
|
||||
<div class="bgShip small ally" id="bgs1">
|
||||
<div class="field" id="f1"></div>
|
||||
<div class="field" id="f2"></div>
|
||||
<div class="field" id="f3"></div>
|
||||
<div class="field" id="f4"></div>
|
||||
</div>
|
||||
<div class="bgShip big ally" id="bgs2">
|
||||
<div class="field" id="f8"></div>
|
||||
</div>
|
||||
<div class="bgShip big enemy" id="bgs3">
|
||||
<div class="field" id="f5"></div>
|
||||
<div class="field" id="f6"></div>
|
||||
<div class="field" id="f7"></div>
|
||||
</div>
|
||||
<div class="bgShip small enemy" id="bgs4">
|
||||
<div class="field" id="f9"></div>
|
||||
<div class="field" id="f10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="pvpJoinView">
|
||||
<div class="outer">
|
||||
<h2>{{ t 'login.Login' }}</h2>
|
||||
<div class="modes">
|
||||
<div>
|
||||
<form action="/api/login" method="post">
|
||||
<input type="email" name="email" placeholder="{{ t 'login.E-mail address' }}"
|
||||
style="font-size: 1rem;">
|
||||
<input type="submit" value="{{ t 'login.Proceed' }}">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="pvpJoinView">
|
||||
<div class="outer">
|
||||
<h2>{{ t 'login.Login' }}</h2>
|
||||
<div class="modes">
|
||||
<div>
|
||||
<form action="/api/login" method="post">
|
||||
<input type="email" name="email" placeholder="{{ t 'login.E-mail address' }}"
|
||||
style="font-size: 1rem;">
|
||||
<input type="submit" value="{{ t 'login.Proceed' }}">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="landing">
|
||||
<h1>Statki</h1>
|
||||
<p>The #1 online multiplayer battleships game</p>
|
||||
<span id="scrolldowntext">SCROLL DOWN</span>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/landing.js"></script>
|
||||
Loading…
Reference in New Issue
Block a user