mirror of
https://github.com/MaciejkaG/statki.git
synced 2024-11-30 01:52:54 +01:00
Profile page improvements
This commit is contained in:
MaciejkaG
parent
e0f7137f16
commit
fb8555f736
6
index.js
6
index.js
@ -230,6 +230,12 @@ io.on('connection', async (socket) => {
|
||||
callback(session.nickname);
|
||||
});
|
||||
|
||||
socket.on('my profile', (callback) => {
|
||||
auth.getProfile(session.userId).then((profile) => {
|
||||
callback(profile);
|
||||
});
|
||||
});
|
||||
|
||||
socket.on('create lobby', (callback) => {
|
||||
if (socket.rooms.size === 1) {
|
||||
let id = genID();
|
||||
|
||||
7
nodemon.json
Normal file
7
nodemon.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"ignore": [
|
||||
"public/*",
|
||||
"views/*",
|
||||
"utils/mail/*"
|
||||
]
|
||||
}
|
||||
@ -257,6 +257,7 @@ nav span:hover {
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-position: 60%;
|
||||
background-size: 400%;
|
||||
@ -265,7 +266,7 @@ nav span:hover {
|
||||
}
|
||||
|
||||
#profileView .matchList .match:hover {
|
||||
height: 8rem;
|
||||
height: 11rem;
|
||||
}
|
||||
|
||||
#profileView .matchList .match:hover .statsButton {
|
||||
@ -302,8 +303,4 @@ nav span:hover {
|
||||
|
||||
#profileView .periodal .stat h1 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
#profileView .periodal .stat span {
|
||||
|
||||
}
|
||||
@ -195,5 +195,8 @@ socket.on('turn update', (turnData) => {
|
||||
socket.on('player left', () => {
|
||||
window.location.replace("/");
|
||||
});
|
||||
// SELECT ROUND((1 - AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.nickname = "MaciejkaG";
|
||||
//
|
||||
|
||||
// Profile stats: SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.nickname = "MaciejkaG";
|
||||
// Match history: SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = "c231c4f7-e179-11ee-920b-fa163e32c013";
|
||||
// Profile: SELECT nickname, account_creation FROM accounts WHERE user_id = "c231c4f7-e179-11ee-920b-fa163e32c013";
|
||||
// Badges: SELECT badge, achievement_date FROM badges WHERE user_id = "c231c4f7-e179-11ee-920b-fa163e32c013";
|
||||
@ -23,8 +23,39 @@ socket.on("gameReady", (gameId) => {
|
||||
var nickname;
|
||||
var myProfile;
|
||||
|
||||
socket.emit("my profile data", (profile) => {
|
||||
myProfile = profile;
|
||||
socket.emit("my profile", (profile) => {
|
||||
console.log(profile);
|
||||
// General profile data
|
||||
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
$("#playerSince").html(new Date(profile.profile.account_creation).toLocaleDateString("pl-PL", options));
|
||||
$("#nickname").html(profile.profile.nickname);
|
||||
|
||||
// Profile stats
|
||||
$("#monthlyPlayed").html(profile.stats.monthly_matches);
|
||||
$("#totalPlayed").html(profile.stats.alltime_matches);
|
||||
$("#winrate").html(`${profile.stats.winrate}%`);
|
||||
|
||||
var matchHistory = profile.matchHistory;
|
||||
var matchHistoryDOM = "";
|
||||
|
||||
options = { hour: '2-digit', minute: '2-digit', time: 'numeric', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
|
||||
for (let i = 0; i < matchHistory.length; i++) {
|
||||
const match = matchHistory[i];
|
||||
|
||||
console.log();
|
||||
|
||||
let date = new Date(match.date).toLocaleDateString("pl-PL", options);
|
||||
|
||||
const minutes = Math.floor(match.duration / 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
|
||||
const seconds = (match.duration - minutes * 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
|
||||
|
||||
const duration = `${minutes}:${seconds}`;
|
||||
|
||||
matchHistoryDOM += `<div class="match" data-matchid="${match.match_id}"><div><h1 class="dynamic${match.won === 1 ? "" : " danger"}">${match.won === 1 ? "Zwycięstwo" : "Porażka"}</h1><span> vs. ${match.match_type === "pvp" ? match.opponent : "AI"}</span></div><h2 class="statsButton">Kliknij by wyświetlić statystyki</h2><span>${date}</span><br><span>${duration}</span></div>`;
|
||||
}
|
||||
|
||||
$(".matchList").html(matchHistoryDOM);
|
||||
});
|
||||
|
||||
socket.emit("whats my nick", (myNickname) => {
|
||||
|
||||
@ -18,6 +18,7 @@ const __dirname = path.dirname(__filename);
|
||||
export class MailAuth {
|
||||
constructor(redis, options, mysqlOptions) {
|
||||
this.redis = redis;
|
||||
mysqlOptions.multipleStatements = true;
|
||||
this.mysqlOptions = mysqlOptions;
|
||||
|
||||
this.mail = nodemailer.createTransport({
|
||||
@ -147,6 +148,25 @@ export class MailAuth {
|
||||
});
|
||||
}
|
||||
|
||||
getProfile(userId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = mysql.createConnection(this.mysqlOptions);
|
||||
conn.query(`SELECT nickname, account_creation FROM accounts WHERE user_id = ${conn.escape(userId)}; SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.user_id = ${conn.escape(userId)}; SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = ${conn.escape(userId)};`, async (error, response) => {
|
||||
if (error) reject(error);
|
||||
else {
|
||||
if (response[0].length === 0 || response[1].length === 0) {
|
||||
reject(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const [[profile], [stats], matchHistory] = response;
|
||||
|
||||
resolve({ profile, stats, matchHistory });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async finishVerification(uid, authCode) {
|
||||
authCode = authCode.replace(/\s+/g, "");
|
||||
const rUid = await this.redis.get(`codeAuth:${authCode}`);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<nav><span>Strona główna</span> <span id="profileButton" onclick="switchView('profileView')">Profil</span></nav>
|
||||
<nav><span onclick="switchView('mainMenuView')">Menu główne</span> <span id="profileButton" onclick="switchView('profileView')">Profil</span></nav>
|
||||
{{!-- <h1 class="header">Statki</h1> --}}
|
||||
<div class="container" id="mainMenuView" data-title="Statki" data-path="/">
|
||||
<div>
|
||||
@ -77,27 +77,27 @@
|
||||
|
||||
<div class="container" id="profileView" data-title="Statki / Profil" data-path="/profile">
|
||||
<div class="profile">
|
||||
<h1>MaciejkaG</h1>
|
||||
<h1 id="nickname">Wczytywanie...</h1>
|
||||
<div>
|
||||
<span>Odznaki: </span>
|
||||
<span>Deweloper, Wczesny użytkownik</span>
|
||||
<span>Gracz od: </span>
|
||||
<span id="playerSince">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="matchList">
|
||||
<div class="match">
|
||||
<div><h1 class="dynamic danger">Porażka</h1><span> vs. MaciejkaG</span></div>
|
||||
<div><h1 class="dynamic danger">Porażka</h1><span> vs. Wczytywanie...</span></div>
|
||||
<h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
|
||||
</div>
|
||||
<div class="match">
|
||||
<div><h1 class="dynamic">Zwycięstwo</h1><span> vs. MaciejkaG</span></div>
|
||||
<div><h1 class="dynamic">Zwycięstwo</h1><span> vs. Wczytywanie...</span></div>
|
||||
<h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="periodal">
|
||||
<div class="stat"><h1>10</h1><span>meczów zagranych w ostatnim miesiącu</span></div>
|
||||
<div class="stat"><h1>100</h1><span>meczów zagranych łącznie</span></div>
|
||||
<div class="stat"><h1>50%</h1><span>winrate</span></div>
|
||||
<div class="stat"><h1 id="monthlyPlayed">-</h1><span>meczów zagranych w ostatnim miesiącu</span></div>
|
||||
<div class="stat"><h1 id="totalPlayed">-</h1><span>meczów zagranych łącznie</span></div>
|
||||
<div class="stat"><h1 id="winrate">-</h1><span>winrate</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user