VibeNest is currently available in English. More interface languages are coming soon.

Go to Home

^**1**

FactoryForge

A browser-based factory automation game built with React and vanilla JavaScript.

Overview

FactoryForge is an isometric factory simulation game where you build automated production systems. Design efficient supply chains, manage resources, and optimize production through research and smart logistics.

Isometric View

  ┌─────────┐
 /   Forge  /│
├─────────┤ │
│ ▓▓▓▓▓▓▓ │ │
│ ▓ Supply▓ │/
│ ▓▓▓▓▓▓▓ │/
└─────────┘

Key Features

Isometric 3D Rendering

Custom canvas-based renderer with layered visualization

Factory Automation

Build production chains with inserters, power systems, and logistics

Research System

Unlock new technologies and building types

Real-time Simulation

Tick-based game engine with bottleneck detection

Performance Monitoring

Built-in FPS tracking and optimization tools

Save System

Local save/load via IndexedDB with import/export functionality

Keyboard Shortcuts

Full keyboard control support

Tech Stack

React 19 + Vite Zustand HTML5 Canvas IndexedDB Web Workers

Frontend: React 19 with Vite
State Management: Zustand
Rendering: HTML5 Canvas with custom isometric projection
Storage: IndexedDB for local saves
Workers: Web Workers for world generation

Isometric Projection

// Convert grid to isometric screen
function toScreen(x, y) {
  return {
    sx: (x - y) * TILE_WIDTH / 2,
    sy: (x + y) * TILE_HEIGHT / 2
  };
}

Game Systems

Core Engine

Game loop with fixed timestep simulation
Command history for undo/redo
Event-driven architecture with EventBus

Simulation

Resource extraction and production
Power distribution networks
Logistics and item transport
Research progression
Statistics aggregation

Rendering

Multi-layer canvas rendering (terrain, buildings, logistics, UI)
Viewport culling for performance
Real-time camera controls
Visual feedback for placement and selection

Game Loop

const TICK_RATE = 60;
let accumulator = 0;

function gameLoop(timestamp) {
  const delta = timestamp - lastTime;
  accumulator += delta;

  while (accumulator >= TICK_RATE) {
    update(TICK_RATE);
    accumulator -= TICK_RATE;
  }

  render();
  requestAnimationFrame(gameLoop);
}

EventBus

class EventBus {
  listeners = {};

  on(event, callback) {
    (this.listeners[event] ||= [])
      .push(callback);
  }

  emit(event, data) {
    this.listeners[event]?.forEach(
      cb => cb(data));
  }
}

Getting Started

Clone the repository and start building your factory empire:

$ npm install$ npm run dev

Open your browser to start building your factory empire!

VibeNest