VersusBank - 16-bit Retro Web Game

A retro-style 16-bit web game built with vanilla TypeScript and Canvas API.

Features

16-bit Retro Graphics: Classic pixel art style with modern web technology
Progressive Web App: Installable on mobile and desktop
Cross-Platform: Works on Windows, macOS, Linux, iOS, and Android
Performance Optimized: Smooth 60 FPS gameplay
Responsive Design: Adapts to different screen sizes

Quick Start

Prerequisites

Node.js 18.0.0 or higher
npm 9.0.0 or higher

Installation

# Clone the repository
git clone https://github.com/your-username/versusbank.org.git
cd versusbank.org

# Install dependencies
npm install

# Start development server
npm run dev

Open your browser and navigate to http://localhost:3000

Available Scripts

npm run dev - Start development server with hot reload
npm run build - Build production version
npm run serve - Start production server
npm run test - Run all tests
npm run test:headed - Run tests in headed mode
npm run test:e2e - Run end-to-end tests
npm run test:performance - Run performance tests
npm run type-check - Run TypeScript type checking
npm run lint - Run ESLint
npm run lint:fix - Fix linting issues
npm run validate - Run type-check, build, test, and lint
npm run clean - Clean build artifacts

Testing

The project includes comprehensive testing infrastructure:

End-to-End Tests

Basic rendering tests
Cross-platform compatibility
Screenshot consistency
Console error detection

Performance Tests

Page load time
Canvas rendering performance
Memory usage monitoring
Screenshot reliability

Running Tests

# Run all tests
npm test

# Run tests in headed mode (useful for debugging)
npm run test:headed

# Run specific test suites
npm run test:e2e
npm run test:performance

Cross-Platform Compatibility

The game is designed to work across all major platforms:

Desktop: Chrome, Firefox, Safari, Edge
Mobile: iOS Safari, Android Chrome
Operating Systems: Windows, macOS, Linux, iOS, Android

Screenshot Testing

Automated screenshot testing ensures visual consistency:

Tests run on Windows, macOS, and Linux in CI
Screenshots are compared for visual regressions
Platform-specific differences are normalized
Failing tests generate detailed difference reports

Development

Project Structure

src/
├── ts/           # TypeScript source code
├── js/           # Compiled JavaScript
└── typings/      # Type definitions

tests/
├── e2e/          # End-to-end tests
├── performance/  # Performance tests
└── utils/        # Test utilities

scripts/          # Build scripts
public/           # Static assets
docs/             # Built application

Code Quality

TypeScript: Strict type checking enabled
ESLint: Consistent code style
Playwright: Reliable automated testing
GitHub Actions: Continuous integration

Performance

Bundle Size: Optimized for fast loading
Frame Rate: Maintains 60 FPS gameplay
Memory: Efficient memory usage
Network: Minimal asset loading

Deployment

The application builds to static files in the docs/ directory, ready for deployment to any static hosting service:

GitHub Pages
Netlify
Vercel
AWS S3
Firebase Hosting

Deploy to GitHub Pages

# Build the application
npm run build

# Deploy to GitHub Pages (using gh-pages branch)
git add docs/
git commit -m "Update build"
git subtree push --prefix docs origin gh-pages

Contributing

Fork the repository
Create a feature branch
Make your changes
Run the test suite: npm run validate
Submit a pull request

License

Unlicense - see the LICENSE file for details.

Acknowledgments

Built with modern web standards
Inspired by classic 16-bit games
Powered by TypeScript and Canvas API

JavaScript Required