3 words. Nested. Fucking. Divs.

public/javascript/login.js

@@ -0,0 +1,71 @@
+
+    // Get the cookie string
+    const cookieString = document.cookie;
+
+    // Parse the cookie string and extract the values
+    const cookies = cookieString.split(';');
+    let ext_id, luid;
+
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      const cookieParts = cookie.split('=');
+
+      if (cookieParts[0] === 'ext_id') {
+        ext_id = cookieParts[1];
+      }
+
+      if (cookieParts[0] === 'luid') {
+        luid = cookieParts[1];
+      }
+    }
+
+    // Sends user to User Page if already signed in
+    if (ext_id && luid) {
+      console.log(`User Data Detected, sending to user page.`);
+      window.location = "/user";
+    } else {
+      console.log('User Data Not Detected! Please Sign In.');
+    }
+
+
+    const form = document.getElementById("myForm");
+    form.addEventListener("submit", function(event) {
+      event.preventDefault(); // Prevent the default form submission behavior
+
+      const input = document.getElementsByName("myInput")[0].value;
+      const url = "/api/getExtId"; // Replace with your API endpoint URL
+
+      // Send the input data to the API endpoint using fetch
+      fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            input: input
+          })
+        })
+        .then(response => response.json())
+        .then(data => {
+          console.log(data)
+          let releventData = {
+            luid: data.data.luid,
+            ext_id: data.data.ext_id
+          }
+          console.log(releventData)
+          // Set the cookie expiration to 7 days from now
+          const expirationDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+          // Set the ext_id cookie
+          document.cookie = `ext_id=${data.data.ext_id}; expires=${expirationDate.toUTCString()}`;
+
+          // Set the luid cookie
+          document.cookie = `luid=${data.data.luid}; expires=${expirationDate.toUTCString()}`;
+          console.log(data.data.id)
+          // Set the aime_card_id cookie
+          document.cookie = `aime_card_id=${data.data.id.toString()}; expires=${expirationDate.toUTCString()}`;
+
+          // Set the cookie
+          window.location = "/user";
+        })
+        .catch(error => console.error(error));
+    });

public/javascript/user.js

@@ -0,0 +1,105 @@
+// Get the clear storage button element
+const clearStorageBtn = document.getElementById('clear-storage-btn');
+
+// Add a click event listener to the clear storage button
+clearStorageBtn.addEventListener('click', () => {
+    // Remove the cookies
+    function removeCookies() {
+        // Set the expiration date to a date in the past
+        const expirationDate = new Date(0).toUTCString();
+
+        // Set the ext_id cookie to expire
+        document.cookie = `ext_id=; expires=${expirationDate}`;
+
+        // Set the luid cookie to expire
+        document.cookie = `luid=; expires=${expirationDate}`;
+
+        // Set the aime_card_id cookie to expire
+        document.cookie = `aime_card_id=; expires=${expirationDate}`;
+    }
+
+    // Example usage
+    removeCookies();
+
+    console.log('Local storage cleared.');
+    window.location = "/";
+});
+
+// Get the cookie string
+const cookieString = document.cookie;
+
+// Parse the cookie string and extract the values
+const cookies = cookieString.split(';');
+let ext_id, luid;
+
+for (let i = 0; i < cookies.length; i++) {
+    const cookie = cookies[i].trim();
+    const cookieParts = cookie.split('=');
+
+    if (cookieParts[0] === 'ext_id') {
+        ext_id = cookieParts[1];
+    }
+
+    if (cookieParts[0] === 'luid') {
+        luid = cookieParts[1];
+    }
+}
+
+// Send the user to the sign in page if they aren't already signed in to the website.
+if (ext_id && luid) {
+    console.log(`ext_id: ${ext_id}, luid: ${luid}`);
+
+} else {
+    console.log('User Data Not Detected! Please Sign In.');
+    window.location = "/";
+}
+const userdata = JSON.parse(document.currentScript.getAttribute('data-userdata'));
+
+// Check if the user image element exists
+if(userdata.icon_id === 10) {
+    const userImage = document.getElementById('user-image');
+    userImage.src = "images/" + ext_id + '-up.jpg';
+} else if (document.currentScript.getAttribute('data-userdata')) {
+    const userImage = document.getElementById('user-image');
+    const UI_Icon = userdata.icon_id;
+
+    // Pad the number because game weird
+    function padNumber(num, size) {
+        let s = num + "";
+        while (s.length < size) {
+            s = "0" + s;
+        }
+        return s;
+    }
+
+    // Set the user image source
+    userImage.src = "assets/icon/UI_Icon_" + padNumber(Number(UI_Icon), 6) + '.png';
+}
+
+// title getting
+const request = new XMLHttpRequest();
+request.open('GET', '/assets/metadata/titleMetadata.json', true);
+
+request.onload = function() {
+  if (this.status >= 200 && this.status < 400) {
+    const data = JSON.parse(this.response);
+    const userTitle = document.getElementById('user-title-text');
+    var userTitleText = ""
+    for (title of data) {
+        if(userdata.title_id === title.titleId) {
+             userTitleText = title.name
+             break
+        }
+        continue
+    }
+    userTitle.textContent = userTitleText
+  } else {
+    // handle the error
+  }
+};
+
+request.onerror = function() {
+  // handle the error
+};
+
+request.send();

