https://github.com/eralpozcan/appletreegame
An apple tree picking game with basic functionality using D3.js, Vue and Pinia.
https://github.com/eralpozcan/appletreegame
d3 deepsource docker pinia vitest vue3
Last synced: over 1 year ago
JSON representation
An apple tree picking game with basic functionality using D3.js, Vue and Pinia.
- Host: GitHub
- URL: https://github.com/eralpozcan/appletreegame
- Owner: eralpozcan
- License: mit
- Created: 2022-10-20T13:51:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T23:47:30.000Z (about 3 years ago)
- Last Synced: 2025-01-11T13:46:11.916Z (over 1 year ago)
- Topics: d3, deepsource, docker, pinia, vitest, vue3
- Language: Vue
- Homepage: https://apple-tree-game.vercel.app
- Size: 1.45 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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**
- [x] Vue application.
- [x] There will be 4 objects on the screen. Apples, a tree, a basket, and a button.
- [x] After clicking on the tree, it should be shaking for 3 seconds.
- [x] After the shaking, the apples should be falling down separately.
- [x] The apples should be in the basket one second after they drop.
- [x] All effects (shaking, dropping) must be animated.
- [x] Vuex or state management is a plus.
### ☑️ **Extras**
_This section contains features made outside of the main tasks._
- Custom 404 error [page](https://apple-tree-game.vercel.app/test-404).
- Basic unit tests with [Vitest](https://vitest.dev/).
- Dockerfile is created and the container image is shared on [DockerHub](https://hub.docker.com/r/eralpozcan/appletreegame).
- Code analysis platform DeepSource is integrated. Quality issues have been fixed. Check on [DeepSource](https://deepsource.io/gh/Eralpozcan/AppleTreeGame).
### 💻 **Tech Stack**
- [Vite](https://vitejs.dev/)
- [Pinia](https://pinia.vuejs.org/)
- [D3.js](https://d3js.org/)
- [Vue-Router](https://router.vuejs.org/)
- [Vitest](https://vitest.dev/)
- [Docker](https://www.docker.com/)
- [DeepSource](https://deepsource.io/)
### #️⃣ **Commands**
_Run on Local Machine_
```sh
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
docker run --rm -d -p 80:80 --name apple-tree-game eralpozcan/appletreegame
```
> After this command, the container will run on [localhost](http://localhost/).
