Enhance Sendou.ink Twitch Extension: Team Logos & Player Data

Aug 13, 2025 by Ahmed Latif 62 views

Enhancing Sendou.ink Twitch Extension: New Fields for Global Teams and Sendouq Matches

Hey guys! As we work on making the Sendou.ink Twitch extension even better, we've identified a couple of key areas where we can improve the data we provide. This will help the extension display all the necessary info, giving you a smoother and more informative experience. We're focusing on adding new fields to both the GlobalTeamMembership and SendouqMatchPlayer interfaces. Let's dive into the details!

1. Enriching Global Team Information

Currently, when my extension registers a user's Twitch account and fetches their Sendou.ink info via the /api/user/{userId|discordId} endpoint, we grab their team details. However, the existing GlobalTeamMembership interface lacks a crucial piece of information: the URL of the team's logo. This is essential for displaying a complete picture of the team within the extension. So, we're proposing an update to the GlobalTeamMembership interface to include the teamLogo field. This will allow the extension to showcase team logos, making the user experience more visually appealing and informative.

Think of it like this: imagine you're checking out a streamer's profile and you see they're part of an awesome team. Wouldn't it be cool to see their team's logo right there? This small addition makes a big difference in terms of visual appeal and overall user experience. To make this happen, we suggest modifying the GlobalTeamMembership interface as follows:

interface GlobalTeamMembership {
    /**
     * Name of the global team.
     *
     * @example "Moonlight"
     */
    name: string;
    /**
     * Role of the user in the team.
     */
    role: TeamMemberRole | null;
    /**
     * URL for the global team page.
     *
     * @example "https://sendou.ink/t/moonlight"
     */
    teamPageUrl: string;
    /**
     * URL for the global team logo.
     *
     */
    teamLogo: string
}

With the addition of the teamLogo field, the extension can now display the team's logo, enhancing the visual representation of team affiliations and making the interface more engaging for users. This seemingly small change contributes significantly to creating a more polished and informative experience for everyone using the Sendou.ink Twitch extension. The teamLogo field ensures that the extension can accurately and beautifully represent the teams within the Sendou.ink community. By including this, we're giving users a more comprehensive view of their team affiliations and making the entire platform feel more connected and vibrant. The inclusion of team logos enhances the sense of community and belonging, which is a crucial aspect of any successful online platform. Furthermore, this addition streamlines the user experience by providing all relevant team information in one place. Users no longer need to search elsewhere to find the team logo; it's readily available within the Sendou.ink Twitch extension. This integration simplifies navigation and enhances user engagement, making the extension a valuable tool for both streamers and viewers. By providing a clear and visually appealing representation of teams, we're fostering a stronger sense of community and making the platform more enjoyable for everyone involved.

2. Enhancing Sendouq Match Player Data

Now, let's talk about improving the data we fetch when loading a streamer's live Sendouq match. Currently, we need to display the members of each team, along with their Sendou.ink name, profile picture, URL, and Sendouq rank. We also need the maplist for the match. Right now, we have access to the user's Sendou.ink ID, their Sendouq rank, and the maplist. However, we're missing some key pieces of the puzzle: each player's URL, name, and profile picture. To solve this, we need to expand the information available in the SendouqMatchPlayer interface.

Digging a bit deeper, I've noticed that Sendou.ink doesn't always have the most up-to-date profile picture for a user when calling GetUserResponse. This can cause issues for the extension, as it might display a stale profile picture. To get around this, I've been grabbing profile pictures directly from Discord's API. However, to do this, I need each user's Discord ID. So, how can we best address this? There are a couple of ways we can tackle this challenge, ensuring that the Sendou.ink Twitch extension displays accurate and current information for all players in a Sendouq match.

Two Possible Solutions for Enhanced Player Data

There are basically two paths we can take to make this work seamlessly. The first approach involves making individual API calls for each player, while the second proposes a more streamlined data structure. Let's break down both options to see which one makes the most sense for our needs.

Solution 1: Multiple API Calls