public/stylesheets/user.css

@@ -2,8 +2,8 @@
     display: block;
     margin-left: auto;
     margin-right: auto;
-    max-width: 8em; 
+    max-width: 100%;
-    height: auto;
+    width: 100%;
 }
 
 #User {
@@ -12,3 +12,79 @@
     margin-right: auto;
     margin: 1%;
 }
+
+#wrapper {
+    display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#user-profile-wrapper {
+    display: inline-grid;
+    margin: 0px;
+    grid-template-areas:
+        "profile-image user-title user-title"
+        "profile-image user-name dx-rating"
+        "profile-image user-class awakens";
+    gap: 10px;
+    border: 2px solid black;
+    border-radius: 10px;
+    justify-items: center;
+    align-items: center;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+@media screen and (max-width: 768px) {
+    #user-profile-wrapper {
+        display: inline-block;
+        margin: 0;
+        padding: 20px;
+        border: 2px solid black;
+        border-radius: 10px;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.profile-image {
+    grid-area: profile-image;
+    max-width: 100%;
+    width: 100%;
+}
+
+.user-title {
+    grid-area: user-title;
+}
+
+.user-name {
+    grid-area: user-name;
+}
+
+.dx-rating {
+    grid-area: dx-rating;
+}
+
+.user-rank {
+    grid-area: user-rank;
+}
+
+.awakens {
+    grid-area: awakens;
+}
+
+h4 {
+    font-size: 2em;
+}
+
+@media (max-width: 768px) {
+    h4 {
+        font-size: 1.5em;
+    }
+}
+
+@media (max-width: 480px) {
+    h4 {
+        font-size: 1.2em;
+    }
+}

readme.md

@@ -36,13 +36,15 @@ Create a `config.json` file and paste this in, with paths to your instance.
 # Project Progress
 
 ToDo:
-- Make User Profile on User Page (almost done)
+- Create Play Data Tab
-    - fuck you go work on divs and grids and spacing and go watch Hyperplexed you no name piece of shit - literally me talking to me
+- Create Photos Tab
-
+- Create Area Tab
-- Literally everything else
+- Create Collection Tab
+- Create Ranking Tab
+- Create Options Tab
+- add a background i guess
 
 Complete:
 - Sign In Page
 - Make User Profile on User Page (almost done)
-    - (Done) Get User Data, and send it.
+    - Fuck you css go kill yourself
-    - (Done) Grab the User Profile, and get the custom one if the user icon ID is set to 10. 

views/index.ejs

@@ -1,85 +1,16 @@
 <% var rootPath='../' ; %>
-    <%- include(rootPath + 'templates/header.ejs' ); %>
+<%- include(rootPath + 'templates/header.ejs' ); %>
-
-        <div id="loginContent">
-            <h1>MaiMaiDX.Net</h1>
-            <h5>Total Users Registered: <%= params.totalUsers %>
-            </h5>
 
+<div id="loginContent">
+  <h1>MaiGateDX</h1>
+  <h5>Total Users Registered: <%= params.totalUsers %></h5>
   <h4>Please Input your 20 Digit Access Code.</h4>
   <form id="myForm">
     <input type="text" name="myInput" maxlength="20" placeholder="0000011111222223333344444" required>
     <button type="submit">Submit</button>
   </form>
+  <script type="text/javascript" src="/javascript/login.js"></script>
+</div>
+</body>
 
-            <script>
+</html> 
-                // Get the cookie string
-                const cookieString = document.cookie;
-
-                // Parse the cookie string and extract the values
-                const cookies = cookieString.split(';');
-                let ext_id2, luid2;
-
-                for (let i = 0; i < cookies.length; i++) {
-                    const cookie = cookies[i].trim();
-                    const cookieParts = cookie.split('=');
-
-                    if (cookieParts[0] === 'ext_id') {
-                        ext_id2 = cookieParts[1];
-                    }
-
-                    if (cookieParts[0] === 'luid') {
-                        luid2 = cookieParts[1];
-                    }
-                }
-
-                // Sends user to User Page if already signed in
-                if (ext_id2 && luid2) {
-                    console.log(`User Data Detected, sending to user page.`);
-                    window.location = "/user";
-                } else {
-                    console.log('User Data Not Detected! Please Sign In.');
-                }
-
-
-                const form = document.getElementById("myForm");
-                form.addEventListener("submit", function (event) {
-                    event.preventDefault(); // Prevent the default form submission behavior
-
-                    const input = document.getElementsByName("myInput")[0].value;
-                    const url = "/api/getExtId"; // Replace with your API endpoint URL
-
-                    // Send the input data to the API endpoint using fetch
-                    fetch(url, {
-                        method: "POST",
-                        headers: {
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify({ input: input })
-                    })
-                        .then(response => response.json())
-                        .then(data => {
-                            console.log(data)
-                            let releventData = { luid: data.data.luid, ext_id: data.data.ext_id }
-                            console.log(releventData)
-                            // Set the cookie expiration to 7 days from now
-                            const expirationDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
-                            // Set the ext_id cookie
-                            document.cookie = `ext_id=${data.data.ext_id}; expires=${expirationDate.toUTCString()}`;
-
-                            // Set the luid cookie
-                            document.cookie = `luid=${data.data.luid}; expires=${expirationDate.toUTCString()}`;
-                            console.log(data.data.id)
-                            // Set the aime_card_id cookie
-                            document.cookie = `aime_card_id=${data.data.id.toString()}; expires=${expirationDate.toUTCString()}`;
-
-                            // Set the cookie
-                            window.location = "/user";
-                        })
-                        .catch(error => console.error(error));
-                });
-            </script> <!-- ToDo: Move this script to a seperate JS file.-->
-        </div>
-        </body>
-
-        </html>

views/user.ejs

@@ -1,95 +1,28 @@
 <% var rootPath='../' ; %>
-    <%- include(rootPath + 'templates/header.ejs' ); %>
+<%- include(rootPath + 'templates/header.ejs' ); %>
-        <% function normalizeText(text) { return text .normalize('NFD') .replace(/[\u0300-\u036f]/g, '' )
+<% function normalizeText(text) { return text .normalize('NFD') .replace(/[\u0300-\u036f]/g, ''
-            .replace(/[\uFF01-\uFF5E]/g, function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xFEE0); }); } %>
+            ).replace(/[\uFF01-\uFF5E]/g, function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xFEE0); }); } %>
-            <link href="/stylesheets/user.css" rel="stylesheet" type="text/css">
+<link href="/stylesheets/user.css" rel="stylesheet" type="text/css">
-            <div id="User">
+<div id="User">
   <h1>Yo! Welcome Back <%= normalizeText(userdata.user_name) %>!</h1>
