A basic roguelike example built with rot.js, TypeScript, and Vite.
Playable Demo: https://mizar999.github.io/rotjs-typescript-basics/
- rot.js - Roguelike Toolkit
- RogueBasin - rot.js Tutorial
- Frostlike - 7 Day Roguelike Challenge 2017 entry
To clone and develop this project locally:
git clone https://github.com/Mizar999/rotjs-typescript-basics.git
cd rotjs-typescript-basics
npm install
npm run dev| Command | Description |
|---|---|
npm run dev |
Starts the Vite dev server with instant Hot Module Replacement (HMR). |
npm run build |
Runs TypeScript type-checking and builds the production bundle into dist/. |
npm run preview |
Previews the production build locally. |
If you want to set up a new rot.js project with TypeScript and Vite from scratch:
-
Initialize NPM project & install dependencies:
npm init -y npm install --save-dev typescript vite rot-js
-
Create Vite configuration (
vite.config.ts):import { defineConfig } from 'vite'; export default defineConfig({ base: './', build: { outDir: 'dist', }, });
-
Create TypeScript configuration (
tsconfig.json):{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, "strict": false, "noEmit": true }, "include": ["src"] } -
Create HTML Entry Point (
index.html):<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>rot.js TypeScript Basics</title> </head> <body> <script type="module" src="/src/app.ts"></script> </body> </html>
-
Configure
package.jsonscripts:"scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview" }
This repository uses an automated GitHub Actions workflow defined in .github/workflows/deploy.yml.
Every push to the main or master branch automatically triggers a build and deploys the generated site directly to GitHub Pages.