Project Overview

IDApTIK is a browser-based hacking/network simulator game built with ReScript and PixiJS. It combines platformer gameplay with realistic network simulation, where players interact with devices (laptops, routers, servers, cameras) and use terminal/SSH mechanics to navigate networks.

Development Commands

npm run dev          # Start development (ReScript watcher + Vite dev server)
npm run build        # Production build (ReScript compile + Vite build)
npm run res:build    # Compile ReScript only
npm run res:dev      # ReScript watch mode only
npm run res:clean    # Clean ReScript build artifacts
npm run lint         # ESLint on TypeScript files
npm run dev:vite     # Vite dev server only (without ReScript watcher)

Dev server runs on port 8080.

Technology Stack

• ReScript - Primary language for game logic, compiles to .res.mjs files
• PixiJS 8 - 2D WebGL rendering engine
• Vite - Build tool and dev server
• @pixi/sound - Audio (BGM/SFX)
• @pixi/ui - UI components
• motion - Tweening/animation library
• AssetPack - Asset pipeline (raw-assets/ -> public/assets/ + src/manifest.json)

Architecture

Directory Structure

src/
├── Main.res                 # Entry point
├── manifest.json            # Generated by AssetPack (do not edit)
├── app/
│   ├── devices/             # Network device simulations
│   │   ├── types/           # Device type definitions
│   │   ├── LaptopGUI.res    # Main terminal/filesystem interface
│   │   ├── LaptopState.res  # Filesystem & process manager (Gq storage model)
│   │   ├── NetworkManager.res
│   │   └── DeviceFactory.res
│   ├── screens/             # Game screens (navigation targets)
│   │   ├── WorldScreen.res  # Platformer world with device interaction
│   │   ├── LoadScreen.res   # Loading screen
│   │   └── main/MainScreen.res
│   ├── player/              # Player character (physics, input, graphics)
│   ├── popups/              # Modal overlays
│   ├── ui/                  # UI components (Button, Label, RoundedBox)
│   └── utils/UserSettings.res
├── engine/                  # Core game engine
│   ├── Engine.res           # Main orchestrator
│   ├── navigation/Navigation.res  # Screen/popup stack management
│   ├── audio/Audio.res      # BGM & SFX management
│   └── resize/Resize.res    # Responsive canvas
└── bindings/                # JavaScript FFI bindings
    ├── Pixi.res             # Extensive PixiJS bindings
    ├── PixiSound.res
    ├── PixiUI.res
    └── Motion.res

Key Patterns

Screen Navigation: Screens define lifecycle methods (prepare, show, hide, pause, resume, update, resize). Navigation.t manages a stack of screens/popups with asset preloading.

Device System: DeviceTypes.device interface with getInfo() and openGUI(). Factory pattern via DeviceFactory.res. Security levels: Open, Weak, Medium, Strong.

Network Topology: Star topology with central router. Features DNS resolution, traceroute, SSH between devices, zone-based layout (LAN, VLAN, External).

State Management: Functional with immutable records; mutable fields only where necessary. LocalStorage for persistence via engine/utils/Storage.res.

Entry Point Flow

1. Main.res creates Engine instance
2. Engine initializes PixiJS Application and loads assets
3. LoadScreen shown, then WorldScreen
4. Player character navigates platformer world, interacts with devices

Asset Pipeline

Raw assets in raw-assets/ are processed by AssetPack (via custom Vite plugin in scripts/assetpack-vite-plugin.ts) into public/assets/ with manifest at src/manifest.json. Assets are loaded by bundle name.

ReScript Conventions

• Files compile to .res.mjs alongside source
• Module namespaces pattern: module ModuleName = { ... }
• FFI bindings in src/bindings/ wrap external JS libraries
• Use @rescript/core for standard library