monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-27 10:31:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

avatars

Browse source
This commit is contained in:
Miodec 2025-12-23 11:56:56 +01:00
parent cbda7be76c
commit 6296671c7e
3 changed files with 96 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
frontend/src/styles/tribe.scss
View file

@ -449,7 +449,11 @@
color: var(--text-color);
.nameAndIcons {
display: flex;
gap: 0.25rem;
gap: 0.25em;
align-items: center;
.avatar {
--size: 0.9em;
}
}
.icons {
display: grid;
@ -741,17 +745,26 @@
padding-right: 0;
}
.player {
color: var(--sub-color);
&.faded {
opacity: 0.25;
}
.avatarAndName {
.avatar {
--size: 0.9em;
}
display: flex;
align-items: center;
gap: 0.25rem;
}
.name {
color: var(--sub-color);
text-overflow: ellipsis;
max-width: 125px;
overflow: hidden;
}
.progress {
width: 100%;
vertical-align: middle;
.barBg {
width: 100%;
height: 0.25rem;
@ -766,22 +779,27 @@
}
}
}
.stats {
.acc {
text-align: right;
grid-template-columns: auto auto;
color: var(--sub-color);
display: flex;
justify-content: flex-end;
min-width: 90px;
.acc {
margin-left: 1rem;
}
width: 4ch;
}
.wpm {
text-align: right;
width: 3ch;
}
// .stats {
// text-align: right;
// grid-template-columns: auto auto;
// color: var(--sub-color);
// display: flex;
// justify-content: flex-end;
// min-width: 90px;
// .acc {
// margin-left: 1rem;
// }
// }
&.me {
.name,
.stats {
color: var(--text-color);
}
color: var(--text-color);
.progress .bar {
background: var(--main-color);
}

69
frontend/src/ts/tribe/tribe-bars.ts
View file

@ -4,6 +4,7 @@ import * as SlowTimer from "../states/slow-timer";
import tribeSocket from "./tribe-socket";
import * as ThemeColors from "../elements/theme-colors";
import { isConfigInfinite } from "./tribe-config";
import { getAvatarElement } from "../utils/discord-avatar";
export function init(page: string): void {
let el: JQuery | undefined;
@ -15,52 +16,80 @@ export function init(page: string): void {
}
const room = TribeState.getRoom();
if (el) {
el.empty();
}
if (!el) return;
if (!room) return;
let html = "";
for (const [userId, user] of Object.entries(room.users)) {
if (userId === tribeSocket.getId()) continue;
let me = false;
if (userId === tribeSocket.getId()) me = true;
if (user.isTyping && el) {
el.append(`
if (user.isTyping) {
html += `
<tr class="player ${me ? "me" : ""}" id="${userId}">
<td class="name">${user.name}</td>
<td class="avatarAndName">
<div class="avatar">
${
getAvatarElement({
discordId: undefined,
discordAvatar: undefined,
}).innerHTML
}
</div>
<div class="name">
${user.name}
</div>
</td>
<td class="progress">
<div class="barBg">
<div class="bar" style="width: 0%;"></div>
</div>
</td>
<td class="stats">
<div class="wpm">-</div>
<div class="acc">-</div>
<td>
<div class="wpm">-</div>
</td>
<td>
<div class="acc">-</div>
</td>
</tr>
`);
`;
}
}
if (el) {
const tribeSelf = TribeState.getSelf();
if (tribeSelf?.isTyping) {
el.append(`
const tribeSelf = TribeState.getSelf();
if (tribeSelf?.isTyping) {
html += `
<tr class="player me" id="${tribeSelf?.id}">
<td class="name">${tribeSelf?.name}</td>
<td class="avatarAndName">
<div class="avatar">
${
getAvatarElement({
discordId: undefined,
discordAvatar: undefined,
}).innerHTML
}
</div>
<div class="name">
${tribeSelf?.name}
</div>
</td>
<td class="progress">
<div class="barBg">
<div class="bar" style="width: 0%;"></div>
</div>
</td>
<td class="stats">
<div class="wpm">-</div>
<div class="acc">-</div>
<td>
<div class="wpm">-</div>
</td>
<td>
<div class="acc">-</div>
</td>
</tr>
`);
}
`;
}
el.html(html);
}
export function show(page: string): void {

19
frontend/src/ts/tribe/tribe-user-list.ts
View file

@ -2,6 +2,7 @@ import * as TribeState from "./tribe-state";
import * as TribeUserSettingsPopup from "../popups/tribe-user-settings-popup";
import tribeSocket from "./tribe-socket";
import { User } from "./types";
import { getAvatarElement } from "../utils/discord-avatar";
export function reset(page?: string): void {
if (page === undefined) {
@ -29,7 +30,7 @@ export function update(page?: string): void {
usersArray.push(room.users[userId]);
}
const sortedUsers = usersArray.sort(
(a, b) => (b?.points ?? 0) - (a?.points ?? 0)
(a, b) => (b?.points ?? 0) - (a?.points ?? 0),
) as User[];
sortedUsers.forEach((user) => {
let icons = "";
@ -55,12 +56,20 @@ export function update(page?: string): void {
user.isAfk ? "afk" : ""
}'>
<div class="nameAndIcons">
<div class='icons'>
${icons}
<div class='avatar'>
${
getAvatarElement({
discordId: undefined,
discordAvatar: undefined,
}).innerHTML
}
</div>
<div class='name'>
${user.name}
</div>
<div class='icons'>
${icons}
</div>
${
TribeState.getSelf()?.isLeader && user.id !== tribeSocket.getId()
? `<div class='userSettings' userid='` +
@ -76,7 +85,7 @@ export function update(page?: string): void {
$(".pageTribe .lobby .userlist .list").append(appendData);
} else if (page === "result") {
$(".pageTest #result #tribeResultBottom .userlist .list").append(
appendData
appendData,
);
}
});
@ -88,5 +97,5 @@ $(document).on(
(e) => {
const userId = $(e.currentTarget).attr("userid") as string;
TribeUserSettingsPopup.show(userId);
}
},
);