Update deps

- Add React and Material UI
- Add React Developer Tools
- Add ESlint plugin and config

.eslintrc.js

@@ -1,6 +1,10 @@
 module.exports = {
 	parser:	'@typescript-eslint/parser',
+	plugins: [
+		'react-hooks',
+	],
 	extends: [
+		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'prettier/@typescript-eslint',
 		'plugin:prettier/recommended',
@@ -8,8 +12,19 @@ module.exports = {
 	parserOptions: {
 		ecmaVersion: 2018,
 		sourceType: 'module',
+		ecmaFeatures: {
+			jsx: true,
+		},
 	},
 	rules: {
+		'react/prop-types': [0],
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
 		'prettier/prettier': 'warn',
 	},
+	settings: {
+		react: {
+			version: 'detect',
+		},
+	},
 };

.gitignore

@@ -1,2 +1,2 @@
-/dist
 /node_modules
+/.webpack

build/webpack.main.js

@@ -0,0 +1,15 @@
+module.exports = {
+	entry: './src/main/index.ts',
+	module: {
+		rules: [
+			{
+				test: /\.ts$/,
+				use: 'ts-loader',
+				exclude: /node_modules/,
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.ts', '.js'],
+	},
+};

build/webpack.renderer.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.css$/,
+				use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+			},
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/,
+				use: 'file-loader',
+			},
+			{
+				test: /\.(vs|fs)$/,
+				use: 'raw-loader',
+			},
+		],
+	},
+	plugins: [new CopyPlugin([{ from: 'static' }])],
+	resolve: {
+		extensions: ['.ts', '.js', '.tsx', '.jsx'],
+	},
+};

electron-webpack.json

@@ -1,5 +0,0 @@
-{
-	"renderer": {
-		"webpackConfig": "webpack.renderer.js"
-	}
-}

package.json

@@ -1,25 +1,67 @@
 {
 	"private": true,
+	"version": "0.0.0",
+	"main": ".webpack/main",
 	"scripts": {
-		"start": "electron-webpack dev",
-		"lint": "eslint 'src/**/*.ts'"
+		"start": "electron-forge start",
+		"lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'"
+	},
+	"config": {
+		"forge": {
+			"plugins": [
+				[
+					"@electron-forge/plugin-webpack",
+					{
+						"mainConfig": "./build/webpack.main.js",
+						"renderer": {
+							"config": "./build/webpack.renderer.js",
+							"entryPoints": [
+								{
+									"html": "./src/renderer/index.html",
+									"js": "./src/renderer/index.tsx",
+									"name": "main_window"
+								}
+							]
+						}
+					}
+				]
+			]
+		}
 	},
 	"devDependencies": {
-		"@types/gl-matrix": "^2.4.5",
-		"@typescript-eslint/eslint-plugin": "^2.13.0",
-		"@typescript-eslint/parser": "^2.13.0",
-		"electron": "^7.1.7",
-		"electron-webpack": "^2.7.4",
-		"electron-webpack-ts": "^3.2.0",
+		"@electron-forge/cli": "^6.0.0-beta.50",
+		"@electron-forge/plugin-webpack": "^6.0.0-beta.50",
+		"@types/color": "^3.0.1",
+		"@types/electron-devtools-installer": "^2.2.0",
+		"@types/react": "^16.9.25",
+		"@types/react-dom": "^16.9.5",
+		"@typescript-eslint/eslint-plugin": "^2.24.0",
+		"@typescript-eslint/parser": "^2.24.0",
+		"copy-webpack-plugin": "^5.1.1",
+		"css-loader": "^3.4.2",
+		"electron": "^8.1.1",
+		"electron-devtools-installer": "^2.2.4",
 		"eslint": "^6.8.0",
-		"eslint-config-prettier": "^6.7.0",
+		"eslint-config-prettier": "^6.10.0",
 		"eslint-plugin-prettier": "^3.1.2",
-		"prettier": "^1.19.1",
+		"eslint-plugin-react": "^7.19.0",
+		"eslint-plugin-react-hooks": "^2.5.1",
+		"file-loader": "^6.0.0",
+		"prettier": "^2.0.1",
 		"raw-loader": "^4.0.0",
-		"typescript": "^3.7.4",
-		"webpack": "^4.41.4"
+		"style-loader": "^1.1.3",
+		"ts-loader": "^6.2.1",
+		"typescript": "^3.8.3",
+		"webpack": "^4.42.0"
 	},
 	"dependencies": {
-		"gl-matrix": "^3.1.0"
+		"@material-ui/core": "^4.9.7",
+		"color": "^3.1.2",
+		"fast-glob": "^3.2.2",
+		"gl-matrix": "^3.2.1",
+		"immutable": "^4.0.0-rc.12",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"typeface-roboto": "^0.0.75"
 	}
 }

project/tiling/dirt/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "Dirt",
+	"width": 1,
+	"height": 1
+}

project/tiling/grass/meta.json

@@ -0,0 +1,5 @@
+{
+	"name": "Grass",
+	"width": 1,
+	"height": 1
+}

src/main/index.ts

@@ -1,56 +1,55 @@
 import { app, BrowserWindow } from 'electron';
-import * as path from 'path';
-import { format as formatUrl } from 'url';
+
+declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
-// global reference to mainWindow (necessary to prevent window from being garbage collected)
-let mainWindow: BrowserWindow|null = null;
+app.allowRendererProcessReuse = true;
 
