initial commit

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/component-test.yml

@@ -0,0 +1,22 @@
+name: Run Component Tests
+
+on: push
+
+jobs:
+  setup-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Tests
+        run: npm run test:component

.github/workflows/e2e-test.yml

@@ -0,0 +1,17 @@
+name: Run End-to-end tests
+
+on: push
+
+jobs:
+  setup-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run build
+          start: npm start

.github/workflows/unit-test.yml

@@ -0,0 +1,22 @@
+name: Run Unit Tests
+
+on: push
+
+jobs:
+  setup-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Tests
+        run: npm run test:unit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jude Agboola
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,123 @@
+<img width="1510" alt="Screenshot 2023-11-12 at 06 17 21" src="https://github.com/marvinjude/chess-tournament/assets/17142206/2d88ca96-908c-4d54-b3bb-9ae263e5887b">
+
+
+## chess-tournament
+
+FEN notation is like the language most chess apps speak. It helps show where the chess pieces are on the board and whose turn it is to make the next move. With this app, you can type in FEN notation, and it'll draw the chessboard for you. Plus, moving pieces is easy – just click where you want to move from and where you want to move to. You can also swap pieces by double-clicking.
+
+### Demo
+
+[Demo](https://dhis2-chess-by-jude.netlify.app/)
+
+### Installation
+
+Clone the repository:
+
+```sh
+git clone https://github.com/marvinjude/chess-tournament.git
+```
+
+Install dependencies:
+
+```sh
+npm i
+```
+
+Start the development server:
+
+```sh
+npm run dev
+```
+
+### Testing
+
+This project uses a combination of testing tools to ensure the quality and reliability of the code.
+
+- **Unit tests**: [Vitest](https://vitest.dev/) is used to test individual chess-related util functions in isolation to ensure they behave as expected. To run the unit tests, use the command `npm run test:unit`.
+
+- **e2e tests**: [Cypress](https://www.cypress.io/) is used to write basic e2e tests to ensure that the user sees the right thing when they visit the web page. To run the e2e tests, use the command `npm run test:e2e`.
+
+- **Component tests**: [Cypress](https://www.cypress.io/) is also used for component testing. Specifically, we're testing the Chessboard component to make sure that clicks and moves lead to the right result. To run the Component tests , run `npm test:component`.
+
+[GitHub Actions](https://docs.github.com/en/actions) is used to run these tests in CI. The test workflows are located in the [`.github`](https://github.com/marvinjude/chess-tournament/tree/main/.github/) folder
+
+### Design Choices
+
+Lots of design choices were made during the development of this app, but the major ones are as follows:
+
+- **Preserving the state of the board on invalid input**: Unmounting the chessboard anytime the user inputs an invalid FEN notation would lead to a janky UI so I decided to preserve the state of the board and disable the cells until the input is valid. While in that state, users can generate a random FEN notation to clear the error and go back to a good state.
+
+- **Built to be accessible from the ground up**: Whether you want to **tab** around or use the **arrow keys** to navigate between cells, I got you! most features in this application are built so that you won't need a mouse.
+
+- **Tactile Feedback**: Aside from the visual feedback you get when you click around, this application also uses sounds to convey the current action to the user which could make them feel immersed in the 'Game'
+
+
+### Additions
+
+- [x] **Fallback Mechanism**
+
+  - Allow users to fall back to a working state when the input is incorrect.
+
+- [x] **Preloading Optimization**
+
+  - Preload Chess pieces and sounds to enhance performance by eliminating the need for on-the-fly fetching during rendering.
+
+- [x] **Custom Themes**
+
+  - Provide users with the option to choose from different themes to personalize their experience.
+
+- [x] **Accessibility Enhancements**
+
+  - [x] Tab Navigation
+    - Users can navigate, select, and deselect elements using the tab key.
+  - [x] Arrow Key Navigation
+    - Allow users to navigate the grid using arrow keys for improved accessibility.
+  - [x] Keyboard Clicks
+    - Users can interact with various UI elements, including buttons, using keyboard inputs.
+  - [x] Aria-labels and Roles
+    - Enhance accessibility by adding appropriate **aria-labels** and roles to elements.
+  - [x] Lighthouse Accessibility Audit
+    - Score high on accessibility audits using Lighthouse for improved user experience.
+
+- [x] **Keyboard Shortcuts**
+
+  - [x] `Shift + R` - Generate a random FEN Notation.
+  - [x] `Shift + T` - Toggle between different application themes.
+
+- [x] **Tactile Feedback**
+
+  - [x] Cell Click
+    - Provide tactile feedback on cell clicks for a more interactive user experience.
+  - [x] Random FEN Generation
+    - Implement tactile feedback for random FEN generation.
+  - [x] Sound Enabled
+    - Incorporate tactile feedback for sound-enabled interactions.
+
+- [x] **Tips Dialog**
+  - Implement a Tips Dialog to guide users on how to effectively use the application.
+
+### Requirements Checklist
+
+- [x] When a valid FEN string is inserted into a text input it will display the corresponding chess pieces on the board.
+- [x] Chess pieces can be rendered either as images or as a text abbreviation of the type of piece (i.e. p for pawn).
+- [x] The FEN value should be persisted so that the “game” can continue after the page is reloaded
+- [x] Chess pieces can be:
+  - [x] selected
+  - [x] deselected
+  - [x] switched to another piece of the same color by ~~clicking~~ double clicking
+- [x] Once a chess piece is selected the piece can be moved by clicking on an empty square or a square occupied by an opposite color.
+- [x] Any piece can be moved to any suitable square. The app does not need to enforce chess piece movement rules.
+- [x] When a chess piece is moved, the FEN input will be updated with the corresponding value
+- [x] Write some tests!
+
+### Todos
+
+- [ ] Write more tests!
+- [ ] Fix issue with tabbing in Safari
+
+### Credits
+
+- Chess Pieces : [skak-svg](https://github.com/MuTsunTsai/skak-svg)
+- Sounds:
+  - [Soundjay](https://www.soundjay.com/buttons/button-33a.mp3)
+  - [Pixabay](https://cdn.pixabay.com/download/audio/2023/06/15/audio_a0e2c53290.mp3?filename=mouse-)

cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+  },
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+});

cypress/e2e/load.cy.js

@@ -0,0 +1,17 @@
+describe("Browser loads", () => {
+  it("loads with no page errors", () => {
+    cy.visit("/");
+    cy.get("body").should("contain", "FEN NOTATION");
+  });
+
+  it("loads with no console errors", () => {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        cy.stub(win.console, "log").as("consoleLog");
+        cy.stub(win.console, "error").as("consoleError");
+      },
+    });
+
+    cy.get("@consoleError").should("have.not.been.called");
+  });
+});

cypress/e2e/persist.cy.js

@@ -0,0 +1,36 @@
+it("Persists FEN Input", () => {
+  cy.visit("/");
+
+  const FEN = `2bk3r/p2pBpNp/n4n2/1p1NP2P/6P1/3P4/P1P1K3/q5b1`;
+
+  cy.get("input").clear();
+  cy.get("input").type(FEN);
+
+  cy.reload();
+
+  cy.get("input").should("have.value", FEN);
+});
+
+it("Persists Theme", () => {
+  cy.visit("/");
+
+  cy.get("[data-current-theme]").then(($elem) => {
+    const initialTheme = $elem.attr("data-current-theme");
+
+    cy.get("body").type("{Shift}T");
+
+    cy.get("[data-current-theme]")
+      .invoke("attr", "data-current-theme")
+      .then((newTheme) => {
+        expect(newTheme).not.to.equal(initialTheme);
+
+        cy.reload();
+
+        cy.get("[data-current-theme]").should(
+          "have.attr",
+          "data-current-theme",
+          newTheme
+        );
+      });
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>