https://github.com/barai-vivek/tripsygametask

This is just an interview task. Task is described well in ReadMe file.
https://github.com/barai-vivek/tripsygametask

animation gamescreenui hybrid-application react-native-app timer

Last synced: 8 days ago
JSON representation

This is just an interview task. Task is described well in ReadMe file.

• Host: GitHub
• URL: https://github.com/barai-vivek/tripsygametask
• Owner: Barai-Vivek
• Created: 2023-11-28T12:48:56.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-30T05:05:56.000Z (8 months ago)
• Last Synced: 2024-09-26T21:23:35.928Z (8 days ago)
• Topics: animation, gamescreenui, hybrid-application, react-native-app, timer
• Language: TypeScript
• Homepage:
• Size: 31.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![](tripsygame-task.gif)

**Tasks covered:**

- **Create a RN Rummy app UI:**

  - On launch, it should open the 2-player game table in landscape mode and show:

    - Hand cards opening up.

    - Closed and open deck.

    - Sort button.

  

- **Gameplay:**

  1. Start the timer of your turn for 60 sec.

  2. A person can pick a card and then can discard.

  3. Once done or timer ends, the turn should move to the opponent. Once the opponent's timer ends, it should be your turn again. Repeat the above steps.

- **User Interaction:**

  - Provide a "Leave" button to exit the game at any point in time.

- **Structure:**

```

project-root/

|-- src/

|   |-- components/

|   |   |-- CardDeck.tsx

|   |   |-- CircularProgressBar.tsx

|   |   |-- Footer.tsx

|   |   |-- Header.tsx

|   |   |-- Table.tsx

|   |   |-- UserProfile.tsx

|   |   |-- index.ts

|   |   |-- types.ts

|   |-- asset/

|   |   |-- icons/

|   |   |   |-- [icon files]

|   |   |-- images.ts

|   |   |-- index.ts

|   |-- Constants.ts

|   |-- index.ts

|-- node_modules/

|-- package.json

|-- [other project files]

```

- **Dependencies Used:**

  - react-native-circular-progress-indicator

  - react-native-exit-app

  - react-native-reanimated

  - react-native-svg

  - react-native-svg-charts

- **Logic:**

  - setInterval hook is used to maintain the timer logic.

  - Once your user selects the card your user can also deselect the card. This is done with useState hook.

  - Once you select any card sort button will be converted to Discard.

  - Once the selection of card is done and timer is running you can deselect the same or you can click on Discard Button.

  - If your timer is finished and you haven’t unselected the card the timer will move to opponent user and your selection will be discarded.

  - When opponent timer is running you cannot select the card.