Create Electron app
2
.gitignore
vendored
|
|
@ -1,2 +1,2 @@
|
|||
/dist
|
||||
/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,
|
||||
"main": "dist/main.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "webpack"
|
||||
"start": "electron-webpack dev"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"ts-loader": "^5.3.1",
|
||||
"tslint": "^5.11.0",
|
||||
"typescript": "^3.2.2",
|
||||
"webpack": "^4.27.1",
|
||||
"webpack-cli": "^3.1.2",
|
||||
"webpack-dev-server": "^3.1.10"
|
||||
"webpack": "^4.27.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"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 { 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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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) => {
|
||||
|
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": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"target": "ES2015",
|
||||
"strict": true
|
||||
}
|
||||
"extends": "./node_modules/electron-webpack/tsconfig-base.json"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||