Implement Tweet Sharing with Game Grid Screenshot and Leaderboard Position on Game Over

[Cheelax]

Description: We need to implement a feature that allows players to share their game results on Twitter, including a screenshot of their final game grid and their position on the leaderboard, when a game ends.

Tasks:

1. Implement Screenshot Capture
   • Create a utility function to capture the game grid as an image
   • Ensure the captured image is of high quality and represents the final state accurately
2. Implement Leaderboard Position Retrieval
   • Create a function to fetch the player's current position on the leaderboard
   • Ensure this function is efficient and doesn't cause significant delays
3. Create Tweet Sharing Functionality
   • Implement a function to construct and send a tweet with the game screenshot and leaderboard position
   • Include relevant game information (score, mode, leaderboard position) in the tweet text
4. Update GameBoard Component
   • Add a ref to the game grid element for screenshot capture
   • Implement a game over handler that includes screenshot capture, leaderboard position retrieval, and tweet functionality
5. Create UI for Tweet Sharing
   • Add a "Share on Twitter" button to the game over screen or modal
   • Ensure the button is visually appealing and fits with the existing UI
6. Testing
   • Test screenshot capture on various devices and screen sizes
   • Verify tweet posting functionality with different game results and leaderboard positions
   • Ensure proper user feedback

Acceptance Criteria:

• Players can easily share their game results on Twitter
• The shared tweet includes an accurate screenshot of the final game grid
• The tweet text includes relevant game information (score, mode, leaderboard position)
• The leaderboard position in the tweet is accurate and up-to-date
• The feature works consistently across different devices and screen sizes
• Users receive clear feedback on the success or failure of the tweet posting

Additional Considerations:

• Consider adding options for players to customize their tweet text

[EjembiEmmanuel]

@Cheelax I'd love to work on this

[manlikeHB]

Hi @Cheelax, I'm a web3 dev. I would love to work on this.

[ShantelPeters]

Hi @Cheelax can i work on this .

[GoSTEAN]

@Cheelax I am applying via OnlyDust Platform

How I plan on tackling this

1. Implement Screenshot Capture: Develop a utility function that captures the final game grid as a high-quality image, ensuring it accurately represents the game's final state.

2. Retrieve Leaderboard Position: Create a function to efficiently fetch the player's current leaderboard position without causing delays, to be included in the tweet.

3. Create Tweet Sharing Functionality: Implement a function that constructs and sends a tweet, incorporating the screenshot, game score, mode, and leaderboard position, while considering options for customizable tweet text.

4. Update the GameBoard Component: Add a ref to the game grid for screenshot capture, and modify the game over handler to include the screenshot, leaderboard position retrieval, and tweet sharing functionality.

5. Design and Test the Tweet Sharing UI: Add a "Share on Twitter" button to the game over screen, ensuring it is visually integrated with the existing UI, and thoroughly test the feature across various devices to verify that tweets are accurate and the user experience is smooth.

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷.

How I plan on tackling this issue

ETA- 3 days

1. Create a Utility Function for Screenshot Capture:
   • I will use the html2canvas library to capture the game grid as an image. I will create a utility function called captureGameGrid that will take a reference to the game grid element and return a base64-encoded image.

import html2canvas from 'html2canvas';

   const captureGameGrid = async (gameGridRef: React.RefObject<HTMLDivElement>): Promise<string> => {
     if (gameGridRef.current) {
       const canvas = await html2canvas(gameGridRef.current);
       return canvas.toDataURL('image/png');
     }
     throw new Error('Game grid element not found');
   };

2. Implement Leaderboard Position Retrieval:
   • I will create a function getLeaderboardPosition that retrieves the player's current position from the backend API. I’ll use axios or the Fetch API for this purpose.

   const getLeaderboardPosition = async (playerId: string): Promise<number> => {
     const response = await fetch(`/api/leaderboard/position?playerId=${playerId}`);
     if (response.ok) {
       const data = await response.json();
       return data.position;
     }
     throw new Error('Failed to retrieve leaderboard position');
   };

