# Game Timer

Multi-player game-timer timer with carousel navigation

## Project Structure

```
game-timer/
├── css/            # CSS stylesheets
├── icons/          # App icons
├── images/         # Image assets
├── js/             # Symbolic link to src/js for compatibility
├── index.html      # Main HTML entry point
├── manifest.json   # PWA manifest 
├── sw.js           # Service Worker
├── src/            # Source code
│   └── js/         # JavaScript files
│       ├── core/   # Core application logic
│       ├── ui/     # UI-related code
│       └── services/ # External services integration
├── Dockerfile      # Docker container definition (nginx)
├── .dockerignore   # Files to exclude from Docker build
├── .env            # Environment variables for production
├── .env.example    # Example environment variables template
└── package.json    # Project metadata and deployment scripts
```

## Environment Variables

The application uses environment variables for configuration. These are loaded from a `.env` file at runtime.

### Setting Up Environment Variables

1. Copy `.env.example` to `.env`:
   ```bash
   cp .env.example .env
   ```

2. Edit the `.env` file with your own values:
   ```
   # Public VAPID key for push notifications
   PUBLIC_VAPID_KEY=your_public_vapid_key_here
   
   # Backend URL for push notifications
   BACKEND_URL=https://your-push-server.example.com
   ```

3. For security, never commit your `.env` file to version control. It's already included in `.gitignore`.

### Generating VAPID Keys

For push notifications, you need to generate your own VAPID keys:

```bash
npx web-push generate-vapid-keys
```

Use the public key in your `.env` file and keep the private key secure for your backend server.

# PWA Containerized Deployment

This document provides step-by-step instructions to pull the source code and deploy the Progressive Web App (PWA) using Docker on a production server.

## Prerequisites

- **Git:** Installed on your production server.
- **Docker:** Installed and running on your production server.
- **Basic Knowledge:** Familiarity with the command line.

## Steps

### 1. Clone the Repository

Log in to your production server and navigate to the directory where you want to store the project. Then run:

```bash
git clone https://gitea.virtonline.eu/2HoursProject/game-timer.git
cd game-timer
```

### 2. Build the Docker image

From the repository root, run the following command to build your Docker image:

```bash
docker build -t 'game-timer:latest' .
```

or use the npm script:

```bash
npm run docker:build
```

### 3. Run the Docker Container

Once the image is built, run the container on port 80 with:

```bash
docker run -d -p 80:80 --name game-timer game-timer:latest
```

or use the npm script:

```bash
npm run start
```

### 4. Verify the Deployment

Check if it's running:

```bash
docker ps
```

View logs (if needed):

```bash
docker logs game-timer
```

After running the container, open your web browser and navigate to:

```
http://localhost
```

### 5. Terminate

To stop your running game-timer container, use:

```bash
docker stop game-timer
docker rm game-timer
```

or use the npm script:

```bash
npm run stop
```

## Development

For local development without Docker, you can use any static file server such as:

```bash
python -m http.server
```

or

```bash
npx serve
```

This will start a local development server and you can access the application in your browser.