# Uno-Online
## _Nearly as many features as bugs :)_

Uno-Online is a small UNO-Online game engine build during the pandemic 2020 because there is literally no other somewhat useful version of UNO out there. This is the most awesome and feature.rich online uno game I've ever seen. Yeah, i know ... I might not be unbiased ... also its probably the most buggy uno online game I've ever seen as well.

I developed this game in Summer 2020 within in a couple of weeks. It's one of my firtst web-apps using angular, typescript and websockets. Keep that in mind when scraping over my source code ... and be gentle with me. It's not meant to be beautiful or structured. I just wanted to get it done quickly! 

One last thing! The game does not support localization yet. So the entire UI is in german. Have fun with that!
## Features
- Base Uno-Game
- Special gamemodes
- Multiple lobbies
- scoreboard

## Structure
The Project is divided into to parts:
- Frontend + Proxy (nginx)
- Backend

The application is designed to be deployed using docker. 
Docker swarm, Google Kubernetes Engine or OpenShift should work, although there is no scalability in any direction yet.
It might be possible to higly integrate docker, so that there is one lobby server and every lobby spins up an seperate backend instance on the docker cluster. This is not implemented yet and might require a lot of work. The current implementation is more than fine for 20+ Players in multiple lobbies.

### Frontend + Proxy (nginx)
The frontend is developed using Angular 9. I know ... it's pretty old.

The frontend communicates to the backend using an REST-API on `/unogame` for everything related to lobby and initializing an connection. Everything else is handled by websockets on `/stream`.

Nginx provides the static html files, compiled by the Angular framework and proxies all requests on `/unogame` and `/stream` to the backend container.

The angular project is built in conjunction with the proxy using docker image build using multi-stage docker builds to keep container size as small as possible.

### Backend
The backend is written in TypeScript. The main file is located in `/UNO-Backend/server.ts`. All other source files are located in `/UNO-Backend/src/`.

The backend code is compiled using tsc. This is also handled by the docker image build command.

Node version 12.21.0 is required to execute the compiled files. Due to JSON-Files being imported during runtime you need to use the `--experimental-json-modules` on the node command in order to execute the backend.

## Setup Development Environment
UNO requires [Node.js](https://nodejs.org/) version 12.21.0.
```sh
nvm install 12.21
nvm use 12.21
```
Install the dependencies and devDependencies for the backend and frontend.
```sh
cd UNO-Backend
npm i
cd UNO-Angular
npm i
```

Spin up Angular Dev-Environment
```sh
cd UNO-Angular
ng serve --watch --port=4200 --proxy-config=proxy.conf.json
```

Spin up backend server
```sh
cd UNO-Backend
nvm use 12.21
tsc
node --experimental-json-modules dist/out-tsc/server.js
```


## Docker

UNO is very easy to build and run in a Docker container.

By default, the Docker backend will expose port 3000. This cannot be changed.
The Docker frontend will expose port 80.

Building the container does not require any dependncy installation on your local machine. This will happen inside a temporary docker build container.

To build the containers simply execute:
```sh
cd UNO-Backend
build . -t uno-backend 

cd UNO-Angular
build . -t uno-frontend 
```

This will create the UNO images and pull in the necessary dependencies.

### Run docker containers

```sh
sudo docker run -d --network host --name backend uno-backend
sudo docker run -d --network host uno-frontend
```

The server is now accessible on `http://localhost`.

> It is very important to specify the backend instance name as 'backend'. Nginx uses this name to resolve the containers IP address in the cluster.

Have fun!