One way to get all the necessary player data is to make multiple API calls. When a live streamer enters a Sendouq match, we grab the match details. Then, we'd make eight separate API calls to the /api/user/{userId|discordId} endpoint, one for each player in the match. This allows us to retrieve the data we need, including the player's URL, name, and profile picture. While this approach works, it's not the most efficient, as it requires multiple API requests for each match. This could potentially lead to slower loading times and increased server load. However, it's a viable option if we prioritize simplicity in the data structure and don't want to modify the existing SendouqMatchPlayer interface. This method allows us to maintain the current data structure while still retrieving all the necessary information for each player. However, the performance implications of making eight separate API calls for each match should be carefully considered. Performance is key to a smooth user experience, and excessive API calls can lead to lag and frustration. Therefore, while this solution is functional, it may not be the most optimal in terms of efficiency and scalability. The decision to implement this approach would depend on the overall architecture and the expected load on the Sendou.ink servers. It's crucial to weigh the simplicity of implementation against the potential performance drawbacks before making a final decision.

Solution 2: Modified `SendouqMatchPlayer` Interface

The second, and potentially more efficient, solution is to modify the SendouqMatchPlayer interface. We can add the missing information directly to the interface, allowing us to fetch all the player data in a single API call. This would significantly reduce the number of API requests needed and improve the overall performance of the extension. By streamlining the data retrieval process, we can ensure a smoother and faster user experience. The proposed modification to the SendouqMatchPlayer interface is as follows:

type SendouqMatchPlayer = {
    userId: number;
    discordId: string;
    url: string;
    name: string;
    /** User's at the start time of the match */
    rank: SendouQRank | null;
};

With this modified interface, we can make a single API call to /api/sendouq/match/{matchId} and get all the information we need for each player in the match. This significantly reduces the number of API calls and improves the efficiency of the extension. This is the preferred approach as it optimizes data retrieval and minimizes the load on the Sendou.ink servers. By including the discordId, url, and name directly in the SendouqMatchPlayer interface, we eliminate the need for multiple API calls and streamline the data fetching process. This not only improves performance but also simplifies the codebase and makes it easier to maintain. The single API call approach ensures that all the necessary player information is readily available, allowing the extension to display accurate and up-to-date data in real-time. This is particularly crucial for a live streaming extension where timely and accurate information is paramount. Therefore, modifying the SendouqMatchPlayer interface is the most efficient and scalable solution for enhancing player data and ensuring a smooth user experience.

Why the Second Solution is Better

The second solution, modifying the SendouqMatchPlayer interface, is the clear winner here. It allows us to make a single API call to /api/sendouq/match/{matchId} for all the information we need. This is a huge improvement in efficiency compared to making eight separate API calls for each player. By reducing the number of API requests, we minimize the load on the Sendou.ink servers and improve the overall performance of the extension. Plus, having all the player data in one place makes the code cleaner and easier to maintain.

By including the discordId in the SendouqMatchPlayer interface, we can also easily fetch profile pictures from Discord's API, ensuring that we always have the most up-to-date images. This eliminates the issue of stale profile pictures and provides a more consistent and reliable user experience. The addition of url and name further enriches the player data, allowing us to display comprehensive information about each player in the match. This comprehensive view enhances the user experience and provides valuable context for viewers watching the stream.

In conclusion, modifying the SendouqMatchPlayer interface is the most efficient and effective way to enhance player data. It streamlines the data retrieval process, reduces the load on the servers, and ensures that the extension displays accurate and up-to-date information. This approach is not only beneficial for performance but also simplifies the codebase and makes it easier to maintain in the long run. By choosing this solution, we're investing in a more scalable and robust architecture that will support the continued growth and development of the Sendou.ink Twitch extension.

Conclusion

These enhancements to the GlobalTeamMembership and SendouqMatchPlayer interfaces will significantly improve the Sendou.ink Twitch extension. By adding the teamLogo field, we can provide a more visually appealing representation of global teams. And by modifying the SendouqMatchPlayer interface, we can streamline the data retrieval process and ensure that the extension displays accurate and up-to-date information for all players in a match. These changes are all about making the extension more user-friendly, informative, and enjoyable for everyone!

So, what do you guys think? Are there any other areas where we could improve the data we provide? Let us know your thoughts and suggestions in the comments below!