Apple Tree Game

📔 About

This project is a mini-game that lets you collect apples from a tree. Pinia is used to store all states' central state management. Animations are made with the D3.js library. There are simple unit tests written with Vitest. Only supported on desktop devices and 1920px resolutions.

Showcase

📜 Tasks

• Vue application.
• There will be 4 objects on the screen. Apples, a tree, a basket, and a button.
• After clicking on the tree, it should be shaking for 3 seconds.
• After the shaking, the apples should be falling down separately.
• The apples should be in the basket one second after they drop.
• All effects (shaking, dropping) must be animated.
• Vuex or state management is a plus.

☑️ Extras

This section contains features made outside of the main tasks.

• Custom 404 error page.
• Basic unit tests with Vitest.
• Dockerfile is created and the container image is shared on DockerHub.
• Code analysis platform DeepSource is integrated. Quality issues have been fixed. Check on DeepSource.

💻 Tech Stack

• Vite
• Pinia
• D3.js
• Vue-Router
• Vitest
• Docker
• DeepSource

#️⃣ Commands

Run on Local Machine

git clone https://github.com/Eralpozcan/AppleTreeGame.git   // Clone the repository.
cd AppleTreeGame                                            // Change directory.
npm install                                                 // Install dependencies.
npm run dev                                                 // Run development mode.
npm run test:unit                                           // Execute unit tests.
npm run build                                               // Build the project.

After this command, the production files will be generated under dist/ directory.

Run on Docker

docker run --rm -d -p 80:80 --name apple-tree-game eralpozcan/appletreegame

After this command, the container will run on localhost.