makkaronis4e/deadly-calories

Deadly calories

This project is a simple implementation of the test task for the position of a front-end developer.

Deployments

On each push to the main branch, the project is automatically deployed to Vercel and GitHub Pages. GitHub Pages is not supporting SPA properly, so for the testing purposes it is better to use Vercel environment.

Implemented features

• There are list of 6 Mortal Kombat fighters available for selection.
• Each fighter has a name, a static image and a list of 3 animated images, which are displayed based on the fighter's state.
• Configuration includes the following params: 'starting calories', 'calories range', 'poison chance'.
• Application uses Pinia for state management.
• Configuration is stored in the store and game page is loaded with the url query params. Query params are source of truth and have highest priority.
• Application uses Composition API.
• As component library is used Vuetify.
• Application supports english and norwegian languages.
• Application supports dark and light themes.
• Theme and language are stored in the local storage.
• Styles are written in SCSS.
• Prettier and ESLint are used for code formatting and linting.
• Game can be restarted from any round.
• Logs stored by each fighter for each round and can be viewed in the game page (by hovering over the fighter's image).
• Logs export is available as a CSV file.

Tech stack

• pnpm
• Vue 3
• Vite
• Vuetify
• Pinia
• Vue-i18n
• ESLint
• Prettier
• SCSS

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint