RPS (Extended)

Extended Rock Paper Scissors Web3 Game Welcome to the extended version of Rock Paper Scissors (RPS) implemented on the Ethereum blockchain using web3 technology. This game extends the traditional RPS game by adding additional weapons, following the guidelines provided by the Wikipedia article on RPS and incorporating them into the gameplay.

Tech Used Frontend development and UI: Nextjs, tailwindcss, schadcn Blockchain interaction: wagmi , web3modal , viem State management: @tanstack/react-query , zustand Form handling: react-hook-form, zod How to Play

1. Creating a Game: The first party creates the game by initiating a smart contract transaction. They will commit their move, select the other player, and stake some ETH.

2. Joining the Game: The second party joins the game by paying the same amount of ETH as staked by the first party and chooses their move.

3. Revealing Moves: Once both parties have chosen their moves, the first party reveals their move, and the smart contract verifies it.

4. Determining the Winner: The smart contract determines the winner based on the game rules and distributes the ETH accordingly. In case of a tie, the ETH is split between the parties.

5. Timeouts: If any party stops responding during the game, timeouts are implemented to handle such scenarios securely.

Demo : To play the extended RPS game, follow these steps:

Visit Web3 RPS Game using a browser. Connect your Metamask wallet to the Ethereum testnet (Sepolia). Create a game or join an existing one following the on-screen instructions. Make your move and wait for the other party to reveal theirs. Enjoy the game and may the best strategist win!

The extended Rock Paper Scissors (RPS) project was built using a combination of frontend technologies, blockchain integration, state management, and form handling. Here's a detailed breakdown of how the project was constructed:

Technologies Used: Frontend Development and UI:

Next.js: Next.js was chosen for frontend development due to its ease of use, server-side rendering capabilities, and efficient routing system. Tailwind CSS: Tailwind CSS was utilized for styling the UI components, providing a utility-first approach and enabling rapid prototyping. Schadcn: This library likely handles specific UI components or utilities, but details about it are not readily available. Blockchain Interaction:

Wagmi: This is likely a library or tool specifically designed for Ethereum blockchain interaction. It provides functions and utilities to interact with smart contracts, handle transactions, and manage wallet connections. Web3modal: Web3modal simplifies the integration of Ethereum wallet providers into the application, enabling users to connect their preferred wallets seamlessly. Viem: This appears to be a custom or lesser-known library for blockchain interaction, possibly providing additional functionalities or abstractions for Ethereum development. State Management:

@tanstack/react-query: React Query is utilized for state management, providing a powerful solution for fetching, caching, synchronizing, and updating data in React applications. Zustand: Zustand is a state management library for React applications, offering a simple and straightforward API for managing global state. Form Handling:

React Hook Form: React Hook Form is used for form handling in the application, offering a flexible and efficient way to manage form state, validation, and submission. Zod: Zod is likely used for form validation, providing a schema-based approach to validate form inputs and ensure data integrity. Integration and Workflow: Frontend and Blockchain Integration: Next.js serves as the frontend framework, providing the UI components and handling user interactions. Blockchain interaction is facilitated through libraries like Wagmi and Web3modal, allowing users to connect their wallets, interact with smart contracts, and perform transactions seamlessly within the application. State Management: State management is handled using React Query and Zustand, enabling efficient data fetching, caching, and synchronization across components. Form Handling: React Hook Form and Zod are used for form handling, ensuring smooth user input validation and submission processes. Notable Aspects: Blockchain Security: The integration of blockchain technology ensures security and transparency in the game, as game moves and outcomes are recorded immutably on the Ethereum blockchain. Timeout Handling: Implementing timeouts to handle unresponsive players is a crucial aspect of the game's design, ensuring fair gameplay and preventing abuse. Smart Contract Logic: The smart contract logic for verifying moves, determining winners, and distributing rewards is a critical component of the project, implemented securely to prevent cheating or manipulation.