3. Construct and Send the Tweet:
   • I will implement a function shareOnTwitter that takes the screenshot, leaderboard position, and other game details, and then constructs a tweet using the Twitter API. This may involve opening a new window with the pre-filled tweet using a URL or integrating OAuth for direct posting.

   const shareOnTwitter = (image: string, position: number, score: number, mode: string) => {
     const tweetText = `I just finished a game in ${mode} mode with a score of ${score}, ranked #${position} on the leaderboard! Check out my final game grid:`;
     const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&hashtags=GameName&url=${encodeURIComponent(image)}`;

     window.open(twitterUrl, '_blank');
   };

4. Update the GameBoard Component:
   • I will add a ref to the game grid element to capture its state, and implement a handleGameOver function that chains the screenshot capture, leaderboard position retrieval, and tweet construction.

   const gameGridRef = useRef<HTMLDivElement>(null);

   const handleGameOver = async () => {
     try {
       const screenshot = await captureGameGrid(gameGridRef);
       const position = await getLeaderboardPosition(playerId);
       shareOnTwitter(screenshot, position, score, mode);
     } catch (error) {
       console.error('Error sharing on Twitter:', error);
     }
   };

5. Design the 'Share on Twitter' Button:
   • I will create a visually appealing "Share on Twitter" button, ensuring it integrates well with the existing UI.

I will love to work on this if assigned. Thanks! @Cheelax

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced Full Stack Blockchain Developer, I'm excited to contribute my expertise to Edition 7 of the OnlyDust hackathons. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Solidity, and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 28 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. My track record includes being a major contributor to building out the Pistols Web game by Underware and demonstrates my ability to adapt quickly and contribute effectively to diverse challenges. I'm confident in my capacity to tackle new problems and drive innovation in the blockchain space. As we embark on Edition 7, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development. With a passion for creating cutting-edge solutions, I'm excited to collaborate with the OnlyDust community and contribute to the advancement of the blockchain ecosystem.

How I plan on tackling this issue

To solve this issue, i would:

Implement Screenshot Capture Create a utility function to capture the game grid as an image using the HTML Canvas API. This will involve rendering the game grid elements onto a canvas element, ensuring the canvas size matches the game grid dimensions, and converting the canvas to a base64-encoded image data URL. Ensure the captured image is of high quality and represents the final state accurately by setting the canvas resolution to a higher pixel density and applying any necessary styling or post-processing. Implement Leaderboard Position Retrieval Create a function to fetch the player's current position on the leaderboard. This will involve making an API call to the game's backend to retrieve the current leaderboard data, parsing the response, and finding the player's position. Ensure this function is efficient and doesn't cause significant delays by implementing caching or other optimization techniques and using efficient data structures and algorithms. Create Tweet Sharing Functionality Implement a function to construct and send a tweet with the game screenshot and leaderboard position. This will involve composing the tweet text, including the game score, mode, and leaderboard position, attaching the game screenshot image, and using a third-party Twitter API library to post the tweet. Ensure the tweet text fits within the character limit and includes all the relevant game information. Update GameBoard Component Add a ref to the game grid element to be used by the screenshot capture utility function. Implement a game over handler that includes screenshot capture, leaderboard position retrieval, and tweet functionality. When the game ends, this handler will call the necessary functions to capture the screenshot, fetch the player's leaderboard position, and share the results on Twitter. Create UI for Tweet Sharing Add a "Share on Twitter" button to the game over screen or modal. This will involve creating a new UI component for the button, positioning it in a prominent location, and ensuring the button's design is visually appealing and consistent with the game's UI. Ensure the button is visually appealing and fits with the existing UI by using appropriate colors, typography, and icons, and implementing hover and active states. Testing Test the screenshot capture on various devices and screen sizes to verify the image quality and accuracy. Verify the tweet posting functionality with different game results and leaderboard positions to ensure the tweet text and attached image are correct. Ensure proper user feedback by providing clear feedback when the tweet is successfully posted and displaying appropriate error messages if the tweet posting fails.

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure. I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges. As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

I will approach the issue of implementing a feature that allows players to share their game results on Twitter, including a screenshot of their final game grid and their position on the leaderboard, when a game ends, as follows:

1. Implement Screenshot Capture: a. I will create a utility function to capture the game grid as an image. b. I will ensure the captured image is of high quality and represents the final state accurately. c. I will consider using a library like html2canvas or canvas-to-blob to capture the game grid. d. I will optimize the screenshot capture process to minimize performance impact on the game.

2. Implement Leaderboard Position Retrieval: a. I will create a function to fetch the player's current position on the leaderboard. b. I will ensure this function is efficient and doesn't cause significant delays in the game flow. c. I will consider caching the leaderboard data to improve the retrieval speed. d. I will handle edge cases, such as players with the same score, to ensure the leaderboard position is accurate.

3. Create Tweet Sharing Functionality: a. I will implement a function to construct and send a tweet with the game screenshot and leaderboard position. b. I will include relevant game information (score, mode, leaderboard position) in the tweet text. c. I will use a Twitter API client library or the Twitter Oauth flow to handle the tweet posting. d. I will ensure the tweet posting is asynchronous and doesn't block the game flow.

4. Update GameBoard Component: a. I will add a ref to the game grid element for screenshot capture. b. I will implement a game over handler that includes screenshot capture, leaderboard position retrieval, and tweet functionality. c. I will ensure the game over handler is called at the appropriate time and doesn't interfere with the normal game flow.

5. Create UI for Tweet Sharing: a. I will add a "Share on Twitter" button to the game over screen or modal. b. I will ensure the button is visually appealing and fits with the existing UI. c. I will consider adding options for players to customize their tweet text.

6. Testing: a. I will test the screenshot capture on various devices and screen sizes. b. I will verify the tweet posting functionality with different game results and leaderboard positions. c. I will ensure proper user feedback, such as success or failure messages, for the tweet posting. d. I will write comprehensive unit and integration tests to ensure the feature works as expected.

By breaking down the issue into these steps and stages, I can ensure a thorough and organized approach to implementing the Twitter sharing feature for the game. I will collaborate with the team, gather feedback, and iterate on the implementation to deliver a high-quality feature that meets the acceptance criteria and user needs.

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web developer with over 6 years experience building applications both personal and professional projects. I started contributing to open source via onlydust in march this year and I have contributed to a couple of issues, you can see them in my profile.

How I plan on tackling this issue

Create a screenshot function to capture the game grid and fetch the player's position on the leaderboard. Will then proceed to implement a send a tweet functionality with the game screenshot and the leaderboard position and include more relevant information in the tweet text. Update the gameboard component to have the screenshot, leaderboard position and a button to share as a tweet. I will ensure to test this on numerous devices and screen sizes to make sure it works as intended. I will also add a toast notification to let the user know if their tweet was posted successfully. I will add the option for the user to be able to customize their tweet. This will take an estimate of 3 days if assigned to me

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @Cheelax

I can work on the "Share Game Results on Twitter" feature. My name is Benjamin, and I have extensive experience in implementing features that enhance user interaction and integrate with external platforms. I’ve worked on various projects where I focused on creating seamless user experiences and incorporating social media functionalities.

Understanding the Issue

The goal is to enable players to share their game results on Twitter, including a screenshot of their final game grid and their position on the leaderboard, when a game ends. This will allow players to showcase their achievements and engage with the community.

How I plan on tackling this issue

Implement Screenshot Capture

• Utility Function: I will create a utility function to capture the game grid as an image.
• Image Quality: The captured image will be of high quality, accurately representing the final state of the game.

Implement Leaderboard Position Retrieval

• Position Function: I will create a function to fetch the player’s current position on the leaderboard.
• Efficiency: This function will be optimized to avoid significant delays.

Create Tweet Sharing Functionality

• Tweet Construction: I will implement a function to construct and send a tweet with the game screenshot and leaderboard position.
• Tweet Text: The tweet will include relevant game information such as score, mode, and leaderboard position.

Update GameBoard Component

• Ref for Screenshot: I will add a ref to the game grid element to facilitate screenshot capture.
• Game Over Handler: A handler will be implemented to capture the screenshot, retrieve the leaderboard position, and post the tweet when the game ends.

Create UI for Tweet Sharing

• Share Button: I will add a "Share on Twitter" button to the game over screen or modal.
• Visual Appeal: The button will be designed to fit seamlessly with the existing UI.

Testing

• Screenshot Capture: I will test the screenshot capture functionality across various devices and screen sizes.
• Tweet Posting: I will verify the tweet posting functionality with different game results and leaderboard positions.
• User Feedback: I will ensure that users receive clear feedback on the success or failure of the tweet posting.

[josephchimebuka]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @Cheelax I am Joseph Chimebuka I'm a full-stack software developer with 4+ years of experience in crafting innovative products. I've built a range of projects, including https://mattedsgn.vercel.app/ and https://metacrypt.vercel.app/ showcasing my expertise in React, Next.js, and blockchain technologies. I'm also an active contributor onlydust. here's my account https://app.onlydust.com/u/josephchimebuka.

How I plan on tackling this issue

I will use html2canvas to capture a screenshot of the final game grid when the game ends.

I will create a text message that includes the player's position on the leaderboard and any other relevant details.

I will use the Twitter API to open a pre-filled tweet that includes the text message and the screenshot as an image.

I will add a "Share on Twitter" button on the game end screen that triggers the above functionality when clicked.

[Cheelax]

Hi everyone. There is a new process for the ODHack, now you must apply to the tasks directly from Onlydust: https://app.onlydust.com/hackathons/odhack-70 We will only look at application made via this process.

[onlydustapp[bot]]

The maintainer Cheelax has assigned Ayoazeez26 to this issue via OnlyDust Platform. Good luck!