Project structure

.gitignore

@@ -0,0 +1,3 @@
+build
+node_modules
+.idea

README.md

@@ -0,0 +1,4 @@
+# youtube-space-invaders
+Simple space invaders game for the browser
+
+I used TypeScript as it is pretty nice for games and catches a lot of bugs at compile time.

config/webpack.common.js

@@ -0,0 +1,47 @@
+var path = require("path");
+var webpack = require("webpack");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+
+
+const PATHS = {
+  src: path.join(__dirname, '../src'),
+  build: path.join(__dirname, '../build')
+};
+
+module.exports = {
+
+  entry: {
+    app: PATHS.src + '/app.ts'
+  },
+  output: {
+    path: PATHS.build,
+    filename: '[name].js'
+  },
+
+
+  devtool: "source-map",
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader'
+      },
+      {
+        test: /\.css/,
+        loader: "style!css"
+      }
+    ]
+  },
+  resolve: {
+    // you can now require('file') instead of require('file.js')
+    extensions: ['.js', '.json']
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Webpack boilerplate',
+      hash: true,
+      filename: 'index.html',
+      template: PATHS.src + '/index.html',
+    })
+  ]
+};

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "youtube-space-invaders",
+  "version": "1.0.0",
+  "description": "Simple setup for client-only projects",
+  "main": "webpack.config.js",
+  "dependencies": {},
+  "devDependencies": {
+    "css-loader": "^0.25.0",
+    "html-webpack-plugin": "^2.22.0",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^0.8.2",
+    "typescript": "^2.0.3",
+    "webpack": "^2.1.0-beta.25",
+    "webpack-validator": "^2.2.7"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/QuantumInformation/youtube-space-invaders.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/QuantumInformation/youtube-space-invaders/issues"
+  },
+  "homepage": "https://github.com/QuantumInformation/youtube-space-invaders#readme"
+}

src/app.ts

@@ -0,0 +1 @@
+alert("it works!")

src/index.html

@@ -0,0 +1,12 @@
+<h1>You have reached the Space Invaders game!</h1>
+
+<p>You project has compiled successfully</p>
+
+<div class="contnet">
+    <canvas id="canvas"> Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
+    </canvas>
+    <p>Keys: Arrows = movment, Space = shoot</p>
+</div>
+
+<p>This code matches the last video of the youtube series <a
+        href="https://www.youtube.com/playlist?list=PLCrwuqjmVebIU2b4qesWz7PAEm1UJl15n">here</a></p>

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "sourceMap": true
+  },
+  "files": []
+}

webpack.config.js

@@ -0,0 +1,4 @@
+const validate = require('webpack-validator')
+module.exports = validate(require('./config/webpack.common.js'), {
+  quiet: true
+});