-                <button id="clear-storage-btn">Sign Out</button>
+  <div id="wrapper">
-
+  <div id="user-profile-wrapper">
-                <script>
+    <div class="profile-image"><img id="user-image" src="" alt="User Image" onerror="this.src='assets/icon/UI_Icon_000000.png'"></div>
-                    const extId = localStorage.getItem('ext_id');
+    <div class="user-title">
-                    const luid = localStorage.getItem('luid');
+      <h4 id="user-title-text"></h4>
-                    const clearStorageBtn = document.getElementById('clear-storage-btn');
+    </div>
-                    clearStorageBtn.addEventListener('click', () => {
+    <div class="user-name">
-                        // Remove the cookies
+      <h4><%= normalizeText(userdata.user_name) %></h4>
-                        function removeCookies() {
+    </div>
-                            // Set the expiration date to a date in the past
+    <div class="dx-rating">
-                            const expirationDate = new Date(0).toUTCString();
+      <h4><%= userdata.music_rating%></h4>
-
+    </div>
-                            // Set the ext_id cookie to expire
+    <div class="user-class"></div>
-                            document.cookie = `ext_id=; expires=${expirationDate}`;
+    <div class="awakens">
-
+      <h4>★ ☓<%= userdata.total_awake%></h4>
-                            // Set the luid cookie to expire
+    </div>
-                            document.cookie = `luid=; expires=${expirationDate}`;
+  </div>
-
+</div>
-                            // Set the aime_card_id cookie to expire
-                            document.cookie = `aime_card_id=; expires=${expirationDate}`;
-                        }
-
-                        // Example usage
-                        removeCookies();
-
-                        console.log('Local storage cleared.');
-                        window.location = "/";
-                    });
-
-                    // Get the cookie string
-                    const cookieString = document.cookie;
-
-                    // Parse the cookie string and extract the values
-                    const cookies = cookieString.split(';');
-                    let ext_id2, luid2;
-
-                    for (let i = 0; i < cookies.length; i++) {
-                        const cookie = cookies[i].trim();
-                        const cookieParts = cookie.split('=');
-
-                        if (cookieParts[0] === 'ext_id') {
-                            ext_id2 = cookieParts[1];
-                        }
-
-                        if (cookieParts[0] === 'luid') {
-                            luid2 = cookieParts[1];
-                        }
-                    }
-
-                    // Sends user to the sign in page if they aren't already signed in to the website.
-                    if (ext_id2 && luid2) {
-                        console.log(`ext_id: ${ext_id2}, luid: ${luid2}`);
-
-                    } else {
-                        console.log('User Data Not Detected! Please Sign In.');
-                        window.location = "/";
-                    }
-                </script>
-
-                <% if(userdata.icon_id===10) { %> <!-- If the user icon id is set to 10, it's a custom image and you need to grab the image that the user uploaded. -->
-                    <img id="user-image" src="" alt="User Image">
-
-                    <script>
-                        const userImage = document.getElementById('user-image');
-                        userImage.src = "images/" + ext_id2 + '-up.jpg';
-                    </script>
-
-                    <% } else {%> <!-- If Not, use the userdata.icon_id variable to find which icon you need. -->
-                        <img id="user-image" src="" alt="User Image">
-
-                        <script data-userdata="<%=JSON.stringify(userdata)%>">
-                            const userdata = JSON.parse(document.currentScript.getAttribute('data-userdata'));
-                            const userImage = document.getElementById('user-image');
-                            const UI_Icon = userdata.icon_id
-                            function padNumber(num, size) { // pad the number because haha game weird
-                                var s = num + "";
-                                while (s.length < size) s = "0" + s;
-                                return s;
-                            }
-
-                            // Usage:
-                            userImage.src = "assets/icon/UI_Icon_" + padNumber(Number(UI_Icon),6) + '.png';
-                        </script>
-                        <%}%>
-
   <details>
     <summary>Developer Only Information</summary>
     For Development purposes only, send statistics found in this menu when encontering UI
@@ -99,4 +32,11 @@
       <pre><code><%=JSON.stringify(userdata, null, 2)%></code></pre>
     </details>
   </details>
-            </div>
+  <button id="clear-storage-btn">Sign Out</button>
+
+</div>
+
+<script type="text/javascript" src="/javascript/user.js" data-userdata="<%=JSON.stringify(userdata)%>"></script>
+</body>
+
+</html>