First commit! Party time

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  rules: {
+    "@typescript-eslint/no-empty-function": "off"
+  }
+};

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

README.md

@@ -0,0 +1,11 @@
+# asdf-browser-template
+
+This is a template for creating games in the browser with the [asdf-games](https://gitea.arnweb.nl/arne/asdf-games) framework. It works with gulp (and plugins), browserify, tsify, babelify and eslint. These packages allow you to create browser games with asdf in typescript without having to worry about browser compatibility (babel).
+
+To get started, clone the repository and run npm:
+```bash
+git clone https://gitea.arnweb.nl/corner/asdf-browser-template.git && cd asdf-browser-template
+npm i
+```
+
+You are now ready to rock! Start coding some great games! If you want to transpile your project into valid JS and HTML run `npm run build`. This will create a bundle.js, bundle.min.js and an index.html. Open up the index.html in your browser, and there is your game, ready to be distributed.

gulpfile.js

@@ -0,0 +1,60 @@
+var gulp = require('gulp')
+const tsify = require('tsify');
+var sourcemaps = require('gulp-sourcemaps');
+const rename = require('gulp-rename');
+const browserify = require('browserify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const terser = require('gulp-terser');
+const eslint = require('gulp-eslint');
+const babelify = require('babelify');
+const htmlmin = require('gulp-html-minifier-terser');
+const htmlvalidator = require('gulp-html');
+
+const html = () => {
+  return gulp.src('src/index.html')
+    .pipe(htmlvalidator())
+    .pipe(htmlmin({
+      removeComments: true,
+      collapseWhitespace: true,
+      collapseBooleanAttributes: true,
+      collapseInlineTagWhitespace: true,
+      removeRedundantAttributes: true
+    }))
+    .pipe(gulp.dest('dist'));
+}
+
+const js = () => {
+  gulp.src(['src/**/*.ts', '!node_modules/**'])
+    .pipe(eslint({quiet: true}))
+    .pipe(eslint.results(results => {
+    	 // Called once for all ESLint results.
+       console.log('ESLint results:\n');
+       console.log(`Total Errors: ${results.errorCount}`);
+       let output = '';
+       results.forEach(file => {
+         output += file.filePath + '\n';
+         file.messages.forEach(message => {
+           output += ' - ' + message.message + ' at ' + message.line + ':' + message.column + '\n';
+         });
+         output += '\n';
+       });
+       console.error(output);
+    }))
+    .pipe(eslint.failAfterError());
+
+  return browserify('src/index.ts')
+     .plugin(tsify, { noImplicitAny: true, target: 'es6' })
+     .transform(babelify, { extensions: [ '.tsx', '.ts' ] })
+     .bundle().on('error', (e) => console.error(e))
+     .pipe(source('output.js'))
+     .pipe(gulp.dest('dist'))
+     .pipe(buffer())
+     .pipe(sourcemaps.init())
+     .pipe(terser())
+     .pipe(rename({ extname: '.min.js' }))
+     .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
+     .pipe(gulp.dest('dist'));
+};
+
+exports.default = gulp.parallel(js, html);

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "asdf-browser-template",
+  "version": "1.0.0",
+  "description": "A template for creating games for the browser with asdf-games.",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "gulp"
+  },
+  "keywords": [
+    "asdf",
+    "asdf-games",
+    "browser"
+  ],
+  "author": {
+    "name": "Job Vonk",
+    "email": "job@jobbel.nl",
+    "url": "https://jobbel.nl"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.1",
+    "eslint": "^6.8.0",
+    "gulp": "^4.0.2",
+    "gulp-eslint": "^6.0.0",
+    "gulp-html": "^2.0.0",
+    "gulp-html-minifier-terser": "^6.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-terser": "^1.2.0",
+    "tsify": "^4.0.1",
+    "typescript": "^3.8.3",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
+  },
+  "dependencies": {
+    "asdf-games": "^1.0.14"
+  }
+}

src/box.ts

@@ -0,0 +1,7 @@
+import { Rect } from 'asdf-games';
+
+export class Box extends Rect {
+  constructor() {
+    super(100, 100, {fill: '#000'});
+  }
+}

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Game</title>
+  </head>
+
+	<body>
+
+    <div id="board"></div>
+
+  	<script src="output.min.js"></script>
+
+	</body>
+
+</html>

src/index.ts

@@ -0,0 +1,12 @@
+// Hey look! Imports work just like they normally would.
+import { Game } from 'asdf-games';
+import { Box } from './box';
+
+const game = new Game(600, 400, true, '#board');
+
+const box = new Box;
+
+game.scene.add(box);
+
+game.run(() => {});
+

tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "target": "es3",
+        "noImplicitAny": true,
+        "moduleResolution": "node",
+        "sourceMap": false,
+        "outDir": "dist",
+        "baseUrl": ".",
+        "paths": {
+            "*": [
+                "node_modules/*",
+                "src/types/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*"
+    ]
+}