# Match Up

Match Up! is a web application to create pairings of players from a pool and assign to a limited number of slots. It is [live](https://mu.karanj.com)!

Here it is in action:

![Game Page](https://gitlab.com/KaranJayachandra/match_up/-/raw/main/assets/docs.png?ref_type=heads)

Some features of this application are:

- Activate and deactivate named players, guests and courts
- Propose pairings to each court from a set of players
  - Considers player levels (optionally mingle players)
  - Prioritize players that haven't played as many games
- Timer to limit the time for each round

What this application ***IS***:

- Open: The source code is available for modifications and extension
- Private: All player data is stored in your browser via local storage

What this application ***IS NOT***:

- Secure: The data is available for anyone to observe via the browser console
- Performant: Works with a small number of named players (<3MB)

## Usage

- Select or deselect the courts available
- Check in and check out the regular players
- Optionally add guests to the game
  - Beginner: Level 1
  - Novice: Level 3
  - Intermediate: Level 6
- Choose how the pools should be created
  - All levels (Disregard levels)
  - 2 Levels (Players split into two categories)
  - 3 Levels (Players split into three categories)
  - Skill based (Consider all levels)
- Request a proposal and confirm to start a round
- Repeat as many times as needed
- Reset the session at the bottom of the page
- You can update the list of players by providing a CSV file. The format is show below:

|id|first_name|last_name|level|
|---|---|---|---|
|104|John|Doe|4|
|104|Jane|Doe|9|

Levels are defined between 1 to 10.

## Compilation

Please install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [node](https://nodejs.org/en) on your machine before proceeding further.

Once installed, open the terminal to a folder of your choosing and run the following commands to setup the application.

```bash
git clone https://gitlab.com/KaranJayachandra/match_up.git
cd match_up
npm install
```

To run a development server run `npm run dev` or run `npm run build` to create a optimized bundle of static content. I choose to serve this content via GitLab pages but you could choose to do so in any other server.

## Architectural Design Record

Key Learnings: 

- The choice of language is tightly coupled to application complexity requirements:
  - [Flask](https://flask.palletsprojects.com/en/stable/) or [Dash](https://dash.plotly.com/tutorial) applications are easy to develop but hard to deploy.
  - JavaScript is a superb language for creating shareable tools for non-technical people.
- Front end work and back end work are equally important in the success of an application.
- Vanilla JavaScript is enough for most simple applications; complex applications might benefit from [state](https://refactoring.guru/design-patterns/state).

At [my badminton club](https://www.bctsf.nl/) we run a hustle system to create matches of four players from a pool of players currently at the club. This application aimed to solve this problem.