# Flash-Container

Skip the fairy-tale, just give me the code already --> [Click Here](https://teb.codes/2-Code/Docker/Flash-Container#usage)

# FlashContainer: Host & Serve Flash (.swf) Files with Ruffle

**FlashContainer** is a lightweight container designed to host and serve Flash `.swf` files using the Ruffle emulator. This allows you to easily run and view Flash-based content in a modern browser, even after Flash's official deprecation.

## How It Works

This container runs a web server using Node.js and serves `.swf` files via the [Ruffle](https://ruffle.rs/) emulator, which is a Flash Player emulator written in Rust. The emulator provides a modern way to play old Flash content by converting it to formats supported by current browsers.

- **Ruffle Integration**: The container downloads the latest nightly release of Ruffle, ensuring up-to-date compatibility with `.swf` files.
- **http-server**: This serves the content via HTTP, exposing it on port 80.
- **External SWF File**: You can map your own `.swf` files via Docker volume, making it easy to change content without modifying the image itself.

## Usage

1. **Pull the Image**
   ```bash
   docker pull tebwritescode/flashcontainer
   ```

2. **Run the Container**

   Mount your `.swf` file into the container with a volume mapping:

   ```bash
   docker run -d -p 80:80 -v /path/to/your/game.swf:/app/game.swf tebwritescode/flashcontainer
   ```

   - `/path/to/your/game.swf` should be replaced with the path to your local `.swf` file.
   - The container will serve your `.swf` file at `http://localhost`.

3. **Access the Website**

   Open a browser and navigate to `http://localhost` (or the IP where your container is hosted) to view and interact with your Flash file.

## Features

- **Serve Flash Content Easily**: Simple setup for serving `.swf` files.
- **Ruffle Emulator**: Play Flash content in a browser without needing Flash Player.
- **Volume Mapping**: No need to modify the container—just swap out the `.swf` file.
- **Lightweight**: Minimal image size using Node.js and Ruffle.

## Customization

- You can modify the HTML file that hosts the `.swf` content by editing `index.html` and adjusting the Ruffle embed configurations.
- Use different `.swf` files by swapping the file you mount to `/app/game.swf`.

## Requirements

- Docker installed on your host machine.
- A valid `.swf` file to be served.

## Screenshots
![Landing Page](https://nc.tebplex.tv/apps/files_sharing/publicpreview/ScQpa7TSDMAQx8s?file=/&fileId=3630&x=3024&y=1964&a=true&etag=ac32f5388179a139bd9052daa7046537)

![Responsive](https://nc.tebplex.tv/apps/files_sharing/publicpreview/AgAbowa3NRSBxy9?file=/&fileId=3645&x=3024&y=1964&a=true&etag=c92438fe09b99fc567ecfed90eabb69c)

![Ruffle](https://nc.tebplex.tv/apps/files_sharing/publicpreview/P9kWwmKEGrWdfB2?file=/&fileId=3578&x=3024&y=1964&a=true&etag=9449023d2a1bb1b329988829c73a705d)

---
## Source
Dockerfile

```
# Base image with Node.js and http-server to serve files
FROM node:20-bullseye

# Install http-server globally to serve files
RUN npm install -g http-server

# Set working directory
WORKDIR /app

# Download the specified nightly release of the Ruffle self-hosted package
# Install additional dependencies: Java, Git
RUN apt-get update && apt-get install -y \
    default-jdk \
    maven \
    git \
    default-mysql-client \
    libasound2-dev \
    libxcb-shape0-dev \
    libxcb-xfixes0-dev \
    libgtk-3-dev \
    libudev-dev \
    libxcb-xinput-dev \
    libxcb-xkb-dev \
    libxcb-cursor-dev \
    default-jre-headless \
    cmake \
    g++ \
    unzip \
    wget \
    && apt-get clean \
    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
    . "$HOME/.cargo/env"

# Install curl and jq to fetch the latest Ruffle nightly release
RUN apt-get update && apt-get install -y curl jq

# Download the latest nightly release of Ruffle
RUN LATEST_RELEASE_URL=$(curl -s https://api.github.com/repos/ruffle-rs/ruffle/releases | jq -r '.[] | select(.prerelease == true) | .assets[].browser_download_url | select(contains("web-selfhosted.zip"))' | head -n 1) && \
    wget $LATEST_RELEASE_URL -O /tmp/ruffle-nightly.zip && \
    mkdir -p /app/ruffle && \
    unzip /tmp/ruffle-nightly.zip -d /app/ruffle && \
    rm /tmp/ruffle-nightly.zip

# Take out the trash
RUN rm -rf ./ruffle-nightly-2024_10_13-web-selfhosted.zip

# Copy the local HTML file into the container
COPY ./index.html /app/index.html

# Copy the local game file into the container
#COPY ./game.swf /app/game.swf

# Expose port 80 for serving the SWF game
EXPOSE 80

# Command to serve the game using http-server
CMD ["http-server", ".", "-p", "80"]
```

index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="ruffle/ruffle.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #ruffle-player {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script>
        window.RufflePlayer = window.RufflePlayer || {};

        window.RufflePlayer.config = {
            "letterbox": "on",
        }

        window.addEventListener("DOMContentLoaded", () => {
            let ruffle = window.RufflePlayer.newest();
            let player = ruffle.createPlayer();
            player.style.width = "100%"; // Set player's width to 100%
            player.style.height = "100%"; // Set player's height to 100%
            document.body.appendChild(player);
            player.load("game.swf"); // Load the local SWF file named game.swf
        });
    </script>
</body>
</html>
```
---



By using **FlashContainer**, you can keep your favorite Flash content alive and playable through modern web technologies.