Added privacy policy and more enhancements to the landing page

index.js

@@ -88,11 +88,22 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 io.engine.use(sessionMiddleware);
 
+app.get('/privacy', (req, res) => {
+    res.render("privacy");
+});
+
 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 +359,18 @@ io.on('connection', async (socket) => {
     const req = socket.request;
     const session = req.session;
     socket.session = session;
+    // 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;
         }
 
-    if (!await GInfo.isPlayerInGame(socket)) {
         socket.on('whats my nick', (callback) => {
             callback(session.nickname);
         });

lang/en.json

@@ -9,6 +9,13 @@
         "Connection error": "Connection error"
     },
 
+    "landing": {
+        "The #1 online multiplayer battleships game": "The #1 online multiplayer battleships game",
+        "SCROLL DOWN": "SCROLL DOWN",
+
+        "Privacy policy": "Privacy policy"
+    },
+
     "menu": {
         "navbar": {
             "Main menu": "Main menu",

lang/pl.json

@@ -9,6 +9,13 @@
         "Connection error": "Błąd połączenia"
     },
 
+    "landing": {
+        "The #1 online multiplayer battleships game": "Najlepsza wielosobowa gra w statki",
+        "SCROLL DOWN": "SCROLLUJ W DÓŁ",
+
+        "Privacy policy": "Polityka prywatności"
+    },
+
     "menu": {
         "navbar": {
             "Main menu": "Menu główne",

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;

public/assets/css/landing.css

@@ -0,0 +1,265 @@
+.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;
+
+    z-index: 1;
+
+    transition: translate 1.5s ease-in-out;
+}
+
+.bgShip#bgs1 {
+    left: 25vw;
+    rotate: -15deg;
+    top: 15vh;
+}
+
+.bgShip#bgs2 {
+    right: 15vw;
+    rotate: 15deg;
+    top: 25vh;
+}
+
+.bgShip#bgs3 {
+    left: 30vw;
+    rotate: 65deg;
+    bottom: 25vh;
+}
+
+.bgShip#bgs4 {
+    right: 20vw;
+    rotate: -50deg;
+    bottom: 25vh;
+}
+
+.bgShip#bgs5 {
+    right: -15vw;
+    rotate: 20deg;
+    top: 25vh;
+}
+
+.bgShip#bgs6 {
+    right: -15vw;
+    rotate: 70deg;
+    bottom: 25vh;
+}
+
+.bgShip .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 {
+    height: 100%;
+    z-index: 10;
+    /* opacity: 1; */
+}
+
+.container div.outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    z-index: 10;
+
+    transform: translateY(-3rem);
+}
+
+@keyframes OutAnim {
+    from {transform: translateX(0)}
+    to {transform: translateX(-5%);}
+}
+
+@keyframes InAnim {
+    from {transform: translateX(5%)}
+    to {transform: translateX(0%);}
+}
+
+#loginView .modes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem;
+}
+
+#loginView .modes div {
+    height: 7rem;
+    width: 15rem;
+    background-color: black;
+    border: solid 1px white;
+    border-radius: 15px;
+    user-select: none;
+    padding: 2rem 3rem;
+}
+
+#loginView form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+#loginView form input {
+    background-color: black;
+    color: white;
+    border-radius: 15px;
+    border: 1px solid white;
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 0.5rem 2rem;
+    outline: none;
+}
+
+#loginView form input[type=submit] {
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.3s;
+}
+
+#loginView form input[type=submit]:hover {
+    background-color: white;
+    color: black;
+}
+
+#authView .modes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem;
+}
+
+#authView .modes div {
+    height: 13rem;
+    width: 15rem;
+    background-color: black;
+    border: solid 1px white;
+    border-radius: 15px;
+    user-select: none;
+    padding: 2rem 3rem;
+}
+
+#authView form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+#authView form input {
+    background-color: black;
+    color: white;
+    border-radius: 15px;
+    border: 1px solid white;
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 0.5rem 2rem;
+    outline: none;
+}
+
+#authView form input[type=submit] {
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.3s;
+}
+
+#authView form input[type=submit]:hover {
+    background-color: white;
+    color: black;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0px;
+    /* margin: 0; */
+    left: 50vw;
+    transform: translateX(-50%);
+    z-index: 50;
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+}
+
+.footer a {
+    color: white;
+    margin: 0 1rem;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}

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;

public/assets/js/landing.js

