blob: 99c4c1960e105a897d63ac1fc1b0b66f3f328c28 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
# 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:
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.
|
