1
0
mirror of https://dev.s-ul.net/Galexion/MaiMaiDXNet.git synced 2024-11-27 21:50:48 +01:00

Icon Images & visual clean up

This commit is contained in:
Galexion 2023-02-17 01:23:14 -05:00
parent f280aec60f
commit a8d06a4ae1
7 changed files with 140 additions and 70 deletions

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
config.json config.json
public/images public/images
public/assets
node_modules node_modules

View File

@ -1,4 +1,6 @@
body {
word-wrap: break-word;
}
#ACode { #ACode {
width:225px; width:225px;
@ -8,14 +10,6 @@
margin-top: -1%; margin-top: -1%;
} }
img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
#loginContent { #loginContent {
display: block; display: block;
margin-left: auto; margin-left: auto;
@ -24,7 +18,8 @@ img {
} }
h1 { h1 {
font-size: 3em; font-size: 2em;
text-transform: full-width-to-half-width;
} }
h5 { h5 {
font-size: 1.3em; font-size: 1.3em;
@ -32,3 +27,11 @@ h5 {
h4 { h4 {
font-size: 1.5em; font-size: 1.5em;
} }
#imgHeader {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}

View File

@ -0,0 +1,14 @@
#user-image {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 8em;
height: auto;
}
#User {
display: block;
margin-left: auto;
margin-right: auto;
margin: 1%;
}

View File

@ -8,6 +8,19 @@ Currently, I only have access to AQUA, but ARTEMiS could be supported once AQUA
# How to use: # How to use:
## All Servers
You'll need to extract the assets from the game itself.
in the public folder, the assets should look like this
-- Public
| - Assets
\___ | - icon (icons should go here)
| - more soon
Then, create the `/public/image/` folder. this will be where the images will be stored.
## Aqua ## Aqua
Create a `config.json` file and paste this in, with paths to your instance. Create a `config.json` file and paste this in, with paths to your instance.
@ -19,15 +32,16 @@ Create a `config.json` file and paste this in, with paths to your instance.
} }
``` ```
Then, create the `/public/image/` folder. this will be where the images will be stored.
# Project Progress # Project Progress
ToDo: ToDo:
- Make User Profile on User Page - Make User Profile on User Page (almost done)
- (Done) Get User Data, and send it. - 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
- Grab the User Profile, and get the custom one if the user icon ID is set to 10.
- Literally everything else - Literally everything else
Complete: Complete:
- Sign In Page - 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.

View File

@ -11,4 +11,7 @@
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<div id="imgHeader">
<img id="imgHeader" src="MaiMaiDXNet/maimaidxex.jpg">
</div>

View File

@ -1,8 +1,6 @@
<% var rootPath='../' ; %> <% var rootPath='../' ; %>
<%- include(rootPath + 'templates/header.ejs' ); %> <%- include(rootPath + 'templates/header.ejs' ); %>
<div id="wrapper">
<img src="MaiMaiDXNet/maimaidxex.jpg">
</div>
<div id="loginContent"> <div id="loginContent">
<h1>MaiMaiDX.Net</h1> <h1>MaiMaiDX.Net</h1>
<h5>Total Users Registered: <%= params.totalUsers %> <h5>Total Users Registered: <%= params.totalUsers %>

View File

@ -1,65 +1,102 @@
<% var rootPath='../' ; %> <% var rootPath='../' ; %>
<%- include(rootPath + 'templates/header.ejs' ); %> <%- include(rootPath + 'templates/header.ejs' ); %>
<h1>Yo! Welcome Back ${User}!</h1> <% function normalizeText(text) { return text .normalize('NFD') .replace(/[\u0300-\u036f]/g, '' )
<button id="clear-storage-btn">Sign Out</button> .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> <script>
const extId = localStorage.getItem('ext_id'); const extId = localStorage.getItem('ext_id');
const luid = localStorage.getItem('luid'); const luid = localStorage.getItem('luid');
const clearStorageBtn = document.getElementById('clear-storage-btn'); const clearStorageBtn = document.getElementById('clear-storage-btn');
clearStorageBtn.addEventListener('click', () => { clearStorageBtn.addEventListener('click', () => {
// Remove the cookies // Remove the cookies
function removeCookies() { function removeCookies() {
// Set the expiration date to a date in the past // Set the expiration date to a date in the past
const expirationDate = new Date(0).toUTCString(); const expirationDate = new Date(0).toUTCString();
// Set the ext_id cookie to expire // Set the ext_id cookie to expire
document.cookie = `ext_id=; expires=${expirationDate}`; document.cookie = `ext_id=; expires=${expirationDate}`;
// Set the luid cookie to expire // Set the luid cookie to expire
document.cookie = `luid=; expires=${expirationDate}`; document.cookie = `luid=; expires=${expirationDate}`;
// Set the aime_card_id cookie to expire // Set the aime_card_id cookie to expire
document.cookie = `aime_card_id=; expires=${expirationDate}`; document.cookie = `aime_card_id=; expires=${expirationDate}`;
} }
// Example usage // Example usage
removeCookies(); removeCookies();
console.log('Local storage cleared.'); console.log('Local storage cleared.');
window.location = "/"; window.location = "/";
}); });
// Get the cookie string // Get the cookie string
const cookieString = document.cookie; const cookieString = document.cookie;
// Parse the cookie string and extract the values // Parse the cookie string and extract the values
const cookies = cookieString.split(';'); const cookies = cookieString.split(';');
let ext_id2, luid2; let ext_id2, luid2;
for (let i = 0; i < cookies.length; i++) { for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim(); const cookie = cookies[i].trim();
const cookieParts = cookie.split('='); const cookieParts = cookie.split('=');
if (cookieParts[0] === 'ext_id') { if (cookieParts[0] === 'ext_id') {
ext_id2 = cookieParts[1]; ext_id2 = cookieParts[1];
} }
if (cookieParts[0] === 'luid') { if (cookieParts[0] === 'luid') {
luid2 = cookieParts[1]; luid2 = cookieParts[1];
} }
} }
// Use the values as needed // Use the values as needed
if (ext_id2 && luid2) { if (ext_id2 && luid2) {
console.log(`ext_id: ${ext_id2}, luid: ${luid2}`); console.log(`ext_id: ${ext_id2}, luid: ${luid2}`);
} else {
console.log('User Data Not Detected! Please Sign In.');
window.location = "/";
}
</script>
<details> } else {
<summary>Developer Only Information</summary> console.log('User Data Not Detected! Please Sign In.');
For Development purposes only, send statistics found in this menu when encontering UI Errors. window.location = "/";
</details> }
</script>
<% if(userdata.icon_id===10) { %>
<img id="user-image" src="" alt="User Image">
<script>
const userImage = document.getElementById('user-image');
userImage.src = "images/" + ext_id2 + '-up.jpg';
</script>
<% } else {%>
<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) {
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
Errors.
<details>
<summary>Raw User Details</summary>
<pre><code><%=JSON.stringify(userdata, null, 2)%></code></pre>
</details>
</details>
</div>