diff --git a/index.js b/index.js index d6f02aa..909863c 100644 --- a/index.js +++ b/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); }); diff --git a/public/assets/css/board.css b/public/assets/css/board.css index f86bf56..1911a09 100644 --- a/public/assets/css/board.css +++ b/public/assets/css/board.css @@ -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; diff --git a/public/assets/css/landing.css b/public/assets/css/landing.css new file mode 100644 index 0000000..f79fd57 --- /dev/null +++ b/public/assets/css/landing.css @@ -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); +} \ No newline at end of file diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 127a3b1..a827de0 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -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; diff --git a/public/assets/js/landing.js b/public/assets/js/landing.js new file mode 100644 index 0000000..aea5385 --- /dev/null +++ b/public/assets/js/landing.js @@ -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"); + } +}); \ No newline at end of file diff --git a/public/assets/js/spa_lib.js b/public/assets/js/spa_lib.js index 7630a40..4fb0731 100644 --- a/public/assets/js/spa_lib.js +++ b/public/assets/js/spa_lib.js @@ -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"); diff --git a/views/index.handlebars b/views/index.handlebars index f275418..482e9ba 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,5 +1,4 @@ -{{!--

Statki

--}}