kryha / bot-busters Goto Github PK

• Remove feature directory

  • Redistribute inner components to the components dir
  • Redistribute services into service dir
  • Redistribute pages into pages dir
  • Redistribute utils into utils dir

• Service (only backend code?)

• Remove unused Hooks useRoom

• Move routes to top level dir

• Move user & test from server/service into db

• Move logic from useMatchState into match page

• Move sprite-controller to components dir

• Remove animation feature in favour of creating AnimatedSVG component to encapsulate all animation logic including event handlers ( To be updated in future)

• Move mui into styles

• Rename scores for results

• Add switch depending on matchStage

• Move feature smart components into containers

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=248-2116&mode=design&t=Q6BKq7jZeM3Gw8tz-4

• Add Human & Bot buttons
• Slide left panel to the right to occupy more space
• Main chat panel should slide to the right taking over the whole right panel

Files that need to be added:

• CONTRIBUTING
• LICENSE - Apache 2.0
• Code of conduct

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=622-1803&mode=design&t=C2T3Ay3P5ZsUfg7i-4

After player has logged-in, the username will appear on the top-right corner in most pages.

On-clicking the username a card will be shown displaying the following data:

• Today's score
• Today's rank
• All time score
• All time rank

• Payout notifications:
  • Date - Amount of credits

Sign out button

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=805-1946&mode=design&t=d3FsmSw2Yi7AokAm-4

The Leaderboard should be a separate page with unique route /leaderboard.
(For now) It will display the "Daily" leaderboard.

https://developers.google.com/recaptcha/docs/v3

Since we'll allow anonymous users to play, we also need a way to identify malicious users / bots.
For this we'll implement reCAPTCHA v3 to generate a score and identify bots.

• Implement reCAPTCHA v3 on the landing page and lobby.
• If potential bot is detected offer a second CAPTCHA challenge to the user
• In case Prevent further navigation from this session until the CAPTCHA challenge is solved

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=881-3837&mode=design&t=d3FsmSw2Yi7AokAm-4

This should pop up after the chatroom timer reaches zero. Stay visible for two second and vanish revealing the Voting View

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=552-1955&mode=design&t=C2T3Ay3P5ZsUfg7i-4

Te top-right corner displays user data, depending on authentication state.

• Update Homepage route to render the "lobby" page component.

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=805-1567&mode=design&t=d3FsmSw2Yi7AokAm-4

Latest version of the homepage doesn't include the Leaderboard.

One addition is a fixed bottom section that horizontally scrolls through the top ranked profiles.

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=359-956&mode=design&t=Q6BKq7jZeM3Gw8tz-4

No matter where the user has clicked on "connect wallet" it will be always redirected to a "connect-wallet" route that will display a view while the signing takes place.

If the user is connecting the wallet for the first time it will also go through the username select flow

Zustand store will be used to keep match state

• chat (may change)
• voting
• results

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=552-2195&mode=design&t=C2T3Ay3P5ZsUfg7i-4

After the chat round has finished, each player will vote on whom is a bot. Since the decision will impact the over all scoring of other players we need to enforce this step, and make sure each player casts a vote.
If the player doesn't cast a vote in time they wont be getting any points from the previous round.

The button to "confirm" will display a timer and a bar that showcase the time left to cast a vote

• PNG Sprites
• SVG Sprites
• Alternatives

Check for:

• frames per second
• Amount of element being animated

• Clean up the messages logic from the Chat component.
• Add useMessages service hook.

Implement the following routes according to the base wireframes:

• login
• lobby
• chat
• decision
• results
• leaderboard

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=805-1880&mode=design&t=d3FsmSw2Yi7AokAm-4

The new menu should be always visible in the top-right corner.
The User Stats will be grouped together with the menu button and the sound button.

On click, the button uncovers a full screen view of the navigation items, centred in the middle of the screen.

One variation in the elements is the Connect / Sign-out item that will change depending on the authentication status of the given user.

The open menu view has a unique Footer showcasing copyright inf, Legal pages and third party links.

Remove older routes:

• chat
• decision
• results

These will be independent views triggered by the state of the match

• Remove Vercel references
• Setup Kubernetes
• Setup Docker containers
• Config for GCloud
• GitHub actions

Aleo Wallet login

• Local message signing (Client)
• Public Key/Address verification (Server)
• JWT Token generation (Server)
• Session Storage (Client)

• On Wallet connect prompt user to select a username (to be used in the Leaderboard)
• Store username and wallet address in the database with a UUID as primaryKey

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=242%3A26&mode=design

This story tracks the flow for an anonymous user to chat after it get's matched from a lobby
The judgment mechanic will be tracked on a different user story.

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=606-1910&mode=design&t=C2T3Ay3P5ZsUfg7i-4

At the beginning of each chat session the player will see an achievement prompt indicating suggested conversation starters.

The general structure of an achievement prompt will have two sections:

• Achievement name - Amount of points awarded - Action required to unlock the achievement
• Guideline on how to get the achievement

(The current implementation only will have one question or suggestion without points or guidelines)

During the chat round multiple achievement prompts can appear guiding the players to have a more engaged conversation.

After connecting the wallet for the first time the user will see a prompt to add their selected username.
In the background the user will see a blurred leaderboard (this is just a mocked image)

The user can click on a "generate" button multiple times to find a good username.

Username must be visible in the Lobby page, while waiting for a chat session.

• Implement Select Username View
• Implement random username generator

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=340-205&mode=design&t=Q6BKq7jZeM3Gw8tz-4

Columns for leaderboard:

• Rank : 1...n
• Score: int
• Player Address:
• Player Avatar

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=643-4190&mode=design&t=C2T3Ay3P5ZsUfg7i-4

As days progress we'll showcase leaderboards from multiple days in the pass.

Parent

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=805-2638&mode=design&t=d3FsmSw2Yi7AokAm-4

When users click on "Play", the join lobby event get's triggered and users are re-directed to the Lobby page.
The page contains a simple spinner for now, and the user stats component in the top-right corner.

After the user gets matched, a splash screen pops up and quickly goes away (feel free to animate this in the most simple way possible for now).

Navigation goes to /chat page (will be renamed) including the room_id in a query string.

Timer should start after splash screen from the transition disappears.

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=248-2904&mode=design&t=Q6BKq7jZeM3Gw8tz-4

The timer will start as a full bar that gets smaller as time goes by.
The bar will change color as it progress.
When timer reaches 30s left the bar should change to color red

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=606-1497&mode=design&t=C2T3Ay3P5ZsUfg7i-4

We'll have multiple timers running on different times of the game. The Timer service should offer a simple API to bootstrap a new timer with the given time limit, and an action to be triggered on time completion.

The backend timer service will be the source of truth for keeping the session time.
The correct time should be communicated through the web socket session, and synchronised with the clients as needed.

• Add timer length as constant in config file

Create schema for User props

• UUID (primary key): string
• username: string
• address: aleoAddress
• score: u64
• zpass_credentials: JSON(?)

This is for Anonymous users

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=552-1030&mode=design&t=C2T3Ay3P5ZsUfg7i-4

If the anonymous player has played at least one match, the score earned so far will be displayed in the top right corner of the screen. This will include:

• Today's Score
• Forecasted Player Rank

• Connect Wallet button

https://www.figma.com/file/g3BAl5VP2xrMoloyjmdJ2u/BotBuster?type=design&node-id=606-1497&mode=design&t=C2T3Ay3P5ZsUfg7i-4

Players will see a line on top of their chat message input field. The line will showcase the amount of time left for the current round. As the timer goes down so that the length of the line will be reduced.
After reaching a threshold the color of the line will change to remind the player that time is running out.