Docs/create-katalyst

create-katalyst

Scaffolds a new KATforge game project with Vue 3, Tailwind, Capacitor (mobile), Electron (desktop), and the SDK pre-wired.

shell

npx create-katalyst my-game
cd my-game
npm run dev

What you get

text

my-game/
├── src/
│   ├── App.vue
│   ├── main.ts
│   ├── pages/
│   ├── components/
│   ├── stores/
│   ├── composables/
│   ├── lib/
│   │   └── katforge.ts        ← SDK instance, pre-configured
│   └── styles/
├── public/
├── capacitor.config.ts         ← iOS + Android config
├── electron/                   ← desktop shell
├── package.json                ← @katforge/api, @katforge/spark pre-installed
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

Pre-wired SDK

lib/katforge.ts is set up with the SDK pointing at the KATforge API:

TypeScript

import { KATforge, browserStorage } from '@katforge/api';

export const katforge = new KATforge ({
   baseUrl: import.meta.env.VITE_API_URL ?? 'https://api.katforge.com',
   storage: browserStorage,
   games:   []   // add your game modules here
});

Pre-wired Spark

The login modal and flash container are already mounted in App.vue:

Vue

<template>
   <KATforgeLogin :katforge="katforge" />
   <SparkFlashContainer />
   <RouterView />
</template>

Build targets

Command	Target
`npm run dev`	Browser dev server
`npm run build`	Static site (deployable to any CDN)
`npx cap run ios`	iOS via Capacitor
`npx cap run android`	Android via Capacitor
`npm run electron:dev`	Desktop via Electron

Adding game packages

For an analytics site (WC3Stats, DarkerDB): the scaffolded project with SDK + Spark is all you need. Add your own pages and API calls.

For a full game (Gear Goblins): install the game engine packages:

shell

npm install @katforge/anvil @katforge/forge @katforge/codex @katforge/tactician

Then use them in your setup function:

TypeScript

import { useGameLoop } from '@katforge/forge';
import { World } from '@katforge/anvil';

const { world } = useGameLoop ({
   setup:  (world) => { /* spawn entities */ },
   update: (world, dt) => { /* run systems */ },
   render: (world, alpha) => { /* draw */ }
});