Development of a React module for the mini-game "Lucky Ticket" for Telegram Mini App (WebSocket, TypeScript)

Development of a React module for the mini-game “Lucky Ticket” for Telegram Mini App (WebSocket, TypeScript)

1. General project description
   Task: Develop the client side (frontend) of the multiplayer mini-game “Lucky Ticket”.
   Environment: The module is embedded in the existing Telegram Mini App.
   Stack:

• Main game logic and rendering: React.

• Language: TypeScript.

• Interaction with the backend: WebSocket (main) + REST API (additional, if needed).

2. Architecture and area of responsibility (Important!)
   The application uses a hybrid approach.
   NOT included in the executor's tasks (already implemented in the application):

• Top bar (currency counters, burger menu).

• Bottom navigation menu (Shop, Tasks, Birds...).

• General initialization of Telegram WebApp, user authorization.

Included in the executor's tasks:

1. Implementation of the React game module, which is mounted in the provided HTML container in the central part of the screen.

2. Implementation of all internal game logic: ticket grid, room tabs, draw animation, internal popups (Rules, History).

3. Responsive layout of the Canvas content, so it correctly fills the designated space on different devices while maintaining design proportions.

4. Connection to the WebSocket backend of the game to receive states and send player actions.

3. Gameplay and UI states
   The entire UI of the game must strictly adhere to the provided layout in Figma (link will be provided to the executor).

3.1. State 1: Active round (Gathering participants)
Main screen where players buy tickets.

• Room tabs (Bet Tiers): Switches “1k”, “5k”, “10k”.

  • When switching, the active room changes, the ticket price, prize pool, and grid state are updated.

• Information block:

  • Current prize pool — updated in real time.

  • Ticket price in the current room.

• Ticket grid (20 cells):

  • Free ticket: Ticket icon. Clickable. When clicked, it changes to “Selected” state.

  • Selected ticket: Slightly dimmer and smaller (as in Figma).

  • Occupied ticket (Other): Displays a placeholder avatar of another player. Non-clickable.

  • Occupied ticket (Own): Displays the avatar of the current user (avatar data must be passed to the module during initialization). Non-clickable.

• Action button (Buy):

  • Always gray (as in Figma).

  • If tickets are selected and there are enough funds: active (orange), displays the total purchase amount. When clicked, it sends a purchase request.

  • If selected but not enough funds: inactive, a message “You don’t have enough silver” appears on top.

• Timer: Countdown to the automatic start of the draw (HH:MM).

3.2. State 2: Draw (Spinning)
Transition to this state is initiated by an event from the backend (timer expired OR all 20 tickets sold).

• Blocking: The ticket grid and purchase button are blocked/dimmed.

• Spinner animation: A panel with three “slots” appears over the grid. Fast animation of the avatars of participants in the current round runs in the slots (slot machine effect).

• Determining winners:

  • The backend sends a list of three winners.

  • The slots stop simultaneously: 1st place, 2nd, and 3rd, showing the avatar, name of the winner, and prize amount.

• Completion: After showing all results, the game automatically returns to State 1 (new round) after a few seconds.

3.3. Additional elements (inside Pixi)

• Panel “5 Last games”: Table at the bottom of the screen. Data comes from the backend during initialization and is updated after each draw.

• Popup “Info” (Rules): Opens with the button (?). Modal window inside Canvas, overlaying the game. Static text.

• Popup “History” (My games): Modal window with a table of the user's personal game history and pagination. Data is loaded from the backend.

4. Interaction with the backend (Data Flow)
   The module must be a “thin client”. All validation logic, win calculations, and timers are on the server. Connection via WebSocket.

5. Implementation requirements

6. Graphics and assets:

   • All visual elements must be taken strictly from Figma.

   • Use texture atlases (sprite sheets) for optimization.

7. Animations: Implement smooth animations (spinner, opening popups, highlighting buttons).

8. Optimization: The game must run smoothly on mid-range mobile devices. Monitor memory consumption, avoid leaks when switching rooms.

9. Typing: Strict use of TypeScript, typing all input and output data of the API.