Create Electron app
2
.gitignore
vendored
|
|
@ -1,2 +1,2 @@
|
||||||
|
/dist
|
||||||
/node_modules
|
/node_modules
|
||||||
/dist/bundle.js
|
|
||||||
|
|
|
||||||
33
dist/index.html
vendored
|
|
@ -1,33 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>RPGedit</title>
|
|
||||||
<style type="text/css">
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
position: relative;
|
|
||||||
top: calc(50% - 384px);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
border: 0px;
|
|
||||||
background: #223;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas id="rpgedit" width="1024" height="768"></canvas>
|
|
||||||
<script src="bundle.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
5
electron-webpack.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"renderer": {
|
||||||
|
"webpackConfig": "webpack.renderer.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
12
package.json
|
|
@ -1,18 +1,18 @@
|
||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"main": "dist/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server",
|
"start": "electron-webpack dev"
|
||||||
"build": "webpack"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/gl-matrix": "^2.4.4",
|
"@types/gl-matrix": "^2.4.4",
|
||||||
|
"electron": "^4.0.0-beta.8",
|
||||||
|
"electron-webpack": "^2.6.1",
|
||||||
|
"electron-webpack-ts": "^3.1.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"ts-loader": "^5.3.1",
|
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^5.11.0",
|
||||||
"typescript": "^3.2.2",
|
"typescript": "^3.2.2",
|
||||||
"webpack": "^4.27.1",
|
"webpack": "^4.27.1"
|
||||||
"webpack-cli": "^3.1.2",
|
|
||||||
"webpack-dev-server": "^3.1.10"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gl-matrix": "^2.8.1"
|
"gl-matrix": "^2.8.1"
|
||||||
|
|
|
||||||
51
src/main/index.ts
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
0
custom.d.ts → src/renderer/custom.d.ts
vendored
20
src/renderer/index.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,20 @@
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
import { GameContext } from './controller/gamecontext';
|
import { GameContext } from './controller/gamecontext';
|
||||||
|
|
||||||
import { Renderer } from './view/renderer/renderer';
|
import { Renderer } from './view/renderer/renderer';
|
||||||
|
|
||||||
window.onload = async () => {
|
window.onload = async () => {
|
||||||
const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
|
const app = document.getElementById('app');
|
||||||
if (!canvas)
|
if (!app)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = 1024;
|
||||||
|
canvas.height = 768;
|
||||||
|
|
||||||
|
app.append(canvas);
|
||||||
|
|
||||||
const renderer = new Renderer(canvas);
|
const renderer = new Renderer(canvas);
|
||||||
|
|
||||||
GameContext.load(renderer);
|
GameContext.load(renderer);
|
||||||
|
|
@ -7,8 +7,6 @@ import { MapData } from '../model/data/map';
|
||||||
|
|
||||||
import { nextPowerOf2 } from '../util';
|
import { nextPowerOf2 } from '../util';
|
||||||
|
|
||||||
import { vec2 } from 'gl-matrix';
|
|
||||||
|
|
||||||
interface StaticMapTile {
|
interface StaticMapTile {
|
||||||
type: 'static';
|
type: 'static';
|
||||||
image: HTMLImageElement;
|
image: HTMLImageElement;
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { Renderer } from '../renderer/renderer';
|
import { Renderer } from '../renderer/renderer';
|
||||||
import { SpriteCoords } from '../sprite';
|
|
||||||
|
|
||||||
export function loadImage(url: string): Promise<HTMLImageElement> {
|
export function loadImage(url: string): Promise<HTMLImageElement> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 155 B After Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 528 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 930 B |
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 927 B |
|
Before Width: | Height: | Size: 765 B After Width: | Height: | Size: 765 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,8 +1,3 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"extends": "./node_modules/electron-webpack/tsconfig-base.json"
|
||||||
"outDir": "./dist/",
|
|
||||||
"sourceMap": true,
|
|
||||||
"target": "ES2015",
|
|
||||||
"strict": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
module.exports = (env, argv) => {
|
|
||||||
let config = {
|
|
||||||
entry: './src/index.ts',
|
|
||||||
devServer: {
|
|
||||||
contentBase: './dist'
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.ts$/,
|
|
||||||
use: 'ts-loader',
|
|
||||||
exclude: /node_modules/
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(vs|fs)$/,
|
|
||||||
use: [
|
|
||||||
'raw-loader'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: [ ".ts", ".js" ]
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
filename: 'bundle.js',
|
|
||||||
path: path.resolve(__dirname, 'dist')
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (argv.mode === 'development') {
|
|
||||||
config.devtool = 'eval-source-map';
|
|
||||||
}
|
|
||||||
|
|
||||||
return config;
|
|
||||||
};
|
|
||||||
12
webpack.renderer.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
module.exports = {
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(vs|fs)$/,
|
||||||
|
use: [
|
||||||
|
'raw-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||