# io.Connect Desktop Splash Screen

A modern TypeScript-based splash screen application built with Vite for io.Connect Desktop.

## Overview

This splash screen application is built using Vite with TypeScript and replicates the functionality of the original JavaScript-based splash screen. It provides a loading interface during application startup with status updates and gateway connectivity testing.

## Features

- **TypeScript Support**: Full type safety with proper interfaces
- **Modern Build System**: Vite for fast development and optimized builds  
- **Status Updates**: Displays loading messages and progress
- **Gateway Testing**: Tests WebSocket connectivity to the gateway
- **URL Parameter Support**: Configurable via query parameters
- **Responsive Design**: Maintains the original visual design

## Development

### Prerequisites

- Node.js (v16 or higher)
- npm

### Getting Started

1. Install dependencies:
```bash
npm install
```

2. Start development server:
```bash
npm run dev
```

3. Build for production:
```bash
npm run build
```

4. Preview production build:
```bash
npm run preview
```

### Type Checking

Run TypeScript type checking:
```bash
npm run type-check
```

## URL Parameters

The splash screen accepts the following URL parameters:

- `message`: Initial status message to display
- `version`: Application version number  
- `env`: Environment name (e.g., "DEMO", "PROD")
- `region`: Region identifier (e.g., "INTEROP.IO")

Example:
```
splash.html?message=Starting&env=DEMO&region=INTEROP.IO&version=9.0.0.25
```

## API Integration

The splash screen integrates with the main application via the `glue42splash` global object:

### Events

- **updateStatus**: Updates the status message
  ```typescript
  glue42splash.on("updateStatus", (arg: { text: string }) => {
    // Updates status display
  });
  ```

- **pingGW**: Tests gateway connectivity
  ```typescript
  glue42splash.on("pingGW", (arg: { gwURL: string }) => {
    // Tests WebSocket connection to gateway
  });
  ```

## File Structure

```
src/
├── main.ts          # Main application logic
├── types.ts         # TypeScript type definitions
public/
├── assets/          # Copied from original splash screen
│   ├── images/      # Logo and background images
│   ├── styles/      # CSS styles
│   └── fonts/       # Custom fonts
└── index.html       # Main HTML template
```

## Build Output

The build process generates optimized files in the `dist/` directory:
- `index.html` - Main HTML file
- `assets/` - Bundled and optimized JavaScript/CSS files
- `assets/` - Static assets (images, fonts, styles)

## Migration from Original

This Vite-based implementation maintains 100% functional compatibility with the original JavaScript-based splash screen while adding:

- TypeScript type safety
- Modern ES6+ syntax and features
- Optimized build process
- Better development experience
- Modular code organization

The visual appearance and all functionality remain identical to ensure seamless integration with existing io.Connect Desktop applications.