-function getIndexURL(): string {
-	if (isDevelopment)
-		return `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`;
-
-	return formatUrl({
-		pathname: path.join(__dirname, 'index.html'),
-		protocol: 'file',
-		slashes: true,
-	});
+async function installReactDevTools(): Promise<void> {
+	const { default: installExtension, REACT_DEVELOPER_TOOLS } = await import('electron-devtools-installer');
+	const name = await installExtension(REACT_DEVELOPER_TOOLS);
+	console.log(`Added Extension:  ${name}`);
 }
 
-function createMainWindow(): BrowserWindow {
-	const window = new BrowserWindow({webPreferences: {nodeIntegration: true}});
+function createWindow(): void {
+	const window = new BrowserWindow({ webPreferences: { nodeIntegration: true } });
 
-	if (isDevelopment)
+	window.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+	if (isDevelopment) {
 		window.webContents.openDevTools();
-
-	window.loadURL(getIndexURL());
-
-	window.on('closed', () => {
-		mainWindow = null;
-	});
+	}
 
 	window.webContents.on('devtools-opened', () => {
 		window.webContents.focus();
-	})
-
-	return window;
+	});
 }
 
 // quit application when all windows are closed
 app.on('window-all-closed', () => {
-	// on macOS it is common for applications to stay open until the user explicitly quits
-	if (process.platform !== 'darwin')
+	// On macOS it is common for applications and their menu bar
+	// to stay active until the user quits explicitly with Cmd + Q
+	if (process.platform !== 'darwin') {
 		app.quit();
+	}
 });
 
 app.on('activate', () => {
-	// on macOS it is common to re-create a window even after all windows have been closed
-	if (!mainWindow)
-		mainWindow = createMainWindow();
+	// On macOS it's common to re-create a window in the app when the
+	// dock icon is clicked and there are no other windows open.
+	if (BrowserWindow.getAllWindows().length === 0) {
+		createWindow();
+	}
 });
 
+async function initialize(): Promise<void> {
+	if (isDevelopment) {
+		await installReactDevTools();
+	}
+
+	createWindow();
+}
+
 // create main BrowserWindow when electron is ready
-app.on('ready', () => {
-	mainWindow = createMainWindow();
-});
+app.on('ready', initialize);

src/renderer/custom.d.ts

@@ -1,9 +1,16 @@
-declare module "*.vs" {
+declare namespace NodeJS {
+	interface Module {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		hot: any;
+	}
+}
+
+declare module '*.vs' {
 	const content: string;
 	export default content;
 }
 
-declare module "*.fs" {
+declare module '*.fs' {
 	const content: string;
 	export default content;
 }

src/renderer/editor/editor.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import 'typeface-roboto';
+
+import { createMuiTheme, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
+
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Drawer from '@material-ui/core/Drawer';
+
+import { Library } from './library';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) => ({
+	root: {
+		display: 'flex',
+	},
+	drawer: {
+		width: drawerWidth,
+		flexShrink: 0,
+	},
+	drawerPaper: {
+		width: drawerWidth,
+	},
+	content: {
+		flexGrow: 1,
+		padding: theme.spacing(3),
+	},
+}));
+
+function EditorLayout(): JSX.Element {
+	const classes = useStyles();
+
+	return (
+		<div className={classes.root}>
+			<CssBaseline />
+			<Drawer
+				className={classes.drawer}
+				variant='permanent'
+				classes={{
+					paper: classes.drawerPaper,
+				}}
+				anchor='left'
+			></Drawer>
+			<main className={classes.content}>
+				<Library />
+			</main>
+		</div>
+	);
+}
+
+const theme = createMuiTheme({
+	palette: {
+		type: 'dark',
+	},
+});
+
+export function Editor(): JSX.Element {
+	return (
+		<ThemeProvider theme={theme}>
+			<EditorLayout />
+		</ThemeProvider>
+	);
+}

src/renderer/editor/library.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+const { useCallback, useMemo } = React;
+
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
+
+import * as Color from 'color';
+import * as glob from 'fast-glob';
+
+import { Tiling, TilingMeta } from './types';
+import { usePromise, useReadFile, readJSON } from './util';
+
+const useStyles = makeStyles((theme: Theme) => ({
+	grid: {
+		display: 'flex',
+		flexWrap: 'wrap',
+		margin: theme.spacing(-0.5),
+	},
+	tile: {
+		imageRendering: 'pixelated',
+		borderStyle: 'solid',
+		borderWidth: 1,
+		borderColor: theme.palette.divider,
+		background: theme.palette.background.paper,
+		position: 'relative',
+		width: 130,
+		height: 130,
+		margin: theme.spacing(0.5),
+		// cursor: 'pointer',
+		// '&:hover': {
+		// 	borderColor: theme.palette.text.secondary,
+		// 	boxShadow: `0 0 2px 1px ${theme.palette.text.secondary}`,
+		// },
+	},
+	img: {
+		position: 'absolute',
+		zIndex: 1,
+		width: 128,
+		height: 128,
+	},
+	label: {
+		position: 'absolute',
+		zIndex: 2,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: '37.5%',
+		padding: theme.spacing(1),
+		background: Color(theme.palette.background.default).fade(0.3).string(),
+	},
+}));
+
+function tilingSprite(tiling: Tiling): string {
+	const x = (tiling.meta.width - 1) / 2;
+	const y = (tiling.meta.height - 1) / 2;
+	return `project/tiling/${tiling.id}/${x}_${y}.png`;
+}
+
+interface TilingDisplayProps {
+	tiling: Tiling;
+}
+
+function TilingDisplay({ tiling }: TilingDisplayProps): JSX.Element | null {
+	const classes = useStyles();
+
+	const path = tilingSprite(tiling);
+	const image = useReadFile(path);
+	const src = useMemo(() => (image ? `data:image/png;base64,${image.toString('base64')}` : undefined), [image]);
+	return (
+		<div className={classes.tile}>
+			<img className={classes.img} src={src} />
+			<div className={classes.label}>{tiling.meta.name}</div>
+		</div>
+	);
+}
+
+async function listTilings(): Promise<string[]> {
+	const matches = await glob('project/tiling/*/meta.json');
+	return matches.map((m) => m.split('/')[2]);
+}
+
+async function loadTilingMeta(id: string): Promise<TilingMeta> {
+	const path = `project/tiling/${id}/meta.json`;
+	const meta = await readJSON(path);
+	return meta as TilingMeta;
+}
+
+async function loadTilings(): Promise<Tiling[]> {
+	const tilings = await listTilings();
+	return Promise.all(
+		tilings.map((id) => [id, loadTilingMeta(id)] as const).map(async ([id, p]) => ({ id, meta: await p })),
+	);
+}
+
+export function Library(): JSX.Element {
+	const classes = useStyles();
+
+	const mkLoadTilings = useCallback(() => loadTilings(), []);
+	const tilings = usePromise(mkLoadTilings) ?? [];
+
+	return (
+		<Container>
+			<Box mb={2}>
+				<div className={classes.grid}>
+					{tilings.map((tiling, i) => (
+						<TilingDisplay key={i} tiling={tiling} />
+					))}
+				</div>
+			</Box>
+			<Button variant='contained' color='primary'>
+				Add
+			</Button>
+		</Container>
+	);
+}

src/renderer/editor/types.ts

@@ -0,0 +1,11 @@
+export interface TilingMeta {
+	name: string;
+	desc?: string;
+	width: number;
+	height: number;
+}
+
+export interface Tiling {
+	id: string;
+	meta: TilingMeta;
+}

src/renderer/editor/util.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import * as fs from 'fs';
+
+export function usePromise<T>(f: () => Promise<T>): T | null {
+	const [value, setValue] = useState<T | null>(null);
+
+	useEffect(() => {
+		setValue(null);
+
+		let cancelled = false;
+
+		(async (): Promise<void> => {
+			const v = await f();
+			if (!cancelled) {
+				setValue(v);
+			}
+		})();
+
+		return (): void => {
+			cancelled = true;
+		};
+	}, [f]);
+
+	return value;
+}
+
+export function useReadFile(path: string): Buffer | null {
+	const readFile = useCallback(() => fs.promises.readFile(path), [path]);
+	return usePromise(readFile);
+}
+
+export async function readJSON(path: string): Promise<unknown> {
+	const content = await fs.promises.readFile(path, 'utf8');
+	return JSON.parse(content);
+}

src/renderer/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+		<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+		<title>RPGedit</title>
+		<style>
+			html, body, #app {
+				height: 100%;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>

src/renderer/index.ts

@@ -1,26 +0,0 @@
-import './runtime/index.css';
-
-import { GameContext } from './runtime/controller/gamecontext';
-
-import { Renderer } from './runtime/view/renderer/renderer';
-
-window.onload = async () => {
-	const app = document.getElementById('app');
-	if (!app)
-		return;
-
-	const canvas = document.createElement('canvas');
-	const renderer = new Renderer(canvas);
-
-	const resize = () => {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		renderer.resize();
-	};
-	window.addEventListener('resize', resize);
-	resize();
-
-	app.append(canvas);
-
-	GameContext.load(renderer);
-};

src/renderer/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Editor } from './editor/editor';
+
+ReactDOM.render(<Editor />, document.querySelector('#app'));
+
+module.hot?.accept();

