Added privacy policy and more enhancements to the landing page

index.js

@@ -88,6 +88,10 @@ 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);
 
@@ -355,11 +359,11 @@ 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 (session.loginState != 2) {
+    //     socket.on('email login', (email, callback) => {
+    //         callback(session.nickname);
+    //     });
+    // }
 
     if (!await GInfo.isPlayerInGame(socket)) {
         if (session.nickname == null) {

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/landing.css

@@ -38,10 +38,14 @@
     position: absolute;
     display: flex;
     gap: 0.4rem;
+
+    z-index: 1;
+
+    transition: translate 1.5s ease-in-out;
 }
 
 .bgShip#bgs1 {
-    left: 15vw;
+    left: 25vw;
     rotate: -15deg;
     top: 15vh;
 }
@@ -53,7 +57,7 @@
 }
 
 .bgShip#bgs3 {
-    left: 20vw;
+    left: 30vw;
     rotate: 65deg;
     bottom: 25vh;
 }
@@ -64,8 +68,19 @@
     bottom: 25vh;
 }
 
+.bgShip#bgs5 {
+    right: -15vw;
+    rotate: 20deg;
+    top: 25vh;
+}
+
+.bgShip#bgs6 {
+    right: -15vw;
+    rotate: 70deg;
+    bottom: 25vh;
+}
+
 .bgShip .field {
-    /* background-color: var(--field); */
     width: 2rem;
     aspect-ratio: 1;
     border-radius: 20%;
@@ -112,9 +127,9 @@
 }
 
 .container {
-    display: flex;
     height: 100%;
-    opacity: 1;
+    z-index: 10;
+    /* opacity: 1; */
 }
 
 .container div.outer {
@@ -123,5 +138,128 @@
     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/js/landing.js

@@ -37,7 +37,32 @@ document.addEventListener("wheel", (event) => {
                 }, 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

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

views/index.handlebars

@@ -51,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

@@ -20,14 +20,26 @@
             <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="pvpJoinView">
+    <div class="container" id="loginView">
         <div class="outer">
             <h2>{{ t 'login.Login' }}</h2>
             <div class="modes">
                 <div>
-                    <form action="/api/login" method="post">
+                    <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' }}">
@@ -37,26 +49,42 @@
         </div>
     </div>
 
-    <div class="container" id="pvpJoinView">
+    <div class="container" id="authView">
         <div class="outer">
-            <h2>{{ t 'login.Login' }}</h2>
+            <h2>{{ t 'auth.Authorisation' }}</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' }}">
+                    <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>The #1 online multiplayer battleships game</p>
-    <span id="scrolldowntext">SCROLL DOWN</span>
+    <p>{{ t 'landing.The #1 online multiplayer battleships game' }}</p>
+    <span id="scrolldowntext">{{ t 'landing.SCROLL DOWN' }}</span>
 </div>
 
-<script src="/assets/js/landing.js"></script>
+<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>