Ported all code to Typescript to better organization

All previous logic and gameplay reminds the same
so probably all bugs still there

.dockerignore

@@ -0,0 +1,4 @@
+build
+node_modules
+package-lock.json
+*.log*

.eslintrc

@@ -0,0 +1,17 @@
+{
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "env": {
+        "node": true,
+        "es6": true
+    },
+    "rules": {
+        "no-console": [true, "log", "debug", "error"],
+        "quotes": [2, "single", {"avoidEscape": true}],
+        "strict": [2, "never"]
+    },
+    "extends": [
+        "eslint:recommended"
+    ]
+}

.gitignore

@@ -0,0 +1,5 @@
+.vscode
+build
+node_modules
+*.log
+package-lock.json

.gitlab-ci.yml

@@ -0,0 +1,12 @@
+image: node:10.16.3
+
+cache:
+  paths:
+  - node_modules/
+
+before_script:
+  - npm install --no-optional
+
+build:
+  script:
+    - npm test

CONTRIBUTING.md

@@ -0,0 +1,6 @@
+## Contributing
+
+* If you find solution to an [issue/improvements](https://github.com/hgouveia/html5multiplayer/issues) would be helpful to everyone, feel free to send us a pull request.
+* The ideal approach to create a fix would be to fork the repository, create a branch in your repository, and make a pull request out of it.
+* It is desirable if there is enough comments/documentation and Tests included in the pull request.
+* For general idea of contribution, please follow the guidelines mentioned [here](https://guides.github.com/activities/contributing-to-open-source/).

Dockerfile

@@ -0,0 +1,20 @@
+# Compiles webpack and typescript
+FROM node:10 as BUILD
+WORKDIR /tmp/app
+COPY . .
+RUN npm i --no-optional
+ENV NODE_ENV=production
+RUN npm run build
+
+# Deploy final app
+FROM node:10
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=3478
+WORKDIR /usr/src/app
+COPY --from=BUILD /tmp/app/package*.json /usr/src/app/
+COPY --from=BUILD /tmp/app/build/ /usr/src/app/build
+COPY --from=BUILD /tmp/app/index.html /usr/src/app/
+RUN npm ci
+EXPOSE $PORT
+CMD [ "npm", "start" ]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Jose De Gouveia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,69 @@
+# Multiplayer Game
+
+A very basic multiplayer implementations using HTML5 Canvas and socket.io for learning purpose
+
+[Demo](https://game.joyalstudios.com/html5multiplayer) 
+
+## Usage
+
+```bash
+npm install
+npm run build
+```
+
+Access via http://localhost:3478/play to play the game
+
+Access stats info via http://localhost:3478/list
+
+Running using **docker-compose** 
+```bash
+docker-compose up -d
+```
+
+or plain docker
+
+Build:
+```bash
+docker build -t hgouveia/html-mp:latest .
+```
+Run:
+```
+docker run -d --name mp-game -e PORT=3478 -e DEBUG=ts-mp:* -p 3478:3478 hgouveia/html-mp:latest
+```
+
+if you want to hide the port, you could use Nginx Proxy
+
+```conf
+server {
+    listen 80;
+    root /www/game;
+    server_name mydomain.com;
+
+    location /mygame/ {
+      proxy_pass http://127.0.0.1:3478/;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection 'upgrade';
+      proxy_set_header Host $host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_cache_bypass $http_upgrade;
+    }
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+}
+```
+
+## TODO
+- Move HIT/DIE/BULLETS events to be processed on the server
+- Add basic predictions
+- Add security aspects (for ex: any player data could be altered via client)
+
+## License
+
+Read [License](LICENSE) for more licensing information.
+
+## Contributing
+
+Read [here](CONTRIBUTING.md) for more information.

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3'
+services:
+  node:
+    build: .
+    container_name: mp-server
+    restart: always
+    environment:
+      - NODE_ENV=production
+      - DEBUG=ts-mp:*   
+      - HOST=0.0.0.0
+      - PORT=3478
+    ports:
+      - "3478:3478"

index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <style>
+        body,
+        html {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+
+        .white {
+            color: white;
+        }
+
+        .blue {
+            color: blue;
+        }
+
+        .red {
+            color: red;
+        }
+
+        .green {
+            color: green;
+        }
+
+        .orange {
+            color: orange;
+        }
+
+        body {
+            background: black;
+            font-family: verdana;
+            font-size: 12px;
+        }
+
+        .main {
+            width: 1024px;
+            margin: 0 auto;
+        }
+
+        .main h1 {
+            font-size: 26px;
+            color: white;
+            text-align: center;
+        }
+
+        .main .canvas-wrapper {
+            position: relative;
+        }
+
+        .main .canvas-wrapper canvas {
+            width: 100%;
+            height: 650px;
+            border: 1px solid white;
+        }
+
+        .main .canvas-wrapper .log {
+            position: absolute;
+            background: transparent;
+            width: 360px;
+            height: 100px;
+            bottom: 3px;
+            left: 0;
+            padding: 5px;
+            overflow: hidden;
+        }
+
+        .main .canvas-wrapper .log .message {
+            display: block;
+            clear: both;
+            padding: 2px 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="main" class="main">
+        <h1>Block Multiplayer</h1>
+        <div class="canvas-wrapper">
+            <canvas id="game-canvas" width="1024" height="650">Your browser does not support the canvas element.</canvas>
+            <div id="log" class="log"></div>
+        </div>
+    </div>
+
+    <script src="build/client/bundle.js"></script>
+
+    <script>
+        (function (i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+                (i[r].q = i[r].q || []).push(arguments)
+            }, i[r].l = 1 * new Date(); a = s.createElement(o),
+                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+        ga('create', 'UA-29150013-7', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+</html>

nodemon.json

@@ -0,0 +1,10 @@
+{
+    "watch": [
+        "src"
+    ],
+    "ext": "ts",
+    "ignore": [
+        "src/**/*.spec.ts"
+    ],
+    "exec": "ts-node ./src/server/index.ts"
+}

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ts-mp",
+  "version": "1.0.0",
+  "description": "A simple multiplayer game using HTML5 Canvas in conjuction with nodejs",
+  "main": "build/server/index.js",
+  "scripts": {
+    "start": "npm run server:start",
+    "build": "npm run server:build && npm run client:build",
+    "server:start": "node build/server/index.js",
+    "server:start:dev": "npx cross-env DEBUG=ts-mp:* npx nodemon",
+    "server:build": "npx tsc && npm run server:build:cp:tpl",
+    "server:build:cp:tpl": "cp -R ./src/server/dashboard/views ./build/server/dashboard",
+    "client:build": "node_modules\\.bin\\webpack --config ./src/client/webpack.config.js",
+    "client:watch": "node_modules\\.bin\\webpack --config ./src/client/webpack.config.js -w",
+    "lint": "tslint -c tslint.json 'src/**/*.ts'",
+    "lint:fix": "tslint --fix -c tslint.json 'src/**/*.ts'",
+    "test": "npm run lint"
+  },
+  "author": "Jose De Gouveia",
+  "engines": {
+    "node": "10.x"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/debug": "^4.1.4",
+    "@types/express": "^4.17.0",
+    "@types/node": "^12.6.8",
+    "@types/socket.io": "^2.1.2",
+    "@types/socket.io-client": "^1.4.32",
+    "crossenv": "0.0.2-security",
+    "nodemon": "^1.19.1",
+    "ts-loader": "^6.0.4",
+    "ts-node": "^8.3.0",
+    "tslint": "^5.20.0",
+    "typescript": "^3.5.3",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6"
+  },
+  "dependencies": {
+    "debug": "^4.1.1",
+    "ejs": "^2.6.2",
+    "express": "^4.17.1",
+    "socket.io": "^2.2.0"
+  }
+}

src/client/entities/Bullet.ts

@@ -0,0 +1,26 @@
+import { toRad } from '../../common/helpers';
+import { Entity } from './Entity';
+
+export class Bullet extends Entity {
+    private speed: number = 300;
+    private color: string = '#FFA420';
+
+    constructor(id: string, x: number, y: number, angle: number) {
+        super(id, x, y, angle, 5, 1);
+    }
+
+    public update(elapsedTime: number): void {
+        this.advance(this.speed * elapsedTime);
+    }
+
+    public draw(ctx: CanvasRenderingContext2D): void {
+        ctx.save();
+
+        ctx.fillStyle = this.color;
+        ctx.translate(this.x, this.y);
+        ctx.rotate(toRad(this.angle));
+        ctx.fillRect(-this.width / 2 + 15, -this.height / 2, this.width, this.height);
+
+        ctx.restore();
+    }
+}