Create Electron app

src/main/index.ts

@@ -0,0 +1,51 @@
+import { app, BrowserWindow } from 'electron';
+import * as path from 'path';
+import { format as formatUrl } from 'url';
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+let mainWindow: BrowserWindow|null = null;
+
+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,
+	});
+}
+
+function createMainWindow(): BrowserWindow {
+	const window = new BrowserWindow();
+
+	if (isDevelopment)
+		window.webContents.openDevTools();
+
+	window.loadURL(getIndexURL());
+
+	window.on('closed', () => {
+		mainWindow = null;
+	});
+
+	window.webContents.on('devtools-opened', () => {
+		window.webContents.focus();
+	});
+
+	return window;
+}
+
+app.on('window-all-closed', () => {
+	if (process.platform !== 'darwin')
+		app.quit();
+});
+
+app.on('activate', () => {
+	if (!mainWindow)
+		mainWindow = createMainWindow();
+});
+
+app.on('ready', () => {
+	mainWindow = createMainWindow();
+});

src/renderer/custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.vs" {
+	const content: string;
+	export default content;
+}
+
+declare module "*.fs" {
+	const content: string;
+	export default content;
+}

src/renderer/index.css

@@ -0,0 +1,20 @@
+html, body, div {
+	width: 100%;
+	height: 100%;
+}
+
+#app {
+	text-align: center;
+}
+
+canvas {
+	position: relative;
+	top: calc(50% - 384px);
+}
+
+* {
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
+	background: #223;
+}

src/renderer/index.ts

@@ -1,12 +1,20 @@
+import './index.css';
+
 import { GameContext } from './controller/gamecontext';
 
 import { Renderer } from './view/renderer/renderer';
 
 window.onload = async () => {
-	const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
-	if (!canvas)
+	const app = document.getElementById('app');
+	if (!app)
 		return;
 
+	const canvas = document.createElement('canvas');
+	canvas.width = 1024;
+	canvas.height = 768;
+
+	app.append(canvas);
+
 	const renderer = new Renderer(canvas);
 
 	GameContext.load(renderer);

src/renderer/view/map.ts

@@ -7,8 +7,6 @@ import { MapData } from '../model/data/map';
 
 import { nextPowerOf2 } from '../util';
 
-import { vec2 } from 'gl-matrix';
-
 interface StaticMapTile {
 	type: 'static';
 	image: HTMLImageElement;

src/renderer/view/util/image.ts

@@ -1,5 +1,4 @@
 import { Renderer } from '../renderer/renderer';
-import { SpriteCoords } from '../sprite';
 
 export function loadImage(url: string): Promise<HTMLImageElement> {
 	return new Promise((resolve, reject) => {