Adds PWA support

package.json

@@ -36,6 +36,7 @@
     "file-loader": "^5.0.2",
     "fs": "^0.0.1-security",
     "global": "^4.4.0",
+    "idb-keyval": "^3.2.0",
     "json-loader": "^0.5.7",
     "pathfinding": "https://github.com/tim-ings/PathFinding.js/",
     "pg": "^7.17.0",
@@ -51,6 +52,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.2",
+    "@types/filesystem": "^0.0.29",
     "@types/node": "^13.1.4",
     "@types/socket.io": "^2.1.4",
     "@types/socket.io-client": "^1.4.32",
@@ -80,6 +82,8 @@
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1",
-    "webpack-glsl-loader": "^1.0.1"
+    "webpack-glsl-loader": "^1.0.1",
+    "webpack-pwa-manifest": "^4.2.0",
+    "workbox-webpack-plugin": "^5.0.0"
   }
 }

src/client/engine/Engine.ts

@@ -4,12 +4,10 @@ import Graphics from './graphics/Graphics';
 import NetClient from './NetClient';
 import SceneManager from './scene/SceneManager';
 import GameScene from './scene/GameScene';
-// import Label from './interface/components/Label';
 import UIParent from './interface/components/UIParent';
 
 export default class Engine {
     private static lastrender: number = 0;
-    // private static lblFps: Label;
     private static stats: Stats;
 
     public static init(enableNetworking: boolean = true): void {
@@ -25,7 +23,6 @@ export default class Engine {
         // window.onbeforeunload = () => 'Are you sure you want to quit?';
 
         UIParent.get().clear();
-        // this.lblFps = new Label(UIParent.get(), '');
 
         // prevent default context menu
         const body = document.getElementById('body');

src/client/engine/LocalPlayer.ts

@@ -181,6 +181,10 @@ export default class LocalPlayer extends LocalUnit {
                 });
             }
         }
+        options.push(<ContextOptionDef>{
+            text: 'Cancel',
+            listener: () => {},
+        });
         Input.openContextMenu(Input.mousePos(), options);
     }
 

src/client/engine/interface/components/ContextMenu.ts

@@ -1,6 +1,10 @@
 import { Frame, FrameStrata } from './Frame';
 import { Point } from '../../../../common/Point';
+import Graphics from '../../graphics/Graphics';
 
+function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+}
 
 class ContextMenuOption extends Frame {
     public key: string;
@@ -49,8 +53,12 @@ export default class ContextMenu extends Frame {
 
     public open(point: Point): void {
         this.style.position = 'fixed';
-        this.style.left = `${point.x - this.width / 2}px`;
-        this.style.top = `${point.y - 10}px`;
+
+        const left = clamp(point.x - this.width / 2, 0, Graphics.viewportWidth - this.width);
+        const top = clamp(point.y - 10, 0, Graphics.viewportHeight - this.height);
+
+        this.style.left = `${left}px`;
+        this.style.top = `${top}px`;
         this.style.zIndex = (<number> this.strata).toString();
 
         this.show();

src/client/index.ts

@@ -5,6 +5,16 @@ import CharCreateScene from './scenes/CharCreateScene';
 import WorldScene from './scenes/WorldScene';
 import SignupScene from './scenes/SignupScene';
 
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js').then((registration) => {
+            console.log('SW registered');
+        }).catch((registrationError) => {
+            console.log('SW registration failed: ', registrationError);
+        });
+    });
+}
+
 function main(): void {
     Engine.init();
     Engine.addScene(new LoginScene());

webpack.client.config.js

@@ -2,6 +2,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CheckerPlugin } = require('awesome-typescript-loader');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const WebpackPwaManifest = require('webpack-pwa-manifest');
 
 module.exports = {
     entry: './src/client/index.ts',
@@ -61,7 +63,29 @@ module.exports = {
                 to: path.join(__dirname, 'dist/client/assets'),
             },
         ]),
-    ],
+        new WorkboxPlugin.GenerateSW({
+            // these options encourage the ServiceWorkers to get in there fast
+            // and not allow any straggling "old" SWs to hang around
+            clientsClaim: true,
+            skipWaiting: true,
+            maximumFileSizeToCacheInBytes: 100 * 1024 * 1024,
+        }),
+        new WebpackPwaManifest({
+            name: 'MMO',
+            short_name: 'MMO',
+            description: 'Simple click to move browser MMO',
+            background_color: '#000000',
+            crossorigin: 'use-credentials', // can be null, use-credentials or anonymous
+            orientation: 'landscape',
+            display: 'fullscreen',
+            filename: 'manifest.json',
+            icons: [
+                {
+                    src: path.resolve('src/client/assets/icon512.png'),
+                    sizes: [96, 128, 192, 256, 384, 512], // multiple sizes
+                },
+            ],
+        })],
     devServer: {
         contentBase: path.join(__dirname, 'dist/client'),
         compress: true,

webpack.editor.config.js

@@ -72,6 +72,6 @@ module.exports = {
         contentBase: path.join(__dirname, 'dist/editor'),
         compress: true,
         port: 9000,
-        // writeToDisk: true,
+        writeToDisk: true,
     },
 };