Conway's Game of Life (Vanilla JS)

A polished, static, self-hosting-friendly web app implementing Conway’s Game of Life with HTML5 Canvas, vanilla JavaScript, and CSS.

This project is designed for a self-hosted Gitea workflow and can be served from any static hosting target (Nginx, Caddy, pages-style branch, or CI-based copy/deploy).

Features

• Correct Conway’s Game of Life rules with separate current/next generation buffers
• Canvas-based renderer with responsive board sizing
• Play, pause, single-step, clear, randomize
• Adjustable simulation speed and zoom (cell size)
• Click-and-drag painting and erasing
• Preset patterns:
  • Block
  • Blinker
  • Toad
  • Beacon
  • Glider
  • Lightweight spaceship (LWSS)
  • Pulsar
  • Gosper glider gun
• Pattern stamping workflow
• Generation counter and live-cell counter
• Boundary mode toggle (fixed edges vs toroidal wrapping)
• Gridline toggle
• Import/export board state (JSON + compact text)
• Keyboard shortcuts and integrated help panel
• About section and accessible, semantic UI
• Light/dark theme toggle

Project Structure

.
├── .gitea/
│   └── workflows/
│       └── ci.yml
├── js/
│   ├── app.js         # UI/controller wiring and app lifecycle
│   ├── engine.js      # Simulation engine and state transitions
│   ├── patterns.js    # Preset pattern library
│   ├── renderer.js    # Canvas drawing logic
│   └── utils.js       # Small helper utilities
├── index.html
├── style.css
└── README.md

Screenshots

Add screenshots in your repo and link them here.

• docs/screenshot-main.png (placeholder)
• docs/screenshot-patterns.png (placeholder)

Controls & Shortcuts

Mouse / UI

• Click and drag on canvas to draw/erase cells
• Use Stamp Selected to place a preset pattern
• Use speed and cell-size sliders to tune simulation

Keyboard

• Space: Play / Pause
• S: Step one generation
• C: Clear board
• R: Randomize board
• G: Toggle gridlines
• W: Toggle wrapping mode
• + / -: Zoom in/out (cell size)
• ?: Toggle help panel
• Esc: Exit stamp mode

Local Development

No build step is required.

1. Clone your repository:

   git clone https://gitea.nalakath.org/<your-user>/<your-repo>.git
   cd <your-repo>
   

2. Serve statically from the repo root, for example:

   python3 -m http.server 8080
   

3. Open http://localhost:8080.

Push to Self-hosted Gitea

If this folder is not already linked to your Gitea repo:

git init
git add .
git commit -m "Initial Conway's Game of Life web app"
git branch -M main
git remote add origin https://gitea.nalakath.org/<your-user>/<your-repo>.git
git push -u origin main

Deployment Options (Self-hosted Gitea-first)

1) Serve static files directly with Nginx or Caddy

Deploy by copying/checkout repo contents to a web root.

Nginx example (subdomain):

server {
    listen 80;
    server_name life.example.com;
    root /srv/www/conway_gameoflife;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Caddy example (subdomain):

life.example.com {
    root * /srv/www/conway_gameoflife
    file_server
    try_files {path} /index.html
}

2) Deploy from a pages-style branch (if your Gitea setup supports it)

Keep app files in a dedicated branch (for example pages) and configure your Gitea pages/static serving integration to publish that branch.

Example flow:

git checkout --orphan pages
git rm -rf .
# copy or keep only static site files
git add .
git commit -m "Publish static site"
git push -u origin pages

3) Deploy via Gitea Actions to web root or object storage

Use CI to run checks and then copy static files to your internal target (SSH, rsync, NFS mount, MinIO/S3-compatible object storage, etc.).

Included workflow: .gitea/workflows/ci.yml with basic sanity checks.

You can extend it to:

• upload index.html, style.css, and js/ to a server path
• sync to object storage
• update a reverse-proxy-served folder atomically

Subpath Hosting Notes

This app uses only relative asset paths (./style.css, ./js/app.js), so it works from:

• root path: https://example.com/
• subpath: https://example.com/apps/life/

Just ensure index.html, style.css, and js/ remain together.

Optional CI Notes

The provided workflow checks:

• required files exist
• JavaScript syntax is valid (node --check)

Add stricter linting if desired in your own environment.

Future Improvements

• Pattern rotation/mirroring before stamping
• RLE import/export
• Infinite-grid viewport mode with panning
• Touch-specific toolbar for mobile ergonomics
• Save/load presets in localStorage