244 lines
7.8 KiB
JavaScript
244 lines
7.8 KiB
JavaScript
import AbstractView from "./abstracts/AbstractView.js";
|
|
import { client, lang } from "../index.js";
|
|
|
|
export default class extends AbstractView {
|
|
constructor(params) {
|
|
super(params, `${decodeURI(params.username)} - Profile`);
|
|
this.username = decodeURI(params.username);
|
|
}
|
|
|
|
setTitle() {
|
|
document.title = this.titleKey;
|
|
}
|
|
|
|
async postInit()
|
|
{
|
|
if (!this.profile)
|
|
return 404;
|
|
|
|
const games = await this.profile.getGameHistory();
|
|
|
|
await this.fillHistory(games);
|
|
await this.fillStatistics(games);
|
|
|
|
if (!client.me || this.profile.id === client.me.id)
|
|
return;
|
|
|
|
const addFriendButton = document.getElementById('addFriendButton'),
|
|
removeFriendButton = document.getElementById('removeFriendButton'),
|
|
blockButton = document.getElementById('blockButton'),
|
|
unblockButton = document.getElementById('unblockButton');
|
|
|
|
this.loadFriendshipStatus();
|
|
if (this.profile.isBlocked)
|
|
unblockButton.classList.remove('d-none');
|
|
else
|
|
blockButton.classList.remove('d-none');
|
|
|
|
addFriendButton.onclick = _ => this.addFriend();
|
|
removeFriendButton.onclick = _ => this.removeFriend();
|
|
unblockButton.onclick = _ => this.unblockUser();
|
|
blockButton.onclick = _ => this.blockUser();
|
|
}
|
|
|
|
loadFriendshipStatus() {
|
|
const addFriendButton = document.getElementById('addFriendButton'),
|
|
removeFriendButton = document.getElementById('removeFriendButton'),
|
|
statusIndicator = document.getElementById('statusIndicator');
|
|
|
|
if (this.profile.hasIncomingRequest) {
|
|
removeFriendButton.classList.add('d-none');
|
|
addFriendButton.classList.remove('d-none');
|
|
addFriendButton.innerHTML = 'Accept Request';
|
|
} else if (this.profile.hasOutgoingRequest) {
|
|
addFriendButton.classList.add('d-none');
|
|
removeFriendButton.classList.remove('d-none');
|
|
removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
|
|
removeFriendButton.innerHTML = 'Cancel Request';
|
|
} else if (this.profile.isFriend) {
|
|
addFriendButton.classList.add('d-none');
|
|
removeFriendButton.classList.remove('d-none');
|
|
removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
|
|
removeFriendButton.innerHTML = 'Remove Friend';
|
|
} else {
|
|
addFriendButton.innerHTML = 'Add Friend';
|
|
removeFriendButton.classList.add('d-none');
|
|
addFriendButton.classList.remove('d-none');
|
|
}
|
|
|
|
statusIndicator.classList.remove('bg-success', 'bg-danger');
|
|
if (this.profile.online === true)
|
|
statusIndicator.classList.add('bg-success');
|
|
else if (this.profile.online === false)
|
|
statusIndicator.classList.add('bg-danger');
|
|
}
|
|
|
|
/**
|
|
* @param {[Object]} games
|
|
*/
|
|
async fillStatistics(games)
|
|
{
|
|
const winrateDiv = document.getElementById("winrate");
|
|
|
|
let win = 0;
|
|
let lose = 0;
|
|
|
|
games.forEach(game => {
|
|
if (game.finished === false)
|
|
return
|
|
if (this.profile.id === game.winner?.id)
|
|
win++;
|
|
else
|
|
lose++;
|
|
});
|
|
|
|
if (games.length) {
|
|
let rate = win / (win + lose) * 100;
|
|
winrateDiv.innerText = `Winrate: ${rate.toFixed()}%`;
|
|
} else {
|
|
winrateDiv.innerText = `Winrate: 🤓`
|
|
}
|
|
}
|
|
|
|
async fillHistory(games)
|
|
{
|
|
let game_list = document.getElementById("game-list");
|
|
|
|
games.forEach(game => {
|
|
|
|
let a = document.createElement("a");
|
|
a.href = `/games/${game.game_type}/${game.id}`;
|
|
a.setAttribute("data-link", true);
|
|
|
|
let game_item = document.createElement("div");
|
|
game_item.className = "game-item";
|
|
game_item.style.backgroundColor = "grey";
|
|
if (game.finished && game.winner == null)
|
|
game_item.style.backgroundColor = "red";
|
|
else if (game.finished)
|
|
game_item.style.backgroundColor = this.profile.id === game.winner.id ? "green" : "red";
|
|
else if (game.started)
|
|
game_item.style.backgroundColor = "yellow";
|
|
|
|
let gametype = document.createElement("b");
|
|
gametype.innerText = `${(game.game_type == "tictactoe") ? lang.get("ticTacToeTitle") : "Pong"}`;
|
|
game_item.appendChild(gametype);
|
|
|
|
game.players.forEach(player => {
|
|
let player_score = document.createElement("a");
|
|
|
|
player_score.href = `/profiles/${player.username}`;
|
|
player_score.innerText = `${player.username}`;
|
|
player_score.setAttribute("data-link", true);
|
|
|
|
game_item.appendChild(player_score);
|
|
});
|
|
a.appendChild(game_item);
|
|
game_list.appendChild(a);
|
|
});
|
|
}
|
|
|
|
async getHtml() {
|
|
|
|
this.profile = await client.profiles.getProfile(this.username);
|
|
if (!this.profile)
|
|
return '';
|
|
|
|
return /* HTML */ `
|
|
<div>
|
|
<div class='mb-3' id='profileInfo'>
|
|
<h1>${this.username}<span id='statusIndicator' style='height:0.75em; width:0.75em' class='ms-2 rounded-circle border d-inline-block'></span></h1>
|
|
<a href=${this.profile.avatar} target='_blank'>
|
|
<img class='img-thumbnail' src=${this.profile.avatar} style='width:auto; max-height:20vh; min-height:10vh'>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<button class='btn btn-sm btn-success d-none' id='addFriendButton'>Add Friend</button>
|
|
<button class='btn btn-sm btn-danger d-none' id='removeFriendButton'>Remove Friend</button>
|
|
<button class='btn btn-sm btn-danger d-none' id='blockButton'>Block</button>
|
|
<button class='btn btn-sm btn-secondary d-none' id='unblockButton'>Unblock</button>
|
|
</div>
|
|
<h1>Games</h1>
|
|
<div>
|
|
<h1 id='winrate'></h1>
|
|
</div>
|
|
<div>
|
|
<link rel="stylesheet" href="/static/css/gameHistory.css">
|
|
<div id="game-list"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async addFriend() {
|
|
const removeFriendButton = document.getElementById('removeFriendButton');
|
|
|
|
const response = await client._post(`/api/profiles/friends/${this.profile.id}`);
|
|
const body = await response.json();
|
|
console.log(body);
|
|
|
|
if (response.ok) {
|
|
removeFriendButton.classList.remove('d-none');
|
|
document.getElementById('addFriendButton').classList.add('d-none');
|
|
}
|
|
if (response.status === 200) {
|
|
removeFriendButton.innerHTML = 'Cancel Request';
|
|
removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
|
|
this.profile.hasOutgoingRequest = true;
|
|
} else if (response.status === 201) {
|
|
removeFriendButton.innerHTML = 'Remove Friend';
|
|
removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
|
|
this.profile.isFriend = true;
|
|
this.profile.hasIncomingRequest = false;
|
|
}
|
|
}
|
|
|
|
async removeFriend() {
|
|
const addFriendButton = document.getElementById('addFriendButton'),
|
|
statusIndicator = document.getElementById('statusIndicator');
|
|
|
|
const response = await client._delete(`/api/profiles/friends/${this.profile.id}`);
|
|
const body = await response.json();
|
|
console.log(body);
|
|
|
|
if (response.ok) {
|
|
addFriendButton.innerHTML = 'Add Friend';
|
|
addFriendButton.classList.remove('d-none');
|
|
statusIndicator.classList.remove('bg-danger', 'bg-success');
|
|
document.getElementById('removeFriendButton').classList.add('d-none');
|
|
}
|
|
if (response.status === 200) {
|
|
this.profile.hasOutgoingRequest = false;
|
|
} else if (response.status === 201) {
|
|
this.profile.isFriend = false;
|
|
this.profile.online = null;
|
|
}
|
|
}
|
|
|
|
async blockUser() {
|
|
const response = await client._post(`/api/profiles/block/${this.profile.id}`);
|
|
const body = await response.json();
|
|
console.log(body);
|
|
|
|
if (response.ok) {
|
|
document.getElementById('blockButton').classList.add('d-none');
|
|
document.getElementById('unblockButton').classList.remove('d-none');
|
|
client.me.blockedUsers.push(this.profile);
|
|
this.profile.isBlocked = true;
|
|
}
|
|
}
|
|
|
|
async unblockUser() {
|
|
const response = await client._delete(`/api/profiles/block/${this.profile.id}`);
|
|
const body = await response.json();
|
|
console.log(body);
|
|
|
|
if (response.ok) {
|
|
document.getElementById('unblockButton').classList.add('d-none');
|
|
document.getElementById('blockButton').classList.remove('d-none');
|
|
client.me.blockedUsers = client.me.blockedUsers.filter(profile => profile.id !== this.profile.id);
|
|
this.profile.isBlocked = false;
|
|
}
|
|
}
|
|
}
|