# Challenge Task

Authored by Fabian Imhof and Noël Joost

## Introduction

We recreated "r/place" for this challenge task. "r/place" is part of the internet
forum "Reddit". The core principle of this "game" is simple:

- A blank canvas is provided
- Each person can color one pixel of the canvas
- Each person can only color a pixel every 5 minutes

On the popular forum this has lead to very creative and impressive artworks by
the different communities. It interestingly also lead to "wars" and "pacts" to
destroy/protect each others artworks.

![r/place canvas 2023](./assets/rplace.webp)

## Technologies

### Implementation

We have chosen to implement the "game" using plain javascript. The reasons for this
decision are the following:

- JS is one of the most simple language when it comes to running it (node & browser)
- JS Frameworks would not add any benefit to this app (SPA not needed)
- Typescript is usually considered the norm nowadays, but we decided against it for
simplicity. However, we added [JSDoc](https://jsdoc.app/) to have a minimal amount of "type safety".
- C#/Java etc have not been chosen due to the need of compilation and running a JVM/CLR.

To be able to run the application before having a docker setup, we used vite to start
a dev-server. The nginx docker container however builds the project and serves it on
its own without using vite. This way we can further develop the app with ease and
still use the same docker setup to run it.

### Load balancing

We have chosen to use [nginx](https://nginx.org/en/) as our load balancer. This choice
was made for the following reasons:

- Experience in nginx
- Simplicity of load balancer setup
- Easy to use as reverse-proxy

### Scheduled Task

To ensure a task is run every minute -no more, no less- we could not rely on running
it on neither the server, nor the client. For this reason we evaluated a cron job docker
service running a shell script as the simples and most elegant way to ensure this.

In our case the cron job generates random x, y and color values and dispatches a REST
request. The endpoint used is the same one the client uses to color the canvas.

### Database

We chose postgreSql as our database, because it is a very good database and also because
we have already used it in multiple other projects.

## Architecture

Our architecture is based around Nginx serving all necessary services to the correct
location. If a request is made nginx routes requests to `/api` to one of the servers
and for every other request the static html page is returned.
This would also allow us to handle the routing within the client app ourselves.

![architecture](./assets/architecture.png)
