albertpratomo/chess

Chessboard built with Vue.

Chess

This is a chessboard which records which squares you clicked. You can play with it here.

Setup

1. git clone this repo
2. Install pnpm on your machine
3. pnpm i
4. pnpm dev
5. App should be live in localhost:3000
6. pnpm test to run the automated tests

Application Requirements

1. Create a page with a chessboard and a sidebar.
2. On desktop devices the sidebar should be positioned to the right of the chessboard.
3. On mobile devices the sidebar should be positioned below the chessboard.
4. The chessboard should resize responsively to consume available space.
5. Clicking a chessboard square should highlight the square.
6. Keep track of which squares are clicked and the order in which they're clicked.
7. Display the information collected from step 6 in the sidebar.

Notes

1. This app is fully responsive (mobile, tablet, desktop). The chessboard will grow to consume the available space.
2. As a bonus I added a feature where user can change the theme of the board. I implemented this feature using CSS variables.
3. I added a Vitest component test to ensure that the main functions are working well. See this test file.

Improvement List

1. Create reusable TS enum and type for type Theme = 'Green' | 'Brown' | 'Purple'.
2. Improve the ThemeSelect component to use a better dropdown component.
3. Use vue-i18n instead of hardcoding texts.
4. Add test for the "theme switching" feature.