mirror of
https://dev.s-ul.net/Galexion/MaiMaiDXNet.git
synced 2024-11-24 05:20:10 +01:00
New Score Grid Layout.
This commit is contained in:
Galexion
parent
54300c933e
commit
cc3dacadeb
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,5 +1,7 @@
|
||||
config.json
|
||||
public/images
|
||||
public/assets
|
||||
public/javascript/user copy.js
|
||||
node_modules
|
||||
todo
|
||||
.DS_Store
|
||||
@ -215,6 +215,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
|
||||
continue
|
||||
}
|
||||
let diffucultyData = song.difficultys.Notes[score.level] // get difficulty information
|
||||
const tasGrid = document.createElement('div');
|
||||
|
||||
if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
|
||||
console.log(song)
|
||||
@ -224,62 +225,117 @@ async function userPlayLogFormatter(div, loadMoreButton) {
|
||||
continue;
|
||||
}
|
||||
console.log(song)
|
||||
scoreDiv.innerHTML = `
|
||||
// Song Title
|
||||
tasGrid.innerHTML = `
|
||||
<div class="score-title">
|
||||
<h4>${song.name.str} || ${new Date(score.user_play_date||score.userPlayDate)}</h4>
|
||||
<h4 class="score-title">${song.name.str}</h4>
|
||||
</div>
|
||||
`;
|
||||
/* Score Jacket Image */
|
||||
// Song Jacket
|
||||
const scoreJacketDiv = document.createElement('div');
|
||||
let jacket = document.createElement('img');
|
||||
jacket.addEventListener("error", function () {
|
||||
this.src = "assets/icon/UI_Icon_000000.png";
|
||||
});
|
||||
scoreJacketDiv.classList.add('score-jacket');
|
||||
jacket.classList.add('score-jacket');
|
||||
jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(song.InGameID), 6) + '.png';
|
||||
scoreJacketDiv.append(jacket)
|
||||
scoreDiv.append(scoreJacketDiv)
|
||||
|
||||
/* Achivement Box */
|
||||
|
||||
const scoreAchivementDiv = document.createElement('div');
|
||||
scoreAchivementDiv.classList.add('score-achivement');
|
||||
scoreAchivementDiv.innerHTML = `<h5>ACHIVEMENT</h5>`;
|
||||
let achivementPercentage = document.createElement('h5');
|
||||
let achivementPercentage = document.createElement('h4');
|
||||
let achivementNumber = padNumber(Number(score.achievement), 7)
|
||||
achivementPercentage.textContent = `${achivementNumber / 10000}%`;
|
||||
scoreAchivementDiv.append(achivementPercentage)
|
||||
scoreDiv.append(scoreAchivementDiv)
|
||||
tasGrid.append(scoreAchivementDiv)
|
||||
|
||||
/* Score Grade */
|
||||
|
||||
let scoreGrades = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "S+", "SS", "SS+", "SSS", "SSS+"]
|
||||
let SGimgarray = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "Sp", "SS", "SSp", "SSS", "SSSp"]
|
||||
const scoreGradeDiv = document.createElement('div');
|
||||
scoreGradeDiv.classList.add('score-grade');
|
||||
let scoreGrade = document.createElement('h4');
|
||||
scoreGrade.textContent = `${scoreGrades[score.score_rank||score.scoreRank]}`;
|
||||
scoreGradeDiv.append(scoreGrade);
|
||||
scoreDiv.append(scoreGradeDiv);
|
||||
let SGimg = document.createElement('img');
|
||||
SGimg.addEventListener("error", function () {
|
||||
this.src = "assets/icon/UI_Icon_000000.png";
|
||||
});
|
||||
SGimg.classList.add('sg-image');
|
||||
SGimg.src = "assets/uicon/UI_TTR_Rank_" + scoreGrades[score.score_rank||score.scoreRank] + '.png';
|
||||
scoreGradeDiv.append(SGimg);
|
||||
//scoreGradeDiv.append(scoreGrade);
|
||||
tasGrid.append(scoreGradeDiv);
|
||||
|
||||
/* DX Score, Full Combo, Full Sync, and Multi-Placement */
|
||||
//DX Score & Fast Late Reading
|
||||
const rGrid = document.createElement('div');
|
||||
|
||||
const scoreInfoDiv = document.createElement('div');
|
||||
scoreInfoDiv.classList.add('score-info');
|
||||
const scoreInfoGridDiv = document.createElement('div');
|
||||
scoreInfoDiv.classList.add('score-info-grid');
|
||||
// please i dont want to make a fucking nested grid
|
||||
/* DX Score */
|
||||
const scoreDXScoreDiv = document.createElement('div');
|
||||
scoreDXScoreDiv.classList.add('DX-Score');
|
||||
scoreDXScoreDiv.innerHTML = `<h6>DX Score: ${score.deluxscore}/${diffucultyData.maxNotes * 3}</h6>`;
|
||||
scoreInfoGridDiv.append(scoreDXScoreDiv);
|
||||
scoreInfoDiv.append(scoreInfoGridDiv);
|
||||
scoreDiv.append(scoreInfoDiv);
|
||||
/* Full Combo */
|
||||
/* Full Sync */
|
||||
/* Player Placement */
|
||||
const DXScoreDiv = document.createElement('div');
|
||||
DXScoreDiv.classList.add('DX-Score');
|
||||
let DXScore = document.createElement('h4');
|
||||
DXScore.classList.add('DX-Score');
|
||||
DXScore.innerHTML = `DXs ${score.deluxscore}/${diffucultyData.maxNotes * 3}`;
|
||||
let FLindi = document.createElement('h4');
|
||||
FLindi.classList.add('DX-Score');
|
||||
FLindi.innerHTML = `F/L ${score.fastCount}/${score.lateCount}`;
|
||||
DXScoreDiv.append(DXScore);
|
||||
DXScoreDiv.append(FLindi);
|
||||
rGrid.append(DXScoreDiv);
|
||||
|
||||
/* Side note: Can't Do Any of this without the Image Assets / Information, So Moving on for now */
|
||||
/* Full Combo & Full Sync Icons, in a table of 1 row 2 col */
|
||||
|
||||
const FCFSgrid = document.createElement('div');
|
||||
FCFSgrid.setAttribute("class", "fcfs-grid");
|
||||
|
||||
/* Full Combo Icon */
|
||||
let FCTypes = ["SC","FC","FCp","AP","APp"];
|
||||
let FCimgDiv = document.createElement('div');
|
||||
let FCimg = document.createElement('img');
|
||||
FCimg.addEventListener("error", function () {
|
||||
this.src = "assets/icon/UI_Icon_000000.png";
|
||||
});
|
||||
FCimgDiv.classList.add('fullCombo-image'); //seriously galexion make up your god damned mind
|
||||
FCimg.classList.add('fullCombo-image');
|
||||
FCimg.src = "assets/uicon/UI_CHR_PlayBonus_" + FCTypes[score.comboStatus] + '.png';
|
||||
|
||||
|
||||
FCimgDiv.append(FCimg)
|
||||
FCFSgrid.append(FCimgDiv)
|
||||
|
||||
/* Full Sync Icon */
|
||||
let FSTypes = ["PS","FS","FSp"];
|
||||
let FSimgDiv = document.createElement('div');
|
||||
let FSimg = document.createElement('img');
|
||||
FSimg.addEventListener("error", function () {
|
||||
this.src = "assets/icon/UI_Icon_000000.png";
|
||||
});
|
||||
FSimgDiv.classList.add('fullSync-image'); //seriously galexion make up your god damned mind
|
||||
FSimg.classList.add('fullSync-image');
|
||||
FSimg.src = "assets/uicon/UI_CHR_PlayBonus_" + FSTypes[score.syncStatus] + '.png';
|
||||
|
||||
|
||||
FSimgDiv.append(FSimg);
|
||||
FCFSgrid.append(FSimgDiv);
|
||||
|
||||
/* Details shit */
|
||||
let detailsBlock = document.createElement('details');
|
||||
detailsBlock.classList.add('score-info-grid');
|
||||
let summary = document.createElement('summary');
|
||||
summary.textContent = "Details";
|
||||
const detailsGridDiv = document.createElement('div');
|
||||
detailsBlock.append(detailsGridDiv);
|
||||
scoreDiv.append(detailsBlock);
|
||||
/* setting stuff up */
|
||||
|
||||
|
||||
rGrid.classList.add('rGrid');
|
||||
tasGrid.classList.add('tasGrid');
|
||||
rGrid.append(FCFSgrid)
|
||||
scoreDiv.append(rGrid)
|
||||
scoreDiv.append(tasGrid)
|
||||
scoreDiv.setAttribute("class", "score-grid");
|
||||
scoreIncrement++
|
||||
|
||||
|
||||
@ -88,10 +88,14 @@ h4.profile {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h4 {
|
||||
font-size: 1.5em;
|
||||
@media (max-width: 600px) {
|
||||
h4.score-grid {
|
||||
font-size: 4vmin;
|
||||
}
|
||||
|
||||
h4.DX-Score {
|
||||
font-size: 3vmin;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
@ -201,111 +205,138 @@ h4.profile {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
/* Galexion make your fucking mind up are you going to use camelCase or dashe-instead-of-spaces */
|
||||
|
||||
/* Galexion make your fucking mind up are you going to use camelCase or dashes-instead-of-spaces */
|
||||
|
||||
.score-grid {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
grid-template-columns: 82.5% min-content min-content;
|
||||
grid-template-rows: 0.75fr min-content min-content;
|
||||
grid-template-columns: 0.75fr min-content max-content;
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-template-areas:
|
||||
'label0 label0'
|
||||
'label1 label2'
|
||||
'label1 label3'
|
||||
'label1 label4';
|
||||
"Jacket tasGrid rGrid"
|
||||
"Details Details Details";
|
||||
|
||||
gap: 0px;
|
||||
height: 100%;
|
||||
max-width: 75%;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.rGrid {
|
||||
display:grid;
|
||||
grid-area: rGrid;
|
||||
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
'FC-FS'
|
||||
'DXs-Fast-Slow';
|
||||
}
|
||||
|
||||
.fcfs-grid {
|
||||
grid-area: FC-FS;
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
'fc'
|
||||
'fs';
|
||||
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.tasGrid {
|
||||
grid-area: tasGrid;
|
||||
display:grid;
|
||||
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
'title'
|
||||
'achivement'
|
||||
'score-grade';
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.score-grid {
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
grid-template-rows: max-content min-content min-content;
|
||||
grid-template-rows: 1fr, auto;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-auto-rows: auto;
|
||||
grid-template-areas:
|
||||
'label0 label0 label0'
|
||||
'label1 label2 label3'
|
||||
'label1 label4 label4';
|
||||
"Jacket tasGrid rGrid"
|
||||
"Details Details Details";
|
||||
margin: auto;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
h4.score-grid {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.fcfs-grid {
|
||||
grid-area: FC-FS;
|
||||
display: grid;
|
||||
grid-auto-columns: min-content min-content;
|
||||
|
||||
grid-template-areas:
|
||||
'fc fs';
|
||||
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.score-jacket {
|
||||
|
||||
background-color: #9EF6B5;
|
||||
grid-area: label1;
|
||||
grid-area: Jacket;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 75%;
|
||||
width: 75%;
|
||||
|
||||
}
|
||||
|
||||
/* Please I really dont want to make a nested grid */
|
||||
.score-info-grid {
|
||||
.score-info-grid {
|
||||
grid-area: Details;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 0.5fr);
|
||||
grid-template-rows: repeat(3, 0.5fr);
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"DX-Score DX-Score DX-Score"
|
||||
"full-combo full-sync multi-place"
|
||||
". . details";
|
||||
}
|
||||
"timingTable timingTable"
|
||||
"maxCombo maxSync";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.score-title {
|
||||
|
||||
background-color: #D5BBCA;
|
||||
grid-area: label0;
|
||||
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.score-achivement {
|
||||
|
||||
background-color: #ED69FD;
|
||||
grid-area: label2;
|
||||
grid-area: achivement;
|
||||
|
||||
}
|
||||
|
||||
.score-grade {
|
||||
|
||||
background-color: #9B5999;
|
||||
grid-area: label3;
|
||||
grid-area: score-grade;
|
||||
|
||||
}
|
||||
|
||||
.score-info {
|
||||
|
||||
background-color: #58B669;
|
||||
grid-area: label4;
|
||||
}
|
||||
|
||||
/* Please I really dont want to make a nested grid */
|
||||
.score-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, min-content);
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"DX-Score DX-Score DX-Score"
|
||||
"full-combo full-sync multi-place"
|
||||
"details details details";
|
||||
}
|
||||
|
||||
.DX-Score {
|
||||
grid-area: DX-Score;
|
||||
grid-area: DXs-Fast-Slow;
|
||||
}
|
||||
|
||||
.score-jacket {
|
||||
|
||||
background-color: #9EF6B5;
|
||||
grid-area: label1;
|
||||
grid-area: Jacket;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -314,6 +345,40 @@ h4.profile {
|
||||
|
||||
}
|
||||
|
||||
h4.DX-Score {
|
||||
font-size: 2em;
|
||||
#user-play-data {
|
||||
object-fit: inherit;
|
||||
}
|
||||
|
||||
img.sg-image {
|
||||
width:17vw;
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
img.fullCombo-image {
|
||||
width:12vw;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
img.fullSync-image {
|
||||
width:12vw;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.fullCombo-image:nth-of-type(1) {
|
||||
grid-area: fc;
|
||||
}
|
||||
|
||||
.fullSync-image:nth-of-type(1) {
|
||||
grid-area: fs;
|
||||
}
|
||||
|
||||
.score-info-grid {
|
||||
grid-area: Details;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 0.5fr);
|
||||
grid-template-rows: repeat(3, 0.5fr);
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"timingTable timingTable"
|
||||
"maxCombo maxSync";
|
||||
}
|
||||
32
views/log.ejs
Normal file
32
views/log.ejs
Normal file
@ -0,0 +1,32 @@
|
||||
<% var rootPath='../' ; %>
|
||||
<%- include(rootPath + 'templates/header.ejs' ); %>
|
||||
|
||||
<div id="loginContent">
|
||||
<h1>Mai<b>DXNet</b> Dashboard</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" minlength="20" maxlength="20" placeholder="0000011111222223333344444" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<script type="text/javascript" src="/javascript/login.js"></script>
|
||||
</div>
|
||||
<div id="loginContent">
|
||||
<h4>
|
||||
Please Note:
|
||||
</h4>
|
||||
<p>
|
||||
This is mainly a Demo of <a href="https://dev.s-ul.net/Galexion/MaiMaiDXNet">MaiMaiDXNet</a>, and should not be used for actual play.
|
||||
<br><br>
|
||||
If Testing on your own card, please visit <a href="http://vermilliondx.ml">here</a> to import your data from any other Water based Amusement Server.
|
||||
<br><br>
|
||||
Note that Some scores, Song Jackets, or other ammenitys are missing. this is completely normal.
|
||||
<br><br>
|
||||
Everything that was not supposed to be missing is now back. Please update any personal / production instances to the latest version.
|
||||
</p>
|
||||
For Up to date information, join our <a href="https://discord.gg/EEJKDpFTVT">Discord Server</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user