src/renderer/runtime/controller/collision.ts

@@ -12,26 +12,25 @@ export function mkCollision(collision: Collision[]): Collidable[] {
 
 	for (const c of collision) {
 		switch (c.type) {
-		case 'polygon':
-			if (!c.vertices.length)
-				continue;
+			case 'polygon':
+				if (!c.vertices.length) continue;
 
-			let prev = c.vertices[c.vertices.length - 1];
+				let prev = c.vertices[c.vertices.length - 1];
 
-			for (const v of c.vertices) {
-				ret.push(LineSegment.fromPoints(vec2.clone(prev), vec2.clone(v)));
-				prev = v;
-			}
+				for (const v of c.vertices) {
+					ret.push(LineSegment.fromPoints(vec2.clone(prev), vec2.clone(v)));
+					prev = v;
+				}
 
-			for (const v of c.vertices) {
-				ret.push(new Point(vec2.clone(v)));
-				prev = v;
-			}
-			break;
+				for (const v of c.vertices) {
+					ret.push(new Point(vec2.clone(v)));
+					prev = v;
+				}
+				break;
 
-		case 'circle':
-			ret.push(new Circle(vec2.clone(c.center), c.radius));
-			break;
+			case 'circle':
+				ret.push(new Circle(vec2.clone(c.center), c.radius));
+				break;
 		}
 	}
 
@@ -39,24 +38,20 @@ export function mkCollision(collision: Collision[]): Collidable[] {
 }
 
 export interface CollidableGroup {
-	getTranslation(): vec2|null;
+	getTranslation(): vec2 | null;
 	getCollidables(): Collidable[];
 }
 
 export function collide(collision: CollidableGroup, out: vec2, move: Movement, radius: number): boolean {
 	const t = collision.getTranslation();
-	if (t)
-		move = move.translate(vec2.negate(vec2.create(), t));
+	if (t) move = move.translate(vec2.negate(vec2.create(), t));
 
 	for (const c of collision.getCollidables()) {
-		if (!c.collide(out, move, radius))
-			continue;
+		if (!c.collide(out, move, radius)) continue;
 
-		if (vec2.squaredDistance(move.src, out) >= vec2.squaredDistance(move.src, move.dest))
-			continue;
+		if (vec2.squaredDistance(move.src, out) >= vec2.squaredDistance(move.src, move.dest)) continue;
 
-		if (t)
-			vec2.add(out, out, t);
+		if (t) vec2.add(out, out, t);
 
 		return true;
 	}

src/renderer/runtime/controller/entitycontext.ts

@@ -9,11 +9,7 @@ import { vec2 } from 'gl-matrix';
 
 export class EntityContext implements CollidableGroup {
 	public static async load(renderer: Renderer, name: string): Promise<EntityContext> {
-		return new EntityContext(
-			renderer,
-			name,
-			await EntityView.load(renderer, name),
-		);
+		return new EntityContext(renderer, name, await EntityView.load(renderer, name));
 	}
 
 	public readonly pos: vec2 = vec2.create();
@@ -28,7 +24,7 @@ export class EntityContext implements CollidableGroup {
 		this.collision = mkCollision(view.data.collision);
 	}
 
-	public render(time: number) {
+	public render(time: number): void {
 		this.renderer.setTranslation(this.pos);
 		this.view.renderByTime(time);
 	}
@@ -41,7 +37,7 @@ export class EntityContext implements CollidableGroup {
 		return this.collision;
 	}
 
-	public interact() {
+	public interact(): void {
 		alert(`You've interacted with ${this.name}!`);
 	}
 }

src/renderer/runtime/controller/gamecontext.ts

@@ -1,7 +1,7 @@
 import { CollidableGroup, collide, mkCollision } from './collision';
 import { EntityContext } from './entitycontext';
 
-import { MapData } from '../model/data/map';
+import { MapData, MapDataInput } from '../model/data/map';
 
 import { ButtonCode, GameInputHandler } from '../view/input/gameinput';
 import { MapView } from '../view/map';
@@ -26,17 +26,11 @@ export class GameContext implements CollidableGroup {
 		vec2.set(player.pos, 7, 6);
 		vec2.set(entity.pos, 4, 3);
 
-		return new GameContext(
-			renderer,
-			mapView,
-			player,
-			[entity],
-			mapCollision,
-		);
+		return new GameContext(renderer, mapView, player, [entity], mapCollision);
 	}
 
 	private static async loadMap(renderer: Renderer, name: string): Promise<[MapView, Collidable[]]> {
-		const map = new MapData(await getJSON(`resources/map/${name}.json`));
+		const map = new MapData((await getJSON(`resources/map/${name}.json`)) as MapDataInput);
 		return [await MapView.load(renderer, map), mkCollision(map.collision)];
 	}
 
@@ -50,7 +44,7 @@ export class GameContext implements CollidableGroup {
 	private readonly input: GameInputHandler;
 
 	private readonly playerDir: vec2 = vec2.fromValues(0, 1);
-	private speed: number = 0;
+	private speed = 0;
 
 	private readonly collisionRadius = 15 / 32;
 	private readonly interactLength = 1 / 32;
@@ -65,19 +59,18 @@ export class GameContext implements CollidableGroup {
 		this.input = new GameInputHandler();
 		this.input.addListener((input) => {
 			switch (input.type) {
-			case 'button':
-				if (input.button === ButtonCode.Action)
-					this.interact();
-				break;
+				case 'button':
+					if (input.button === ButtonCode.Action) this.interact();
+					break;
 
-			case 'direction':
-				if (vec2.sqrLen(input.direction) > 0) {
-					vec2.copy(this.playerDir, input.direction);
-					this.speed = this.maxSpeed;
-				} else {
-					this.speed = 0;
-				}
-				break;
+				case 'direction':
+					if (vec2.sqrLen(input.direction) > 0) {
+						vec2.copy(this.playerDir, input.direction);
+						this.speed = this.maxSpeed;
+					} else {
+						this.speed = 0;
+					}
+					break;
 			}
 		});
 
@@ -108,8 +101,7 @@ export class GameContext implements CollidableGroup {
 
 	private interact(): void {
 		for (const e of this.entities) {
-			if (!this.canInteract(e))
-				continue;
+			if (!this.canInteract(e)) continue;
 
 			e.interact();
 			break;
@@ -136,8 +128,7 @@ export class GameContext implements CollidableGroup {
 		const newDest = vec2.create();
 
 		while (this.updateStepCollide(newDest, dest)) {
-			if (vec2.equals(newDest, this.player.pos))
-				return;
+			if (vec2.equals(newDest, this.player.pos)) return;
 
 			vec2.copy(dest, newDest);
 		}
@@ -153,21 +144,19 @@ export class GameContext implements CollidableGroup {
 			return;
 		}
 
-		for (let i = 0; i < diff; i++)
-			this.updateStep();
+		for (let i = 0; i < diff; i++) this.updateStep();
 	}
 
 	private render(): void {
 		this.renderer.setCenter(this.player.pos);
 		this.renderer.clear();
 
-		for (const r of [this.mapView, ...this.entities, this.player])
-			r.render(this.time);
+		for (const r of [this.mapView, ...this.entities, this.player]) r.render(this.time);
 	}
 
 	private async renderLoop(): Promise<void> {
 		while (true) {
-			this.update(await nextAnimationFrame() - this.initTime);
+			this.update((await nextAnimationFrame()) - this.initTime);
 			this.render();
 		}
 	}

src/renderer/runtime/math/line.ts

@@ -1,10 +1,7 @@
 import { mat2, vec2 } from 'gl-matrix';
 import { Collidable } from './collision';
 
-const rot90 = mat2.fromValues(
-	0, 1,
-	-1, 0,
-);
+const rot90 = mat2.fromValues(0, 1, -1, 0);
 
 export function normal(out: vec2, a: vec2): vec2 {
 	return vec2.transformMat2(out, a, rot90);
@@ -15,10 +12,7 @@ export function crossz(a: vec2, b: vec2): number {
 }
 
 export class Line {
-	constructor(
-		public readonly p: vec2,
-		public readonly v: vec2,
-	) {}
+	constructor(public readonly p: vec2, public readonly v: vec2) {}
 
 	public getNormal(out: vec2): vec2 {
 		return normal(out, this.v);
@@ -50,10 +44,7 @@ export class Line {
 export class Movement {
 	public readonly v: vec2;
 
-	constructor(
-		public readonly src: vec2,
-		public readonly dest: vec2,
-	) {
+	constructor(public readonly src: vec2, public readonly dest: vec2) {
 		this.v = vec2.sub(vec2.create(), dest, src);
 	}
 
@@ -71,6 +62,7 @@ export class Movement {
 	}
 
 	public toLineSegment(): LineSegment {
+		// eslint-disable-next-line @typescript-eslint/no-use-before-define
 		return LineSegment.fromPoints(this.src, this.dest);
 	}
 
@@ -90,11 +82,7 @@ export class LineSegment extends Line implements Collidable {
 		return new LineSegment(p1, v, d);
 	}
 
-	constructor(
-		p: vec2,
-		v: vec2,
-		public readonly l: number,
-	) {
+	constructor(p: vec2, v: vec2, public readonly l: number) {
 		super(p, v);
 	}
 
@@ -104,35 +92,30 @@ export class LineSegment extends Line implements Collidable {
 
 	public containsPoint(p2: vec2): boolean {
 		const d = this.projectPointDistance(p2);
-		return (d >= 0 && d <= this.l);
+		return d >= 0 && d <= this.l;
 	}
 
 	public collide(out: vec2, move: Movement, r: number): boolean {
-		if (this.distancePoint(move.src) < 0)
-			return false;
+		if (this.distancePoint(move.src) < 0) return false;
 
-		if (crossz(move.v, this.v) < 0)
-			return false;
+		if (crossz(move.v, this.v) < 0) return false;
 
 		const t = this.getNormal(vec2.create());
 		vec2.scale(t, t, -r);
 
 		const refMove = move.translate(t);
 
-		if (!this.collideRef(out, refMove))
-			return false;
+		if (!this.collideRef(out, refMove)) return false;
 
 		vec2.sub(out, out, t);
 		return true;
 	}
 
 	private collideRef(out: vec2, move: Movement): boolean {
-		if (this.distancePoint(move.dest) >= 0)
-			return false;
+		if (this.distancePoint(move.dest) >= 0) return false;
 
 		const x = move.intersectLine(vec2.create(), this);
-		if (!this.containsPoint(x))
-			return false;
+		if (!this.containsPoint(x)) return false;
 
 		this.projectPoint(out, move.dest);
 

src/renderer/runtime/math/point.ts

@@ -9,12 +9,10 @@ export class Point implements Collidable {
 	public collide(out: vec2, move: Movement, r: number): boolean {
 		const moveLine = move.toLineSegment();
 
-		if (moveLine.projectPointDistance(this.p) < 0)
-			return false;
+		if (moveLine.projectPointDistance(this.p) < 0) return false;
 
 		const d = moveLine.distancePoint(this.p) / r;
-		if (Math.abs(d) >= 1)
-			return false;
+		if (Math.abs(d) >= 1) return false;
 
 		const e = Math.sqrt(1 - d * d);
 
@@ -26,8 +24,7 @@ export class Point implements Collidable {
 
 		const refMove = move.translate(tr);
 
-		if (vec2.sqrDist(this.p, move.src) > r * r && !refMove.passes(this.p))
-			return false;
+		if (vec2.sqrDist(this.p, move.src) > r * r && !refMove.passes(this.p)) return false;
 
 		normal(t, t);
 

src/renderer/runtime/util.ts

@@ -1,8 +1,7 @@
 export function recordToMap<T>(r: Record<string, T>): Map<string, T> {
 	const ret = new Map();
 
-	for (const k of Object.keys(r))
-		ret.set(k, r[k]);
+	for (const k of Object.keys(r)) ret.set(k, r[k]);
 
 	return ret;
 }
@@ -10,8 +9,7 @@ export function recordToMap<T>(r: Record<string, T>): Map<string, T> {
 export function mapValues<K, V1, V2>(f: (v: V1) => V2, map: Map<K, V1>): Map<K, V2> {
 	const ret: Map<K, V2> = new Map();
 
-	for (const [k, v] of map)
-		ret.set(k, f(v));
+	for (const [k, v] of map) ret.set(k, f(v));
 
 	return ret;
 }
@@ -19,8 +17,7 @@ export function mapValues<K, V1, V2>(f: (v: V1) => V2, map: Map<K, V1>): Map<K,
 export async function mapValuesAsync<K, V1, V2>(f: (v: V1) => Promise<V2>, map: Map<K, V1>): Promise<Map<K, V2>> {
 	const ret: Map<K, V2> = new Map();
 
-	for (const [k, v] of mapValues(f, map))
-		ret.set(k, await v);
+	for (const [k, v] of mapValues(f, map)) ret.set(k, await v);
 
 	return ret;
 }
@@ -28,12 +25,12 @@ export async function mapValuesAsync<K, V1, V2>(f: (v: V1) => Promise<V2>, map:
 export function nextPowerOf2(n: number): number {
 	let i = 1;
 
-	while (i < n)
-		i *= 2;
+	while (i < n) i *= 2;
 
 	return i;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class Listenable<T extends any[]> {
 	private readonly listeners: Array<(...args: T) => void> = [];
 
@@ -46,10 +43,9 @@ export class Listenable<T extends any[]> {
 	}
 }
 
-export async function getJSON(url: string): Promise<any> {
+export async function getJSON(url: string): Promise<unknown> {
 	const res = await window.fetch(url);
-	if (res.status < 200 || res.status >= 300)
-		throw new Error(res.statusText);
+	if (res.status < 200 || res.status >= 300) throw new Error(res.statusText);
 
 	return await res.json();
 }

src/renderer/runtime/view/entity.ts

@@ -1,4 +1,4 @@
-import { EntityData } from '../model/data/entity';
+import { EntityData, EntityDataInput } from '../model/data/entity';
 import { Renderer } from './renderer/renderer';
 import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
 import { loadImage, mkTexture } from './util/image';
@@ -9,11 +9,11 @@ import { vec2 } from 'gl-matrix';
 
 export class EntityView {
 	public static async load(r: Renderer, name: string): Promise<EntityView> {
-		const data = new EntityData(await getJSON(`resources/entity/${name}.json`));
+		const data = new EntityData((await getJSON(`resources/entity/${name}.json`)) as EntityDataInput);
 		const tile = await loadImage(`resources/sprite/entity/${data.sprite}.png`);
 
 		const [texture, size] = mkTexture(r, tile);
-		const frameSize = [size[0], size[1] / data.frames];
+		const frameSize: [number, number] = [size[0], size[1] / data.frames];
 
 		const offset = vec2.mul(vec2.create(), frameSize, data.anchor);
 		r.snapToGrid(offset, offset);
@@ -33,22 +33,14 @@ export class EntityView {
 			sprites.push(builder.build());
 		}
 
-		return new EntityView(
-			data,
-			sprites,
-		);
+		return new EntityView(data, sprites);
 	}
 
 	private readonly totalTime: number;
 
-	private constructor(
-		public readonly data: EntityData,
-		public readonly sprites: SpriteView[],
-	) {
-		if (data.animation)
-			this.totalTime = data.animation.sequence.reduce((a, s) => a + s[0], 0);
-		else
-			this.totalTime = 0;
+	private constructor(public readonly data: EntityData, public readonly sprites: SpriteView[]) {
+		if (data.animation) this.totalTime = data.animation.sequence.reduce((a, s) => a + s[0], 0);
+		else this.totalTime = 0;
 	}
 
 	public getSpriteByTime(time: number): SpriteView {
@@ -57,16 +49,14 @@ export class EntityView {
 		if (this.data.animation) {
 			for (const [len, sprite] of this.data.animation.sequence) {
 				time -= len;
-				if (time < 0)
-					return this.sprites[sprite];
+				if (time < 0) return this.sprites[sprite];
 			}
 		}
 
 		return this.sprites[0];
 	}
 
-	public renderByTime(time: number) {
+	public renderByTime(time: number): void {
 		this.getSpriteByTime(time).render();
 	}
-
 }

src/renderer/runtime/view/input/gameinput.ts

@@ -35,13 +35,8 @@ export class GameInputHandler extends Listenable<[GameInput]> {
 		super();
 
 		this.input = new InputHandler(
-			new Set([
-				'ArrowLeft',
-				'ArrowUp',
-				'ArrowRight',
-				'ArrowDown',
-				...Object.keys(buttonMapping),
-			]));
+			new Set(['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', ...Object.keys(buttonMapping)]),
+		);
 
 		this.input.addListener((key: string, pressed: boolean) => {
 			const button = buttonMapping[key];
@@ -57,17 +52,12 @@ export class GameInputHandler extends Listenable<[GameInput]> {
 
 			const dir = vec2.create();
 
-			if (this.input.has('ArrowLeft'))
-				vec2.add(dir, dir, [-1, 0]);
-			if (this.input.has('ArrowUp'))
-				vec2.add(dir, dir, [0, -1]);
-			if (this.input.has('ArrowRight'))
-				vec2.add(dir, dir, [1, 0]);
-			if (this.input.has('ArrowDown'))
-				vec2.add(dir, dir, [0, 1]);
+			if (this.input.has('ArrowLeft')) vec2.add(dir, dir, [-1, 0]);
+			if (this.input.has('ArrowUp')) vec2.add(dir, dir, [0, -1]);
+			if (this.input.has('ArrowRight')) vec2.add(dir, dir, [1, 0]);
+			if (this.input.has('ArrowDown')) vec2.add(dir, dir, [0, 1]);
 
-			if (vec2.sqrLen(dir) > 0)
-				vec2.normalize(dir, dir);
+			if (vec2.sqrLen(dir) > 0) vec2.normalize(dir, dir);
 
 			this.runListeners({
 				type: 'direction',

src/renderer/runtime/view/input/inputhandler.ts

@@ -7,26 +7,22 @@ export class InputHandler extends Listenable<[string, boolean]> {
 		super();
 
 		window.addEventListener('keydown', (ev) => {
-			if (!relevantKeys.has(ev.code))
-				return;
+			if (!relevantKeys.has(ev.code)) return;
 
 			ev.preventDefault();
 
-			if (ev.repeat)
-				return;
+			if (ev.repeat) return;
 
 			this.keys.add(ev.code);
 			this.runListeners(ev.code, true);
 		});
 
 		window.addEventListener('keyup', (ev) => {
-			if (!relevantKeys.has(ev.code))
-				return;
+			if (!relevantKeys.has(ev.code)) return;
 
 			ev.preventDefault();
 
-			if (!this.keys.has(ev.code))
-				return;
+			if (!this.keys.has(ev.code)) return;
 
 			this.keys.delete(ev.code);
 			this.runListeners(ev.code, false);

src/renderer/runtime/view/map.ts

@@ -34,20 +34,20 @@ interface Tileset {
 async function loadTile(r: Renderer, tile: string): Promise<MapTile> {
 	const name = tile.substr(1);
 	switch (tile[0]) {
-	case '-':
-		return {
-			type: 'static',
-			image: await loadImage(`resources/sprite/tile/${name}.png`),
-		};
+		case '-':
+			return {
+				type: 'static',
+				image: await loadImage(`resources/sprite/tile/${name}.png`),
+			};
 
-	case '@':
-		return {
-			type: 'entity',
-			entity: await EntityView.load(r, name),
-		};
+		case '@':
+			return {
+				type: 'entity',
+				entity: await EntityView.load(r, name),
+			};
 
-	default:
-		throw new Error('invalid tile specifier');
+		default:
+			throw new Error('invalid tile specifier');
 	}
 }
 
@@ -55,10 +55,7 @@ function loadTiles(r: Renderer, tiles: string[]): Promise<MapTile[]> {
 	return Promise.all(tiles.map((tile) => loadTile(r, tile)));
 }
 
-function mkTileset(
-	r: Renderer,
-	mapTiles: MapTile[],
-): Tileset {
+function mkTileset(r: Renderer, mapTiles: MapTile[]): Tileset {
 	const tileSize = 32;
 
 	const canvasDim = nextPowerOf2(Math.sqrt(mapTiles.length));
@@ -67,29 +64,35 @@ function mkTileset(
 	const canvas = document.createElement('canvas');
 	canvas.width = canvas.height = canvasSize;
 
-	let x = 0, y = 0;
+	let x = 0;
+	let y = 0;
 	const tiles: TilesetTile[] = [];
 	const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
 	for (const tile of mapTiles) {
 		switch (tile.type) {
-		case 'static':
-			ctx.drawImage(tile.image, x * tileSize, y * tileSize);
-			tiles.push({
-				type: 'static',
-				coords: [x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim],
-			});
+			case 'static':
+				ctx.drawImage(tile.image, x * tileSize, y * tileSize);
+				tiles.push({
+					type: 'static',
+					coords: [
+						x / canvasDim,
+						y / canvasDim,
+						(x + 1) / canvasDim,
+						(y + 1) / canvasDim,
+					],
+				});
 
-			x++;
-			if (x === canvasDim) {
-				x = 0;
-				y++;
-			}
-			break;
+				x++;
+				if (x === canvasDim) {
+					x = 0;
+					y++;
+				}
+				break;
 
-		case 'entity':
-			tiles.push(tile);
-			break;
+			case 'entity':
+				tiles.push(tile);
+				break;
 		}
 	}
 
@@ -107,9 +110,9 @@ function addSprite(
 	tileset: Tileset,
 	x: number,
 	y: number,
-	tile: number) {
-	if (!tile)
-		return;
+	tile: number,
+): void {
+	if (!tile) return;
 
 	const tilesetTile = tileset.tiles[tile - 1];
 
@@ -124,24 +127,12 @@ function addSprite(
 	}
 }
 
-function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): MapLayerView {
-	const builder = new SpriteViewBuilder(r, tileset.texture);
-	const entityTiles: Array<[[number, number], EntityView]> = [];
-
-	for (let x = 0; x < layer[0].length; x++)
-		for (let y = 0; y < layer.length; y++)
-			addSprite(builder, entityTiles, tileset, x, y, layer[y][x]);
-
-	return new MapLayerView(r, builder.build(), entityTiles);
-}
-
 class MapLayerView {
 	public constructor(
 		private r: Renderer,
 		private staticTiles: SpriteView,
 		private entityTiles: Array<[[number, number], EntityView]>,
-	) {
-	}
+	) {}
 
 	public render(time: number): void {
 		this.r.setTranslation([0, 0]);
@@ -154,6 +145,16 @@ class MapLayerView {
 	}
 }
 
+function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): MapLayerView {
+	const builder = new SpriteViewBuilder(r, tileset.texture);
+	const entityTiles: Array<[[number, number], EntityView]> = [];
+
+	for (let x = 0; x < layer[0].length; x++)
+		for (let y = 0; y < layer.length; y++) addSprite(builder, entityTiles, tileset, x, y, layer[y][x]);
+
+	return new MapLayerView(r, builder.build(), entityTiles);
+}
+
 export class MapView {
 	public static async load(r: Renderer, map: MapData): Promise<MapView> {
 		const tiles = await loadTiles(r, map.tiles);
@@ -163,11 +164,9 @@ export class MapView {
 		return new MapView(layers);
 	}
 
-	private constructor(private layers: MapLayerView[]) {
-	}
+	private constructor(private layers: MapLayerView[]) {}
 
 	public render(time: number): void {
-		for (const layer of this.layers)
-			layer.render(time);
+		for (const layer of this.layers) layer.render(time);
 	}
 }

src/renderer/runtime/view/renderer/renderer.ts

@@ -28,8 +28,7 @@ export class Renderer {
 
 	public createBuffer(): WebGLBuffer {
 		const ret = this.gl.createBuffer();
-		if (!ret)
-			throw new Error('unable to create buffer');
+		if (!ret) throw new Error('unable to create buffer');
 
 		return ret;
 	}
@@ -50,11 +49,11 @@ export class Renderer {
 		return this.shaders.samplerLoc;
 	}
 
-	public setCenter(v: vec2|number[]) {
+	public setCenter(v: vec2): void {
 		this.snapToGrid(this.center, v);
 	}
 
-	public setTranslation(v: vec2|number[]) {
+	public setTranslation(v: vec2): void {
 		vec2.sub(this.translation, v, this.center);
 		this.snapToGrid(this.translation, this.translation);
 		this.gl.uniform2fv(this.shaders.translateLoc, this.translation);
@@ -66,7 +65,7 @@ export class Renderer {
 		this.setTranslation([0, 0]);
 	}
 
-	public snapToGrid(out: vec2, a: vec2|number[]): void {
+	public snapToGrid(out: vec2, a: vec2): void {
 		vec2.scale(out, a, this.coordScale);
 		vec2.round(out, out);
 		vec2.scale(out, out, 1 / this.coordScale);
@@ -84,14 +83,13 @@ export class Renderer {
 		const scale = this.viewScale * this.coordScale;
 
 		mat4.identity(this.viewport);
-		mat4.scale(this.viewport, this.viewport, [2 * scale / ws, -2 * scale / hs, 1.0]);
+		mat4.scale(this.viewport, this.viewport, [(2 * scale) / ws, (-2 * scale) / hs, 1.0]);
 		this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
 	}
 
 	private mkContext(): WebGLRenderingContext {
 		const gl = this.canvas.getContext('webgl');
-		if (!gl)
-			throw new Error('unable to initialize WebGL context');
+		if (!gl) throw new Error('unable to initialize WebGL context');
 
 		return gl;
 	}

src/renderer/runtime/view/renderer/shaders.ts

@@ -11,8 +11,7 @@ export class Shaders {
 
 	constructor(private readonly gl: WebGLRenderingContext) {
 		const shaderProgram = this.gl.createProgram();
-		if (!shaderProgram)
-			throw new Error('Unable to create shader program');
+		if (!shaderProgram) throw new Error('Unable to create shader program');
 
 		const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc);
 		const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc);
@@ -46,8 +45,7 @@ export class Shaders {
 
 	private compileShader(type: number, src: string): WebGLShader {
 		const shader = this.gl.createShader(type);
-		if (!shader)
-			throw new Error('Unable to create shader');
+		if (!shader) throw new Error('Unable to create shader');
 
 		this.gl.shaderSource(shader, src);
 		this.gl.compileShader(shader);
@@ -63,16 +61,14 @@ export class Shaders {
 
 	private getAttribLocation(program: WebGLProgram, name: string): number {
 		const ret = this.gl.getAttribLocation(program, name);
-		if (ret < 0)
-			throw new Error("unable to get location of attribute '" + name + "'");
+		if (ret < 0) throw new Error(`unable to get location of attribute '${name}'`);
 
 		return ret;
 	}
 
 	private getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation {
 		const ret = this.gl.getUniformLocation(program, name);
-		if (!ret)
-			throw new Error("unable to get location of uniform '" + name + "'");
+		if (!ret) throw new Error(`unable to get location of uniform '${name}'`);
 
 		return ret;
 	}

src/renderer/runtime/view/sprite.ts

@@ -2,34 +2,6 @@ import { Renderer } from './renderer/renderer';
 
 export type SpriteCoords = [number, number, number, number];
 
-export class SpriteViewBuilder {
-	private static pushSprite(buf: number[], coords: SpriteCoords): void {
-		const [x1, y1, x2, y2] = coords;
-
-		buf.push(x1); buf.push(y1);
-		buf.push(x2); buf.push(y1);
-		buf.push(x1); buf.push(y2);
-
-		buf.push(x1); buf.push(y2);
-		buf.push(x2); buf.push(y1);
-		buf.push(x2); buf.push(y2);
-	}
-
-	private readonly vertexData: number[] = [];
-	private readonly textureData: number[] = [];
-
-	constructor(private readonly r: Renderer, private readonly texture: WebGLTexture) {}
-
-	public addSprite(vertexCoords: SpriteCoords, texCoords: SpriteCoords): void {
-		SpriteViewBuilder.pushSprite(this.vertexData, vertexCoords);
-		SpriteViewBuilder.pushSprite(this.textureData, texCoords);
-	}
-
-	public build(): SpriteView {
-		return new SpriteView(this.r, this.texture, this.vertexData, this.textureData);
-	}
-}
-
 export class SpriteView {
 	private readonly vertexCount: number;
 	private readonly vertexBuffer: WebGLBuffer;
@@ -70,3 +42,37 @@ export class SpriteView {
 		gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
 	}
 }
+
+export class SpriteViewBuilder {
+	private static pushSprite(buf: number[], coords: SpriteCoords): void {
+		const [x1, y1, x2, y2] = coords;
+
+		buf.push(x1);
+		buf.push(y1);
+		buf.push(x2);
+		buf.push(y1);
+		buf.push(x1);
+		buf.push(y2);
+
+		buf.push(x1);
+		buf.push(y2);
+		buf.push(x2);
+		buf.push(y1);
+		buf.push(x2);
+		buf.push(y2);
+	}
+
+	private readonly vertexData: number[] = [];
+	private readonly textureData: number[] = [];
+
+	constructor(private readonly r: Renderer, private readonly texture: WebGLTexture) {}
+
+	public addSprite(vertexCoords: SpriteCoords, texCoords: SpriteCoords): void {
+		SpriteViewBuilder.pushSprite(this.vertexData, vertexCoords);
+		SpriteViewBuilder.pushSprite(this.textureData, texCoords);
+	}
+
+	public build(): SpriteView {
+		return new SpriteView(this.r, this.texture, this.vertexData, this.textureData);
+	}
+}

src/renderer/runtime/view/util/image.ts

@@ -3,20 +3,20 @@ import { Renderer } from '../renderer/renderer';
 export function loadImage(url: string): Promise<HTMLImageElement> {
 	return new Promise((resolve, reject) => {
 		const img = new Image();
-		img.addEventListener('load', () => { resolve(img); });
-		img.addEventListener('error', () => { reject(new Error('failed to load ' + url)); });
+		img.addEventListener('load', () => {
+			resolve(img);
+		});
+		img.addEventListener('error', () => {
+			reject(new Error('failed to load ' + url));
+		});
 		img.src = url;
 	});
 }
 
-export function mkTexture(
-	r: Renderer,
-	src: HTMLCanvasElement|HTMLImageElement,
-): [WebGLTexture, [number, number]] {
+export function mkTexture(r: Renderer, src: HTMLCanvasElement | HTMLImageElement): [WebGLTexture, [number, number]] {
 	const gl = r.getContext();
 	const texture = gl.createTexture();
-	if (!texture)
-		throw new Error('unable to create texture');
+	if (!texture) throw new Error('unable to create texture');
 
 	gl.bindTexture(gl.TEXTURE_2D, texture);
 	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
@@ -25,9 +25,7 @@ export function mkTexture(
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 
-	const size: [number, number] = [
-		src.width / r.coordScale, src.height / r.coordScale,
-	];
+	const size: [number, number] = [src.width / r.coordScale, src.height / r.coordScale];
 
 	return [texture, size];
 }

tsconfig.json

@@ -5,8 +5,7 @@
 		"strict": true,
 		"jsx": "react",
 		"outDir": "dist",
-		"sourceMap": true,
-		"declaration": true
+		"sourceMap": true
 	},
 	"include": [
 		"src/**/*"

webpack.renderer.js

@@ -1,7 +0,0 @@
-module.exports = {
-	module: {
-		rules: [
-			{ test: /\.(vs|fs)$/, use: ['raw-loader'] },
-		],
-	},
-}