Radon Games

An open-source unblocked games website built with simplicity in mind.

Features

• Clean and Easy to use UI
• 300+ Games
• Tab Cloaking / Disguise

Development

Cloning

git clone --branch v3 https://github.com/Radon-Games/Radon-Games.git
cd Radon-Games
npm ci

Starting Development Server

The development server has hot module replacement for ease of development. THIS SHOULD NOT BE USED FOR PRODUCTION.

npm run dev

Adding Games

In order to add games to Radon, you will first need to download the game files using some form of a website scraper. Once you have the game files, you will have to upload them to the Radon-Games-Assets in the corresponding folder. Once the games have been uploaded to the repository, you will need to edit the src/data/games.json add add an entry for the game.

Building For Production

The build assets will appear in the /dist/public directory. You can run the production version with npm start although it is reccomended to process these files statically through Caddy file_server API (see more information below).

npm run build

Configuring Production

The recommended way to configure Radon is through Caddy. Caddy provides an easy to use and understand API for handling HTTP requests. This repository doesn't contain any game files due to the large file sizes. All the games are hosted on a separate repository found here.

In order to properly serve these files you need to use a reverse proxy to handle the different routes. Radon also hosts its own TOMP Bare server that needs to be proxied.

Base Caddy Configuration

Radon uses Caddy file_server API to serve the static files.

(radon) {
  tls internal # We also reccomend using cloudflare to proxy requests so SSL doesn't have to be configured on the server
  encode gzip # Apply gzip compression

  ... # Handle game files and Bare server

  handle {
    root * Radon-Games/dist/public
    try_files {path} /index.html # Handle non `/` routes
    file_server
  }
}

Handling Game Files

In order to handle game files you will first have to clone the assets repository into your base directory.

git clone https://github.com/Radon-Games/Radon-Games-Assets.git

Once the files have been cloned you have to handle the /cdn/* route used by Radon in your Caddy configuration file. The easiest way to do this is by directly serving the files through file_server. However, Radon uses query string parameters when requesting images to lower loading times and bandwidth usage. In order to handle these requests, you can optionally choose to use caddy-imagefilter as seen in the advanced implementation.

Simple Implementation

(radon) {
  ...

  handle /cdn/* {
    uri strip_prefix /cdn
    root * Radon-Games-Assets
    file_server
  }

  ...
}

Advanced Implementation

Requirements

• go
• xcaddy
• caddy-imagefilter

{
  order image_filter before file_server
}

# CDN Snippet
(cdn) {
  uri strip_prefix /cdn
  root * Radon-Games-Assets
  file_server

  @thumbnail {
    path_regexp thumb /.+\.(jpg|jpeg|png|gif|bmp|tif|tiff|webp)$
    query w=*
    query h=*
  }

  image_filter @thumbnail {
    resize {query.w} {query.h}
  }
}

# Website Snippet
(radon) {
  ...

  handle /cdn/* {
    import cdn
  }

  ...
}

Handling the Bare Server

Radon also hosts its own Bare Server in order for proxies to request content.

Starting Bare Server with pm2

Before we configure Caddy to handle proxied requests we need to set up a Bare Server. We run the bare server using a node process manager called pm2 although it is not required.

npm i -g pm2 @tomphttp/bare-server-node
pm2 start "bare-server-node --host=127.0.0.1 --port=8080" -n Bare

This will start the Bare server in the background but if the server restarts it will not be restarted. In order to fix this we must save the pm2 configuration and tell it to run on startup.

pm2 save
pm2 startup

Handling Bare requests with Caddy

(radon) {
  ...

  handle /bare/* {
    uri strip_prefix /bare
    reverse_proxy 127.0.0.1:8080 # Change port number to the port used by your bare server
  }

  ...
}

The full Caddyfile

Basic Implementation

# Website Snippet
(radon) {
  tls internal
  encode gzip

  handle /bare/* {
    uri strip_prefix /bare
    reverse_proxy 127.0.0.1:8080
  }

  handle /cdn/* {
    uri strip_prefix /cdn
    root * Radon-Games-Assets
    file_server
  }

  handle {
    root * Radon-Games/dist/public
    try_files {path} /index.html
    file_server
  }
}

Advanced Implementation

{
  order image_filter before file_server
}

# CDN Snippet
(cdn) {
  uri strip_prefix /cdn
  root * Radon-Games-Assets
  file_server

  @thumbnail {
    path_regexp thumb /.+\.(jpg|jpeg|png|gif|bmp|tif|tiff|webp)$
    query w=*
    query h=*
  }

  image_filter @thumbnail {
    resize {query.w} {query.h}
  }
}

# Website Snippet
(radon) {
  tls internal
  encode gzip

  handle /bare/* {
    uri strip_prefix /bare
    reverse_proxy 127.0.0.1:8080
  }

  handle /cdn/* {
    import cdn
  }

  handle {
    root * Radon-Games/dist/public
    try_files {path} /index.html
    file_server
  }
}

Configuring Domains

We recommend proxying your domains through Cloudflare in order to help prevent against DDoS attacks and to simplify the number of steps on the server. If you don't know how to setup your domain through Cloudflare please check out the Cloudflare Docs.

Once your domain has been added to Cloudflare you should create A records pointing to the IP address of your server.

Connecting your domain to Caddy

Caddy allows for multiple different domains to be handled separately by the same server. This means that by default Caddy isn't going to reply with any information because we haven't told it what domains we want to use.

example.com, www.example.com { # List of domains
  import radon
}

If you are configuring multiple domains you may want to have Caddy reply to all requests no matter what domain they are coming from, you can tell Caddy to listen on specific ports such as port 80 (default HTTP port).

:80 {
  import radon
}

Doing this also requires you to change your SSL/TLS encryption mode to Flexible from within Cloudflare as your server is no longer serving content through HTTPS.

Tech Stack

• SolidJS
• Solid Start
• Tailwind CSS
• Typescript

Other Libraries Used

• solid-slider
• fuzzysort
• vanilla-tilt
• Ultraviolet (proxy)
• STOMP (proxy)
• DIP (proxy)