mirror of
https://dev.s-ul.net/Galexion/MaiMaiDXNet.git
synced 2024-11-24 05:00:11 +01:00
3 words. Nested. Fucking. Divs.
This commit is contained in:
parent
13a06b19da
commit
93a9e0ee64
71
public/javascript/login.js
Normal file
71
public/javascript/login.js
Normal file
@ -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));
|
||||
});
|
105
public/javascript/user.js
Normal file
105
public/javascript/user.js
Normal file
@ -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();
|
@ -2,8 +2,8 @@
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 8em;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
14
readme.md
14
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)
|
||||
- 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
|
||||
|
||||
- Literally everything else
|
||||
- Create Play Data Tab
|
||||
- Create Photos Tab
|
||||
- Create Area Tab
|
||||
- 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.
|
||||
- (Done) Grab the User Profile, and get the custom one if the user icon ID is set to 10.
|
||||
- Fuck you css go kill yourself
|
@ -2,83 +2,14 @@
|
||||
<%- include(rootPath + 'templates/header.ejs' ); %>
|
||||
|
||||
<div id="loginContent">
|
||||
<h1>MaiMaiDX.Net</h1>
|
||||
<h5>Total Users Registered: <%= params.totalUsers %>
|
||||
</h5>
|
||||
|
||||
<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>
|
||||
// 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.-->
|
||||
<script type="text/javascript" src="/javascript/login.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
114
views/user.ejs
114
views/user.ejs
@ -1,95 +1,28 @@
|
||||
<% var rootPath='../' ; %>
|
||||
<%- include(rootPath + 'templates/header.ejs' ); %>
|
||||
<% function normalizeText(text) { return text .normalize('NFD') .replace(/[\u0300-\u036f]/g, '' )
|
||||
.replace(/[\uFF01-\uFF5E]/g, function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xFEE0); }); } %>
|
||||
<% function normalizeText(text) { return text .normalize('NFD') .replace(/[\u0300-\u036f]/g, ''
|
||||
).replace(/[\uFF01-\uFF5E]/g, function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xFEE0); }); } %>
|
||||
<link href="/stylesheets/user.css" rel="stylesheet" type="text/css">
|
||||
<div id="User">
|
||||
<h1>Yo! Welcome Back <%= normalizeText(userdata.user_name) %>!</h1>
|
||||
<button id="clear-storage-btn">Sign Out</button>
|
||||
|
||||
<script>
|
||||
const extId = localStorage.getItem('ext_id');
|
||||
const luid = localStorage.getItem('luid');
|
||||
const clearStorageBtn = document.getElementById('clear-storage-btn');
|
||||
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_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>
|
||||
<%}%>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="user-profile-wrapper">
|
||||
<div class="profile-image"><img id="user-image" src="" alt="User Image" onerror="this.src='assets/icon/UI_Icon_000000.png'"></div>
|
||||
<div class="user-title">
|
||||
<h4 id="user-title-text"></h4>
|
||||
</div>
|
||||
<div class="user-name">
|
||||
<h4><%= normalizeText(userdata.user_name) %></h4>
|
||||
</div>
|
||||
<div class="dx-rating">
|
||||
<h4><%= userdata.music_rating%></h4>
|
||||
</div>
|
||||
<div class="user-class"></div>
|
||||
<div class="awakens">
|
||||
<h4>★ ☓<%= userdata.total_awake%></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
Loading…
Reference in New Issue
Block a user