Tien Len Game - Copy this React, Tailwind Component to your project
Create a front end for an online card game based on the popular Vietnamese game Tiến Lên. The game should support both desktop and mobile views and allow players to join lobbies, play real time multiplayer games, and communicate via chat. Key features include: User Interface: A clean and responsive layout, displaying player avatars, card decks, and turn order. A central playing area showing the current cards in play, player hands, and the discarded pile. Support for drag and drop card functionality, or alternatively, a tap to select mechanic for mobile devices. Real time updates on whose turn it is, with a timer for each player's move. Display player rankings and win/loss history. Multiplayer Lobby: Players can create, join, or leave game rooms. Each room shows the number of participants, game status (waiting, in progress), and room settings (bet amount, number of players). Room chat where players can communicate before and during the game. Game Flow: Game logic to manage turns, deal cards, detect valid moves, and handle win/loss conditions. A clear and intuitive UI for actions such as 'Pass', 'Play', and 'End Turn'. Highlight valid card combinations based on the current round's rules (single cards, pairs, triples, etc.). Support for four players per room. Authentication & User Settings: Google OAuth for easy login. User profiles displaying statistics, win rate, and preferred avatar. Settings for customizing in game sounds, notifications, and card deck themes. Real time Updates: Implement real time updates using WebSockets to ensure instant player interaction during the game. Visual indicators for network issues or game reconnection support if a player disconnects temporarily. Additional Features: Leaderboard displaying top players globally or in a specific region. An optional betting system where players can wager in game currency. Tutorial mode for new players to learn how to play Tiến Lên. Design the UI with an emphasis on an enjoyable and competitive atmosphere, making sure the interface is sleek, simple to use, and optimized for both desktop and mobile experiences.
