Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Add top 10 emotes section #57

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

✨ Add top 10 emotes section #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc37656
:sparkles: Add top 10 emotes section
tadhgboyle Dec 4, 2021
7c52d02
Only count max 1 of each emote per message
tadhgboyle Dec 4, 2021
5ecd1aa
Swap emoji + about card sides
tadhgboyle Dec 4, 2021
63ebe99
Update demo.js
tadhgboyle Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/app/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ export default () => {
channelCount: randomNumber(50, 100),
messageCount: randomNumber(300, 600),
characterCount: randomNumber(4000, 10000),
topEmotes: Array.from({ length: 10 }, () => ({
name: 'Emote',
id: 892739134513369099,
url: 'https://cdn.discordapp.com/emojis/892739134513369099.png?size=240',
count: randomNumber(200, 600)
})).sort((a, b) => b.count - a.count),
totalSpent: randomNumber(100, 200),
hoursValues: new Array(24).fill(0).map(() => Math.floor(Math.random() * 300) + 1),
favoriteWords: [
Expand Down
19 changes: 19 additions & 0 deletions src/app/extractor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,25 @@ export const extractData = async (files) => {
}));
extractedData.characterCount = channels.map((channel) => channel.messages).flat().map((message) => message.length).reduce((p, c) => p + c);

console.log('[debug] Loading top emotes...');

const allEmotes = channels.map((channel) => channel.messages).flat().map(message => [...new Set(message.words)]).flat().map((word) => {
const matches = String(word).match(/<a?:(.+):(.+)>/g);
if (matches) {
return matches[0];
}
}).filter(emote => emote !== undefined);

extractedData.topEmotes = [...new Set(allEmotes)].sort((a, b) => allEmotes.filter(e => e === b).length - allEmotes.filter(e => e === a).length).slice(0, 10);
extractedData.topEmotes = extractedData.topEmotes.map((emote) => ({
name: emote.match(/<a?:(.+):(.+)>/)[1],
id: emote.match(/<a?:(.+):(.+)>/)[2],
url: `https://cdn.discordapp.com/emojis/${emote.match(/<a?:(.+):(.+)>/)[2]}.png`,
count: allEmotes.filter(e => e === emote).length
}));

console.log('[debug] Top emotes loaded.');

for (let i = 0; i < 24; i++) {
extractedData.hoursValues.push(channels.map((c) => c.messages).flat().filter((m) => new Date(m.timestamp).getHours() === i).length);
}
Expand Down
7 changes: 6 additions & 1 deletion src/components/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
.card.top-channels {
grid-column: 6 / 12;
}
.card.top-emotes {
grid-column: 1 / 6;
grid-row: 4 / 6;
}
.card.hours {
grid-column: 6 / 12;
grid-row: 2 / 3;
Expand All @@ -37,7 +41,8 @@
grid-column: 1 / 4;
}
.card.about {
grid-column: 1 / 6;
grid-column: 6 / 12;
grid-row: 4 / 6;
}
}
</style>
15 changes: 14 additions & 1 deletion src/components/LeaderboardItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@
export let name;
export let discriminator = null;
export let guild = null;
export let id = null;
export let position;
export let avatarURL = null;
export let emoteUrl = null;
export let count;
export let channel = false;
export let emote = false;
</script>

<div class="top-item">
<div class="top-whois">
<div class="top-bubble { position === 0 ? 'first' : position === 1 ? 'second' : position === 2 ? 'third' : '' }">{ position + 1 }</div>
{#if channel}
<svg class="top-avatar" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="square" stroke-linejoin="square" stroke-width={1} d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z"></path></svg>
{:else if emote}
<img class="top-emote" src={emoteUrl} alt="Emote"/>
{:else}
<img class="top-avatar" src="{avatarURL}" alt="Avatar" />
{/if}
<h3 class="top-name">{name} <small class="text-muted channel">{channel ? guild : `#${discriminator}`}</small></h3>
<h3 class="top-name">{name} <small class="text-muted channel">{channel || emote ? guild ?? id : `#${discriminator}`}</small></h3>
</div>
<div class="top-messages">
<h3>{count} <small>messages</small></h3>
Expand Down Expand Up @@ -53,6 +58,14 @@
margin-right: 10px;
flex-shrink: 0;
}
.top-emote {
height: 50px;
width: 50px;
max-height: 50px;
max-width: 50px;
flex-shrink: 0;
margin-right: 15px;
}
.top-name {
margin-left: inherit;
display: flex;
Expand Down
15 changes: 14 additions & 1 deletion src/views/Stats.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,20 @@
{/each}
</Leaderboard>
</Card>

<Card name="top-emotes">
<Leaderboard title="Top Emotes" description="The emotes you use most!">
{#each $data.topEmotes as emote, i}
<LeaderboardItem
position={i}
emoteUrl={emote.url}
name={emote.name}
id={emote.id}
count={emote.count}
emote
/>
{/each}
</Leaderboard>
</Card>
<Card name="about">
<div style="text-align: center;">
<h2>About this project</h2>
Expand Down
Loading