@@ -0,0 +1,68 @@
+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);
+        const fields = document.querySelectorAll(".field");
+        fields.forEach(field => {
+            if (!field.id) {
+                $(field).css("scale", "1");
+            }
+        });
+    } else if (event.deltaY < 0) {
+        $(".loginContainer").removeClass("active");
+    }
+});
+
+switchView("loginView");
+
+const form = document.getElementById('loginForm');
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    console.log("a");
+    switchView("authView");
+    progressParalax();
+});
+
+var parallaxTranslateX = 0;
+
+function progressParalax() {
+    parallaxTranslateX -= 30;
+    $(".bgShip.big").css("translate", `${parallaxTranslateX}vw`);
+    $(".bgShip.small").css("translate", `${parallaxTranslateX * 0.625}vw`);
+}

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");
@@ -39,11 +39,9 @@ window.addEventListener("load", () => {
 
     //     if (elem != null) {
     //         switchView(elem.id, true);
-    //         activeView = elem.id;
     //     }
     // } else {
-        switchView("mainMenuView");
+        // switchView("mainMenuView");
-        activeView = "mainMenuView";
     //}
 });
 

views/index.handlebars

@@ -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>
         
@@ -52,7 +51,7 @@
         <h2>{{ t 'menu.PvP/Join.PvP / Join' }}</h2>
         <div class="modes">
             <div>
-                <form action="/api/joinme" id="pvpJoinForm">
+                <form action="#" id="pvpJoinForm">
                     <input type="text" maxlength="6" id="pvpJoinCode" placeholder="{{ t 'menu.PvP/Join.Room code' }}" autocomplete="off">
                     <input type="submit" value="{{ t 'menu.PvP/Join.Join' }}">
                 </form>

views/landing.handlebars

@@ -0,0 +1,90 @@
+<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 class="bgShip small ally" id="bgs5">
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+        </div>
+        <div class="bgShip big enemy" id="bgs6">
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+        </div>
+    </div>
+
+    <div class="container" id="loginView">
+        <div class="outer">
+            <h2>{{ t 'login.Login' }}</h2>
+            <div class="modes">
+                <div>
+                    <form action="#" method="post" id="loginForm">
+                        <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="authView">
+        <div class="outer">
+            <h2>{{ t 'auth.Authorisation' }}</h2>
+            <div class="modes">
+                <div>
+                    <p>{{ t 'auth.Enter the code sent to your e-mail box' }}</p>
+                    <form action="/api/auth" method="post">
+                        <input type="text" name="code" placeholder="{{ t 'auth.Code' }}" style="font-size: 1rem;"
+                            minlength="8" maxlength="10" autocomplete="off">
+                        <input type="submit" value="{{ t 'auth.Login' }}">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p class="footer">© 2024 MCJK <a href="/privacy">{{ t 'landing.Privacy policy' }}</a></p>
+</div>
+
+<div class="landing">
+    <h1>Statki</h1>
+    <p>{{ t 'landing.The #1 online multiplayer battleships game' }}</p>
+    <span id="scrolldowntext">{{ t 'landing.SCROLL DOWN' }}</span>
+</div>
+
+<script>
+    window.locale = {
+        "Reconnecting": "{{ t 'errors.Reconnecting' }}",
+        "Reconnected": "{{ t 'errors.Reconnected' }}",
+        "Reconnection error occured": "{{ t 'errors.Reconnection error occured' }}",
+        "Reconnection failed": "{{ t 'errors.Reconnection failed' }}",
+        "Disconnected": "{{ t 'errors.Disconnected' }}",
+        "Try to refresh the page if this error reoccurs": "{{ t 'errors.Try to refresh the page if this error reoccurs' }}",
+        "Connection error": "{{ t 'errors.Connection error' }}",
+    };
+</script>
+<script src="/assets/js/spa_lib.js"></script>
+<script src="/assets/js/landing.js"></script>
+<script src="/assets/js/socket-err-handler.js"></script>

views/privacy.handlebars

@@ -0,0 +1,32 @@
+<style>
+    .title {
+        text-align: center;
+    }
+</style>
+<h1 class="title">Statki - Privacy policy</h1>
+<h2>Who we are</h2>
+<p>
+    When referencing to "us" we mean the developer(s) of Statki - An online multiplayer browser game at statki.maciejka.xyz. We do not work commercially and are not related to any company.
+</p>
+
+<h2>Data we collect</h2>
+<p>
+    All of the data we collect is used for functionality features. Some is provided by you and some is collected automatically.
+</p>
+
+<h3>Information you provide us:</h3>
+<p>
+    - Account information: E-mail address, nickname.<br>
+    - Settings, this includes: Preffered language.<br>
+    - Information from actions taken by you: Matches you have played (which includes: your opponent, duration of the match, date of the match, your match statistics)<br>
+    - Optional information: Badges you own - they are shown on your profile and strictly associated with it, you can obtain them optionally from various events. This includes the badge type and the achievement date.<br>
+</p>
+
+<h3>Information collected automatically:</h3>
+<p>
+    - Information about your device (IP address, browser version, device operating system, device language)<br>
+    - Information on how you use our service. How often you visit the website, on which page.
+</p>
+
+<h2>Our use of your data</h2>
+<p>We use your data only to provide you with services. We do not share it with third parties, nor use it for advertising.</p>