├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── modules.js
    ├── paths.js
    ├── pnpTs.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── icon-192.png
    ├── icon-512.png
    ├── index.html
    ├── manifest.json
    └── storage.html
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
└── src
    ├── App.js
    ├── App.scss
    ├── api
        ├── Diablo.jscc
        ├── Diablo.wasm
        ├── DiabloSpawn.jscc
        ├── DiabloSpawn.wasm
        ├── codec.js
        ├── explode.js
        ├── game.worker.js
        ├── load_spawn.js
        ├── loader.js
        ├── packet.js
        ├── savefile.js
        ├── sound.js
        ├── webrtc.js
        └── websocket.js
    ├── fs.js
    ├── icons
        ├── f5.svg
        ├── f6.svg
        ├── f7.svg
        ├── f8.svg
        ├── move.svg
        ├── rmb.svg
        └── shift.svg
    ├── index.js
    ├── mpqcmp
        ├── ListFile.txt
        ├── MpqCmp.jscc
        ├── MpqCmp.wasm
        ├── compress.js
        ├── index.js
        └── mpqcmp.worker.js
    ├── reset.css
    ├── serviceWorker.js
    └── storage.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | public/spawn.mpq
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Diablo 1 for web browsers!
 2 | 
 3 | This project is based on https://github.com/diasurgical/devilution.
 4 | 
 5 | Source code to build the WebAssembly modules is here: https://github.com/d07RiV/devilution
 6 | 
 7 | I've modified the code to remove all dependencies and exposed the minimal required interface with JS, allowing the game to be compiled into WebAssembly.
 8 | 
 9 | Event handling (especially in the menus) had to be modified significantly to fit the JS model.
10 | 
11 | The project is hosted on https://d07RiV.github.io/diabloweb/ along with spawn.mpq from the shareware version (place it in the public folder to run locally).
12 | This allows shareware version to be played anywhere, even on mobile phones. To play the full game, you must use your own DIABDAT.MPQ that you can obtain
13 | with the original copy of the game from [GoG](url=https://www.gog.com/game/diablo).
14 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |         VERSION: process.env.npm_package_version,
81 |       }
82 |     );
83 |   // Stringify all values so we can feed into Webpack DefinePlugin
84 |   const stringified = {
85 |     'process.env': Object.keys(raw).reduce((env, key) => {
86 |       env[key] = JSON.stringify(raw[key]);
87 |       return env;
88 |     }, {}),
89 |   };
90 | 
91 |   return { raw, stringified };
92 | }
93 | 
94 | module.exports = getClientEnvironment;
95 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFileName = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFileName}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | 
 8 | /**
 9 |  * Get the baseUrl of a compilerOptions object.
10 |  *
11 |  * @param {Object} options
12 |  */
13 | function getAdditionalModulePaths(options = {}) {
14 |   const baseUrl = options.baseUrl;
15 | 
16 |   // We need to explicitly check for null and undefined (and not a falsy value) because
17 |   // TypeScript treats an empty string as `.`.
18 |   if (baseUrl == null) {
19 |     // If there's no baseUrl set we respect NODE_PATH
20 |     // Note that NODE_PATH is deprecated and will be removed
21 |     // in the next major release of create-react-app.
22 | 
23 |     const nodePath = process.env.NODE_PATH || '';
24 |     return nodePath.split(path.delimiter).filter(Boolean);
25 |   }
26 | 
27 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
28 | 
29 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
30 |   // the default behavior.
31 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
32 |     return null;
33 |   }
34 | 
35 |   // Allow the user set the `baseUrl` to `appSrc`.
36 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
37 |     return [paths.appSrc];
38 |   }
39 | 
40 |   // Otherwise, throw an error.
41 |   throw new Error(
42 |     chalk.red.bold(
43 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
44 |         ' Create React App does not support other values at this time.'
45 |     )
46 |   );
47 | }
48 | 
49 | function getModules() {
50 |   // Check if TypeScript is setup
51 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
52 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
53 | 
54 |   if (hasTsConfig && hasJsConfig) {
55 |     throw new Error(
56 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
57 |     );
58 |   }
59 | 
60 |   let config;
61 | 
62 |   // If there's a tsconfig.json we assume it's a
63 |   // TypeScript project and set up the config
64 |   // based on tsconfig.json
65 |   if (hasTsConfig) {
66 |     config = require(paths.appTsConfig);
67 |     // Otherwise we'll check if there is jsconfig.json
68 |     // for non TS projects.
69 |   } else if (hasJsConfig) {
70 |     config = require(paths.appJsConfig);
71 |   }
72 | 
73 |   config = config || {};
74 |   const options = config.compilerOptions || {};
75 | 
76 |   const additionalModulePaths = getAdditionalModulePaths(options);
77 | 
78 |   return {
79 |     additionalModulePaths: additionalModulePaths,
80 |     hasTsConfig,
81 |   };
82 | }
83 | 
84 | module.exports = getModules();
85 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appHtmlStorage: resolveApp('public/storage.html'),
76 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
77 |   appStorageJs: resolveModule(resolveApp, 'src/storage'),
78 |   appPackageJson: resolveApp('package.json'),
79 |   appSrc: resolveApp('src'),
80 |   appTsConfig: resolveApp('tsconfig.json'),
81 |   appJsConfig: resolveApp('jsconfig.json'),
82 |   yarnLockFile: resolveApp('yarn.lock'),
83 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
84 |   proxySetup: resolveApp('src/setupProxy.js'),
85 |   appNodeModules: resolveApp('node_modules'),
86 |   publicUrl: getPublicUrl(resolveApp('package.json')),
87 |   servedPath: getServedPath(resolveApp('package.json')),
88 | };
89 | 
90 | 
91 | 
92 | module.exports.moduleFileExtensions = moduleFileExtensions;
93 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const isWsl = require('is-wsl');
  5 | const path = require('path');
  6 | const webpack = require('webpack');
  7 | const resolve = require('resolve');
  8 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 10 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 11 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 12 | const TerserPlugin = require('terser-webpack-plugin');
 13 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 14 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 15 | const safePostCssParser = require('postcss-safe-parser');
 16 | const ManifestPlugin = require('webpack-manifest-plugin');
 17 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 18 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 19 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 20 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 21 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 22 | const paths = require('./paths');
 23 | const modules = require('./modules');
 24 | const getClientEnvironment = require('./env');
 25 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 26 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 27 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 28 | 
 29 | const postcssNormalize = require('postcss-normalize');
 30 | 
 31 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 32 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 33 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 34 | // makes for a smoother build process.
 35 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 36 | 
 37 | // Check if TypeScript is setup
 38 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 39 | 
 40 | // style files regexes
 41 | const cssRegex = /\.css$/;
 42 | const cssModuleRegex = /\.module\.css$/;
 43 | const sassRegex = /\.(scss|sass)$/;
 44 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 45 | 
 46 | // This is the production and development configuration.
 47 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 48 | module.exports = function(webpackEnv) {
 49 |   const isEnvDevelopment = webpackEnv === 'development';
 50 |   const isEnvProduction = webpackEnv === 'production';
 51 | 
 52 |   // Webpack uses `publicPath` to determine where the app is being served from.
 53 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 54 |   // In development, we always serve from the root. This makes config easier.
 55 |   const publicPath = isEnvProduction
 56 |     ? paths.servedPath
 57 |     : isEnvDevelopment && '/';
 58 |   // Some apps do not use client-side routing with pushState.
 59 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 60 |   const shouldUseRelativeAssetPaths = publicPath === './';
 61 | 
 62 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 63 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 64 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 65 |   const publicUrl = isEnvProduction
 66 |     ? publicPath.slice(0, -1)
 67 |     : isEnvDevelopment && '';
 68 |   // Get environment variables to inject into our app.
 69 |   const env = getClientEnvironment(publicUrl);
 70 | 
 71 |   // common function to get style loaders
 72 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 73 |     const loaders = [
 74 |       isEnvDevelopment && require.resolve('style-loader'),
 75 |       isEnvProduction && {
 76 |         loader: MiniCssExtractPlugin.loader,
 77 |         options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
 78 |       },
 79 |       {
 80 |         loader: require.resolve('css-loader'),
 81 |         options: cssOptions,
 82 |       },
 83 |       {
 84 |         // Options for PostCSS as we reference these options twice
 85 |         // Adds vendor prefixing based on your specified browser support in
 86 |         // package.json
 87 |         loader: require.resolve('postcss-loader'),
 88 |         options: {
 89 |           // Necessary for external CSS imports to work
 90 |           // https://github.com/facebook/create-react-app/issues/2677
 91 |           ident: 'postcss',
 92 |           plugins: () => [
 93 |             require('postcss-flexbugs-fixes'),
 94 |             require('postcss-preset-env')({
 95 |               autoprefixer: {
 96 |                 flexbox: 'no-2009',
 97 |               },
 98 |               stage: 3,
 99 |             }),
100 |             // Adds PostCSS Normalize as the reset css with default options,
101 |             // so that it honors browserslist config in package.json
102 |             // which in turn let's users customize the target behavior as per their needs.
103 |             postcssNormalize(),
104 |           ],
105 |           sourceMap: isEnvProduction && shouldUseSourceMap,
106 |         },
107 |       },
108 |     ].filter(Boolean);
109 |     if (preProcessor) {
110 |       loaders.push({
111 |         loader: require.resolve(preProcessor),
112 |         options: {
113 |           sourceMap: isEnvProduction && shouldUseSourceMap,
114 |         },
115 |       });
116 |     }
117 |     return loaders;
118 |   };
119 | 
120 |   return {
121 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
122 |     // Stop compilation early in production
123 |     bail: isEnvProduction,
124 |     devtool: isEnvProduction
125 |       ? shouldUseSourceMap
126 |         ? 'source-map'
127 |         : false
128 |       : isEnvDevelopment && 'cheap-module-source-map',
129 |     // These are the "entry points" to our application.
130 |     // This means they will be the "root" imports that are included in JS bundle.
131 |     entry: {
132 |       main: [
133 |         // Include an alternative client for WebpackDevServer. A client's job is to
134 |         // connect to WebpackDevServer by a socket and get notified about changes.
135 |         // When you save a file, the client will either apply hot updates (in case
136 |         // of CSS changes), or refresh the page (in case of JS changes). When you
137 |         // make a syntax error, this client will display a syntax error overlay.
138 |         // Note: instead of the default WebpackDevServer client, we use a custom one
139 |         // to bring better experience for Create React App users. You can replace
140 |         // the line below with these two lines if you prefer the stock client:
141 |         // require.resolve('webpack-dev-server/client') + '?/',
142 |         // require.resolve('webpack/hot/dev-server'),
143 |         isEnvDevelopment &&
144 |           require.resolve('react-dev-utils/webpackHotDevClient'),
145 |         // Finally, this is your app's code:
146 |         paths.appIndexJs,
147 |         // We include the app code last so that if there is a runtime error during
148 |         // initialization, it doesn't blow up the WebpackDevServer client, and
149 |         // changing JS code would still trigger a refresh.
150 |       ].filter(Boolean),
151 |       ...(isEnvProduction ? {storage: paths.appStorageJs} : {}),
152 |     },
153 |     output: {
154 |       // The build folder.
155 |       path: isEnvProduction ? paths.appBuild : undefined,
156 |       // Add /* filename */ comments to generated require()s in the output.
157 |       pathinfo: isEnvDevelopment,
158 |       // There will be one main bundle, and one file per asynchronous chunk.
159 |       // In development, it does not produce real files.
160 |       filename: isEnvProduction
161 |         ? 'static/js/[name].[contenthash:8].js'
162 |         : isEnvDevelopment && 'static/js/bundle.js',
163 |       // TODO: remove this when upgrading to webpack 5
164 |       futureEmitAssets: true,
165 |       // There are also additional JS chunk files if you use code splitting.
166 |       chunkFilename: isEnvProduction
167 |         ? 'static/js/[name].[contenthash:8].chunk.js'
168 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
169 |       // We inferred the "public path" (such as / or /my-project) from homepage.
170 |       // We use "/" in development.
171 |       publicPath: publicPath,
172 |       // Point sourcemap entries to original disk location (format as URL on Windows)
173 |       devtoolModuleFilenameTemplate: isEnvProduction
174 |         ? info =>
175 |             path
176 |               .relative(paths.appSrc, info.absoluteResourcePath)
177 |               .replace(/\\/g, '/')
178 |         : isEnvDevelopment &&
179 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
180 |     },
181 |     optimization: {
182 |       minimize: isEnvProduction,
183 |       minimizer: [
184 |         // This is only used in production mode
185 |         new TerserPlugin({
186 |           terserOptions: {
187 |             parse: {
188 |               // we want terser to parse ecma 8 code. However, we don't want it
189 |               // to apply any minfication steps that turns valid ecma 5 code
190 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
191 |               // sections only apply transformations that are ecma 5 safe
192 |               // https://github.com/facebook/create-react-app/pull/4234
193 |               ecma: 8,
194 |             },
195 |             compress: {
196 |               ecma: 5,
197 |               warnings: false,
198 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
199 |               // https://github.com/facebook/create-react-app/issues/2376
200 |               // Pending further investigation:
201 |               // https://github.com/mishoo/UglifyJS2/issues/2011
202 |               comparisons: false,
203 |               // Disabled because of an issue with Terser breaking valid code:
204 |               // https://github.com/facebook/create-react-app/issues/5250
205 |               // Pending futher investigation:
206 |               // https://github.com/terser-js/terser/issues/120
207 |               inline: 2,
208 |             },
209 |             mangle: {
210 |               safari10: true,
211 |             },
212 |             output: {
213 |               ecma: 5,
214 |               comments: false,
215 |               // Turned on because emoji and regex is not minified properly using default
216 |               // https://github.com/facebook/create-react-app/issues/2488
217 |               ascii_only: true,
218 |             },
219 |           },
220 |           // Use multi-process parallel running to improve the build speed
221 |           // Default number of concurrent runs: os.cpus().length - 1
222 |           // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
223 |           // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
224 |           parallel: !isWsl,
225 |           // Enable file caching
226 |           cache: true,
227 |           sourceMap: shouldUseSourceMap,
228 |         }),
229 |         // This is only used in production mode
230 |         new OptimizeCSSAssetsPlugin({
231 |           cssProcessorOptions: {
232 |             parser: safePostCssParser,
233 |             map: shouldUseSourceMap
234 |               ? {
235 |                   // `inline: false` forces the sourcemap to be output into a
236 |                   // separate file
237 |                   inline: false,
238 |                   // `annotation: true` appends the sourceMappingURL to the end of
239 |                   // the css file, helping the browser find the sourcemap
240 |                   annotation: true,
241 |                 }
242 |               : false,
243 |           },
244 |         }),
245 |       ],
246 |       // Automatically split vendor and commons
247 |       // https://twitter.com/wSokra/status/969633336732905474
248 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
249 |       splitChunks: {
250 |         chunks: 'all',
251 |         name: false,
252 |       },
253 |       // Keep the runtime chunk separated to enable long term caching
254 |       // https://twitter.com/wSokra/status/969679223278505985
255 |       runtimeChunk: true,
256 |     },
257 |     resolve: {
258 |       // This allows you to set a fallback for where Webpack should look for modules.
259 |       // We placed these paths second because we want `node_modules` to "win"
260 |       // if there are any conflicts. This matches Node resolution mechanism.
261 |       // https://github.com/facebook/create-react-app/issues/253
262 |       modules: ['node_modules', paths.appNodeModules].concat(
263 |         modules.additionalModulePaths || []
264 |       ),
265 |       // These are the reasonable defaults supported by the Node ecosystem.
266 |       // We also include JSX as a common component filename extension to support
267 |       // some tools, although we do not recommend using it, see:
268 |       // https://github.com/facebook/create-react-app/issues/290
269 |       // `web` extension prefixes have been added for better support
270 |       // for React Native Web.
271 |       extensions: paths.moduleFileExtensions
272 |         .map(ext => `.${ext}`)
273 |         .filter(ext => useTypeScript || !ext.includes('ts')),
274 |       alias: {
275 |         // Support React Native Web
276 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
277 |         'react-native': 'react-native-web',
278 |         'react': __dirname + '/../node_modules/react',
279 |       },
280 |       plugins: [
281 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
282 |         // guards against forgotten dependencies and such.
283 |         PnpWebpackPlugin,
284 |         // Prevents users from importing files from outside of src/ (or node_modules/).
285 |         // This often causes confusion because we only process files within src/ with babel.
286 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
287 |         // please link the files into your node_modules/ and let module-resolution kick in.
288 |         // Make sure your source files are compiled, as they will not be processed in any way.
289 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
290 |       ],
291 |     },
292 |     resolveLoader: {
293 |       plugins: [
294 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
295 |         // from the current package.
296 |         PnpWebpackPlugin.moduleLoader(module),
297 |       ],
298 |     },
299 |     module: {
300 |       strictExportPresence: true,
301 |       defaultRules: [
302 |         {
303 |           type: 'javascript/auto',
304 |           resolve: {}
305 |         },
306 |         {
307 |           test: /\.json$/i,
308 |           type: 'json'
309 |         }
310 |       ],
311 |       rules: [
312 |         // Disable require.ensure as it's not a standard language feature.
313 |         { parser: { requireEnsure: false } },
314 | 
315 |         {
316 |           test: /\.worker\.js$/,
317 |           loader: 'worker-loader'
318 |         },
319 |         {
320 |           test: /\.jscc$/,
321 |           loader: "exports-loader",
322 |         },
323 |         // First, run the linter.
324 |         // It's important to do this before Babel processes the JS.
325 |         {
326 |           test: /\.(js|mjs|jsx|ts|tsx)$/,
327 |           enforce: 'pre',
328 |           use: [
329 |             {
330 |               options: {
331 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
332 |                 eslintPath: require.resolve('eslint'),
333 |                 
334 |               },
335 |               loader: require.resolve('eslint-loader'),
336 |             },
337 |           ],
338 |           include: paths.appSrc,
339 |         },
340 |         {
341 |           // "oneOf" will traverse all following loaders until one will
342 |           // match the requirements. When no loader matches it will fall
343 |           // back to the "file" loader at the end of the loader list.
344 |           oneOf: [
345 |             // "url" loader works like "file" loader except that it embeds assets
346 |             // smaller than specified limit in bytes as data URLs to avoid requests.
347 |             // A missing `test` is equivalent to a match.
348 |             {
349 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
350 |               loader: require.resolve('url-loader'),
351 |               options: {
352 |                 limit: 10000,
353 |                 name: 'static/media/[name].[hash:8].[ext]',
354 |               },
355 |             },
356 |             // Process application JS with Babel.
357 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
358 |             {
359 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
360 |               include: paths.appSrc,
361 |               loader: require.resolve('babel-loader'),
362 |               options: {
363 |                 customize: require.resolve(
364 |                   'babel-preset-react-app/webpack-overrides'
365 |                 ),
366 |                 
367 |                 plugins: [
368 |                   [
369 |                     require.resolve('babel-plugin-named-asset-import'),
370 |                     {
371 |                       loaderMap: {
372 |                         svg: {
373 |                           ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
374 |                         },
375 |                       },
376 |                     },
377 |                   ],
378 |                 ],
379 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
380 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
381 |                 // directory for faster rebuilds.
382 |                 cacheDirectory: true,
383 |                 cacheCompression: isEnvProduction,
384 |                 compact: isEnvProduction,
385 |               },
386 |             },
387 |             // Process any JS outside of the app with Babel.
388 |             // Unlike the application JS, we only compile the standard ES features.
389 |             {
390 |               test: /\.(js|mjs)$/,
391 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
392 |               loader: require.resolve('babel-loader'),
393 |               options: {
394 |                 babelrc: false,
395 |                 configFile: false,
396 |                 compact: false,
397 |                 presets: [
398 |                   [
399 |                     require.resolve('babel-preset-react-app/dependencies'),
400 |                     { helpers: true },
401 |                   ],
402 |                 ],
403 |                 cacheDirectory: true,
404 |                 cacheCompression: isEnvProduction,
405 |                 
406 |                 // If an error happens in a package, it's possible to be
407 |                 // because it was compiled. Thus, we don't want the browser
408 |                 // debugger to show the original code. Instead, the code
409 |                 // being evaluated would be much more helpful.
410 |                 sourceMaps: false,
411 |               },
412 |             },
413 |             // "postcss" loader applies autoprefixer to our CSS.
414 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
415 |             // "style" loader turns CSS into JS modules that inject <style> tags.
416 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
417 |             // to a file, but in development "style" loader enables hot editing
418 |             // of CSS.
419 |             // By default we support CSS Modules with the extension .module.css
420 |             {
421 |               test: cssRegex,
422 |               exclude: cssModuleRegex,
423 |               use: getStyleLoaders({
424 |                 importLoaders: 1,
425 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
426 |               }),
427 |               // Don't consider CSS imports dead code even if the
428 |               // containing package claims to have no side effects.
429 |               // Remove this when webpack adds a warning or an error for this.
430 |               // See https://github.com/webpack/webpack/issues/6571
431 |               sideEffects: true,
432 |             },
433 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
434 |             // using the extension .module.css
435 |             {
436 |               test: cssModuleRegex,
437 |               use: getStyleLoaders({
438 |                 importLoaders: 1,
439 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
440 |                 modules: true,
441 |                 getLocalIdent: getCSSModuleLocalIdent,
442 |               }),
443 |             },
444 |             // Opt-in support for SASS (using .scss or .sass extensions).
445 |             // By default we support SASS Modules with the
446 |             // extensions .module.scss or .module.sass
447 |             {
448 |               test: sassRegex,
449 |               exclude: sassModuleRegex,
450 |               use: getStyleLoaders(
451 |                 {
452 |                   importLoaders: 2,
453 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
454 |                 },
455 |                 'sass-loader'
456 |               ),
457 |               // Don't consider CSS imports dead code even if the
458 |               // containing package claims to have no side effects.
459 |               // Remove this when webpack adds a warning or an error for this.
460 |               // See https://github.com/webpack/webpack/issues/6571
461 |               sideEffects: true,
462 |             },
463 |             // Adds support for CSS Modules, but using SASS
464 |             // using the extension .module.scss or .module.sass
465 |             {
466 |               test: sassModuleRegex,
467 |               use: getStyleLoaders(
468 |                 {
469 |                   importLoaders: 2,
470 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
471 |                   modules: true,
472 |                   getLocalIdent: getCSSModuleLocalIdent,
473 |                 },
474 |                 'sass-loader'
475 |               ),
476 |             },
477 |             // "file" loader makes sure those assets get served by WebpackDevServer.
478 |             // When you `import` an asset, you get its (virtual) filename.
479 |             // In production, they would get copied to the `build` folder.
480 |             // This loader doesn't use a "test" so it will catch all modules
481 |             // that fall through the other loaders.
482 |             {
483 |               loader: require.resolve('file-loader'),
484 |               // Exclude `js` files to keep "css" loader working as it injects
485 |               // its runtime that would otherwise be processed through "file" loader.
486 |               // Also exclude `html` and `json` extensions so they get processed
487 |               // by webpacks internal loaders.
488 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.jscc$/],
489 |               options: {
490 |                 name: 'static/media/[name].[hash:8].[ext]',
491 |               },
492 |             },
493 |             // ** STOP ** Are you adding a new loader?
494 |             // Make sure to add the new loader(s) before the "file" loader.
495 |           ],
496 |         },
497 |       ],
498 |     },
499 |     plugins: [
500 |       // Generates an `index.html` file with the <script> injected.
501 |       new HtmlWebpackPlugin(
502 |         Object.assign(
503 |           {},
504 |           {
505 |             inject: true,
506 |             chunks: ['main'],
507 |             template: paths.appHtml,
508 |           },
509 |           isEnvProduction
510 |             ? {
511 |                 minify: {
512 |                   removeComments: true,
513 |                   collapseWhitespace: true,
514 |                   removeRedundantAttributes: true,
515 |                   useShortDoctype: true,
516 |                   removeEmptyAttributes: true,
517 |                   removeStyleLinkTypeAttributes: true,
518 |                   keepClosingSlash: true,
519 |                   minifyJS: true,
520 |                   minifyCSS: true,
521 |                   minifyURLs: true,
522 |                 },
523 |               }
524 |             : undefined
525 |         )
526 |       ),
527 |       new HtmlWebpackPlugin(
528 |         Object.assign(
529 |           {},
530 |           {
531 |             inject: true,
532 |             chunks: ['storage'],
533 |             filename: 'storage.html',
534 |             template: paths.appHtmlStorage,
535 |           },
536 |           isEnvProduction
537 |             ? {
538 |                 minify: {
539 |                   removeComments: true,
540 |                   collapseWhitespace: true,
541 |                   removeRedundantAttributes: true,
542 |                   useShortDoctype: true,
543 |                   removeEmptyAttributes: true,
544 |                   removeStyleLinkTypeAttributes: true,
545 |                   keepClosingSlash: true,
546 |                   minifyJS: true,
547 |                   minifyCSS: true,
548 |                   minifyURLs: true,
549 |                 },
550 |               }
551 |             : undefined
552 |         )
553 |       ),
554 |       // Inlines the webpack runtime script. This script is too small to warrant
555 |       // a network request.
556 |       isEnvProduction &&
557 |         shouldInlineRuntimeChunk &&
558 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
559 |       // Makes some environment variables available in index.html.
560 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
561 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
562 |       // In production, it will be an empty string unless you specify "homepage"
563 |       // in `package.json`, in which case it will be the pathname of that URL.
564 |       // In development, this will be an empty string.
565 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
566 |       // This gives some necessary context to module not found errors, such as
567 |       // the requesting resource.
568 |       new ModuleNotFoundPlugin(paths.appPath),
569 |       // Makes some environment variables available to the JS code, for example:
570 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
571 |       // It is absolutely essential that NODE_ENV is set to production
572 |       // during a production build.
573 |       // Otherwise React will be compiled in the very slow development mode.
574 |       new webpack.DefinePlugin(env.stringified),
575 |       // This is necessary to emit hot updates (currently CSS only):
576 |       //isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
577 |       // Watcher doesn't work well if you mistype casing in a path so we use
578 |       // a plugin that prints an error when you attempt to do this.
579 |       // See https://github.com/facebook/create-react-app/issues/240
580 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
581 |       // If you require a missing module and then `npm install` it, you still have
582 |       // to restart the development server for Webpack to discover it. This plugin
583 |       // makes the discovery automatic so you don't have to restart.
584 |       // See https://github.com/facebook/create-react-app/issues/186
585 |       isEnvDevelopment &&
586 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
587 |       isEnvProduction &&
588 |         new MiniCssExtractPlugin({
589 |           // Options similar to the same options in webpackOptions.output
590 |           // both options are optional
591 |           filename: 'static/css/[name].[contenthash:8].css',
592 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
593 |         }),
594 |       // Generate a manifest file which contains a mapping of all asset filenames
595 |       // to their corresponding output file so that tools can pick it up without
596 |       // having to parse `index.html`.
597 |       new ManifestPlugin({
598 |         fileName: 'asset-manifest.json',
599 |         publicPath: publicPath,
600 |         generate: (seed, files) => {
601 |           const manifestFiles = files.reduce(function(manifest, file) {
602 |             manifest[file.name] = file.path;
603 |             return manifest;
604 |           }, seed);
605 | 
606 |           return {
607 |             files: manifestFiles,
608 |           };
609 |         },
610 |       }),
611 |       // Moment.js is an extremely popular library that bundles large locale files
612 |       // by default due to how Webpack interprets its code. This is a practical
613 |       // solution that requires the user to opt into importing specific locales.
614 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
615 |       // You can remove this if you don't use Moment.js:
616 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
617 |       // Generate a service worker script that will precache, and keep up to date,
618 |       // the HTML & assets that are part of the Webpack build.
619 |       isEnvProduction &&
620 |         new WorkboxWebpackPlugin.GenerateSW({
621 |           clientsClaim: true,
622 |           exclude: [/\.map$/, /asset-manifest\.json$/],
623 |           importWorkboxFrom: 'cdn',
624 |           navigateFallback: publicUrl + '/index.html',
625 |           navigateFallbackBlacklist: [
626 |             // Exclude URLs starting with /_, as they're likely an API call
627 |             new RegExp('^/_'),
628 |             // Exclude URLs containing a dot, as they're likely a resource in
629 |             // public/ and not a SPA route
630 |             new RegExp('/[^/]+\\.[^/]+$'),
631 |           ],
632 |         }),
633 |       // TypeScript type checking
634 |       useTypeScript &&
635 |         new ForkTsCheckerWebpackPlugin({
636 |           typescript: resolve.sync('typescript', {
637 |             basedir: paths.appNodeModules,
638 |           }),
639 |           async: isEnvDevelopment,
640 |           useTypescriptIncrementalApi: true,
641 |           checkSyntacticErrors: true,
642 |           resolveModuleNameModule: process.versions.pnp
643 |             ? `${__dirname}/pnpTs.js`
644 |             : undefined,
645 |           resolveTypeReferenceDirectiveModule: process.versions.pnp
646 |             ? `${__dirname}/pnpTs.js`
647 |             : undefined,
648 |           tsconfig: paths.appTsConfig,
649 |           reportFiles: [
650 |             '**',
651 |             '!**/__tests__/**',
652 |             '!**/?(*.)(spec|test).*',
653 |             '!**/src/setupProxy.*',
654 |             '!**/src/setupTests.*',
655 |           ],
656 |           watch: paths.appSrc,
657 |           silent: true,
658 |           // The formatter is invoked directly in WebpackDevServerUtils during development
659 |           formatter: isEnvProduction ? typescriptFormatter : undefined,
660 |         }),
661 |     ].filter(Boolean),
662 |     // Some libraries import Node modules but don't use them in the browser.
663 |     // Tell Webpack to provide empty mocks for them so importing them works.
664 |     node: {
665 |       module: 'empty',
666 |       dgram: 'empty',
667 |       dns: 'mock',
668 |       fs: 'empty',
669 |       http2: 'empty',
670 |       net: 'empty',
671 |       tls: 'empty',
672 |       child_process: 'empty',
673 |     },
674 |     // Turn off performance processing because we utilize
675 |     // our own hints via the FileSizeReporter
676 |     performance: false,
677 |   };
678 | };
679 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware('/'));
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "diabloweb",
  3 |   "version": "1.0.39",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@fortawesome/fontawesome-svg-core": "^1.2.21",
  7 |     "@fortawesome/free-solid-svg-icons": "^5.10.1",
  8 |     "@fortawesome/react-fontawesome": "^0.1.4",
  9 |     "@svgr/webpack": "4.1.0",
 10 |     "@typescript-eslint/eslint-plugin": "1.6.0",
 11 |     "@typescript-eslint/parser": "1.6.0",
 12 |     "axios": "^0.21.1",
 13 |     "babel-eslint": "10.0.1",
 14 |     "babel-jest": "^24.8.0",
 15 |     "babel-loader": "8.0.5",
 16 |     "babel-plugin-named-asset-import": "^0.3.2",
 17 |     "babel-preset-react-app": "^9.0.0",
 18 |     "camelcase": "^5.2.0",
 19 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 20 |     "classnames": "^2.2.6",
 21 |     "css-loader": "2.1.1",
 22 |     "dotenv": "6.2.0",
 23 |     "dotenv-expand": "4.2.0",
 24 |     "eslint": "^5.16.0",
 25 |     "eslint-config-react-app": "^4.0.1",
 26 |     "eslint-loader": "2.1.2",
 27 |     "eslint-plugin-flowtype": "2.50.1",
 28 |     "eslint-plugin-import": "2.16.0",
 29 |     "eslint-plugin-jsx-a11y": "6.2.1",
 30 |     "eslint-plugin-react": "7.12.4",
 31 |     "eslint-plugin-react-hooks": "^1.5.0",
 32 |     "file-loader": "3.0.1",
 33 |     "fs-extra": "7.0.1",
 34 |     "html-webpack-plugin": "4.0.0-beta.5",
 35 |     "idb-kv-store": "^4.4.0",
 36 |     "identity-obj-proxy": "3.0.0",
 37 |     "is-wsl": "^1.1.0",
 38 |     "jest": "24.7.1",
 39 |     "jest-environment-jsdom-fourteen": "0.1.0",
 40 |     "jest-resolve": "24.7.1",
 41 |     "jest-watch-typeahead": "0.3.0",
 42 |     "mini-css-extract-plugin": "0.5.0",
 43 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 44 |     "peerjs": "^1.0.2",
 45 |     "pnp-webpack-plugin": "1.2.1",
 46 |     "postcss-flexbugs-fixes": "4.1.0",
 47 |     "postcss-loader": "3.0.0",
 48 |     "postcss-normalize": "7.0.1",
 49 |     "postcss-preset-env": "6.6.0",
 50 |     "postcss-safe-parser": "4.0.1",
 51 |     "react": "^16.8.6",
 52 |     "react-app-polyfill": "^1.0.1",
 53 |     "react-dev-utils": "^9.0.7",
 54 |     "react-dom": "^16.8.6",
 55 |     "react-ga": "^2.6.0",
 56 |     "resolve": "1.10.0",
 57 |     "sass-loader": "7.1.0",
 58 |     "semver": "6.0.0",
 59 |     "sourcemapped-stacktrace": "^1.1.9",
 60 |     "style-loader": "0.23.1",
 61 |     "terser-webpack-plugin": "1.2.3",
 62 |     "ts-pnp": "1.1.2",
 63 |     "url-loader": "1.1.2",
 64 |     "webpack": "4.29.6",
 65 |     "webpack-dev-server": "3.2.1",
 66 |     "webpack-manifest-plugin": "2.0.4",
 67 |     "workbox-webpack-plugin": "4.2.0"
 68 |   },
 69 |   "scripts": {
 70 |     "start": "node scripts/start.js",
 71 |     "build": "node scripts/build.js",
 72 |     "test": "node scripts/test.js",
 73 |     "deploy": "gh-pages -d build"
 74 |   },
 75 |   "eslintConfig": {
 76 |     "extends": "react-app"
 77 |   },
 78 |   "browserslist": {
 79 |     "production": [
 80 |       ">0.2%",
 81 |       "not dead",
 82 |       "not op_mini all"
 83 |     ],
 84 |     "development": [
 85 |       "last 1 chrome version",
 86 |       "last 1 firefox version",
 87 |       "last 1 safari version"
 88 |     ]
 89 |   },
 90 |   "jest": {
 91 |     "collectCoverageFrom": [
 92 |       "src/**/*.{js,jsx,ts,tsx}",
 93 |       "!src/**/*.d.ts"
 94 |     ],
 95 |     "setupFiles": [
 96 |       "react-app-polyfill/jsdom"
 97 |     ],
 98 |     "setupFilesAfterEnv": [],
 99 |     "testMatch": [
100 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
101 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
102 |     ],
103 |     "testEnvironment": "jest-environment-jsdom-fourteen",
104 |     "transform": {
105 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
106 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
107 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
108 |     },
109 |     "transformIgnorePatterns": [
110 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
111 |       "^.+\\.module\\.(css|sass|scss)$"
112 |     ],
113 |     "modulePaths": [],
114 |     "moduleNameMapper": {
115 |       "^react-native$": "react-native-web",
116 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
117 |     },
118 |     "moduleFileExtensions": [
119 |       "web.js",
120 |       "js",
121 |       "web.ts",
122 |       "ts",
123 |       "web.tsx",
124 |       "tsx",
125 |       "json",
126 |       "web.jsx",
127 |       "jsx",
128 |       "node"
129 |     ],
130 |     "watchPlugins": [
131 |       "jest-watch-typeahead/filename",
132 |       "jest-watch-typeahead/testname"
133 |     ]
134 |   },
135 |   "babel": {
136 |     "presets": [
137 |       "@babel/preset-env",
138 |       "@babel/preset-react"
139 |     ]
140 |   },
141 |   "homepage": "https://d07riv.github.io/diabloweb",
142 |   "devDependencies": {
143 |     "@babel/core": "^7.14.6",
144 |     "@babel/preset-env": "^7.14.7",
145 |     "@babel/preset-react": "^7.14.5",
146 |     "exports-loader": "^0.7.0",
147 |     "gh-pages": "^2.0.1",
148 |     "node-sass": "^4.14.1",
149 |     "worker-loader": "^2.0.0"
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/public/icon-192.png


--------------------------------------------------------------------------------
/public/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/public/icon-512.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>DIABLO</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "DIABLO",
 3 |   "name": "DIABLO",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "icon-192.png",
12 |       "sizes": "192x192",
13 |       "type": "image/png"
14 |     },
15 |     {
16 |       "src": "icon-512.png",
17 |       "sizes": "512x512",
18 |       "type": "image/png"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "fullscreen",
23 |   "theme_color": "#ffffff",
24 |   "background_color": "#000000"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/storage.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>DIABLO Connector</title>
 6 |   </head>
 7 |   <body>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       console.log(chalk.red('Failed to compile.\n'));
110 |       printBuildError(err);
111 |       process.exit(1);
112 |     }
113 |   )
114 |   .catch(err => {
115 |     if (err && err.message) {
116 |       console.log(err.message);
117 |     }
118 |     process.exit(1);
119 |   });
120 | 
121 | // Create the production build and print the deployment instructions.
122 | function build(previousFileSizes) {
123 |   // We used to support resolving modules according to `NODE_PATH`.
124 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
125 |   // This lets you use absolute paths in imports inside large monorepos:
126 |   if (process.env.NODE_PATH) {
127 |     console.log(
128 |       chalk.yellow(
129 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
130 |       )
131 |     );
132 |     console.log();
133 |   }
134 | 
135 |   console.log('Creating an optimized production build...');
136 | 
137 |   const compiler = webpack(config);
138 |   return new Promise((resolve, reject) => {
139 |     compiler.run((err, stats) => {
140 |       let messages;
141 |       if (err) {
142 |         if (!err.message) {
143 |           return reject(err);
144 |         }
145 |         messages = formatWebpackMessages({
146 |           errors: [err.message],
147 |           warnings: [],
148 |         });
149 |       } else {
150 |         messages = formatWebpackMessages(
151 |           stats.toJson({ all: false, warnings: true, errors: true })
152 |         );
153 |       }
154 |       if (messages.errors.length) {
155 |         // Only keep the first error. Others are often indicative
156 |         // of the same problem, but confuse the reader with noise.
157 |         if (messages.errors.length > 1) {
158 |           messages.errors.length = 1;
159 |         }
160 |         return reject(new Error(messages.errors.join('\n\n')));
161 |       }
162 |       if (
163 |         process.env.CI &&
164 |         (typeof process.env.CI !== 'string' ||
165 |           process.env.CI.toLowerCase() !== 'false') &&
166 |         messages.warnings.length
167 |       ) {
168 |         console.log(
169 |           chalk.yellow(
170 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
171 |               'Most CI servers set it automatically.\n'
172 |           )
173 |         );
174 |         return reject(new Error(messages.warnings.join('\n\n')));
175 |       }
176 | 
177 |       return resolve({
178 |         stats,
179 |         previousFileSizes,
180 |         warnings: messages.warnings,
181 |       });
182 |     });
183 |   });
184 | }
185 | 
186 | function copyPublicFolder() {
187 |   fs.copySync(paths.appPublic, paths.appBuild, {
188 |     dereference: true,
189 |     filter: file => file !== paths.appHtml,
190 |   });
191 | }
192 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const urls = prepareUrls(protocol, HOST, port);
 83 |     const devSocket = {
 84 |       warnings: warnings =>
 85 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 86 |       errors: errors =>
 87 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 88 |     };
 89 |     // Create a webpack compiler that is configured with custom messages.
 90 |     const compiler = createCompiler({
 91 |       appName,
 92 |       config,
 93 |       devSocket,
 94 |       urls,
 95 |       useYarn,
 96 |       useTypeScript,
 97 |       webpack,
 98 |     });
 99 |     // Load proxy config
100 |     const proxySetting = require(paths.appPackageJson).proxy;
101 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
102 |     // Serve webpack assets generated by the compiler over a web server.
103 |     const serverConfig = createDevServerConfig(
104 |       proxyConfig,
105 |       urls.lanUrlForConfig
106 |     );
107 |     const devServer = new WebpackDevServer(compiler, serverConfig);
108 |     // Launch WebpackDevServer.
109 |     devServer.listen(port, HOST, err => {
110 |       if (err) {
111 |         return console.log(err);
112 |       }
113 |       if (isInteractive) {
114 |         clearConsole();
115 |       }
116 | 
117 |       // We used to support resolving modules according to `NODE_PATH`.
118 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
119 |       // This lets you use absolute paths in imports inside large monorepos:
120 |       if (process.env.NODE_PATH) {
121 |         console.log(
122 |           chalk.yellow(
123 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
124 |           )
125 |         );
126 |         console.log();
127 |       }
128 | 
129 |       console.log(chalk.cyan('Starting the development server...\n'));
130 |       openBrowser(urls.localUrlForBrowser);
131 |     });
132 | 
133 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
134 |       process.on(sig, function() {
135 |         devServer.close();
136 |         process.exit();
137 |       });
138 |     });
139 |   })
140 |   .catch(err => {
141 |     if (err && err.message) {
142 |       console.log(err.message);
143 |     }
144 |     process.exit(1);
145 |   });
146 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1
45 | ) {
46 |   // https://github.com/facebook/create-react-app/issues/5210
47 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
49 | }
50 | 
51 | 
52 | jest.run(argv);
53 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import './App.scss';
  3 | import classNames from 'classnames';
  4 | import ReactGA from 'react-ga';
  5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  6 | import { faTimes, faDownload } from '@fortawesome/free-solid-svg-icons';
  7 | import getPlayerName from './api/savefile';
  8 | 
  9 | import { mapStackTrace } from 'sourcemapped-stacktrace';
 10 | 
 11 | import create_fs from './fs';
 12 | import load_game from './api/loader';
 13 | import { SpawnSizes } from './api/load_spawn';
 14 | import CompressMpq from './mpqcmp';
 15 | 
 16 | import Peer from 'peerjs';
 17 | 
 18 | window.Peer = Peer;
 19 | 
 20 | if (process.env.NODE_ENV === 'production') {
 21 |   ReactGA.initialize('UA-43123589-6');
 22 |   ReactGA.pageview('/');
 23 | }
 24 | 
 25 | function reportLink(e, retail) {
 26 |   const message = (e.message || "Unknown error") + (e.stack ? "\n" + e.stack : "");
 27 |   const url = new URL("https://github.com/d07RiV/diabloweb/issues/new");
 28 |   url.searchParams.set("body",
 29 | `**Description:**
 30 | [Please describe what you were doing before the error occurred]
 31 | 
 32 | **App version:**
 33 | DiabloWeb ${process.env.VERSION} (${retail ? 'Retail' : 'Shareware'})
 34 | 
 35 | **Error message:**
 36 |     
 37 | ${message.split("\n").map(line => "    " + line).join("\n")}
 38 | 
 39 | **User agent:**
 40 | 
 41 |     ${navigator.userAgent}
 42 | 
 43 | **Save file:**
 44 | [Please attach the save file, if applicable. The error box should have a link to download the current save you were playing; alternatively, you can open dev console on the game page (F12) and type in ${"`DownloadSaves()`"}]
 45 | `);
 46 |   return url.toString();
 47 | }
 48 | 
 49 | function isDropFile(e) {
 50 |   if (e.dataTransfer.items) {
 51 |     for (let i = 0; i < e.dataTransfer.items.length; ++i) {
 52 |       if (e.dataTransfer.items[i].kind === "file") {
 53 |         return true;
 54 |       }
 55 |     }
 56 |   } if (e.dataTransfer.files.length) {
 57 |     return true;
 58 |   }
 59 |   return false;
 60 | }
 61 | function getDropFile(e) {
 62 |   if (e.dataTransfer.items) {
 63 |     for (let i = 0; i < e.dataTransfer.items.length; ++i) {
 64 |       if (e.dataTransfer.items[i].kind === "file") {
 65 |         return e.dataTransfer.items[i].getAsFile();
 66 |       }
 67 |     }
 68 |   } if (e.dataTransfer.files.length) {
 69 |     return e.dataTransfer.files[0];
 70 |   }
 71 | }
 72 | 
 73 | const TOUCH_MOVE = 0;
 74 | const TOUCH_RMB = 1;
 75 | const TOUCH_SHIFT = 2;
 76 | 
 77 | function findKeyboardRule() {
 78 |   for (let sheet of document.styleSheets) {
 79 |     for (let rule of sheet.cssRules) {
 80 |       if (rule.type === CSSRule.MEDIA_RULE && rule.conditionText === '(min-aspect-ratio: 3/1)') {
 81 |         for (let sub of rule.cssRules) {
 82 |           if (sub.selectorText === '.App.keyboard .Body .inner') {
 83 |             return sub;
 84 |           }
 85 |         }
 86 |       }
 87 |     }
 88 |   }
 89 | }
 90 | let keyboardRule = null;
 91 | try {
 92 |   keyboardRule = findKeyboardRule();
 93 | } catch (e) {
 94 | }
 95 | 
 96 | const Link = ({children, ...props}) => <a target="_blank" rel="noopener noreferrer" {...props}>{children}</a>;
 97 | 
 98 | class App extends React.Component {
 99 |   files = new Map();
100 |   state = {started: false, loading: false, dropping: 0, has_spawn: false};
101 |   cursorPos = {x: 0, y: 0};
102 | 
103 |   touchControls = false;
104 |   touchButtons = [null, null, null, null, null, null, null, null, null, null];
105 |   touchCtx = [null, null, null, null, null, null];
106 |   touchMods = [false, false, false, false, false, false];
107 |   touchBelt = [-1, -1, -1, -1, -1, -1];
108 |   maxKeyboard = 0;
109 | 
110 |   fs = create_fs(true);
111 | 
112 |   constructor(props) {
113 |     super(props);
114 | 
115 |     this.setTouch0 = this.setTouch_.bind(this, 0);
116 |     this.setTouch1 = this.setTouch_.bind(this, 1);
117 |     this.setTouch2 = this.setTouch_.bind(this, 2);
118 |     this.setTouch3 = this.setTouchBelt_.bind(this, 3);
119 |     this.setTouch4 = this.setTouchBelt_.bind(this, 4);
120 |     this.setTouch5 = this.setTouchBelt_.bind(this, 5);
121 | 
122 |     this.setTouch6 = this.setTouch_.bind(this, 6);
123 |     this.setTouch7 = this.setTouch_.bind(this, 7);
124 |     this.setTouch8 = this.setTouch_.bind(this, 8);
125 |     this.setTouch9 = this.setTouch_.bind(this, 9);
126 |   }
127 | 
128 |   componentDidMount() {
129 |     document.addEventListener("drop", this.onDrop, true);
130 |     document.addEventListener("dragover", this.onDragOver, true);
131 |     document.addEventListener("dragenter", this.onDragEnter, true);
132 |     document.addEventListener("dragleave", this.onDragLeave, true);
133 | 
134 |     this.fs.then(fs => {
135 |       const spawn = fs.files.get('spawn.mpq');
136 |       if (spawn && SpawnSizes.includes(spawn.byteLength)) {
137 |         this.setState({has_spawn: true});
138 |       }
139 |       if ([...fs.files.keys()].filter(name => name.match(/\.sv$/i)).length) {
140 |         this.setState({save_names: true});
141 |       }
142 |     });
143 |   }
144 | 
145 |   onDrop = e => {
146 |     const file = getDropFile(e);
147 |     if (file) {
148 |       e.preventDefault();
149 |       if (this.compressMpq) {
150 |         this.compressMpq.start(file);
151 |       } else {
152 |         this.start(file);
153 |       }
154 |     }
155 |     this.setState({dropping: 0});
156 |   }
157 |   onDragEnter = e => {
158 |     e.preventDefault();
159 |     this.setDropping(1);
160 |   }
161 |   onDragOver = e => {
162 |     if (isDropFile(e)) {
163 |       e.preventDefault();
164 |     }
165 |   }
166 |   onDragLeave = e => {
167 |     this.setDropping(-1);
168 |   }
169 |   setDropping(inc) {
170 |     this.setState(({dropping}) => ({dropping: Math.max(dropping + inc, 0)}));
171 |   }
172 | 
173 |   onError(message, stack) {
174 |     (async () => {
175 |       const errorObject = {message};
176 |       if (this.saveName) {
177 |         errorObject.save = await (await this.fs).fileUrl(this.saveName);
178 |       }
179 |       if (stack) {
180 |         mapStackTrace(stack, stack => {
181 |           this.setState(({error}) => !error && {error: {...errorObject, stack: stack.join("\n")}});
182 |         });
183 |       } else {
184 |         this.setState(({error}) => !error && {error: errorObject});
185 |       }
186 |     })();
187 |   }
188 | 
189 |   openKeyboard(rect) {
190 |     if (rect) {
191 |       this.showKeyboard = {
192 |         left: `${(100 * (rect[0] - 10) / 640).toFixed(2)}%`,
193 |         top: `${(100 * (rect[1] - 10) / 480).toFixed(2)}%`,
194 |         width: `${(100 * (rect[2] - rect[0] + 20) / 640).toFixed(2)}%`,
195 |         height: `${(100 * (rect[3] - rect[1] + 20) / 640).toFixed(2)}%`,
196 |       };
197 |       this.maxKeyboard = rect[4];
198 |       this.element.classList.add("keyboard");
199 |       Object.assign(this.keyboard.style, this.showKeyboard);
200 |       this.keyboard.focus();
201 |       if (keyboardRule) {
202 |         keyboardRule.style.transform = `translate(-50%, ${(-(rect[1] + rect[3]) * 56.25 / 960).toFixed(2)}vw)`;
203 |       }
204 |     } else {
205 |       this.showKeyboard = false;
206 |       this.element.classList.remove("keyboard");
207 |       this.keyboard.blur();
208 |       this.keyboard.value = "";
209 |       this.keyboardNum = 0;
210 |     }
211 |   }
212 | 
213 |   setCursorPos(x, y) {
214 |     const rect = this.canvas.getBoundingClientRect();
215 |     this.cursorPos = {
216 |       x: rect.left + (rect.right - rect.left) * x / 640,
217 |       y: rect.top + (rect.bottom - rect.top) * y / 480,
218 |     };
219 |     setTimeout(() => {
220 |       this.game("DApi_Mouse", 0, 0, 0, x, y);
221 |     });
222 |   }
223 | 
224 |   onProgress(progress) {
225 |     this.setState({progress});
226 |   }
227 | 
228 |   onExit() {
229 |     if (!this.state.error) {
230 |       window.location.reload();
231 |     }
232 |   }
233 | 
234 |   setCurrentSave(name) {
235 |     this.saveName = name;
236 |   }
237 | 
238 |   showSaves = () => {
239 |     if (this.state.save_names === true) {
240 |       this.updateSaves().then(() => this.setState({show_saves: !this.state.show_saves}));
241 |     } else {
242 |       this.setState({show_saves: !this.state.show_saves});
243 |     }
244 |   }
245 |   updateSaves() {
246 |     return this.fs.then(fs => {
247 |       const saves = {};
248 |       [...fs.files.keys()].filter(name => name.match(/\.sv$/i)).forEach(name => {
249 |         saves[name] = getPlayerName(fs.files.get(name).buffer, name);
250 |       });
251 |       this.setState({save_names: saves});
252 |     });
253 |   }
254 |   removeSave(name) {
255 |     if (window.confirm(`Are you sure you want to delete ${name}?`)) {
256 |       (async () => {
257 |         const fs = await this.fs;
258 |         await fs.delete(name.toLowerCase());
259 |         fs.files.delete(name.toLowerCase());
260 |         this.updateSaves();
261 |       })();
262 |     }
263 |   }
264 |   downloadSave(name) {
265 |     this.fs.then(fs => fs.download(name));
266 |   }
267 | 
268 |   drawBelt(idx, slot) {
269 |     if (!this.canvas) return;
270 |     if (!this.touchButtons[idx]) {
271 |       return;
272 |     }
273 |     this.touchBelt[idx] = slot;
274 |     if (slot >= 0) {
275 |       this.touchButtons[idx].style.display = "block";
276 |       this.touchCtx[idx].drawImage(this.canvas, 205 + 29 * slot, 357, 28, 28, 0, 0, 28, 28);
277 |     } else {
278 |       this.touchButtons[idx].style.display = "none";
279 |     }
280 |   }
281 | 
282 |   updateBelt(belt) {
283 |     if (belt) {
284 |       const used = new Set();
285 |       let pos = 3;
286 |       for (let i = 0; i < belt.length && pos < 6; ++i) {
287 |         if (belt[i] >= 0 && !used.has(belt[i])) {
288 |           this.drawBelt(pos++, i);
289 |           used.add(belt[i]);
290 |         }
291 |       }
292 |       for (; pos < 6; ++pos) {
293 |         this.drawBelt(pos, -1);
294 |       }
295 |     } else {
296 |       this.drawBelt(3, -1);
297 |       this.drawBelt(4, -1);
298 |       this.drawBelt(5, -1);
299 |     }
300 |   }
301 | 
302 |   start(file) {
303 |     if (file && file.name.match(/\.sv$/i)) {
304 |       this.fs.then(fs => fs.upload(file)).then(() => {
305 |         this.updateSaves();
306 |       });
307 |       return;
308 |     }
309 |     if (this.state.show_saves) {
310 |       return;
311 |     }
312 |     if (file && !file.name.match(/\.mpq$/i)) {
313 |       window.alert('Please select an MPQ file. If you downloaded the installer from GoG, you will need to install it on PC and use the MPQ file from the installation folder.');
314 |       return;
315 |     }
316 | 
317 |     document.removeEventListener("drop", this.onDrop, true);
318 |     document.removeEventListener("dragover", this.onDragOver, true);
319 |     document.removeEventListener("dragenter", this.onDragEnter, true);
320 |     document.removeEventListener("dragleave", this.onDragLeave, true);
321 |     this.setState({dropping: 0});
322 | 
323 |     const retail = !!(file && !file.name.match(/^spawn\.mpq$/i));
324 |     if (process.env.NODE_ENV === 'production') {
325 |       ReactGA.event({
326 |         category: 'Game',
327 |         action: retail ? 'Start Retail' : 'Start Shareware',
328 |       });
329 |     }
330 | 
331 |     this.setState({loading: true, retail});
332 | 
333 |     load_game(this, file, !retail).then(game => {
334 |       this.game = game;
335 | 
336 |       document.addEventListener('mousemove', this.onMouseMove, true);
337 |       document.addEventListener('mousedown', this.onMouseDown, true);
338 |       document.addEventListener('mouseup', this.onMouseUp, true);
339 |       document.addEventListener('keydown', this.onKeyDown, true);
340 |       document.addEventListener('keyup', this.onKeyUp, true);
341 |       document.addEventListener('contextmenu', this.onMenu, true);
342 | 
343 |       document.addEventListener('touchstart', this.onTouchStart, {passive: false, capture: true});
344 |       document.addEventListener('touchmove', this.onTouchMove, {passive: false, capture: true});
345 |       document.addEventListener('touchend', this.onTouchEnd, {passive: false, capture: true});
346 | 
347 |       document.addEventListener('pointerlockchange', this.onPointerLockChange);
348 |       window.addEventListener('resize', this.onResize);
349 | 
350 |       this.setState({started: true});
351 |     }, e => this.onError(e.message, e.stack));
352 |   }
353 | 
354 |   pointerLocked() {
355 |     return document.pointerLockElement === this.canvas || document.mozPointerLockElement === this.canvas;
356 |   }
357 | 
358 |   mousePos(e) {
359 |     const rect = this.canvas.getBoundingClientRect();
360 |     if (this.pointerLocked()) {
361 |       this.cursorPos.x = Math.max(rect.left, Math.min(rect.right, this.cursorPos.x + e.movementX));
362 |       this.cursorPos.y = Math.max(rect.top, Math.min(rect.bottom, this.cursorPos.y + e.movementY));
363 |     } else {
364 |       this.cursorPos = {x: e.clientX, y: e.clientY};
365 |     }
366 |     return {
367 |       x: Math.max(0, Math.min(Math.round((this.cursorPos.x - rect.left) / (rect.right - rect.left) * 640), 639)),
368 |       y: Math.max(0, Math.min(Math.round((this.cursorPos.y - rect.top) / (rect.bottom - rect.top) * 480), 479)),
369 |     };
370 |   }
371 | 
372 |   mouseButton(e) {
373 |     switch (e.button) {
374 |     case 0: return 1;
375 |     case 1: return 4;
376 |     case 2: return 2;
377 |     case 3: return 5;
378 |     case 4: return 6;
379 |     default: return 1;
380 |     }
381 |   }
382 |   eventMods(e) {
383 |     return ((e.shiftKey || this.touchMods[TOUCH_SHIFT]) ? 1 : 0) + (e.ctrlKey ? 2 : 0) + (e.altKey ? 4 : 0) + (e.touches ? 8 : 0);
384 |   }
385 | 
386 |   onResize = () => {
387 |     document.exitPointerLock();
388 |   }
389 | 
390 |   onPointerLockChange = () => {
391 |     if (window.screen && window.innerHeight === window.screen.height && !this.pointerLocked()) {
392 |       // assume that the user pressed escape
393 |       this.game("DApi_Key", 0, 0, 27);
394 |       this.game("DApi_Key", 1, 0, 27);
395 |     }
396 |   }
397 | 
398 |   onMouseMove = e => {
399 |     if (!this.canvas) return;
400 |     const {x, y} = this.mousePos(e);
401 |     this.game("DApi_Mouse", 0, 0, this.eventMods(e), x, y);
402 |     e.preventDefault();
403 |   }
404 | 
405 |   onMouseDown = e => {
406 |     if (!this.canvas) return;
407 |     if (e.target === this.keyboard) {
408 |       return;
409 |     }
410 |     if (this.touchControls) {
411 |       this.touchControls = false;
412 |       this.element.classList.remove("touch");
413 |     }
414 |     const {x, y} = this.mousePos(e);
415 |     if (window.screen && window.innerHeight === window.screen.height) {
416 |       // we're in fullscreen, let's get pointer lock!
417 |       if (!this.pointerLocked()) {
418 |         this.canvas.requestPointerLock();
419 |       }
420 |     }
421 |     this.game("DApi_Mouse", 1, this.mouseButton(e), this.eventMods(e), x, y);
422 |     e.preventDefault();
423 |   }
424 | 
425 |   onMouseUp = e => {
426 |     if (!this.canvas) return;
427 |     if (e.target === this.keyboard) {
428 |       //return;
429 |     }
430 |     const {x, y} = this.mousePos(e);
431 |     this.game("DApi_Mouse", 2, this.mouseButton(e), this.eventMods(e), x, y);
432 |     if (e.target !== this.keyboard) {
433 |       e.preventDefault();
434 |     }
435 |   }
436 | 
437 |   onKeyDown = e => {
438 |     if (!this.canvas) return;
439 |     this.game("DApi_Key", 0, this.eventMods(e), e.keyCode);
440 |     if (!this.showKeyboard && (e.keyCode >= 32 && e.key.length === 1)) {
441 |       this.game("DApi_Char", e.key.charCodeAt(0));
442 |     } else if (e.keyCode === 8 || e.keyCode === 13) {
443 |       this.game("DApi_Char", e.keyCode);
444 |     }
445 |     this.clearKeySel();
446 |     if (!this.showKeyboard) {
447 |       if (e.keyCode === 8 || e.keyCode === 9 || (e.keyCode >= 112 && e.keyCode <= 119)) {
448 |         e.preventDefault();
449 |       }
450 |     }
451 |   }
452 | 
453 |   onMenu = e => {
454 |     e.preventDefault();
455 |   }
456 | 
457 |   onKeyUp = e => {
458 |     if (!this.canvas) return;
459 |     this.game("DApi_Key", 1, this.eventMods(e), e.keyCode);
460 |     this.clearKeySel();
461 |   }
462 | 
463 |   clearKeySel() {
464 |     if (this.showKeyboard) {
465 |       const len = this.keyboard.value.length;
466 |       this.keyboard.setSelectionRange(len, len);
467 |     }
468 |   }
469 | 
470 |   onKeyboardInner(flags) {
471 |     if (this.showKeyboard) {
472 |       const text = this.keyboard.value;
473 |       let valid;
474 |       if (this.maxKeyboard > 0) {
475 |         valid = (text.match(/[\x20-\x7E]/g) || []).join("").substring(0, this.maxKeyboard);
476 |       } else {
477 |         const maxValue = -this.maxKeyboard;
478 |         if (text.match(/^\d*$/)) {
479 |           this.keyboardNum = Math.min(text.length ? parseInt(text) : 0, maxValue);
480 |         }
481 |         valid = (this.keyboardNum ? this.keyboardNum.toString() : "");
482 |       }
483 |       if (text !== valid) {
484 |         this.keyboard.value = valid;
485 |       }
486 |       this.clearKeySel();
487 |       this.game("text", valid, flags);
488 |     }
489 |   }
490 |   onKeyboard = () => {
491 |     this.onKeyboardInner(0);
492 |   }
493 |   onKeyboardBlur = () => {
494 |     this.onKeyboardInner(1);
495 |   }
496 | 
497 |   parseFile = e => {
498 |     const files = e.target.files;
499 |     if (files.length > 0) {
500 |       this.start(files[0]);
501 |     }
502 |   }
503 | 
504 |   parseSave = e => {
505 |     const files = e.target.files;
506 |     if (files.length > 0) {
507 |       this.start(files[0]);
508 |     }
509 |   }
510 | 
511 |   touchButton = null;
512 |   touchCanvas = null;
513 | 
514 |   setTouchMod(index, value, use) {
515 |     if (index < 3) {
516 |       this.touchMods[index] = value;
517 |       if (this.touchButtons[index]) {
518 |         this.touchButtons[index].classList.toggle("active", value);
519 |       }
520 |     } else if (use && this.touchBelt[index] >= 0) {
521 |       const now = performance.now();
522 |       if (!this.beltTime || now - this.beltTime > 750) {
523 |         this.game("DApi_Char", 49 + this.touchBelt[index]);
524 |         this.beltTime = now;
525 |       }
526 |     }
527 |   }
528 | 
529 |   updateTouchButton(touches, release) {
530 |     let touchOther = null;
531 |     if (!this.touchControls) {
532 |       this.touchControls = true;
533 |       this.element.classList.add("touch");
534 |     }
535 |     const btn = this.touchButton;
536 |     for (let {target, identifier, clientX, clientY} of touches) {
537 |       if (btn && btn.id === identifier && this.touchButtons[btn.index] === target) {
538 |         if (touches.length > 1) {
539 |           btn.stick = false;
540 |         }
541 |         btn.clientX = clientX;
542 |         btn.clientY = clientY;
543 |         this.touchCanvas = [...touches].find(t => t.identifier !== identifier);
544 |         if (this.touchCanvas) {
545 |           this.touchCanvas = {clientX: this.touchCanvas.clientX, clientY: this.touchCanvas.clientY};
546 |         }
547 |         delete this.panPos;
548 |         return this.touchCanvas != null;
549 |       }
550 |       const idx = this.touchButtons.indexOf(target);
551 |       if (idx >= 0 && !touchOther) {
552 |         touchOther = {id: identifier, index: idx, stick: true, original: this.touchMods[idx], clientX, clientY};
553 |       }
554 |     }
555 |     if (btn && !touchOther && release && btn.stick) {
556 |       const rect = this.touchButtons[btn.index].getBoundingClientRect();
557 |       const {clientX, clientY} = btn;
558 |       if (clientX >= rect.left && clientX < rect.right && clientY >= rect.top && clientY < rect.bottom) {
559 |         this.setTouchMod(btn.index, !btn.original, true);
560 |       } else {
561 |         this.setTouchMod(btn.index, btn.original);
562 |       }
563 |     } else if (btn) {
564 |       this.setTouchMod(btn.index, false);
565 |     }
566 |     this.touchButton = touchOther;
567 |     if (touchOther) {
568 |       if (touchOther.index < 6) {
569 |         this.setTouchMod(touchOther.index, true);
570 |         if (touchOther.index === TOUCH_MOVE) {
571 |           this.setTouchMod(TOUCH_RMB, false);
572 |         } else if (touchOther.index === TOUCH_RMB) {
573 |           this.setTouchMod(TOUCH_MOVE, false);
574 |         }
575 |         delete this.panPos;
576 |       } else {
577 |         // touching F key
578 |         this.game("DApi_Key", 0, 0, 110 + touchOther.index);
579 |       }
580 |     } else if (touches.length === 2) {
581 |       const x = (touches[1].clientX + touches[0].clientX) / 2, y = (touches[1].clientY + touches[0].clientY) / 2;
582 |       if (this.panPos) {
583 |         const dx = x - this.panPos.x, dy = y - this.panPos.y;
584 |         const step = this.canvas.offsetHeight / 12;
585 |         if (Math.max(Math.abs(dx), Math.abs(dy)) > step) {
586 |           let key;
587 |           if (Math.abs(dx) > Math.abs(dy)) {
588 |             key = (dx > 0 ? 0x25 : 0x27);
589 |           } else {
590 |             key = (dy > 0 ? 0x26 : 0x28);
591 |           }
592 |           this.game("DApi_Key", 0, 0, key);
593 |           // key up is ignored anyway
594 |           this.panPos = {x, y};
595 |         }
596 |       } else {
597 |         this.game("DApi_Mouse", 0, 0, 24, 320, 180);
598 |         this.game("DApi_Mouse", 2, 1, 24, 320, 180);
599 |         this.panPos = {x, y};
600 |       }
601 |       this.touchCanvas = null;
602 |       return false;
603 |     } else {
604 |       delete this.panPos;
605 |     }
606 |     this.touchCanvas = [...touches].find(t => !touchOther || t.identifier !== touchOther.id);
607 |     if (this.touchCanvas) {
608 |       this.touchCanvas = {clientX: this.touchCanvas.clientX, clientY: this.touchCanvas.clientY};
609 |     }
610 |     return this.touchCanvas != null;
611 |   }
612 | 
613 |   onTouchStart = e => {
614 |     if (!this.canvas) return;
615 |     if (e.target === this.keyboard) {
616 |       return;
617 |     } else {
618 |       this.keyboard.blur();
619 |     }
620 |     e.preventDefault();
621 |     if (this.updateTouchButton(e.touches, false)) {
622 |       const {x, y} = this.mousePos(this.touchCanvas);
623 |       this.game("DApi_Mouse", 0, 0, this.eventMods(e), x, y);
624 |       if (!this.touchMods[TOUCH_MOVE]) {
625 |         this.game("DApi_Mouse", 1, this.touchMods[TOUCH_RMB] ? 2 : 1, this.eventMods(e), x, y);
626 |       }
627 |     }
628 |   }
629 |   onTouchMove = e => {
630 |     if (!this.canvas) return;
631 |     if (e.target === this.keyboard) {
632 |       return;
633 |     }
634 |     e.preventDefault();
635 |     if (this.updateTouchButton(e.touches, false)) {
636 |       const {x, y} = this.mousePos(this.touchCanvas);
637 |       this.game("DApi_Mouse", 0, 0, this.eventMods(e), x, y);
638 |     }
639 |   }
640 |   onTouchEnd = e => {
641 |     if (!this.canvas) return;
642 |     if (e.target === this.keyboard) {
643 |       //return;
644 |     } else {
645 |       e.preventDefault();
646 |     }
647 |     const prevTc = this.touchCanvas;
648 |     this.updateTouchButton(e.touches, true);
649 |     if (prevTc && !this.touchCanvas) {
650 |       const {x, y} = this.mousePos(prevTc);
651 |       this.game("DApi_Mouse", 2, 1, this.eventMods(e), x, y);
652 |       this.game("DApi_Mouse", 2, 2, this.eventMods(e), x, y);
653 | 
654 |       if (this.touchMods[TOUCH_RMB] && (!this.touchButton || this.touchButton.index !== TOUCH_RMB)) {
655 |         this.setTouchMod(TOUCH_RMB, false);
656 |       }
657 |     }
658 |     if (!document.fullscreenElement) {
659 |       this.element.requestFullscreen();
660 |     }
661 |   }
662 | 
663 |   setCanvas = e => this.canvas = e;
664 |   setElement = e => this.element = e;
665 |   setKeyboard = e => this.keyboard = e;
666 |   setTouch_(i, e) {
667 |     this.touchButtons[i] = e;
668 |   }
669 |   setTouchBelt_(i, e) {
670 |     this.touchButtons[i] = e;
671 |     if (e) {
672 |       const canvas = document.createElement("canvas");
673 |       canvas.width = 28;
674 |       canvas.height = 28;
675 |       e.appendChild(canvas);
676 |       this.touchCtx[i] = canvas.getContext("2d");
677 |     } else {
678 |       this.touchCtx[i] = null;
679 |     }
680 |   }
681 | 
682 |   renderUi() {
683 |     const {started, loading, error, progress, has_spawn, save_names, show_saves, compress} = this.state;
684 |     if (show_saves && typeof save_names === "object") {
685 |       const plrClass = ["Warrior", "Rogue", "Sorcerer"];
686 |       return (
687 |         <div className="start">
688 |           <ul className="saveList">
689 |             {Object.entries(save_names).map(([name, info]) => <li key={name}>
690 |               {name}{info ? <span className="info">{info.name} (lv. {info.level} {plrClass[info.cls]})</span> : ""}
691 |               <FontAwesomeIcon className="btnDownload" icon={faDownload} onClick={() => this.downloadSave(name)}/>
692 |               <FontAwesomeIcon className="btnRemove" icon={faTimes} onClick={() => this.removeSave(name)}/>
693 |             </li>)}
694 |           </ul>
695 |           <form>
696 |             <label htmlFor="loadFile" className="startButton">Upload Save</label>
697 |             <input accept=".sv" type="file" id="loadFile" style={{display: "none"}} onChange={this.parseSave}/>
698 |           </form>
699 |           <div className="startButton" onClick={() => this.setState({show_saves: false})}>Back</div>
700 |         </div>
701 |       );
702 |     } else if (compress) {
703 |       return (
704 |         <CompressMpq api={this} ref={e => this.compressMpq = e}/>
705 |       );
706 |     } else if (error) {
707 |       return (
708 |         <Link className="error" href={reportLink(error, this.state.retail)}>
709 |           <p className="header">The following error has occurred:</p>
710 |           <p className="body">{error.message}</p>
711 |           <p className="footer">Click to create an issue on GitHub</p>
712 |           {error.save != null && <a href={error.save} download={this.saveName}>Download save file</a>}
713 |         </Link>
714 |       );
715 |     } else if (loading && !started) {
716 |       return (
717 |         <div className="loading">
718 |           {(progress && progress.text) || 'Loading...'}
719 |           {progress != null && !!progress.total && (
720 |             <span className="progressBar"><span><span style={{width: `${Math.round(100 * progress.loaded / progress.total)}%`}}/></span></span>
721 |           )}
722 |         </div>
723 |       );
724 |     } else if (!started) {
725 |       return (
726 |         <div className="start">
727 |           <p>
728 |             This is a web port of the original Diablo game, based on source code reconstructed by
729 |             GalaXyHaXz and devilution team. The project page with information and links can be found over here <Link href="https://github.com/d07RiV/diabloweb">https://github.com/d07RiV/diabloweb</Link>
730 |           </p>
731 |           <p>
732 |             If you own the original game, you can drop the original DIABDAT.MPQ onto this page or click the button below to start playing.
733 |             The game can be purchased from <Link href="https://www.gog.com/game/diablo">GoG</Link>.
734 |             {" "}<span className="link" onClick={() => this.setState({compress: true})}>Click here to compress the MPQ, greatly reducing its size.</span>
735 |           </p>
736 |           {!has_spawn && (
737 |             <p>
738 |               Or you can play the shareware version for free (50MB download).
739 |             </p>
740 |           )}
741 |           <form>
742 |             <label htmlFor="loadFile" className="startButton">Select MPQ</label>
743 |             <input accept=".mpq" type="file" id="loadFile" style={{display: "none"}} onChange={this.parseFile}/>
744 |           </form>
745 |           <div className="startButton" onClick={() => this.start()}>Play Shareware</div>
746 |           {!!save_names && <div className="startButton" onClick={this.showSaves}>Manage Saves</div>}
747 |         </div>
748 |       );
749 |     }
750 |   }
751 | 
752 |   render() {
753 |     const {started, error, dropping} = this.state;
754 |     return (
755 |       <div className={classNames("App", {touch: this.touchControls, started, dropping, keyboard: !!this.showKeyboard})} ref={this.setElement}>
756 |         <div className="touch-ui touch-mods">
757 |           <div className={classNames("touch-button", "touch-button-0", {active: this.touchMods[0]})} ref={this.setTouch0}/>
758 |           <div className={classNames("touch-button", "touch-button-1", {active: this.touchMods[1]})} ref={this.setTouch1}/>
759 |           <div className={classNames("touch-button", "touch-button-2", {active: this.touchMods[2]})} ref={this.setTouch2}/>
760 |         </div>
761 |         <div className="touch-ui touch-belt">
762 |           <div className={classNames("touch-button", "touch-button-0")} ref={this.setTouch3}/>
763 |           <div className={classNames("touch-button", "touch-button-1")} ref={this.setTouch4}/>
764 |           <div className={classNames("touch-button", "touch-button-2")} ref={this.setTouch5}/>
765 |         </div>
766 |         <div className="touch-ui fkeys-left">
767 |           <div className={classNames("touch-button", "touch-button-3")} ref={this.setTouch6} />
768 |           <div className={classNames("touch-button", "touch-button-4")} ref={this.setTouch7} />
769 |         </div>
770 |         <div className="touch-ui fkeys-right">
771 |           <div className={classNames("touch-button", "touch-button-5")} ref={this.setTouch8} />
772 |           <div className={classNames("touch-button", "touch-button-6")} ref={this.setTouch9} />
773 |         </div>
774 |         <div className="Body">
775 |           <div className="inner">
776 |             {!error && <canvas ref={this.setCanvas} width={640} height={480}/>}
777 |             <input type="text" className="keyboard" onChange={this.onKeyboard} onBlur={this.onKeyboardBlur} ref={this.setKeyboard} spellCheck={false} style={this.showKeyboard || {}}/>
778 |           </div>
779 |         </div>
780 |         <div className="BodyV">
781 |           {this.renderUi()}
782 |         </div>
783 |       </div>
784 |     );
785 |   }
786 | }
787 | 
788 | export default App;
789 | 


--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
  1 | body, #root, .App {
  2 |   overflow: hidden;
  3 |   position: absolute;
  4 |   left: 0;
  5 |   top: 0;
  6 |   right: 0;
  7 |   bottom: 0;
  8 | }
  9 | .App {
 10 |   background-color: #000;
 11 |   &.dropping {
 12 |     background-color: #111;
 13 |   }
 14 | }
 15 | .Body, .BodyV {
 16 |   position: absolute;
 17 |   top: 0;
 18 |   bottom: 0;
 19 |   height: auto;
 20 |   left: calc(50% - 200vh / 3);
 21 |   width: calc(400vh / 3);
 22 | }
 23 | .Body .inner {
 24 |   position: absolute;
 25 |   left: 0;
 26 |   top: 0;
 27 |   right: 0;
 28 |   bottom: 0;
 29 | }
 30 | @media (max-aspect-ratio: 640/480) {
 31 |   .Body {
 32 |     left: 0;
 33 |     right: 0;
 34 |     width: auto;
 35 |     top: calc(50% - 37.5vw);
 36 |     height: 75vw;
 37 |   }
 38 |   .BodyV {
 39 |     left: 0;
 40 |     right: 0;
 41 |     width: auto;
 42 |   }
 43 | }
 44 | .BodyV {
 45 |   pointer-events: none;
 46 | }
 47 | 
 48 | @media (min-aspect-ratio: 3/1) {
 49 |   .App.keyboard .Body .inner {
 50 |     position: absolute;
 51 |     left: 50%;
 52 |     top: 50%;
 53 |     width: 75vw;
 54 |     height: 56.25vw;
 55 |     transform: translate(-50%, -70%);
 56 |   }
 57 | }
 58 | 
 59 | .App {
 60 |   canvas {
 61 |     width: 100%;
 62 |     height: 100%;
 63 |     cursor: none;
 64 |     visibility: hidden;
 65 |   }
 66 |   &.started canvas {
 67 |     visibility: visible;
 68 |   }
 69 |   .keyboard {
 70 |     position: absolute;
 71 |     pointer-events: auto;
 72 |     background: rgba(0, 0, 0, 0);
 73 |     color: rgba(0, 0, 0, 0);
 74 |     border: none;
 75 |     outline: none;
 76 |     z-index: 100;
 77 |     display: none;
 78 |     cursor: none;
 79 |     &::selection {
 80 |       background: rgba(0, 0, 0, 0);
 81 |       color: rgba(0, 0, 0, 0);
 82 |       }
 83 |   }
 84 |   &.keyboard .keyboard {
 85 |     display: block;
 86 |   }
 87 | 
 88 |   .start, .error, .loading {
 89 |     position: absolute;
 90 |     left: 50%;
 91 |     top: 50%;
 92 |     transform: translate(-50%, -50%);
 93 |   }
 94 | 
 95 |   .start, .error {
 96 |     max-width: 90%;
 97 |     max-height: 90%;
 98 |     overflow-y: auto;
 99 |     pointer-events: auto;
100 |   }
101 | 
102 |   .start {
103 |     border: 1px solid #888;
104 |     padding: 12px;
105 |     color: #fff;
106 |     font-size: 18px;
107 |     text-align: center;
108 |     background: #000;
109 |     p {
110 |       margin: 10px 0;
111 |     }
112 |     .startButton {
113 |       display: block;
114 |       margin-left: auto;
115 |       margin-right: auto;
116 |       border: 1px solid #fff;
117 |       background: #000;
118 |       font-size: 2em;
119 |       padding: 4px 18px;
120 |       cursor: pointer;
121 |       margin-top: 6px;
122 |       width: 8em;
123 |       &:hover {
124 |         background-color: #111;
125 |       }
126 |     }
127 |     .saveList {
128 |       border: 1px solid #fff;
129 |       text-align: left;
130 |       li {
131 |         padding: 0 6px;
132 |         .info {
133 |           color: #888;
134 |           margin-left: 6px;
135 |         }
136 |         .btnRemove {
137 |           color: #800;
138 |           &:hover {
139 |             color: #f00;
140 |           }
141 |           float: right;
142 |           cursor: pointer;
143 |           margin: 0 4px;
144 |         }
145 |         .btnDownload {
146 |           color: #888;
147 |           &:hover {
148 |             color: #fff;
149 |           }
150 |           float: right;
151 |           cursor: pointer;
152 |           margin: 0 4px;
153 |         }
154 |         &:hover {
155 |           background-color: #444;
156 |         }
157 |       }
158 |     }
159 |   }
160 | }
161 | 
162 | .App {
163 |   .error {
164 |     display: block;
165 |     border: 1px solid #800;
166 |     background: #300;
167 |     padding: 12px;
168 |     color: #f33;
169 |     font-size: 18px;
170 |     text-align: center;
171 |     &:hover {
172 |       text-decoration: none;
173 |     }
174 |     .header {
175 |       font-weight: bold;
176 |       font-size: 1.2em;
177 |       margin-bottom: 0.3em;
178 |     }
179 |     .body {
180 |       font-family: monospace;
181 |     }
182 |     .footer {
183 |       margin-top: 0.5em;
184 |       font-size: 0.8em;
185 |     }
186 |   }
187 | 
188 |   .loading {
189 |     color: #888;
190 |     font-size: 32px;
191 |     text-align: center;
192 |     width: 75%;
193 |     .progressBar {
194 |       display: block;
195 |       position: absolute;
196 |       margin-top: 16px;
197 |       width: 100%;
198 |       height: 40px;
199 |       border: 2px solid #888;
200 |       span {
201 |         position: absolute;
202 |         left: 3px;
203 |         top: 3px;
204 |         bottom: 3px;
205 |         right: 3px;
206 |       }
207 |       span span {
208 |         position: absolute;
209 |         left: 0;
210 |         top: 0;
211 |         bottom: 0;
212 |         background-color: #888;
213 |       }
214 |     }
215 |   }
216 |   a, .link {
217 |     display: inline-block;
218 |     color: rgb(112, 112, 255);
219 |     text-decoration: none;
220 |     &:hover {
221 |       text-decoration: underline;
222 |     }
223 |     cursor: pointer;
224 |   }
225 | }
226 | 
227 | .App {
228 |   .touch-ui {
229 |     display: none;
230 |     pointer-events: none;
231 |     position: absolute;
232 |     top: 0;
233 |     bottom: 0;
234 |     width: 25vh;
235 |     .touch-button {
236 |       position: absolute;
237 |       left: 50%;
238 |       background-color: #444;
239 |       transform: translate(-50%, -50%);
240 |       pointer-events: auto;
241 |       &.active {
242 |         background-color: #fff;
243 |       }
244 |       mask-size: 100% 100%;
245 |     }
246 |     .touch-button-0 {
247 |       top: 15vh;
248 |     }
249 |     .touch-button-1 {
250 |       top: 35vh;
251 |     }
252 |     .touch-button-2 {
253 |       top: 55vh;
254 |     }
255 |     .touch-button-3 {
256 |       top: 70vh;
257 |       left: 5vw;
258 |     }
259 |     .touch-button-4 {
260 |       top: 70vh;
261 |       left: 11vw;
262 |     }
263 |     
264 |     .touch-button-5 {
265 |       top: 85vh;
266 |       left: 5vw;
267 |     }
268 | 
269 |     .touch-button-6 {
270 |       top: 85vh;
271 |       left: 11vw;
272 |     }
273 |   }
274 |   .touch-ui.touch-mods {
275 |     left: 0;
276 |     .touch-button {
277 |       width: 15vh;
278 |       height: 15vh;
279 |       border-radius: 10vh;
280 |     }
281 |     .touch-button-0 {
282 |       mask-image: url(./icons/move.svg);
283 |     }
284 |     .touch-button-1 {
285 |       mask-image: url(./icons/rmb.svg);
286 |     }
287 |     .touch-button-2 {
288 |       mask-image: url(./icons/shift.svg);
289 |     }
290 |     .touch-button-3 {
291 |       mask-image: url(./icons/f5.svg);
292 |     }
293 |     .touch-button-4 {
294 |       mask-image: url(./icons/f6.svg);
295 |     }
296 |   }
297 |   .touch-ui.touch-belt {
298 |     right: 0;
299 |     .touch-button {
300 |       width: 12vh;
301 |       height: 12vh;
302 |       font-size: 1vh;
303 |       border-radius: 20%;
304 |       overflow: hidden;
305 |       background-color: #000;
306 |       border: 2px solid #444;
307 |       canvas {
308 |         position: absolute;
309 |         left: 5%;
310 |         top: 5%;
311 |         width: 90%;
312 |         height: 90%;
313 |       }
314 |       &::after {
315 |         content: '';
316 |         position: absolute;
317 |         left: 0;
318 |         top: 0;
319 |         right: 0;
320 |         bottom: 0;
321 |         border-radius: 20%;
322 |         box-shadow: inset 0 0 1em 1.5em #000;
323 |       }
324 |     }
325 |   }
326 |   .touch-ui.fkeys-left {
327 |     left: 0;
328 |     top: auto;
329 |     bottom: 0;
330 |     height: 35vh;
331 |       .touch-button {
332 |         width: 15vh;
333 |         height: 15vh;
334 |         position: absolute;
335 |         left: 50%;
336 |         background-color: #444;
337 |         transform: translate(-50%, -50%);
338 |         pointer-events: auto;
339 |         &.active {
340 |           background-color: #fff;
341 |         }
342 |         mask-size: 100% 100%;
343 |       }
344 |       .touch-button-3 {
345 |         top: 0;
346 |         transform: translate(-50%, 0);
347 |         mask-image: url(./icons/f5.svg);
348 |       }
349 |       .touch-button-4 {
350 |         top:60%;
351 |         mask-image: url(./icons/f6.svg);
352 |       }
353 |   }
354 | 
355 |   .touch-ui.fkeys-right {
356 |     left: auto;
357 |     top: auto;
358 |     right: 0;
359 |     bottom: 0;
360 |     height: 35vh;
361 |       .touch-button {
362 |         width: 15vh;
363 |         height: 15vh;
364 |         position: absolute;
365 |         left: 50%;
366 |         background-color: #444;
367 |         transform: translate(-50%, -50%);
368 |         pointer-events: auto;
369 |         &.active {
370 |           background-color: #fff;
371 |         }
372 |         mask-size: 100% 100%;
373 |       }
374 |       .touch-button-5 {
375 |         top: 0;
376 |         transform: translate(-50%, 0);
377 |         mask-image: url(./icons/f7.svg);
378 |       }
379 |       .touch-button-6 {
380 |         top:60%;
381 |         mask-image: url(./icons/f8.svg);
382 |       }
383 |   }
384 | 
385 |   &.touch .touch-ui {
386 |     display: block;
387 |   }
388 |   &.touch.keyboard .touch-ui {
389 |     display: none;
390 |   }
391 | }
392 | 
393 | @media (max-aspect-ratio: 880/480) {
394 |   .App .touch-ui {
395 |     width: calc(50vw - 200vh / 3);
396 |   }
397 | }
398 | @media (max-aspect-ratio: 832/480) {
399 |   .App .touch-ui {
400 |     width: 20vh;
401 |   }
402 | }
403 | @media (max-aspect-ratio: 640/480) {
404 |   .App .touch-ui {
405 |     width: auto;
406 |     height: 20vw;
407 |     .touch-button {
408 |       top: 55%;
409 |     }
410 |     .touch-button-0 {
411 |       left: 16.7vw;
412 |     }
413 |     .touch-button-1 {
414 |       left: 50vw;
415 |     }
416 |     .touch-button-2 {
417 |       left: 83.3vw;
418 |     }
419 |   }
420 |   .App .touch-ui.touch-mods {
421 |     top: auto;
422 |     right: 0;
423 |     .touch-button {
424 |       width: 20vw;
425 |       height: 20vw;
426 |       border-radius: 10vw;
427 |     }
428 |   }
429 |   .App .touch-ui.touch-belt {
430 |     bottom: auto;
431 |     left: 0;
432 |     .touch-button {
433 |       width: 14vw;
434 |       height: 14vw;
435 |       font-size: 1vw;
436 |     }
437 |   }
438 |   .App .touch-ui.fkeys-left {
439 |     left:0;
440 |     bottom: 15vh;
441 |     width: 50%;
442 |     height: 12vh;
443 |     .touch-button {
444 |       height: 12vh;
445 |       width: 12vh;
446 |     }
447 |     .touch-button-3 {
448 |       left:25%;
449 |     }
450 |     .touch-button-4 {
451 |       top: 50%;
452 |       left:75%;
453 |     }
454 |   }
455 |   .App .touch-ui.fkeys-right {
456 |     left:auto;
457 |     right: 0;
458 |     bottom: 15vh;
459 |     width: 50%;
460 |     height: 12vh;
461 |     .touch-button {
462 |       height: 12vh;
463 |       width: 12vh;
464 |     }
465 |     .touch-button-5 {
466 |       left:25%;
467 |     }
468 |     .touch-button-6 {
469 |       top: 50%;
470 |       left:75%;
471 |     }
472 |   }
473 | }
474 | @media (max-aspect-ratio: 640/736) {
475 |   .App .touch-ui {
476 |     height: calc(50vh - 75vw / 2);
477 |   }
478 | }
479 | @media (max-aspect-ratio: 640/800) {
480 |   .App .touch-ui {
481 |     height: 35vw;
482 |   }
483 | }
484 | 


--------------------------------------------------------------------------------
/src/api/Diablo.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/src/api/Diablo.wasm


--------------------------------------------------------------------------------
/src/api/DiabloSpawn.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/src/api/DiabloSpawn.wasm


--------------------------------------------------------------------------------
/src/api/codec.js:
--------------------------------------------------------------------------------
  1 | const W = new Uint32Array(80);
  2 | 
  3 | const SHA1CircularShift = (shift, value) => ((value << shift) | (value >> (32 - shift)));
  4 | 
  5 | class SHA1 {
  6 |   digest = new Uint32Array(5);
  7 |   count = 0;
  8 | 
  9 |   input8(u8) {
 10 |     const u32 = new Uint32Array(u8.buffer, u8.byteOffset, 16);
 11 |     this.input(u32);
 12 |   }
 13 |   input(u32) {
 14 |     this.count += u32.length * 32;
 15 |     for (let i = 0; i < 16; ++i) {
 16 |       W[i] = u32[i];
 17 |     }
 18 |     for (let i = 16; i < 80; ++i) {
 19 |       W[i] = W[i - 16] ^ W[i - 14] ^ W[i - 8] ^ W[i - 3];
 20 |     }
 21 |     let A = this.digest[0];
 22 |     let B = this.digest[1];
 23 |     let C = this.digest[2];
 24 |     let D = this.digest[3];
 25 |     let E = this.digest[4];
 26 | 
 27 |     for (let i = 0; i < 20; i++) {
 28 |       const temp = SHA1CircularShift(5, A) + ((B & C) | ((~B) & D)) + E + W[i] + 0x5A827999;
 29 |       E = D;
 30 |       D = C;
 31 |       C = SHA1CircularShift(30, B);
 32 |       B = A;
 33 |       A = temp | 0;
 34 |     }
 35 | 
 36 |     for (let i = 20; i < 40; i++) {
 37 |       const temp = SHA1CircularShift(5, A) + (B ^ C ^ D) + E + W[i] + 0x6ED9EBA1;
 38 |       E = D;
 39 |       D = C;
 40 |       C = SHA1CircularShift(30, B);
 41 |       B = A;
 42 |       A = temp | 0;
 43 |     }
 44 | 
 45 |     for (let i = 40; i < 60; i++) {
 46 |       const temp = SHA1CircularShift(5, A) + ((B & C) | (B & D) | (C & D)) + E + W[i] + 0x8F1BBCDC;
 47 |       E = D;
 48 |       D = C;
 49 |       C = SHA1CircularShift(30, B);
 50 |       B = A;
 51 |       A = temp | 0;
 52 |     }
 53 | 
 54 |     for (let i = 60; i < 80; i++) {
 55 |       const temp = SHA1CircularShift(5, A) + (B ^ C ^ D) + E + W[i] + 0xCA62C1D6;
 56 |       E = D;
 57 |       D = C;
 58 |       C = SHA1CircularShift(30, B);
 59 |       B = A;
 60 |       A = temp | 0;
 61 |     }
 62 | 
 63 |     this.digest[0] += A;
 64 |     this.digest[1] += B;
 65 |     this.digest[2] += C;
 66 |     this.digest[3] += D;
 67 |     this.digest[4] += E;
 68 |   }
 69 | 
 70 |   constructor() {
 71 | 	  this.digest[0] = 0x67452301;
 72 | 	  this.digest[1] = 0xEFCDAB89;
 73 | 	  this.digest[2] = 0x98BADCFE;
 74 | 	  this.digest[3] = 0x10325476;
 75 |     this.digest[4] = 0xC3D2E1F0;
 76 |     
 77 |     this.digest8 = new Uint8Array(this.digest.buffer);
 78 |   }
 79 | }
 80 | 
 81 | class Random {
 82 |   constructor(seed) {
 83 |     this.seed = seed;
 84 |   }
 85 |   next() {
 86 |     this.seed = (((this.seed * 3) << 16) + ((this.seed * 67) << 8) + (this.seed * 253) + 2531011) | 0;
 87 |     return (this.seed >> 16) & 0x7FFF;
 88 |   }
 89 | }
 90 | 
 91 | function codec_init_key(password) {
 92 |   const rand = new Random(0x7058);
 93 |   const key = new Uint8Array(136);
 94 |   const k32 = new Uint32Array(key.buffer);
 95 |   for (let i = 0; i < 136; ++i) {
 96 |     key[i] = rand.next();
 97 |   }
 98 |   const pw = new Uint8Array(64);
 99 |   for (let i = 0; i < 64; ++i) {
100 |     pw[i] = password.charCodeAt(i % password.length);
101 |   }
102 | 
103 |   let sha = new SHA1();
104 |   sha.input8(pw);
105 | 
106 |   for (let i = 0; i < 34; ++i) {
107 |     k32[i] ^= sha.digest[i % sha.digest.length];
108 |   }
109 | 
110 |   sha = new SHA1();
111 |   sha.input(k32.subarray(18));
112 |   return sha;
113 | }
114 | 
115 | export default function codec_decode(data, password) {
116 |   if (data.length <= 8) {
117 |     return;
118 |   }
119 |   const size = data.length - 8;
120 |   if (size % 64) {
121 |     return;
122 |   }
123 | 
124 |   if (data[size + 4]) {
125 |     return;
126 |   }
127 | 
128 |   const last_size = data[size + 5];
129 |   const result_size = size + last_size - 64;
130 |   const result = new Uint8Array(result_size);
131 | 
132 |   const sha = codec_init_key(password);
133 |   const size32 = size >> 2;
134 |   const data32 = new Uint32Array(data.buffer, data.byteOffset, size32 + 1);
135 |   const buf32 = new Uint32Array(16);
136 |   const buf = new Uint8Array(buf32.buffer);
137 | 
138 |   for (let i = 0; i < size32; i += 16) {
139 |     for (let j = 0; j < 16; ++j) {
140 |       buf32[j] = data32[i + j] ^ sha.digest[j % sha.digest.length];
141 |     }
142 |     sha.input(buf32);
143 |     result.set(i === size32 - 16 ? buf.subarray(0, last_size) : buf, i * 4);
144 |   }
145 |   if (data32[size32] !== sha.digest[0]) {
146 |     return;
147 |   }
148 |   return result;
149 | }
150 | 


--------------------------------------------------------------------------------
/src/api/explode.js:
--------------------------------------------------------------------------------
  1 | export const CMP_BINARY = 0; // Binary compression
  2 | export const CMP_ASCII = 1; // Ascii compression
  3 | export const CMP_NO_ERROR = 0;
  4 | export const CMP_INVALID_DICTSIZE = 1;
  5 | export const CMP_INVALID_MODE = 2;
  6 | export const CMP_BAD_DATA = 3;
  7 | export const CMP_ABORT = 4;
  8 | export const CMP_IMPLODE_DICT_SIZE1 = 1024; // Dictionary size of 1024
  9 | export const CMP_IMPLODE_DICT_SIZE2 = 2048; // Dictionary size of 2048
 10 | export const CMP_IMPLODE_DICT_SIZE3 = 4096; // Dictionary size of 4096
 11 | 
 12 | export const PKDCL_OK = 0;
 13 | export const PKDCL_STREAM_END = 1; // All data from the input stream is read
 14 | export const PKDCL_NEED_DICT = 2; // Need more data (dictionary)
 15 | export const PKDCL_CONTINUE = 10; // Internal flag, not returned to user
 16 | export const PKDCL_GET_INPUT = 11; // Internal flag, not returned to user
 17 | 
 18 | const DistBits = new Uint8Array([
 19 |   0x02, 0x04, 0x04, 0x05, 0x05, 0x05, 0x05, 0x06, 0x06, 0x06, 0x06, 0x06, 0x06, 0x06, 0x06, 0x06,
 20 |   0x06, 0x06, 0x06, 0x06, 0x06, 0x06, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07,
 21 |   0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07,
 22 |   0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08, 0x08
 23 | ]);
 24 | 
 25 | const DistCode = new Uint8Array([
 26 |   0x03, 0x0D, 0x05, 0x19, 0x09, 0x11, 0x01, 0x3E, 0x1E, 0x2E, 0x0E, 0x36, 0x16, 0x26, 0x06, 0x3A,
 27 |   0x1A, 0x2A, 0x0A, 0x32, 0x12, 0x22, 0x42, 0x02, 0x7C, 0x3C, 0x5C, 0x1C, 0x6C, 0x2C, 0x4C, 0x0C,
 28 |   0x74, 0x34, 0x54, 0x14, 0x64, 0x24, 0x44, 0x04, 0x78, 0x38, 0x58, 0x18, 0x68, 0x28, 0x48, 0x08,
 29 |   0xF0, 0x70, 0xB0, 0x30, 0xD0, 0x50, 0x90, 0x10, 0xE0, 0x60, 0xA0, 0x20, 0xC0, 0x40, 0x80, 0x00
 30 | ]);
 31 | 
 32 | const ExLenBits = new Uint8Array([
 33 |   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08
 34 | ]);
 35 | 
 36 | const LenBase = new Uint16Array([
 37 |   0x0000, 0x0001, 0x0002, 0x0003, 0x0004, 0x0005, 0x0006, 0x0007,
 38 |   0x0008, 0x000A, 0x000E, 0x0016, 0x0026, 0x0046, 0x0086, 0x0106
 39 | ]);
 40 | 
 41 | const LenBits = new Uint8Array([
 42 |   0x03, 0x02, 0x03, 0x03, 0x04, 0x04, 0x04, 0x05, 0x05, 0x05, 0x05, 0x06, 0x06, 0x06, 0x07, 0x07
 43 | ]);
 44 | 
 45 | const LenCode = new Uint8Array([
 46 |   0x05, 0x03, 0x01, 0x06, 0x0A, 0x02, 0x0C, 0x14, 0x04, 0x18, 0x08, 0x30, 0x10, 0x20, 0x40, 0x00
 47 | ]);
 48 | 
 49 | const ChBitsAsc = new Uint8Array([
 50 |   0x0B, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x08, 0x07, 0x0C, 0x0C, 0x07, 0x0C, 0x0C,
 51 |   0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0D, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C,
 52 |   0x04, 0x0A, 0x08, 0x0C, 0x0A, 0x0C, 0x0A, 0x08, 0x07, 0x07, 0x08, 0x09, 0x07, 0x06, 0x07, 0x08,
 53 |   0x07, 0x06, 0x07, 0x07, 0x07, 0x07, 0x08, 0x07, 0x07, 0x08, 0x08, 0x0C, 0x0B, 0x07, 0x09, 0x0B,
 54 |   0x0C, 0x06, 0x07, 0x06, 0x06, 0x05, 0x07, 0x08, 0x08, 0x06, 0x0B, 0x09, 0x06, 0x07, 0x06, 0x06,
 55 |   0x07, 0x0B, 0x06, 0x06, 0x06, 0x07, 0x09, 0x08, 0x09, 0x09, 0x0B, 0x08, 0x0B, 0x09, 0x0C, 0x08,
 56 |   0x0C, 0x05, 0x06, 0x06, 0x06, 0x05, 0x06, 0x06, 0x06, 0x05, 0x0B, 0x07, 0x05, 0x06, 0x05, 0x05,
 57 |   0x06, 0x0A, 0x05, 0x05, 0x05, 0x05, 0x08, 0x07, 0x08, 0x08, 0x0A, 0x0B, 0x0B, 0x0C, 0x0C, 0x0C,
 58 |   0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D,
 59 |   0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D,
 60 |   0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D,
 61 |   0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C,
 62 |   0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C,
 63 |   0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C, 0x0C,
 64 |   0x0D, 0x0C, 0x0D, 0x0D, 0x0D, 0x0C, 0x0D, 0x0D, 0x0D, 0x0C, 0x0D, 0x0D, 0x0D, 0x0D, 0x0C, 0x0D,
 65 |   0x0D, 0x0D, 0x0C, 0x0C, 0x0C, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D, 0x0D
 66 | ]);
 67 | 
 68 | const ChCodeAsc = new Uint16Array([
 69 |   0x0490, 0x0FE0, 0x07E0, 0x0BE0, 0x03E0, 0x0DE0, 0x05E0, 0x09E0,
 70 |   0x01E0, 0x00B8, 0x0062, 0x0EE0, 0x06E0, 0x0022, 0x0AE0, 0x02E0,
 71 |   0x0CE0, 0x04E0, 0x08E0, 0x00E0, 0x0F60, 0x0760, 0x0B60, 0x0360,
 72 |   0x0D60, 0x0560, 0x1240, 0x0960, 0x0160, 0x0E60, 0x0660, 0x0A60,
 73 |   0x000F, 0x0250, 0x0038, 0x0260, 0x0050, 0x0C60, 0x0390, 0x00D8,
 74 |   0x0042, 0x0002, 0x0058, 0x01B0, 0x007C, 0x0029, 0x003C, 0x0098,
 75 |   0x005C, 0x0009, 0x001C, 0x006C, 0x002C, 0x004C, 0x0018, 0x000C,
 76 |   0x0074, 0x00E8, 0x0068, 0x0460, 0x0090, 0x0034, 0x00B0, 0x0710,
 77 |   0x0860, 0x0031, 0x0054, 0x0011, 0x0021, 0x0017, 0x0014, 0x00A8,
 78 |   0x0028, 0x0001, 0x0310, 0x0130, 0x003E, 0x0064, 0x001E, 0x002E,
 79 |   0x0024, 0x0510, 0x000E, 0x0036, 0x0016, 0x0044, 0x0030, 0x00C8,
 80 |   0x01D0, 0x00D0, 0x0110, 0x0048, 0x0610, 0x0150, 0x0060, 0x0088,
 81 |   0x0FA0, 0x0007, 0x0026, 0x0006, 0x003A, 0x001B, 0x001A, 0x002A,
 82 |   0x000A, 0x000B, 0x0210, 0x0004, 0x0013, 0x0032, 0x0003, 0x001D,
 83 |   0x0012, 0x0190, 0x000D, 0x0015, 0x0005, 0x0019, 0x0008, 0x0078,
 84 |   0x00F0, 0x0070, 0x0290, 0x0410, 0x0010, 0x07A0, 0x0BA0, 0x03A0,
 85 |   0x0240, 0x1C40, 0x0C40, 0x1440, 0x0440, 0x1840, 0x0840, 0x1040,
 86 |   0x0040, 0x1F80, 0x0F80, 0x1780, 0x0780, 0x1B80, 0x0B80, 0x1380,
 87 |   0x0380, 0x1D80, 0x0D80, 0x1580, 0x0580, 0x1980, 0x0980, 0x1180,
 88 |   0x0180, 0x1E80, 0x0E80, 0x1680, 0x0680, 0x1A80, 0x0A80, 0x1280,
 89 |   0x0280, 0x1C80, 0x0C80, 0x1480, 0x0480, 0x1880, 0x0880, 0x1080,
 90 |   0x0080, 0x1F00, 0x0F00, 0x1700, 0x0700, 0x1B00, 0x0B00, 0x1300,
 91 |   0x0DA0, 0x05A0, 0x09A0, 0x01A0, 0x0EA0, 0x06A0, 0x0AA0, 0x02A0,
 92 |   0x0CA0, 0x04A0, 0x08A0, 0x00A0, 0x0F20, 0x0720, 0x0B20, 0x0320,
 93 |   0x0D20, 0x0520, 0x0920, 0x0120, 0x0E20, 0x0620, 0x0A20, 0x0220,
 94 |   0x0C20, 0x0420, 0x0820, 0x0020, 0x0FC0, 0x07C0, 0x0BC0, 0x03C0,
 95 |   0x0DC0, 0x05C0, 0x09C0, 0x01C0, 0x0EC0, 0x06C0, 0x0AC0, 0x02C0,
 96 |   0x0CC0, 0x04C0, 0x08C0, 0x00C0, 0x0F40, 0x0740, 0x0B40, 0x0340,
 97 |   0x0300, 0x0D40, 0x1D00, 0x0D00, 0x1500, 0x0540, 0x0500, 0x1900,
 98 |   0x0900, 0x0940, 0x1100, 0x0100, 0x1E00, 0x0E00, 0x0140, 0x1600,
 99 |   0x0600, 0x1A00, 0x0E40, 0x0640, 0x0A40, 0x0A00, 0x1200, 0x0200,
100 |   0x1C00, 0x0C00, 0x1400, 0x0400, 0x1800, 0x0800, 0x1000, 0x0000  
101 | ]);
102 | 
103 | /**
104 |  * @param {Uint8Array} positions [out] Table of positions
105 |  * @param {Uint8Array} start_indexes Table of start indexes
106 |  * @param {Uint8Array} length_bits Table of lengths. Each length is stored as number of bits
107 |  * @param {number} elements Number of elements in start_indexes and length_bits
108 |  */
109 | function GenDecodeTabs(positions, start_indexes, length_bits, elements) {
110 |   for (let i = 0; i < elements; i++) {
111 |     const length = 1 << length_bits[i];   // Get the length in bytes
112 |     for (let index = start_indexes[i]; index < 0x100; index += length) {
113 |       positions[index] = i;
114 |     }
115 |   }
116 | }
117 | 
118 | function GenAscTabs(pWork) {
119 |   let pChCodeAsc = 0xFF;
120 | 
121 |   for (let count = 0x00FF; pChCodeAsc >= 0; pChCodeAsc--, count--) {
122 |     let bits_asc = pWork.ChBitsAsc[count];
123 |     let acc;
124 | 
125 |     if (bits_asc <= 8) {
126 |       const add = (1 << bits_asc);
127 |       acc = ChCodeAsc[pChCodeAsc];
128 | 
129 |       do {
130 |         pWork.offs2C34[acc] = count;
131 |         acc += add;
132 |       } while(acc < 0x100);
133 |     } else if ((acc = (ChCodeAsc[pChCodeAsc] & 0xFF)) !== 0) {
134 |       pWork.offs2C34[acc] = 0xFF;
135 | 
136 |       if (ChCodeAsc[pChCodeAsc] & 0x3F) {
137 |         bits_asc -= 4;
138 |         pWork.ChBitsAsc[count] = bits_asc;
139 | 
140 |         const add = (1 << bits_asc);
141 |         acc = ChCodeAsc[pChCodeAsc] >> 4;
142 |         do {
143 |           pWork.offs2D34[acc] = count;
144 |           acc += add;
145 |         } while(acc < 0x100);
146 |       } else {
147 |         bits_asc -= 6;
148 |         pWork.ChBitsAsc[count] = bits_asc;
149 | 
150 |         const add = (1 << bits_asc);
151 |         acc = ChCodeAsc[pChCodeAsc] >> 6;
152 |         do {
153 |           pWork.offs2E34[acc] = count;
154 |           acc += add;
155 |         } while(acc < 0x80);
156 |       }
157 |     } else {
158 |       bits_asc -= 8;
159 |       pWork.ChBitsAsc[count] = bits_asc;
160 | 
161 |       const add = (1 << bits_asc);
162 |       acc = ChCodeAsc[pChCodeAsc] >> 8;
163 |       do {
164 |         pWork.offs2EB4[acc] = count;
165 |         acc += add;
166 |       } while(acc < 0x100);
167 |     }
168 |   }
169 | }
170 | 
171 | //-----------------------------------------------------------------------------
172 | // Removes given number of bits in the bit buffer. New bits are reloaded from
173 | // the input buffer, if needed.
174 | // Returns: PKDCL_OK:         Operation was successful
175 | //          PKDCL_STREAM_END: There are no more bits in the input buffer
176 | function WasteBits(pWork, nBits) {
177 |   // If number of bits required is less than number of (bits in the buffer) ?
178 |   if (nBits <= pWork.extra_bits) {
179 |     pWork.extra_bits -= nBits;
180 |     pWork.bit_buff >>>= nBits;
181 |     return PKDCL_OK;
182 |   }
183 | 
184 |   // Load input buffer if necessary
185 |   pWork.bit_buff >>= pWork.extra_bits;
186 |   if (pWork.in_pos === pWork.in_bytes) {
187 |     if ((pWork.in_bytes = pWork.read_buf(pWork.in_buff)) === 0) {
188 |       return PKDCL_STREAM_END;
189 |     }
190 |     pWork.in_pos = 0;
191 |   }
192 | 
193 |   // Update bit buffer
194 |   pWork.bit_buff |= (pWork.in_buff[pWork.in_pos++] << 8);
195 |   pWork.bit_buff >>>= (nBits - pWork.extra_bits);
196 |   pWork.extra_bits = (pWork.extra_bits - nBits) + 8;
197 |   return PKDCL_OK;
198 | }
199 | 
200 | //-----------------------------------------------------------------------------
201 | // Decodes next literal from the input (compressed) data.
202 | // Returns : 0x000: One byte 0x00
203 | //           0x001: One byte 0x01
204 | //           ...
205 | //           0x0FF: One byte 0xFF
206 | //           0x100: Repetition, length of 0x02 bytes
207 | //           0x101: Repetition, length of 0x03 bytes
208 | //           ...
209 | //           0x304: Repetition, length of 0x206 bytes
210 | //           0x305: End of stream
211 | //           0x306: Error
212 | function DecodeLit(pWork) {
213 |   if(pWork.bit_buff & 1) {
214 |     // Remove one bit from the input data
215 |     if(WasteBits(pWork, 1)) {
216 |       return 0x306;
217 |     }
218 | 
219 |     // The next 8 bits hold the index to the length code table
220 |     let length_code = pWork.LengthCodes[pWork.bit_buff & 0xFF];
221 | 
222 |     // Remove the apropriate number of bits
223 |     if(WasteBits(pWork, pWork.LenBits[length_code])) {
224 |       return 0x306;
225 |     }
226 | 
227 |     // Are there some extra bits for the obtained length code ?
228 |     const extra_length_bits = pWork.ExLenBits[length_code];
229 |     if(extra_length_bits !== 0) {
230 |       const extra_length = pWork.bit_buff & ((1 << extra_length_bits) - 1);
231 |       if(WasteBits(pWork, extra_length_bits)) {
232 |         if((length_code + extra_length) != 0x10E) {
233 |           return 0x306;
234 |         }
235 |       }
236 |       length_code = pWork.LenBase[length_code] + extra_length;
237 |     }
238 | 
239 |     // In order to distinguish uncompressed byte from repetition length,
240 |     // we have to add 0x100 to the length.
241 |     return length_code + 0x100;
242 |   }
243 | 
244 |   // Remove one bit from the input data
245 |   if(WasteBits(pWork, 1)) {
246 |     return 0x306;
247 |   }
248 | 
249 |   // If the binary compression type, read 8 bits and return them as one byte.
250 |   if(pWork.ctype === CMP_BINARY) {
251 |     const uncompressed_byte = pWork.bit_buff & 0xFF;
252 | 
253 |     if(WasteBits(pWork, 8)) {
254 |       return 0x306;
255 |     }
256 |     return uncompressed_byte;
257 |   }
258 | 
259 |   // When ASCII compression ...
260 |   let value;
261 |   if (pWork.bit_buff & 0xFF) {
262 |     value = pWork.offs2C34[pWork.bit_buff & 0xFF];
263 | 
264 |     if (value == 0xFF) {
265 |       if (pWork.bit_buff & 0x3F) {
266 |         if (WasteBits(pWork, 4)) {
267 |           return 0x306;
268 |         }
269 | 
270 |         value = pWork.offs2D34[pWork.bit_buff & 0xFF];
271 |       } else {
272 |         if (WasteBits(pWork, 6)) {
273 |           return 0x306;
274 |         }
275 | 
276 |         value = pWork.offs2E34[pWork.bit_buff & 0x7F];
277 |       }
278 |     }
279 |   } else {
280 |     if(WasteBits(pWork, 8)) {
281 |       return 0x306;
282 |     }
283 | 
284 |     value = pWork.offs2EB4[pWork.bit_buff & 0xFF];
285 |   }
286 | 
287 |   return WasteBits(pWork, pWork.ChBitsAsc[value]) ? 0x306 : value;
288 | }
289 | 
290 | //-----------------------------------------------------------------------------
291 | // Decodes the distance of the repetition, backwards relative to the
292 | // current output buffer position
293 | function DecodeDist(pWork, rep_length) {
294 |   // Next 2-8 bits in the input buffer is the distance position code
295 |   const dist_pos_code = pWork.DistPosCodes[pWork.bit_buff & 0xFF];
296 |   const dist_pos_bits = pWork.DistBits[dist_pos_code];
297 |   if (WasteBits(pWork, dist_pos_bits)) {
298 |     return 0;
299 |   }
300 | 
301 |   let distance;
302 |   if (rep_length === 2) {
303 |     // If the repetition is only 2 bytes length,
304 |     // then take 2 bits from the stream in order to get the distance
305 |     distance = (dist_pos_code << 2) | (pWork.bit_buff & 0x03);
306 |     if (WasteBits(pWork, 2)) {
307 |       return 0;
308 |     }
309 |   } else {
310 |     // If the repetition is more than 2 bytes length,
311 |     // then take "dsize_bits" bits in order to get the distance
312 |     distance = (dist_pos_code << pWork.dsize_bits) | (pWork.bit_buff & pWork.dsize_mask);
313 |     if (WasteBits(pWork, pWork.dsize_bits)) {
314 |       return 0;
315 |     }
316 |   }
317 |   return distance + 1;
318 | }
319 | 
320 | function Expand(pWork) {
321 |   let outputPos = 0x1000;          // Initialize output buffer position
322 | 
323 |   // Decode the next literal from the input data.
324 |   // The returned literal can either be an uncompressed byte (next_literal < 0x100)
325 |   // or an encoded length of the repeating byte sequence that
326 |   // is to be copied to the current buffer position
327 |   let result, next_literal;
328 |   while ((result = next_literal = DecodeLit(pWork)) < 0x305) {
329 |     // If the literal is greater than 0x100, it holds length
330 |     // of repeating byte sequence
331 |     // literal of 0x100 means repeating sequence of 0x2 bytes
332 |     // literal of 0x101 means repeating sequence of 0x3 bytes
333 |     // ...
334 |     // literal of 0x305 means repeating sequence of 0x207 bytes
335 |     if(next_literal >= 0x100) {
336 |       // Get the length of the repeating sequence.
337 |       // Note that the repeating block may overlap the current output position,
338 |       // for example if there was a sequence of equal bytes
339 |       let rep_length = next_literal - 0xFE;
340 |       // Get backward distance to the repetition
341 |       const minus_dist = DecodeDist(pWork, rep_length);
342 |       if (minus_dist === 0) {
343 |         result = 0x306;
344 |         break;
345 |       }
346 | 
347 |       // Target and source pointer
348 |       let target = outputPos;
349 |       let source = target - minus_dist;
350 | 
351 |       // Update buffer output position
352 |       outputPos += rep_length;
353 | 
354 |       // Copy the repeating sequence
355 |       const out_buff = pWork.out_buff;
356 |       while (rep_length-- > 0) {
357 |         out_buff[target++] = out_buff[source++];
358 |       }
359 |     } else {
360 |       pWork.out_buff[outputPos++] = next_literal;
361 |     }
362 | 
363 |     // Flush the output buffer, if number of extracted bytes has reached the end
364 |     if (outputPos >= 0x2000) {
365 |       // Copy decompressed data into user buffer
366 |       pWork.write_buf(pWork.out_buff.subarray(0x1000, 0x2000));
367 | 
368 |       // Now copy the decompressed data to the first half of the buffer.
369 |       // This is needed because the decompression might reuse them as repetitions.
370 |       // Note that if the output buffer overflowed previously, the extra decompressed bytes
371 |       // are stored in "out_buff_overflow", and they will now be
372 |       // within decompressed part of the output buffer.
373 |       pWork.out_buff.copyWithin(0, 0x1000, outputPos);
374 |       outputPos -= 0x1000;
375 |     }
376 |   }
377 | 
378 |   // Flush any remaining decompressed bytes
379 |   pWork.write_buf(pWork.out_buff.subarray(0x1000, outputPos));
380 |   return result;
381 | }
382 | 
383 | //-----------------------------------------------------------------------------
384 | // Main exploding function.
385 | export function explode(read_buf, write_buf) {
386 |   const buffer = new ArrayBuffer(0x3104);
387 |   const pWork = {
388 |     read_buf,
389 |     write_buf,
390 |     in_pos: 3,
391 |     extra_bits: 0,
392 |     in_buff: new Uint8Array(buffer, 0, 0x800),
393 |     DistPosCodes: new Uint8Array(buffer, 0x800, 0x100),
394 |     LengthCodes: new Uint8Array(buffer, 0x900, 0x100),
395 |     offs2C34: new Uint8Array(buffer, 0xA00, 0x100),
396 |     offs2D34: new Uint8Array(buffer, 0xB00, 0x100),
397 |     offs2E34: new Uint8Array(buffer, 0xC00, 0x80),
398 |     offs2EB4: new Uint8Array(buffer, 0xC80, 0x100),
399 |     ChBitsAsc: new Uint8Array(buffer, 0xD80, 0x100),
400 |     DistBits: new Uint8Array(buffer, 0xE80, 0x40),
401 |     LenBits: new Uint8Array(buffer, 0xEC0, 0x10),
402 |     ExLenBits: new Uint8Array(buffer, 0xED0, 0x10),
403 |     LenBase: new Uint16Array(buffer, 0xEE0, 0x10),
404 |     out_buff: new Uint8Array(buffer, 0xF00, 0x2204),
405 |   };
406 |   pWork.in_bytes = read_buf(pWork.in_buff);
407 |   if (pWork.in_bytes <= 4) {
408 |     return CMP_BAD_DATA;
409 |   }
410 |   pWork.ctype = pWork.in_buff[0];
411 |   pWork.dsize_bits = pWork.in_buff[1];
412 |   pWork.bit_buff = pWork.in_buff[2];
413 | 
414 |   // Test for the valid dictionary size
415 |   if(4 > pWork.dsize_bits || pWork.dsize_bits > 6) {
416 |     return CMP_INVALID_DICTSIZE;
417 |   }
418 | 
419 |   pWork.dsize_mask = 0xFFFF >> (0x10 - pWork.dsize_bits); // Shifted by 'sar' instruction
420 | 
421 |   if(pWork.ctype != CMP_BINARY) {
422 |     if(pWork.ctype != CMP_ASCII) {
423 |       return CMP_INVALID_MODE;
424 |     }
425 | 
426 |     pWork.ChBitsAsc.set(ChBitsAsc);
427 |     GenAscTabs(pWork);
428 |   }
429 | 
430 |   pWork.LenBits.set(LenBits);
431 |   GenDecodeTabs(pWork.LengthCodes, LenCode, pWork.LenBits, pWork.LenBits.length);
432 |   pWork.ExLenBits.set(ExLenBits);
433 |   pWork.LenBase.set(LenBase);
434 |   pWork.DistBits.set(DistBits);
435 |   GenDecodeTabs(pWork.DistPosCodes, DistCode, pWork.DistBits, pWork.DistBits.length);
436 |   if(Expand(pWork) !== 0x306) {
437 |     return CMP_NO_ERROR;
438 |   }
439 |       
440 |   return CMP_ABORT;
441 | }
442 | 
443 | export default explode;
444 | 


--------------------------------------------------------------------------------
/src/api/game.worker.js:
--------------------------------------------------------------------------------
  1 | import DiabloBinary from './Diablo.wasm';
  2 | import DiabloModule from './Diablo.jscc';
  3 | import SpawnBinary from './DiabloSpawn.wasm';
  4 | import SpawnModule from './DiabloSpawn.jscc';
  5 | import axios from 'axios';
  6 | 
  7 | import websocket_open from './websocket';
  8 | 
  9 | const DiabloSize = 1466809;
 10 | const SpawnSize = 1337416;
 11 | 
 12 | /* eslint-disable-next-line no-restricted-globals */
 13 | const worker = self;
 14 | 
 15 | let canvas = null, context = null;
 16 | let imageData = null;
 17 | let files = null;
 18 | let renderBatch = null;
 19 | let drawBelt = null;
 20 | let is_spawn = false;
 21 | let websocket = null;
 22 | 
 23 | function onError(err, action="error") {
 24 |   if (err instanceof Error) {
 25 |     worker.postMessage({action, error: err.toString(), stack: err.stack});
 26 |   } else {
 27 |     worker.postMessage({action, error: err.toString()});
 28 |   }
 29 | }
 30 | 
 31 | const ChunkSize = 1 << 20;
 32 | class RemoteFile {
 33 |   constructor(url) {
 34 |     const request = new XMLHttpRequest();
 35 |     request.open('HEAD', url, false);
 36 |     request.send();
 37 |     if (request.status < 200 || request.status >= 300) {
 38 |       throw Error('Failed to load remote file');
 39 |     }
 40 |     this.byteLength = parseInt(request.getResponseHeader('Content-Length'));
 41 | 
 42 |     this.url = url;
 43 | 
 44 |     this.buffer = new Uint8Array(this.byteLength);
 45 |     this.chunks = new Uint8Array(((this.byteLength + ChunkSize - 1) >> 20) | 0);
 46 |   }
 47 | 
 48 |   subarray(start, end) {
 49 |     let chunk0 = (start / ChunkSize) | 0;
 50 |     let chunk1 = ((end + ChunkSize - 1) / ChunkSize) | 0;
 51 |     let missing0 = chunk1, missing1 = chunk0;
 52 |     for (let i = chunk0; i < chunk1; ++i) {
 53 |       if (!this.chunks[i]) {
 54 |         missing0 = Math.min(missing0, i);
 55 |         missing1 = Math.max(missing1, i);
 56 |       }
 57 |     }
 58 |     if (missing0 <= missing1) {
 59 |       const request = new XMLHttpRequest();
 60 |       request.open('GET', this.url, false);
 61 |       request.setRequestHeader('Range', `bytes=${missing0 * ChunkSize}-${Math.min(missing1 * ChunkSize + ChunkSize - 1, this.byteLength - 1)}`);
 62 |       request.responseType = 'arraybuffer';
 63 |       request.send();
 64 |       if (request.status < 200 || request.status >= 300) {
 65 |         throw Error('Failed to load remote file');
 66 |       } else {
 67 |         const header = request.getResponseHeader('Content-Range');
 68 |         let m, start = 0;
 69 |         if (header && (m = header.match(/bytes (\d+)-(\d+)\/(\d+)/))) {
 70 |           start = parseInt(m[1]);
 71 |         }
 72 |         this.buffer.set(new Uint8Array(request.response), start);
 73 |         chunk0 = ((start + ChunkSize - 1) / ChunkSize) | 0;
 74 |         chunk1 = ((start + request.response.byteLength + ChunkSize - 1) / ChunkSize) | 0;
 75 |         for (let i = chunk0; i < chunk1; ++i) {
 76 |           this.chunks[i] = 1;
 77 |         }
 78 |       }
 79 |     }
 80 |     return this.buffer.subarray(start, end);
 81 |   }
 82 | }
 83 | 
 84 | const DApi = {
 85 |   exit_error(error) {
 86 |     throw Error(error);
 87 |   },
 88 | 
 89 |   exit_game() {
 90 |     worker.postMessage({action: "exit"});
 91 |   },
 92 |   current_save_id(id) {
 93 |     worker.postMessage({action: "current_save", name: id >= 0 ? (is_spawn ? `spawn${id}.sv` : `single_${id}.sv`) : null});
 94 |   },
 95 | 
 96 |   get_file_size(path) {
 97 |     const data = files.get(path.toLowerCase());
 98 |     return data ? data.byteLength : 0;
 99 |   },
100 |   get_file_contents(path, array, offset) {
101 |     const data = files.get(path.toLowerCase());
102 |     if (data) {
103 |       array.set(data.subarray(offset, offset + array.byteLength));
104 |     }
105 |   },
106 |   put_file_contents(path, array) {
107 |     path = path.toLowerCase();
108 |     // if (!path.match(/^(spawn\d+\.sv|single_\d+\.sv|config\.ini)$/i)) {
109 |     //   alert(`Bad file name: ${path}`);
110 |     // }
111 |     files.set(path, array);
112 |     worker.postMessage({action: "fs", func: "update", params: [path, array]});
113 |   },
114 |   remove_file(path) {
115 |     path = path.toLowerCase();
116 |     files.delete(path);
117 |     worker.postMessage({action: "fs", func: "delete", params: [path]});
118 |   },
119 | 
120 |   set_cursor(x, y) {
121 |     worker.postMessage({action: "cursor", x, y});
122 |   },
123 |   open_keyboard(...args) {
124 |     worker.postMessage({action: "keyboard", rect: [...args]});
125 |   },
126 |   close_keyboard() {
127 |     worker.postMessage({action: "keyboard", rect: null});
128 |   },
129 | 
130 |   use_websocket(flag) {
131 |     if (flag) {
132 |       if (!websocket || websocket.readyState !== 1) {
133 |         const sock = websocket = websocket_open('wss://diablo.rivsoft.net/websocket', data => {
134 |           if (websocket === sock) {
135 |             try_api(() => {
136 |               const ptr = wasm._DApi_AllocPacket(data.byteLength);
137 |               wasm.HEAPU8.set(new Uint8Array(data), ptr);
138 |             });
139 |           }
140 |         }, code => {
141 |           if (typeof code !== "number") {
142 |             throw code;
143 |           } else {
144 |             call_api("SNet_WebsocketStatus", code);
145 |           }
146 |         });
147 |       } else {
148 |         call_api("SNet_WebsocketStatus", 0);
149 |       }
150 |     } else {
151 |       if (websocket) {
152 |         websocket.close();
153 |       }
154 |       websocket = null;
155 |     }
156 |   },
157 |   websocket_closed() {
158 |     return websocket ? websocket.readyState !== 1 : false;
159 |   },
160 | };
161 | /*
162 | let frameTime = 0, lastTime = 0;
163 | function getFPS() {
164 |   const time = performance.now();
165 |   if (!lastTime) {
166 |     lastTime = time;
167 |   }
168 |   frameTime = 0.9 * frameTime + 0.1 * (time - lastTime);
169 |   lastTime = time;
170 |   return frameTime ? 1000.0 / frameTime : 0.0;
171 | }
172 | */
173 | const DApi_renderLegacy = {
174 |   draw_begin() {
175 |     renderBatch = {
176 |       images: [],
177 |       text: [],
178 |       clip: null,
179 |       belt: drawBelt,
180 |     };
181 |     drawBelt = null;
182 |   },
183 |   draw_blit(x, y, w, h, data) {
184 |     renderBatch.images.push({x, y, w, h, data: data.slice()});
185 |   },
186 |   draw_clip_text(x0, y0, x1, y1) {
187 |     renderBatch.clip = {x0, y0, x1, y1};
188 |   },
189 |   draw_text(x, y, text, color) {
190 |     renderBatch.text.push({x, y, text, color});
191 |   },
192 |   draw_end() {
193 |     //DApi.draw_text(10, 10, `FPS: ${getFPS().toFixed(1)} (Transfer)`, 0xFFCC00);
194 |     const transfer = renderBatch.images.map(({data}) => data.buffer);
195 |     if (renderBatch.belt) {
196 |       transfer.push(renderBatch.belt.buffer);
197 |     }
198 |     worker.postMessage({action: "render", batch: renderBatch}, transfer);
199 |     renderBatch = null;
200 |   },
201 |   draw_belt(items) {
202 |     drawBelt = items.slice();
203 |   },
204 | };
205 | 
206 | const DApi_renderOffscreen = {
207 |   draw_begin() {
208 |     context.save();
209 |     context.font = 'bold 13px Times New Roman';
210 |   },
211 |   draw_blit(x, y, w, h, data) {
212 |     imageData.data.set(data);
213 |     context.putImageData(imageData, x, y);
214 |   },
215 |   draw_clip_text(x0, y0, x1, y1) {
216 |     context.beginPath();
217 |     context.rect(x0, y0, x1 - x0, y1 - y0);
218 |     context.clip();
219 |   },
220 |   draw_text(x, y, text, color) {
221 |     const r = ((color >> 16) & 0xFF);
222 |     const g = ((color >> 8) & 0xFF);
223 |     const b = (color & 0xFF);
224 |     context.fillStyle = `rgb(${r}, ${g}, ${b})`;
225 |     context.fillText(text, x, y + 22);
226 |   },
227 |   draw_end() {
228 |     //DApi.draw_text(10, 10, `FPS: ${getFPS().toFixed(1)} (Offscreen)`, 0xFFCC00);
229 |     context.restore();
230 |     const bitmap = canvas.transferToImageBitmap();
231 |     const transfer = [bitmap];
232 |     if (drawBelt) {
233 |       transfer.push(drawBelt.buffer);
234 |     }
235 |     worker.postMessage({action: "render", batch: {bitmap, belt: drawBelt}}, transfer);
236 |     drawBelt = null;
237 |   },
238 |   draw_belt(items) {
239 |     drawBelt = items.slice();
240 |   },
241 | };
242 | 
243 | let audioBatch = null, audioTransfer = null;
244 | let maxSoundId = 0, maxBatchId = 0;
245 | ["create_sound_raw", "create_sound", "duplicate_sound"].forEach(func => {
246 |   DApi[func] = function(...params) {
247 |     if (audioBatch) {
248 |       maxBatchId = params[0] + 1;
249 |       audioBatch.push({func, params});
250 |       if (func !== "duplicate_sound") {
251 |         audioTransfer.push(params[1].buffer);
252 |       }
253 |     } else {
254 |       maxSoundId = params[0] + 1;
255 |       const transfer = [];
256 |       if (func !== "duplicate_sound") {
257 |         transfer.push(params[1].buffer);
258 |       }
259 |       worker.postMessage({action: "audio", func, params}, transfer);
260 |     }
261 |   };
262 | });
263 | ["play_sound", "set_volume", "stop_sound", "delete_sound"].forEach(func => {
264 |   DApi[func] = function(...params) {
265 |     if (audioBatch && params[0] >= maxSoundId) {
266 |       audioBatch.push({func, params});
267 |     } else {
268 |       worker.postMessage({action: "audio", func, params});
269 |     }
270 |   }
271 | });
272 | 
273 | let packetBatch = null;
274 | DApi.websocket_send = function(data) {
275 |   if (websocket) {
276 |     websocket.send(data);
277 |   } else if (packetBatch) {
278 |     packetBatch.push(data.slice().buffer);
279 |   } else {
280 |     worker.postMessage({action: "packet", buffer: data});
281 |   }
282 | };
283 | 
284 | worker.DApi = DApi;
285 | 
286 | let wasm = null;
287 | 
288 | function try_api(func) {
289 |   try {
290 |     func();
291 |   } catch (e) {
292 |     onError(e);
293 |   }
294 | }
295 | 
296 | function call_api(func, ...params) {
297 |   try_api(() => {
298 |     const nested = (audioBatch != null);
299 |     if (!nested) {
300 |       audioBatch = [];
301 |       audioTransfer = [];
302 |       packetBatch = [];
303 |     }
304 |     if (func !== "text") {
305 |       wasm["_" + func](...params);
306 |     } else {
307 |       const ptr = wasm._DApi_SyncTextPtr();
308 |       const text = params[0];
309 |       const length = Math.min(text.length, 255);
310 |       const heap = wasm.HEAPU8;
311 |       for (let i = 0; i < length; ++i) {
312 |         heap[ptr + i] = text.charCodeAt(i);
313 |       }
314 |       heap[ptr + length] = 0;
315 |       wasm._DApi_SyncText(params[1]);
316 |     }
317 |     if (!nested) {
318 |       if (audioBatch.length) {
319 |         maxSoundId = maxBatchId;
320 |         worker.postMessage({action: "audioBatch", batch: audioBatch}, audioTransfer);
321 |       }
322 |       if (packetBatch.length) {
323 |         worker.postMessage({action: "packetBatch", batch: packetBatch}, packetBatch);
324 |       }
325 |       audioBatch = null;
326 |       audioTransfer = null;
327 |       packetBatch = null;
328 |     }
329 |   });
330 | }
331 | 
332 | function progress(text, loaded, total) {
333 |   worker.postMessage({action: "progress", text, loaded, total});
334 | }
335 | 
336 | const readFile = (file, progress) => new Promise((resolve, reject) => {
337 |   const reader = new FileReader();
338 |   reader.onload = () => {
339 |     if (progress) {
340 |       progress({loaded: file.size});
341 |     }
342 |     resolve(reader.result);
343 |   };
344 |   reader.onerror = () => reject(reader.error);
345 |   reader.onabort = () => reject();
346 |   if (progress) {
347 |     reader.addEventListener("progress", progress);
348 |   }
349 |   reader.readAsArrayBuffer(file);
350 | });
351 | 
352 | async function initWasm(spawn, progress) {
353 |   const binary = await axios.request({
354 |     url: spawn ? SpawnBinary : DiabloBinary,
355 |     responseType: 'arraybuffer',
356 |     onDownloadProgress: progress,
357 |   });
358 |   const result = await (spawn ? SpawnModule : DiabloModule)({wasmBinary: binary.data}).ready;
359 |   progress({loaded: 2000000});
360 |   return result;
361 | }
362 | 
363 | async function init_game(mpq, spawn, offscreen) {
364 |   is_spawn = spawn;
365 |   if (offscreen) {
366 |     canvas = new OffscreenCanvas(640, 480);
367 |     context = canvas.getContext("2d");
368 |     imageData = context.createImageData(640, 480);
369 |     Object.assign(DApi, DApi_renderOffscreen);
370 |   } else {
371 |     Object.assign(DApi, DApi_renderLegacy);
372 |   }
373 | 
374 |   if (!mpq) {
375 |     const name = (spawn ? 'spawn.mpq' : 'diabdat.mpq');
376 |     if (!files.has(name)) {
377 |       // This should never happen, but we do support remote loading
378 |       files.set(name, new RemoteFile(`${process.env.PUBLIC_URL}/${name}`));
379 |     }
380 |   }
381 | 
382 |   progress("Loading...");
383 |   let mpqLoaded = 0, mpqTotal = (mpq ? mpq.size : 0), wasmLoaded = 0, wasmTotal = (spawn ? SpawnSize : DiabloSize);
384 |   const wasmWeight = 5;
385 |   function updateProgress() {
386 |     progress("Loading...", mpqLoaded + wasmLoaded * wasmWeight, mpqTotal + wasmTotal * wasmWeight);
387 |   }
388 |   const loadWasm = initWasm(spawn, e => {
389 |     wasmLoaded = Math.min(e.loaded, wasmTotal);
390 |     updateProgress();
391 |   });
392 |   let loadMpq = mpq ? readFile(mpq, e => {
393 |     mpqLoaded = e.loaded;
394 |     updateProgress();
395 |   }) : Promise.resolve(null);
396 |   [wasm, mpq] = await Promise.all([loadWasm, loadMpq]);
397 | 
398 |   if (mpq) {
399 |     files.set(spawn ? 'spawn.mpq' : 'diabdat.mpq', new Uint8Array(mpq));
400 |   }
401 | 
402 |   progress("Initializing...");
403 | 
404 |   const vers = process.env.VERSION.match(/(\d+)\.(\d+)\.(\d+)/);
405 | 
406 |   //wasm._SNet_InitWebsocket();
407 |   wasm._DApi_Init(Math.floor(performance.now()), offscreen ? 1 : 0, parseInt(vers[1]), parseInt(vers[2]), parseInt(vers[3]));
408 | 
409 |   setInterval(() => {
410 |     call_api("DApi_Render", Math.floor(performance.now()));  
411 |   }, 50);
412 | }
413 | 
414 | worker.addEventListener("message", ({data}) => {
415 |   switch (data.action) {
416 |   case "init":
417 |     files = data.files;
418 |     init_game(data.mpq, data.spawn, data.offscreen).then(
419 |       () => worker.postMessage({action: "loaded"}),
420 |       e => onError(e, "failed"));
421 |     break;
422 |   case "event":
423 |     call_api(data.func, ...data.params);
424 |     break;
425 |   case "packet":
426 |     try_api(() => {
427 |       const ptr = wasm._DApi_AllocPacket(data.buffer.byteLength);
428 |       wasm.HEAPU8.set(new Uint8Array(data.buffer), ptr);
429 |     });
430 |     break;
431 |   case "packetBatch":
432 |     try_api(() => {
433 |       for (let packet of data.batch) {
434 |         const ptr = wasm._DApi_AllocPacket(packet.byteLength);
435 |         wasm.HEAPU8.set(new Uint8Array(packet), ptr);
436 |       }
437 |     });
438 |     break;
439 |   default:
440 |   }
441 | });
442 | 


--------------------------------------------------------------------------------
/src/api/load_spawn.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const SpawnSizes = [50274091, 25830791];
 4 | 
 5 | export { SpawnSizes };
 6 | 
 7 | export default async function load_spawn(api, fs) {
 8 |   let file = fs.files.get('spawn.mpq');
 9 |   if (file && !SpawnSizes.includes(file.byteLength)) {
10 |     fs.files.delete('spawn.mpq');
11 |     await fs.delete('spawn.mpq');
12 |     file = null;
13 |   }
14 |   if (!file) {
15 |     const spawn = await axios.request({
16 |       url: process.env.PUBLIC_URL + '/spawn.mpq',
17 |       responseType: 'arraybuffer',
18 |       onDownloadProgress: e => {
19 |         if (api.onProgress) {
20 |           api.onProgress({text: 'Downloading...', loaded: e.loaded, total: e.total || SpawnSizes[1]});
21 |         }
22 |       },
23 |       headers: {
24 |         'Cache-Control': 'max-age=31536000'
25 |       }
26 |     });
27 |     if (!SpawnSizes.includes(spawn.data.byteLength)) {
28 |       throw Error("Invalid spawn.mpq size. Try clearing cache and refreshing the page.");
29 |     }
30 |     const data = new Uint8Array(spawn.data);
31 |     fs.files.set('spawn.mpq', data);
32 |     fs.update('spawn.mpq', data.slice());
33 |   }
34 |   return fs;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/api/loader.js:
--------------------------------------------------------------------------------
  1 | import Worker from './game.worker.js';
  2 | import init_sound from './sound';
  3 | import load_spawn from './load_spawn';
  4 | import webrtc_open from './webrtc';
  5 | 
  6 | function onRender(api, ctx, {bitmap, images, text, clip, belt}) {
  7 |   if (bitmap) {
  8 |     ctx.transferFromImageBitmap(bitmap);
  9 |   } else {
 10 |     for (let {x, y, w, h, data} of images) {
 11 |       const image = ctx.createImageData(w, h);
 12 |       image.data.set(data);
 13 |       ctx.putImageData(image, x, y);
 14 |     }
 15 |     if (text.length) {
 16 |       ctx.save();
 17 |       ctx.font = 'bold 13px Times New Roman';
 18 |       if (clip) {
 19 |         const {x0, y0, x1, y1} = clip;
 20 |         ctx.beginPath();
 21 |         ctx.rect(x0, y0, x1 - x0, y1 - y0);
 22 |         ctx.clip();
 23 |       }
 24 |       for (let {x, y, text: str, color} of text) {
 25 |         const r = ((color >> 16) & 0xFF);
 26 |         const g = ((color >> 8) & 0xFF);
 27 |         const b = (color & 0xFF);
 28 |         ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
 29 |         ctx.fillText(str, x, y + 22);
 30 |       }
 31 |       ctx.restore();
 32 |     }
 33 |   }
 34 | 
 35 |   api.updateBelt(belt);
 36 | }
 37 | 
 38 | function testOffscreen() {
 39 |   return false;
 40 |   // This works but I couldn't see any performance difference, and support for 2D canvas in workers is very poor.
 41 |   // In this mode, instead of sending a batch of areas to draw back to the main thread, the worker does all drawing on its own and sends a complete bitmap object back.
 42 |   // However, this effectively clears the worker's canvas, so we need to redraw the whole frame every time, which defeats the performance gained from reduced copying.
 43 |   /*try {
 44 |     const canvas = document.createElement("canvas");
 45 |     const offscreen = canvas.transferControlToOffscreen();
 46 |     const context = offscreen.getContext("2d");
 47 |     return context != null;
 48 |   } catch (e) {
 49 |     return false;
 50 |   }*/
 51 | }
 52 | 
 53 | async function do_load_game(api, audio, mpq, spawn) {
 54 |   const fs = await api.fs;
 55 |   if (spawn && !mpq) {
 56 |     await load_spawn(api, fs);
 57 |   }
 58 | 
 59 |   let context = null, offscreen = false;
 60 |   if (testOffscreen()) {
 61 |     context = api.canvas.getContext("bitmaprenderer");
 62 |     offscreen = true;
 63 |   } else {
 64 |     context = api.canvas.getContext("2d", {alpha: false});
 65 |   }
 66 |   return await new Promise((resolve, reject) => {
 67 |     try {
 68 |       const worker = new Worker();
 69 | 
 70 |       let packetQueue = [];
 71 |       const webrtc = webrtc_open(data => {
 72 |         packetQueue.push(data);
 73 |       });
 74 | 
 75 |       worker.addEventListener("message", ({data}) => {
 76 |         switch (data.action) {
 77 |         case "loaded":
 78 |           resolve((func, ...params) => worker.postMessage({action: "event", func, params}));
 79 |           break;
 80 |         case "render":
 81 |           onRender(api, context, data.batch);
 82 |           break;
 83 |         case "audio":
 84 |           audio[data.func](...data.params);
 85 |           break;
 86 |         case "audioBatch":
 87 |           for (let {func, params} of data.batch) {
 88 |             audio[func](...params);
 89 |           }
 90 |           break;
 91 |         case "fs":
 92 |           fs[data.func](...data.params);
 93 |           break;
 94 |         case "cursor":
 95 |           api.setCursorPos(data.x, data.y);
 96 |           break;
 97 |         case "keyboard":
 98 |           api.openKeyboard(data.rect);
 99 |           break;
100 |         case "error":
101 |           audio.stop_all();
102 |           api.onError(data.error, data.stack);
103 |           break;
104 |         case "failed":
105 |           reject({message: data.error, stack: data.stack});
106 |           break;
107 |         case "progress":
108 |           api.onProgress({text: data.text, loaded: data.loaded, total: data.total});
109 |           break;
110 |         case "exit":
111 |           api.onExit();
112 |           break;
113 |         case "current_save":
114 |           api.setCurrentSave(data.name);
115 |           break;
116 |           case "packet":
117 |           webrtc.send(data.buffer);
118 |           break;
119 |         case "packetBatch":
120 |           for (let packet of data.batch) {
121 |             webrtc.send(packet);
122 |           }
123 |           break;
124 |         default:
125 |         }
126 |       });          
127 |       const transfer= [];
128 |       for (let [, file] of fs.files) {
129 |         transfer.push(file.buffer);
130 |       }
131 |       worker.postMessage({action: "init", files: fs.files, mpq, spawn, offscreen}, transfer);
132 |       setInterval(() => {
133 |         if (packetQueue.length) {
134 |           worker.postMessage({action: "packetBatch", batch: packetQueue}, packetQueue);
135 |           packetQueue.length = 0;
136 |         }
137 |       }, 20);
138 |       delete fs.files;
139 |     } catch (e) {
140 |       reject(e);
141 |     }
142 |   });
143 | }
144 | 
145 | export default function load_game(api, mpq, spawn) {
146 |   const audio = init_sound();
147 |   return do_load_game(api, audio, mpq, spawn);
148 | }
149 | 


--------------------------------------------------------------------------------
/src/api/packet.js:
--------------------------------------------------------------------------------
  1 | export class buffer_reader {
  2 |   constructor(buffer) {
  3 |     this.buffer = (buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer));
  4 |     this.pos = 0;
  5 |   }
  6 |   done() {
  7 |     return this.pos === this.buffer.byteLength;
  8 |   }
  9 |   read8() {
 10 |     if (this.pos >= this.buffer.byteLength) {
 11 |       throw Error('packet too small');
 12 |     }
 13 |     return this.buffer[this.pos++];
 14 |   }
 15 |   read16() {
 16 |     const {pos, buffer} = this;
 17 |     if (pos + 2 > buffer.byteLength) {
 18 |       throw Error('packet too small');
 19 |     }
 20 |     const result = buffer[pos] | (buffer[pos + 1] << 8);
 21 |     this.pos += 2;
 22 |     return result;
 23 |   }
 24 |   read32() {
 25 |     const {pos, buffer} = this;
 26 |     if (pos + 4 > buffer.byteLength) {
 27 |       throw Error('packet too small');
 28 |     }
 29 |     const result = buffer[pos] | (buffer[pos + 1] << 8) | (buffer[pos + 2] << 16) | (buffer[pos + 3] << 24);
 30 |     this.pos += 4;
 31 |     return result;
 32 |   }
 33 |   read_str() {
 34 |     const length = this.read8();
 35 |     const {pos, buffer} = this;
 36 |     if (pos + length > buffer.byteLength) {
 37 |       throw Error('packet too small');
 38 |     }
 39 |     const result = String.fromCharCode(...buffer.subarray(pos, pos + length));
 40 |     this.pos += length;
 41 |     return result;
 42 |   }
 43 |   read_buf() {
 44 |     const size = this.read32();
 45 |     const result = this.buffer.subarray(this.pos, this.pos + size);
 46 |     this.pos += size;
 47 |     return result;
 48 |   }
 49 | }
 50 | export class buffer_writer {
 51 |   constructor(length) {
 52 |     this.buffer = new Uint8Array(length);
 53 |     this.pos = 0;
 54 |   }
 55 |   get result() {
 56 |     return this.buffer.buffer;
 57 |   }
 58 |   write8(value) {
 59 |     this.buffer[this.pos++] = value;
 60 |     return this;
 61 |   }
 62 |   write16(value) {
 63 |     const {pos, buffer} = this;
 64 |     buffer[pos] = value;
 65 |     buffer[pos + 1] = value >> 8;
 66 |     this.pos += 2;
 67 |     return this;
 68 |   }
 69 |   write32(value) {
 70 |     const {pos, buffer} = this;
 71 |     buffer[pos] = value;
 72 |     buffer[pos + 1] = value >> 8;
 73 |     buffer[pos + 2] = value >> 16;
 74 |     buffer[pos + 3] = value >> 24;
 75 |     this.pos += 4;
 76 |     return this;
 77 |   }
 78 |   write_str(value) {
 79 |     const length = value.length;
 80 |     this.write8(length);
 81 |     const {pos, buffer} = this;
 82 |     for (let i = 0; i < length; ++i) {
 83 |       buffer[pos + i] = value.charCodeAt(i);
 84 |     }
 85 |     this.pos += length;
 86 |     return this;
 87 |   }
 88 |   rest(value) {
 89 |     this.buffer.set(value, this.pos);
 90 |     this.pos += value.byteLength;
 91 |     return this;
 92 |   }
 93 |   write_buf(value) {
 94 |     this.write32(value.byteLength);
 95 |     this.rest(value);
 96 |     return this;
 97 |   }
 98 | }
 99 | 
100 | export const RejectionReason = {
101 |   JOIN_SUCCESS: 0x00,
102 |   JOIN_ALREADY_IN_GAME: 0x01,
103 |   JOIN_GAME_NOT_FOUND: 0x02,
104 |   JOIN_INCORRECT_PASSWORD: 0x03,
105 |   JOIN_VERSION_MISMATCH: 0x04,
106 |   JOIN_GAME_FULL: 0x05,
107 |   CREATE_GAME_EXISTS: 0x06,
108 | };
109 | 
110 | export function read_packet(reader, types) {
111 |   const code = reader.read8();
112 |   const cls = Object.values(types).find(cls => cls.code === code);
113 |   if (!cls) {
114 |     throw Error('invalid packet code');
115 |   }
116 |   return {type: cls, packet: cls.read(reader)};
117 | }
118 | export function packet_size(type, packet) {
119 |   return (typeof type.size === "function" ? type.size(packet) : type.size) + 1;
120 | }
121 | export function write_packet(type, packet) {
122 |   const size = packet_size(type, packet);
123 |   return type.write(new buffer_writer(size).write8(type.code), packet).result;
124 | }
125 | 
126 | export function make_batch(types) {
127 |   return {
128 |     code: 0x00,
129 |     read: reader => {
130 |       const count = reader.read16();
131 |       const packets = [];
132 |       for (let i = 0; i < count; ++i) {
133 |         packets.push(read_packet(reader, types()));
134 |       }
135 |       return packets;
136 |     },
137 |     size: packets => packets.reduce((sum, {type, packet}) => sum + packet_size(type, packet), 2),
138 |     write: (writer, packets) => {
139 |       writer.write16(packets.length);
140 |       for (let {type, packet} of packets) {
141 |         type.write(writer.write8(type.code), packet);
142 |       }
143 |       return writer;
144 |     },
145 |   };
146 | }
147 | 
148 | export const server_packet = {
149 |   info: {
150 |     code: 0x32,
151 |     read: reader => ({version: reader.read32()}),
152 |     size: 4,
153 |     write: (writer, {version}) => writer.write32(version),
154 |   },
155 |   game_list: {
156 |     code: 0x21,
157 |     read: reader => {
158 |       const count = reader.read16();
159 |       const games = [];
160 |       for (let i = 0; i < count; ++i) {
161 |         games.push({type: reader.read32(), name: reader.read_str()});
162 |       }
163 |       return {games};
164 |     },
165 |     size: ({games}) => games.reduce((sum, {name}) => sum + 5 + name.length, 2),
166 |     write: (writer, {games}) => {
167 |       writer.write16(games.length);
168 |       for (let {type, name} of games) {
169 |         writer.write32(type);
170 |         writer.write_str(name);
171 |       }
172 |       return writer;
173 |     },
174 |   },
175 |   join_accept: {
176 |     code: 0x12,
177 |     read: reader => ({cookie: reader.read32(), index: reader.read8(), seed: reader.read32(), difficulty: reader.read32()}),
178 |     size: 13,
179 |     write: (writer, {cookie, index, seed, difficulty}) => writer.write32(cookie).write8(index).write32(seed).write32(difficulty),
180 |   },
181 |   join_reject: {
182 |     code: 0x15,
183 |     read: reader => ({cookie: reader.read32(), reason: reader.read8()}),
184 |     size: 5,
185 |     write: (writer, {cookie, reason}) => writer.write32(cookie).write8(reason),
186 |   },
187 |   connect: {
188 |     code: 0x13,
189 |     read: reader => ({id: reader.read8()}),
190 |     size: 1,
191 |     write: (writer, {id}) => writer.write8(id),
192 |   },
193 |   disconnect: {
194 |     code: 0x14,
195 |     read: reader => ({id: reader.read8(), reason: reader.read32()}),
196 |     size: 5,
197 |     write: (writer, {id, reason}) => writer.write8(id).write32(reason),
198 |   },
199 |   message: {
200 |     code: 0x01,
201 |     read: reader => ({id: reader.read8(), payload: reader.read_buf()}),
202 |     size: ({payload}) => 5 + payload.byteLength,
203 |     write: (writer, {id, payload}) => writer.write8(id).write_buf(payload),
204 |   },
205 |   turn: {
206 |     code: 0x02,
207 |     read: reader => ({id: reader.read8(), turn: reader.read32()}),
208 |     size: 5,
209 |     write: (writer, {id, turn}) => writer.write8(id).write32(turn),
210 |   },
211 |   batch: make_batch(() => server_packet),
212 | };
213 | 
214 | export const client_packet = {
215 |   info: {
216 |     code: 0x31,
217 |     read: reader => ({version: reader.read32()}),
218 |     size: 4,
219 |     write: (writer, {version}) => writer.write32(version),
220 |   },
221 |   game_list: {
222 |     code: 0x21,
223 |     read: () => ({}),
224 |     size: 0,
225 |     write: writer => writer,
226 |   },
227 |   create_game: {
228 |     code: 0x22,
229 |     read: reader => ({cookie: reader.read32(), name: reader.read_str(), password: reader.read_str(), difficulty: reader.read32()}),
230 |     size: ({name, password}) => 10 + name.length + password.length,
231 |     write: (writer, {cookie, name, password, difficulty}) => writer.write32(cookie).write_str(name).write_str(password).write32(difficulty),
232 |   },
233 |   join_game: {
234 |     code: 0x23,
235 |     read: reader => ({cookie: reader.read32(), name: reader.read_str(), password: reader.read_str()}),
236 |     size: ({name, password}) => 6 + name.length + password.length,
237 |     write: (writer, {cookie, name, password}) => writer.write32(cookie).write_str(name).write_str(password),
238 |   },
239 |   leave_game: {
240 |     code: 0x24,
241 |     read: () => ({}),
242 |     size: 0,
243 |     write: writer => writer,
244 |   },
245 |   drop_player: {
246 |     code: 0x03,
247 |     read: reader => ({id: reader.read8(), reason: reader.read32()}),
248 |     size: 5,
249 |     write: (writer, {id, reason}) => writer.write8(id).write32(reason),
250 |   },
251 |   message: {
252 |     code: 0x01,
253 |     read: reader => ({id: reader.read8(), payload: reader.read_buf()}),
254 |     size: ({payload}) => 5 + payload.byteLength,
255 |     write: (writer, {id, payload}) => writer.write8(id).write_buf(payload),
256 |   },
257 |   turn: {
258 |     code: 0x02,
259 |     read: reader => ({turn: reader.read32()}),
260 |     size: 4,
261 |     write: (writer, {turn}) => writer.write32(turn),
262 |   },
263 |   batch: make_batch(() => server_packet),
264 | };
265 | 


--------------------------------------------------------------------------------
/src/api/savefile.js:
--------------------------------------------------------------------------------
  1 | import { explode } from './explode';
  2 | import codec_decode from './codec';
  3 | 
  4 | function pkzip_decompress(data, out_size) {
  5 |   if (data.length === out_size) {
  6 |     return data;
  7 |   }
  8 | 
  9 |   const output = new Uint8Array(out_size);
 10 |   let in_pos = 0;
 11 |   let out_pos = 0;
 12 |   function read_buf(dst) {
 13 |     const count = Math.min(data.length - in_pos, dst.length);
 14 |     dst.set(data.subarray(in_pos, count));
 15 |     in_pos += count;
 16 |     return count;
 17 |   }
 18 |   function write_buf(src) {
 19 |     if (out_pos + src.length > out_size) {
 20 |       throw Error('decompress buffer overflow');
 21 |     }
 22 |     output.set(src, out_pos);
 23 |     out_pos += src.length;
 24 |   }
 25 | 
 26 |   if (explode(read_buf, write_buf) || out_pos !== out_size) {
 27 |     return null;
 28 |   }
 29 | 
 30 |   return output;
 31 | }
 32 | 
 33 | const hashtable = (function() {
 34 |   const hashtable = new Uint32Array(1280);
 35 |   let seed = 0x00100001;
 36 |   for (let i = 0; i < 256; i++) {
 37 |     for (let j = i; j < 1280; j += 256) {
 38 |       seed = (seed * 125 + 3) % 0x2AAAAB;
 39 |       const a = (seed & 0xFFFF) << 16;
 40 |       seed = (seed * 125 + 3) % 0x2AAAAB;
 41 |       const b = (seed & 0xFFFF);
 42 |       hashtable[j] = a | b;
 43 |     }
 44 |   }
 45 |   return hashtable;
 46 | })();
 47 | export function decrypt(u32, key) {
 48 |   let seed = 0xEEEEEEEE;
 49 |   for (let i = 0; i < u32.length; ++i) {
 50 |     seed += hashtable[0x400 + (key & 0xFF)];
 51 |     u32[i] ^= seed + key;
 52 |     seed = (u32[i] + seed * 33 + 3) | 0;
 53 |     key = ((~key << 0x15) + 0x11111111) | (key >>> 0x0B);
 54 |   }
 55 | }
 56 | export function decrypt8(u8, key) {
 57 |   decrypt(new Uint32Array(u8.buffer, u8.byteOffset, u8.length >> 2), key);
 58 | }
 59 | export function encrypt(u32, key) {
 60 |   let seed = 0xEEEEEEEE;
 61 |   for (let i = 0; i < u32.length; ++i) {
 62 |     seed += hashtable[0x400 + (key & 0xFF)];
 63 |     const orig = u32[i];
 64 |     u32[i] ^= seed + key;
 65 |     seed = (orig + seed * 33 + 3) | 0;
 66 |     key = ((~key << 0x15) + 0x11111111) | (key >>> 0x0B);
 67 |   }
 68 | }
 69 | export function encrypt8(u8, key) {
 70 |   encrypt(new Uint32Array(u8.buffer, u8.byteOffset, u8.length >> 2), key);
 71 | }
 72 | export function hash(name, type) {
 73 |   let seed1 = 0x7FED7FED;
 74 |   let seed2 = 0xEEEEEEEE;
 75 |   for (let i = 0; i < name.length; ++i) {
 76 |     let ch = name.charCodeAt(i);
 77 |     if (ch >= 0x61 && ch <= 0x7A) {
 78 |       ch -= 0x20;
 79 |     }
 80 |     if (ch === 0x2F) {
 81 |       ch = 0x5C;
 82 |     }
 83 |     seed1 = hashtable[type * 256 + ch] ^ (seed1 + seed2);
 84 |     seed2 = (ch + seed1 + seed2 * 33 + 3) | 0;
 85 |   }
 86 |   return seed1 >>> 0;
 87 | }
 88 | 
 89 | export function path_name(name) {
 90 |   const pos = Math.max(name.lastIndexOf('/'), name.lastIndexOf('\\'));
 91 |   return name.substring(pos + 1);
 92 | }
 93 | 
 94 | const Flags = {
 95 |   CompressPkWare: 0x00000100,
 96 |   CompressMulti: 0x00000200,
 97 |   Compressed: 0x0000FF00,
 98 |   Encrypted: 0x00010000,
 99 |   FixSeed: 0x00020000,
100 |   PatchFile: 0x00100000,
101 |   SingleUnit: 0x01000000,
102 |   DummyFile: 0x02000000,
103 |   SectorCrc: 0x04000000,
104 |   Exists: 0x80000000,
105 | };
106 | 
107 | export class MpqReader {
108 |   constructor(buffer) {
109 |     this.buffer = buffer;
110 |     this.u8 = new Uint8Array(buffer);
111 |     this.u32 = new Uint32Array(buffer, 0, buffer.byteLength >> 2);
112 | 
113 |     this.readHeader();
114 |   }
115 | 
116 |   readHeader() {
117 |     const {u8, u32} = this;
118 |     if (u32[0] !== 0x1A51504D) {
119 |       throw Error('invalid MPQ header');
120 |     }
121 |     const sizeId = u8[14] + (u8[15] << 8);
122 |     const hashOffset = u32[4];
123 |     const blockOffset = u32[5];
124 |     const hashCount = u32[6];
125 |     const blockCount = u32[7];
126 |     this.hashTable = this.readTable(hashOffset, hashCount, "(hash table)");
127 |     this.blockTable = this.readTable(blockOffset, blockCount, "(block table)");
128 |     this.blockSize = 1 << (9 + sizeId);
129 |   }
130 | 
131 |   readTable(offset, count, key) {
132 |     const buffer = new Uint32Array(this.buffer.slice(offset, offset + count * 16));
133 |     decrypt(buffer, hash(key, 3));
134 |     return buffer;
135 |   }
136 | 
137 |   fileIndex(name) {
138 |     const {hashTable} = this;
139 |     const length = hashTable.length >> 2;
140 |     const index = hash(name, 0) % length;
141 |     const keyA = hash(name, 1), keyB = hash(name, 2);
142 |     for (let i = index, count = 0; hashTable[i * 4 + 3] !== 0xFFFFFFFF && count < length; i = (i + 1) % length, ++count) {
143 |       if (hashTable[i * 4] === keyA && hashTable[i * 4 + 1] === keyB && hashTable[i * 4 + 3] !== 0xFFFFFFFE) {
144 |         return i;
145 |       }
146 |     }
147 |   }
148 | 
149 |   readRaw(name) {
150 |     const index = this.fileIndex(name);
151 |     if (index == null) {
152 |       return;
153 |     }
154 |     const block = this.hashTable[index * 4 + 3];
155 |     const info = {
156 |       filePos: this.blockTable[block * 4],
157 |       cmpSize: this.blockTable[block * 4 + 1],
158 |       fileSize: this.blockTable[block * 4 + 2],
159 |       flags: this.blockTable[block * 4 + 3],
160 |       key: hash(path_name(name), 3),
161 |     };
162 |     if ((info.flags & Flags.PatchFile) || info.filePos + info.cmpSize > this.buffer.byteLength) {
163 |       return;
164 |     }
165 |     if (!(info.flags & Flags.Compressed)) {
166 |       info.cmpSize = info.fileSize;
167 |     }
168 |     if (info.flags & Flags.FixSeed) {
169 |       info.key = (info.key + info.filePos) ^ info.fileSize;
170 |     }
171 |     return {info, data: new Uint8Array(this.buffer, info.filePos, info.cmpSize)};
172 |   }
173 | 
174 |   read(name) {
175 |     const raw = this.readRaw(name);
176 |     if (!raw) {
177 |       return;
178 |     }
179 |     let {info, data} = raw;
180 |     data = data.slice();
181 | 
182 |     if (info.flags & Flags.SingleUnit) {
183 |       if (info.flags & Flags.Encrypted) {
184 |         decrypt8(data, info.key);
185 |       }
186 |       if (info.flags & Flags.CompressMulti) {
187 |         return;
188 |       } else if (info.flags & Flags.CompressPkWare) {
189 |         return pkzip_decompress(data, info.fileSize);
190 |       }
191 |       return data;
192 |     } else if (!(info.flags & Flags.Compressed)) {
193 |       if (info.flags & Flags.Encrypted) {
194 |         for (let i = 0; i < info.fileSize; i += this.blockSize) {
195 |           decrypt8(data.subarray(i, Math.min(info.fileSize, i + this.blockSize)), info.key + i / this.blockSize);
196 |         }
197 |       }
198 |       return data;
199 |     } else {
200 |       const numBlocks = Math.floor((info.fileSize + this.blockSize - 1) / this.blockSize);
201 |       const tableSize = numBlocks + 1;
202 |       if (data.length < tableSize * 4) {
203 |         return;
204 |       }
205 |       const blocks = new Uint32Array(data.buffer, 0, tableSize);
206 |       if (info.flags & Flags.Encrypted) {
207 |         decrypt(blocks, info.key - 1);
208 |       }
209 |       const output = new Uint8Array(info.fileSize);
210 |       for (let i = 0; i < numBlocks; ++i) {
211 |         const oPos = i * this.blockSize;
212 |         const uSize = Math.min(this.blockSize, info.fileSize - oPos);
213 |         if (blocks[i + 1] > data.length) {
214 |           return;
215 |         }
216 |         let tmp = data.subarray(blocks[i], blocks[i + 1]);
217 |         if (info.flags & Flags.Encrypted) {
218 |           // this is not safe, but our files are small enough
219 |           decrypt8(tmp, info.key + i);
220 |         }
221 |         if (info.flags & Flags.CompressMulti) {
222 |           return;
223 |         } else if (info.flags & Flags.CompressPkWare) {
224 |           tmp = pkzip_decompress(tmp, uSize);
225 |         }
226 |         if (!tmp || tmp.length !== uSize) {
227 |           return;
228 |         }
229 |         output.set(tmp, oPos);
230 |       }
231 |       return output;
232 |     }
233 |   }
234 | }
235 | 
236 | function getPassword(name) {
237 |   if (name.match(/spawn\d+\.sv/i)) {
238 |     return 'lshbkfg1'; // single, spawn
239 |   } else if (name.match(/share_\d+\.sv/i)) {
240 |     return 'lshbkfg1'; // multi, spawn
241 |   } else if (name.match(/multi_\d+\.sv/i)) {
242 |     return 'szqnlsk1'; // multi, retail
243 |   } else {
244 |     return 'xrgyrkj1'; // single, retail
245 |   }
246 | }
247 | 
248 | export default function getPlayerName(data, name) {
249 |   try {
250 |     const reader = new MpqReader(data);
251 |     const hero = codec_decode(reader.read("hero"), getPassword(name));
252 |     const nameEnd = hero.indexOf(0, 16);
253 |     const result = {};
254 |     result.name = String.fromCharCode(...hero.subarray(16, nameEnd));
255 |     result.cls = hero[48];
256 |     result.level = hero[53];
257 |     return result;
258 |   } catch (e) {
259 |     return null;
260 |   }
261 | }
262 | 


--------------------------------------------------------------------------------
/src/api/sound.js:
--------------------------------------------------------------------------------
  1 | function no_sound() {
  2 |   return {
  3 |     create_sound: () => 0,
  4 |     duplicate_sound: () => 0,
  5 |     play_sound: () => undefined,
  6 |     set_volume: () => undefined,
  7 |     stop_sound: () => undefined,
  8 |     delete_sound: () => undefined,
  9 |   };
 10 | }
 11 | 
 12 | function decodeAudioData(context, buffer) {
 13 |   return new Promise((resolve, reject) => {
 14 |     context.decodeAudioData(buffer, resolve, reject);
 15 |   });
 16 | }
 17 | 
 18 | export default function init_sound() {
 19 |   const AudioContext = window.AudioContext || window.webkitAudioContext;
 20 |   const StereoPannerNode = window.StereoPannerNode;
 21 |   if (!AudioContext) {
 22 |     return no_sound();
 23 |   }
 24 | 
 25 |   let context = null;
 26 |   try {
 27 |     context = new AudioContext();
 28 |     context.resume();
 29 |   } catch (e) {
 30 |   }
 31 |   const sounds = new Map();
 32 | 
 33 |   return {
 34 |     create_sound_raw(id, data, length, channels, rate) {
 35 |       if (!context) {
 36 |         return;
 37 |       }
 38 |       const buffer = context.createBuffer(channels, length, rate);
 39 |       for (let i = 0; i < channels; ++i) {
 40 |         buffer.getChannelData(i).set(data.subarray(i * length, i * length + length));
 41 |       }
 42 |       sounds.set(id, {
 43 |         buffer: Promise.resolve(buffer),
 44 |         gain: context.createGain(),
 45 |         panner: StereoPannerNode && new StereoPannerNode(context, {pan: 0}),
 46 |       });
 47 |     },
 48 |     create_sound(id, data) {
 49 |       if (!context) {
 50 |         return;
 51 |       }
 52 |       const buffer = decodeAudioData(context, data.buffer);
 53 |       sounds.set(id, {
 54 |         buffer,
 55 |         gain: context.createGain(),
 56 |         panner: StereoPannerNode && new StereoPannerNode(context, {pan: 0}),
 57 |       });
 58 |     },
 59 |     duplicate_sound(id, srcId) {
 60 |       if (!context) {
 61 |         return;
 62 |       }
 63 |       const src = sounds.get(srcId);
 64 |       if (!src) {
 65 |         return;
 66 |       }
 67 |       sounds.set(id, {
 68 |         buffer: src.buffer,
 69 |         gain: context.createGain(),
 70 |         panner: StereoPannerNode && new StereoPannerNode(context, {pan: 0}),
 71 |       });
 72 |     },
 73 |     play_sound(id, volume, pan, loop) {
 74 |       const src = sounds.get(id);
 75 |       if (src) {
 76 |         if (src.source) {
 77 |           src.source.then(source => source.stop());
 78 |         }
 79 |         src.gain.gain.value = Math.pow(2.0, volume / 1000.0);
 80 |         const relVolume = Math.pow(2.0, pan / 1000.0);
 81 |         if (src.panner) {
 82 |           src.panner.pan.value = 1.0 - 2.0 / (1.0 + relVolume);
 83 |         }
 84 |         src.source = src.buffer.then(buffer => {
 85 |           const source = context.createBufferSource();
 86 |           source.buffer = buffer;
 87 |           source.loop = !!loop;
 88 |           let node = source.connect(src.gain);
 89 |           if (src.panner) {
 90 |             node = node.connect(src.panner);
 91 |           }
 92 |           node.connect(context.destination);
 93 |           source.start();
 94 |           return source;
 95 |         });
 96 |       }
 97 |     },
 98 |     set_volume(id, volume) {
 99 |       const src = sounds.get(id);
100 |       if (src) {
101 |         src.gain.gain.value = Math.pow(2.0, volume / 1000.0);
102 |       }
103 |     },
104 |     stop_sound(id) {
105 |       const src = sounds.get(id);
106 |       if (src && src.source) {
107 |         src.source.then(source => source.stop());
108 |         delete src.source;
109 |       }
110 |     },
111 |     delete_sound(id) {
112 |       const src = sounds.get(id);
113 |       if (src && src.source) {
114 |         src.source.then(source => source.stop());
115 |       }
116 |       sounds.delete(id);
117 |     },
118 | 
119 |     stop_all() {
120 |       for (let [, sound] of sounds) {
121 |         if (sound.source) {
122 |           sound.source.then(source => source.stop());
123 |         }
124 |       }
125 |       sounds.clear();
126 |       context = null;
127 |     }
128 |   };
129 | }
130 | 


--------------------------------------------------------------------------------
/src/api/webrtc.js:
--------------------------------------------------------------------------------
  1 | import Peer from 'peerjs';
  2 | import { buffer_reader, read_packet, write_packet, client_packet, server_packet, RejectionReason } from './packet';
  3 | 
  4 | /*function log_packet(data, type) {
  5 |   const reader = new buffer_reader(data);
  6 |   const id = reader.read8();
  7 |   for (let [name, {code, read}] of Object.entries(type)) {
  8 |     if (code === id && (name !== 'message' && name !== 'turn')) {
  9 |       console.log(`${type === client_packet ? 'client_packet' : 'server_packet'}.${name} ${JSON.stringify(read(reader))}`);
 10 |     }
 11 |   }
 12 | }*/
 13 | 
 14 | const PeerID = name => `diabloweb_dDv62yHQrZJP28tBEHL_${name}`;
 15 | const Options = {port: 443, secure: true};
 16 | const MAX_PLRS = 4;
 17 | 
 18 | class webrtc_server {
 19 |   constructor(version, {cookie, name, password, difficulty}, onMessage, onClose) {
 20 |     this.version = version;
 21 |     this.name = name;
 22 |     this.password = password;
 23 |     this.difficulty = difficulty;
 24 |     this.onMessage = onMessage;
 25 |     this.onClose = onClose;
 26 | 
 27 |     this.peer = new Peer(PeerID(name), Options);
 28 |     this.peer.on('connection', conn => this.onConnect(conn));
 29 |     this.players = [];
 30 |     this.myplr = 0;
 31 | 
 32 |     this.seed = Math.floor(Math.random() * Math.pow(2, 32));
 33 | 
 34 |     const onError = () => {
 35 |       onMessage(write_packet(server_packet.join_reject, {cookie, reason: RejectionReason.CREATE_GAME_EXISTS}));
 36 |       onClose();
 37 |       this.peer.off('error', onError);
 38 |       this.peer.off('open', onOpen);
 39 |     };
 40 |     const onOpen = () => {
 41 |       //console.log('peer open');
 42 |       setTimeout(() => {
 43 |         onMessage(write_packet(server_packet.join_accept, {cookie, index: 0, seed: this.seed, difficulty}));
 44 |         onMessage(write_packet(server_packet.connect, {id: 0}));
 45 |       }, 0);
 46 |       this.peer.off('error', onError);
 47 |       this.peer.off('open', onOpen);
 48 |     };
 49 |     this.peer.on('error', onError);
 50 |     this.peer.on('open', onOpen);
 51 | 
 52 |     //this.peer.on('error', err => console.log('peer error:', err));
 53 |   }
 54 | 
 55 |   onConnect(conn) {
 56 |     //conn.on('error', err => console.log('conn error:', err));
 57 |     //console.log('conn open');
 58 |     const peer = {conn};
 59 |     conn.on('data', packet => {
 60 |       const reader = new buffer_reader(packet);
 61 |       const {type, packet: pkt} = read_packet(reader, client_packet);
 62 |       switch (type.code) {
 63 |       case client_packet.info.code:
 64 |         peer.version = pkt.version;
 65 |         break;
 66 |       case client_packet.join_game.code:
 67 |         if (peer.version !== this.version) {
 68 |           conn.send(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_VERSION_MISMATCH}));
 69 |         } else if (pkt.name !== this.name) {
 70 |           conn.send(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_GAME_NOT_FOUND}));
 71 |         } else if (pkt.password !== this.password) {
 72 |           conn.send(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_INCORRECT_PASSWORD}));
 73 |         } else {
 74 |           let i = 1;
 75 |           while (i < MAX_PLRS && this.players[i]) {
 76 |             ++i;
 77 |           }
 78 |           if (i >= MAX_PLRS) {
 79 |             conn.send(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_GAME_FULL}));            
 80 |           } else {
 81 |             this.players[i] = peer;
 82 |             peer.id = i;
 83 |             conn.send(write_packet(server_packet.join_accept, {cookie: pkt.cookie, index: i, seed: this.seed, difficulty: this.difficulty}));
 84 |             this.send(0xFF, write_packet(server_packet.connect, {id: i}));
 85 |           }
 86 |         }
 87 |         break;
 88 |       default:
 89 |         if (peer.id != null) {
 90 |           this.handle(peer.id, type.code, pkt);
 91 |         } else {
 92 |           return;
 93 |         }
 94 |       }
 95 |       if (!reader.done()) {
 96 |         throw Error('packet too large');
 97 |       }
 98 |     });
 99 |     conn.on('close', () => {
100 |       //console.log('conn close');
101 |       if (peer.id != null) {
102 |         this.drop(peer.id, 0x40000006);
103 |       }
104 |     });
105 |   }
106 | 
107 |   send(mask, pkt) {
108 |     for (let i = 1; i < MAX_PLRS; ++i) {
109 |       if ((mask & (1 << i)) && this.players[i]) {
110 |         if (this.players[i].conn) {
111 |           this.players[i].conn.send(pkt);
112 |         }
113 |       }
114 |     }
115 |     // self last since it will destroy the buffer
116 |     if (mask & 1) {
117 |       this.onMessage(pkt);
118 |     }
119 |   }
120 | 
121 |   drop(id, reason) {
122 |     if (id === 0) {
123 |       for (let i = 1; i < MAX_PLRS; ++i) {
124 |         this.drop(i, 0x40000006);
125 |       }
126 |       this.onMessage(write_packet(server_packet.disconnect, {id, reason}));
127 |       this.peer.destroy();
128 |       this.onClose();
129 |     } else if (this.players[id]) {
130 |       this.send(0xFF, write_packet(server_packet.disconnect, {id, reason}));
131 |       this.players[id].id = null;
132 |       if (this.players[id].conn) {
133 |         this.players[id].conn.close();
134 |       }
135 |       this.players[id] = null;
136 |     }
137 |   }
138 | 
139 |   handle(id, code, pkt) {
140 |     switch (code) {
141 |     case client_packet.leave_game.code:
142 |       this.drop(id, 3);
143 |       break;
144 |     case client_packet.drop_player.code:
145 |       this.drop(pkt.id, pkt.reason);
146 |       break;
147 |     case client_packet.message.code:
148 |       this.send(pkt.id === 0xFF ? ~(1 << id) : (1 << pkt.id), write_packet(server_packet.message, {id, payload: pkt.payload}));
149 |       break;
150 |     case client_packet.turn.code:
151 |       this.send(~(1 << id), write_packet(server_packet.turn, {id, turn: pkt.turn}));
152 |       break;
153 |     default:
154 |       throw Error(`invalid packet ${code}`);
155 |     }
156 |   }
157 | }
158 | 
159 | class webrtc_client {
160 |   pending = [];
161 | 
162 |   constructor(version, {cookie, name, password}, onMessage, onClose) {
163 |     this.peer = new Peer(Options);
164 |     this.conn = this.peer.connect(PeerID(name));
165 | 
166 |     let needUnreg = true;
167 |     const unreg = () => {
168 |       if (!needUnreg) {
169 |         return;
170 |       }
171 |       needUnreg = false;
172 |       this.peer.off('error', onError);
173 |       this.conn.off('error', onError);
174 |       this.conn.off('open', onOpen);
175 |       clearTimeout(timeout);
176 |     };
177 |     const onError = () => {
178 |       onMessage(write_packet(server_packet.join_reject, {cookie, reason: RejectionReason.JOIN_GAME_NOT_FOUND}));
179 |       onClose();
180 |       unreg();
181 |     };
182 |     const onOpen = () => {
183 |       this.conn.send(write_packet(client_packet.info, {version}));
184 |       this.conn.send(write_packet(client_packet.join_game, {cookie, name, password}));
185 |       for (let pkt of this.pending) {
186 |         this.conn.send(pkt);
187 |       }
188 |       this.pending = null;
189 |       this.conn.off('open', onOpen);
190 |     };
191 |     const timeout = setTimeout(onError, 10000);
192 |     this.peer.on('error', onError);
193 |     this.conn.on('error', onError);
194 |     this.conn.on('open', onOpen);
195 | 
196 |     //this.peer.on('error', err => console.log('peer error:', err));
197 |     //this.conn.on('error', err => console.log('conn error:', err));
198 | 
199 |     this.conn.on('data', data => {
200 |       unreg();
201 |       const reader = new buffer_reader(data);
202 |       const {type, packet: pkt} = read_packet(reader, server_packet);
203 |       switch (type.code) {
204 |       case server_packet.join_accept.code:
205 |         this.myplr = pkt.index;
206 |         break;
207 |       case server_packet.join_reject.code:
208 |         onClose();
209 |         break;
210 |       case server_packet.disconnect.code:
211 |         if (pkt.id === 'myplr') {
212 |           onClose();
213 |         }
214 |         break;
215 |       default:
216 |       }
217 |       onMessage(data);
218 |     });
219 |     this.conn.on('close', data => {
220 |       onClose();
221 |     });
222 |   }
223 | 
224 |   send(packet) {
225 |     if (this.pending) {
226 |       this.pending.push(packet);
227 |     } else {
228 |       this.conn.send(packet);
229 |     }
230 |   }
231 | }
232 | 
233 | export default function webrtc_open(onMessage) {
234 |   let server = null, client = null;
235 | 
236 |   let version = 0;
237 | 
238 |   /*const prevMessage = onMessage;
239 |   onMessage = data => {
240 |     log_packet(data, server_packet);
241 |     prevMessage(data);
242 |   };*/
243 | 
244 |   return {
245 |     send: function(packet) {
246 |       //log_packet(packet, client_packet);
247 |       const reader = new buffer_reader(packet);
248 |       const {type, packet: pkt} = read_packet(reader, client_packet);
249 |       switch (type.code) {
250 |       case client_packet.info.code:
251 |         version = pkt.version;
252 |         break;
253 |       case client_packet.create_game.code:
254 |         if (server || client) {
255 |           onMessage(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_ALREADY_IN_GAME}));
256 |         } else {
257 |           server = new webrtc_server(version, pkt, onMessage, () => server = null);
258 |         }
259 |         break;
260 |       case client_packet.join_game.code:
261 |         if (server || client) {
262 |           onMessage(write_packet(server_packet.join_reject, {cookie: pkt.cookie, reason: RejectionReason.JOIN_ALREADY_IN_GAME}));
263 |         } else {
264 |           client = new webrtc_client(version, pkt, onMessage, () => client = null);
265 |         }
266 |         break;
267 |       default:
268 |         if (server) {
269 |           server.handle(0, type.code, pkt);
270 |           if (type.code === client_packet.leave_game.code) {
271 |             server = null;
272 |           }
273 |         } else if (client) {
274 |           client.send(packet);
275 |           if (type.code === client_packet.leave_game.code) {
276 |             client = null;
277 |           }
278 |           return;
279 |         } else if (type.code !== client_packet.leave_game.code) {
280 |           throw Error(`invalid packet ${type.code}`);
281 |         }
282 |       }
283 |       if (!reader.done()) {
284 |         throw Error('packet too large');
285 |       }
286 |     },
287 |   };
288 | }
289 | 


--------------------------------------------------------------------------------
/src/api/websocket.js:
--------------------------------------------------------------------------------
  1 | async function do_websocket_open(url, handler) {
  2 |   const socket = new WebSocket(url);
  3 |   socket.binaryType = "arraybuffer";
  4 |   let versionCbk = null;
  5 |   socket.addEventListener("message", ({data}) => {
  6 |     if (versionCbk) {
  7 |       versionCbk(data);
  8 |     }
  9 |     handler(data);
 10 |   });
 11 |   await new Promise((resolve, reject) => {
 12 |     const onError = err => reject(1);
 13 |     socket.addEventListener("error", onError);
 14 |     socket.addEventListener("open", () => {
 15 |       socket.removeEventListener("error", onError);
 16 |       resolve();
 17 |     });
 18 |   });
 19 |   await new Promise((resolve, reject) => {
 20 |     const to = setTimeout(() => {
 21 |       versionCbk = null;
 22 |       reject(1);
 23 |     }, 5000);
 24 |     versionCbk = data => {
 25 |       clearTimeout(to);
 26 |       const u8 = new Uint8Array(data);
 27 |       if (u8[0] === 0x32) {
 28 |         versionCbk = null;
 29 |         const version = u8[1] | (u8[2] << 8) | (u8[3] << 16) | (u8[4] << 24);
 30 |         if (version === 1) {
 31 |           resolve();
 32 |         } else {
 33 |           reject(2);
 34 |         }
 35 |       }
 36 |     };
 37 |   });
 38 | 
 39 |   const vers = process.env.VERSION.match(/(\d+)\.(\d+)\.(\d+)/);
 40 |   const clientInfo = new Uint8Array(5);
 41 |   clientInfo[0] = 0x31;
 42 |   clientInfo[1] = parseInt(vers[3]);
 43 |   clientInfo[2] = parseInt(vers[2]);
 44 |   clientInfo[3] = parseInt(vers[1]);
 45 |   clientInfo[4] = 0;
 46 |   socket.send(clientInfo);
 47 |   return socket;
 48 | }
 49 | 
 50 | export default function websocket_open(url, handler, finisher) {
 51 |   let ws = null, batch = [], intr = null;
 52 |   const proxy = {
 53 |     get readyState() {
 54 |       return ws ? ws.readyState : 0;
 55 |     },
 56 |     send(msg) {
 57 |       batch.push(msg.slice());
 58 |     },
 59 |     close() {
 60 |       if (intr) {
 61 |         clearInterval(intr);
 62 |         intr = null;
 63 |       }
 64 |       if (ws) {
 65 |         ws.close();
 66 |       } else {
 67 |         batch = null;
 68 |       }
 69 |     },
 70 |   };
 71 |   do_websocket_open(url, handler).then(sock => {
 72 |     ws = sock;
 73 |     if (batch) {
 74 |       intr = setInterval(() => {
 75 |         if (!batch.length) {
 76 |           return;
 77 |         }
 78 |         const size = batch.reduce((sum, msg) => sum + msg.byteLength, 3);
 79 |         const buffer = new Uint8Array(size);
 80 |         buffer[0] = 0;
 81 |         buffer[1] = (batch.length & 0xFF);
 82 |         buffer[2] = batch.length >> 8;
 83 |         let pos = 3;
 84 |         for (let msg of batch) {
 85 |           buffer.set(msg, pos);
 86 |           pos += msg.byteLength;
 87 |         }
 88 |         ws.send(buffer);
 89 |         batch.length = 0;
 90 |       }, 100);
 91 |     } else {
 92 |       ws.close();
 93 |     }
 94 |     finisher(0);
 95 |   }, err => {
 96 |     finisher(err);
 97 |   });
 98 |   return proxy;
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/fs.js:
--------------------------------------------------------------------------------
  1 | import IdbKvStore from  'idb-kv-store';
  2 | 
  3 | /*const importStorage = () => new Promise((resolve, reject) => {
  4 |   let done = false;
  5 |   const frame = document.createElement('iframe');
  6 |   window.addEventListener('message', ({data}) => {
  7 |     if (data.method === 'storage' && !done) {
  8 |       done = true;
  9 |       resolve(data.files);
 10 |       frame.contentWindow.postMessage({method: 'clear'}, '*');
 11 |     }
 12 |   });
 13 |   frame.addEventListener('load', () => {
 14 |     frame.contentWindow.postMessage({method: 'transfer'}, '*');
 15 |   });
 16 |   frame.addEventListener('error', () => {
 17 |     if (!done) {
 18 |       done = true;
 19 |       resolve(null);
 20 |     }
 21 |   });
 22 |   frame.src = "https://diablo.rivsoft.net/storage.html";
 23 |   frame.style.display = "none";
 24 |   document.body.appendChild(frame);
 25 |   setTimeout(() => {
 26 |     if (!done) {
 27 |       done = true;
 28 |       resolve(null);
 29 |     }
 30 |   }, 10000);
 31 | });*/
 32 | 
 33 | async function downloadFile(store, name) {
 34 |   const file = await store.get(name.toLowerCase());
 35 |   if (file) {
 36 |     const blob = new Blob([file], {type: 'binary/octet-stream'});
 37 |     const url = URL.createObjectURL(blob);
 38 |     const lnk = document.createElement('a');
 39 |     lnk.setAttribute('href', url);
 40 |     lnk.setAttribute('download', name);
 41 |     document.body.appendChild(lnk);
 42 |     lnk.click();
 43 |     document.body.removeChild(lnk);
 44 |     URL.revokeObjectURL(url);
 45 |   } else {
 46 |     console.error(`File ${name} does not exist`);
 47 |   }
 48 | }
 49 | 
 50 | async function downloadSaves(store) {
 51 |   for (let name of await store.keys()) {
 52 |     if (name.match(/\.sv$/i)) {
 53 |       downloadFile(store, name);
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | const readFile = file => new Promise((resolve, reject) => {
 59 |   const reader = new FileReader();
 60 |   reader.onload = () => resolve(reader.result);
 61 |   reader.onerror = () => reject(reader.error);
 62 |   reader.onabort = () => reject();
 63 |   reader.readAsArrayBuffer(file);
 64 | });
 65 | async function uploadFile(store, files, file) {
 66 |   const data = new Uint8Array(await readFile(file));
 67 |   files.set(file.name.toLowerCase(), data);
 68 |   return store.set(file.name.toLowerCase(), data);
 69 | }
 70 | 
 71 | export default async function create_fs(load) {
 72 |   try {
 73 |     const store = new IdbKvStore('diablo_fs');
 74 |     const files = new Map();
 75 |     for (let [name, data] of Object.entries(await store.json())) {
 76 |       files.set(name, data);
 77 |     }
 78 |     /*if (load) {
 79 |       const files = await importStorage();
 80 |       if (files) {
 81 |         for (let [name, data] of files) {
 82 |           files.set(name, data);
 83 |           store.set(name, data);
 84 |         }
 85 |       }
 86 |     }*/
 87 |     window.DownloadFile = name => downloadFile(store, name);
 88 |     window.DownloadSaves = () => downloadSaves(store);
 89 |     return {
 90 |       files,
 91 |       update: (name, data) => store.set(name, data),
 92 |       delete: name => store.remove(name),
 93 |       clear: () => store.clear(),
 94 |       download: name => downloadFile(store, name),
 95 |       upload: file => uploadFile(store, files, file),
 96 |       fileUrl: async name => {
 97 |         const file = await store.get(name.toLowerCase());
 98 |         if (file) {
 99 |           const blob = new Blob([file], {type: 'binary/octet-stream'});
100 |           return URL.createObjectURL(blob);
101 |         }
102 |       },
103 |     };
104 |   } catch (e) {
105 |     window.DownloadFile = () => console.error('IndexedDB is not supported');
106 |     window.DownloadSaves = () => console.error('IndexedDB is not supported');
107 |     return {
108 |       files: new Map(),
109 |       update: () => Promise.resolve(),
110 |       delete: () => Promise.resolve(),
111 |       clear: () => Promise.resolve(),
112 |       download: () => Promise.resolve(),
113 |       upload: () => Promise.resolve(),
114 |       fileUrl: () => Promise.resolve(),
115 |     };
116 |   }  
117 | }
118 | 


--------------------------------------------------------------------------------
/src/icons/f5.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" class="shp0" d="M61.4 48.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.73 25.44v-5.86c0-6.02-3.69-8.46-8.95-8.46h-1.69V49.1h9.82v-4.07H68.88v19.15h6.57c2.33 0 3.96 1.52 3.96 3.9v6.89c0 2.77-1.25 3.96-4.02 3.96h-7.05V83h6.56c6.51 0 9.23-2.6 9.23-8.57z"/></g></svg>


--------------------------------------------------------------------------------
/src/icons/f6.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" fill-rule="evenodd" class="shp0" d="M48.33 48.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.24 83h-1.36c-4.61 0-8.57-3.04-8.57-9.22V54.25c0-6.18 3.42-9.22 9.66-9.22h6.23v4.13h-6.78c-2.71 0-4.5 1.89-4.5 4.06v5.92h4.77c6.13 0 9.12 2.49 9.12 8.67v5.97c0 6.18-3.96 9.22-8.57 9.22zm-5.32-19.8v11.61c0 2.17 1.52 4.12 4.23 4.12h.82c2.71 0 4.23-1.95 4.23-4.12v-8.03c0-2.17-1.25-3.58-3.96-3.58h-5.32z"/></g></svg>


--------------------------------------------------------------------------------
/src/icons/f7.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" class="shp0" d="M61.4 48.99v-3.96H43.61V83h4.72V65.92h11.71v-3.96H48.33V48.99H61.4zm22.67 1.31v-5.27H67.53v4.07h12.04L70.51 83h4.83l8.73-32.7z"/></g></svg>


--------------------------------------------------------------------------------
/src/icons/f8.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><style>.shp0{fill:#000}</style><g id="Folder 2"><g id="Folder 1"><path id="Shape 1" class="shp0" d="M26.6 59.8h-3.82V38.3c0-6.87 7.57-16.9 18.62-16.9 11.2 0 19.6.2 19.6.2v3.62S49 25 41.5 25c-6.82 0-14.7 6.68-14.7 13.2 0 1.28-.2 21.6-.2 21.6z"/><path id="Shape 1 copy" class="shp0" d="M101.6 59.8h3.82V38.3c0-6.87-6.37-16.9-17.42-16.9-11.2 0-27.24.2-27.24.2l-.16 3.62S82.08 25 87.9 25c6.82 0 13.5 6.68 13.5 13.2 0 1.28.2 21.6.2 21.6z"/><path id="Shape 1 copy 2" class="shp0" d="M26.42 59.4H22.6v30.1c0 6.87 7.57 16.9 18.62 16.9 11.2 0 19.6-.2 19.6-.2v-3.62s-12 .22-19.5.22c-6.82 0-14.7-6.68-14.7-13.2 0-1.28-.2-30.2-.2-30.2z"/><path id="Shape 1 copy 3" class="shp0" d="M101.42 59.6h3.82v29.9c0 6.87-6.36 16.9-17.42 16.9-11.2 0-27.24-.2-27.24-.2l-.16-3.62s21.48.22 27.3.22c6.83 0 13.5-6.68 13.5-13.2 0-1.28.2-30 .2-30z"/></g><path id="F5" fill-rule="evenodd" class="shp0" d="M48.33 48.99v12.97h11.71v3.96H48.33V83h-4.72V45.03H61.4v3.96H48.33zM77.07 83h-.97c-6.51 0-9.22-2.6-9.22-8.57v-4.56c0-3.25 1.25-5.42 3.52-6.67-1.84-1.3-2.87-3.41-2.87-6.29V53.5c0-5.97 3.36-8.47 8.79-8.47h.54c5.42 0 8.78 2.5 8.78 8.47v3.41c0 2.88-1.03 4.99-2.87 6.29 2.28 1.25 3.52 3.42 3.52 6.67v4.56c0 5.97-2.71 8.57-9.22 8.57zm.55-17.52h-2.06c-2.34 0-3.96 1.52-3.96 3.91v5.58c0 2.66 1.08 3.96 3.58 3.96h2.38c2.77 0 4.02-1.19 4.02-3.96v-5.58c0-2.39-1.63-3.91-3.96-3.91zM75.66 49.1c-2.44 0-3.41 1.36-3.41 3.91v4.44c0 2.34 1.52 3.86 3.52 3.96h1.3c2.17 0 3.86-1.51 3.86-3.96v-4.44c0-2.77-1.14-3.91-3.86-3.91h-1.41z"/></g></svg>


--------------------------------------------------------------------------------
/src/icons/move.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M326.88 298.88C326.88 298.88 326.88 298.88 326.88 298.88C314.75 298.88 304.92 289.04 304.92 276.91C304.92 273.13 304.92 242.92 304.92 239.14C304.92 227.01 314.75 217.17 326.88 217.17C326.88 217.17 326.88 217.17 326.88 217.17C339.02 217.17 348.85 227.01 348.85 239.14C348.85 241.66 348.85 254.25 348.85 276.91C342.3 291.56 334.97 298.88 326.88 298.88Z" id="a3YmE0kYNk"></path><path d="M360.46 232.22C360.46 237.46 360.46 279.36 360.46 284.6C360.46 296.93 352.38 307.55 340.76 312.34C340.76 314.22 340.76 323.6 340.76 340.5L454.07 340.5C454.07 283.76 454.07 252.23 454.07 245.93C454.07 192.37 409.2 148.96 353.86 148.96C352.99 148.96 348.62 148.96 340.76 148.96L340.76 204.48C353.89 214.75 360.46 224 360.46 232.22Z" id="a123Rizl1h"></path><path d="M199.7 421.97C199.7 475.53 244.57 518.94 299.91 518.94C305.3 518.94 348.47 518.94 353.86 518.94C409.2 518.94 454.07 475.53 454.07 421.97C454.07 417.08 454.07 392.62 454.07 348.59L199.7 348.59C199.7 392.62 199.7 417.08 199.7 421.97Z" id="a2PRuZ4XyI"></path><path d="M313.01 312.34C301.39 307.55 293.31 296.93 293.31 284.6C293.31 279.36 293.31 237.46 293.31 232.22C293.31 219.89 301.39 209.27 313.01 204.48C313.01 200.78 313.01 182.27 313.01 148.96C305.15 148.96 300.78 148.96 299.91 148.96C244.57 148.96 199.7 192.37 199.7 245.93C199.7 252.23 199.7 283.76 199.7 340.5L313.01 340.5C313.01 323.6 313.01 314.22 313.01 312.34Z" id="bOlZ8Knrm"></path><path d="M494.43 269.5L563.35 340.5L494.43 411.5L494.43 366.49L461.92 366.49L461.92 314.39L494.43 314.39L494.43 269.5Z" id="c2jJXhIrng"></path><path d="M158.97 269.5L90.06 340.5L158.97 411.5L158.97 366.49L191.49 366.49L191.49 314.39L158.97 314.39L158.97 269.5Z" id="ke7zAJ37M"></path><path d="M397.89 110.9L326.88 41.99L255.88 110.9L300.9 110.9L300.9 143.42L352.99 143.42L352.99 110.9L397.89 110.9Z" id="a4iiHlu6Tc"></path><path d="M397.41 556.21L326.41 625.13L255.41 556.21L300.42 556.21L300.42 523.7L352.52 523.7L352.52 556.21L397.41 556.21Z" id="b2XGLcPStX"></path></defs><g><g><g><use xlink:href="#a3YmE0kYNk" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#a3YmE0kYNk" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a123Rizl1h" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#a123Rizl1h" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a2PRuZ4XyI" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#a2PRuZ4XyI" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#bOlZ8Knrm" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#bOlZ8Knrm" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#c2jJXhIrng" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#ke7zAJ37M" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#a4iiHlu6Tc" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#b2XGLcPStX" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/src/icons/rmb.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M313.25 276.99C313.25 276.99 313.25 276.99 313.25 276.99C298.37 276.99 286.31 264.93 286.31 250.05C286.31 245.42 286.31 208.36 286.31 203.73C286.31 188.85 298.37 176.79 313.25 176.79C313.25 176.79 313.25 176.79 313.25 176.79C328.13 176.79 340.19 188.85 340.19 203.73C340.19 206.82 340.19 222.26 340.19 250.05C332.15 268.01 323.17 276.99 313.25 276.99Z" id="bwtT01FaN"></path><path d="M354.42 195.25C354.42 201.67 354.42 253.06 354.42 259.48C354.42 274.61 344.51 287.62 330.26 293.5C330.26 295.8 330.26 307.31 330.26 328.03L469.22 328.03C469.22 258.45 469.22 219.79 469.22 212.06C469.22 146.38 414.2 93.13 346.33 93.13C345.26 93.13 339.91 93.13 330.26 93.13L330.26 161.23C346.37 173.82 354.42 185.16 354.42 195.25Z" id="a1ALqApg4B"></path><clipPath id="clipbywTQrek4"><use xlink:href="#a1ALqApg4B" opacity="1"></use></clipPath><path d="M157.28 427.94C157.28 493.62 212.3 546.87 280.16 546.87C286.78 546.87 339.72 546.87 346.33 546.87C414.2 546.87 469.22 493.62 469.22 427.94C469.22 421.94 469.22 391.95 469.22 337.96L157.28 337.96C157.28 391.95 157.28 421.94 157.28 427.94Z" id="aGiF88xvk"></path><path d="M296.23 293.5C281.99 287.62 272.08 274.61 272.08 259.48C272.08 253.06 272.08 201.67 272.08 195.25C272.08 180.12 281.99 167.11 296.23 161.23C296.23 156.69 296.23 133.99 296.23 93.13C286.59 93.13 281.24 93.13 280.16 93.13C212.3 93.13 157.28 146.38 157.28 212.06C157.28 219.79 157.28 258.45 157.28 328.03L296.23 328.03C296.23 307.31 296.23 295.8 296.23 293.5Z" id="acQhG8yZH"></path></defs><g><g><g><use xlink:href="#bwtT01FaN" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#bwtT01FaN" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><g clip-path="url(#clipbywTQrek4)"><use xlink:href="#a1ALqApg4B" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="26" stroke-opacity="1"></use></g></g><g><use xlink:href="#aGiF88xvk" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#aGiF88xvk" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#acQhG8yZH" opacity="1" fill="#020202" fill-opacity="1"></use><g><use xlink:href="#acQhG8yZH" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>


--------------------------------------------------------------------------------
/src/icons/shift.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M439.52 108.04C477.06 108.04 507.5 138.47 507.5 176.02C507.5 240.02 507.5 357.26 507.5 419.57C507.5 461.8 473.26 496.04 431.03 496.04C371.33 496.04 264.71 496.04 204.02 496.04C164.52 496.04 132.5 464.02 132.5 424.52C132.5 361.22 132.5 245.68 132.5 183.09C132.5 141.64 166.1 108.04 207.55 108.04C267.54 108.04 378.11 108.04 439.52 108.04Z" id="c2OL5KwjUK"></path><clipPath id="clipaGcWUxBty"><use xlink:href="#c2OL5KwjUK" opacity="1"></use></clipPath><path d="M366 349.57L282 268.04L198 349.57L251.25 349.57L251.25 416.04L312.89 416.04L312.89 349.57L366 349.57Z" id="i5MOx8YLhh"></path></defs><g><g><g><g clip-path="url(#clipaGcWUxBty)"><use xlink:href="#c2OL5KwjUK" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="52" stroke-opacity="1"></use></g></g><g><use xlink:href="#i5MOx8YLhh" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './reset.css';
 4 | import * as serviceWorker from './serviceWorker';
 5 | 
 6 | import App from './App';
 7 | 
 8 | ReactDOM.render(<App />, document.getElementById('root'));
 9 | 
10 | serviceWorker.register({
11 |   onUpdate() {
12 |   },
13 | });
14 | 


--------------------------------------------------------------------------------
/src/mpqcmp/MpqCmp.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d07RiV/diabloweb/c61ef19c54ea646aed328bd8cc82c8a5f1ebd81d/src/mpqcmp/MpqCmp.wasm


--------------------------------------------------------------------------------
/src/mpqcmp/compress.js:
--------------------------------------------------------------------------------
  1 | import Worker from './mpqcmp.worker.js';
  2 | import MpqBinary from './MpqCmp.wasm';
  3 | import ListFile from './ListFile.txt';
  4 | import axios from 'axios';
  5 | 
  6 | import { decrypt, encrypt, hash, path_name } from '../api/savefile';
  7 | 
  8 | const MpqSize = 156977;
  9 | const ListSize = 75542;
 10 | 
 11 | const readFile = (file, progress) => new Promise((resolve, reject) => {
 12 |   const reader = new FileReader();
 13 |   reader.onload = () => {
 14 |     if (progress) {
 15 |       progress({loaded: file.size});
 16 |     }
 17 |     resolve(reader.result);
 18 |   };
 19 |   reader.onerror = () => reject(reader.error);
 20 |   reader.onabort = () => reject();
 21 |   if (progress) {
 22 |     reader.addEventListener("progress", progress);
 23 |   }
 24 |   reader.readAsArrayBuffer(file);
 25 | });
 26 | 
 27 | async function loadFile(url, progress, responseType='arraybuffer') {
 28 |   const binary = await axios.request({
 29 |     url,
 30 |     responseType,
 31 |     onDownloadProgress: progress,
 32 |   });
 33 |   return binary.data;
 34 | }
 35 | 
 36 | function runWorker(data, transfer, progress) {
 37 |   return new Promise((resolve, reject) => {
 38 |     try {
 39 |       const worker = new Worker();
 40 |       worker.addEventListener("message", ({data}) => {
 41 |         switch (data.action) {
 42 |         case "result":
 43 |           resolve({buffer: data.buffer, blocks: data.blocks});
 44 |           break;
 45 |         case "error":
 46 |           reject({message: data.error, stack: data.stack});
 47 |           break;
 48 |         case "progress":
 49 |           progress(data.value);
 50 |           break;
 51 |         default:
 52 |         }
 53 |       });
 54 |       worker.postMessage({action: "run", ...data}, transfer);
 55 |     } catch (e) {
 56 |       reject(e);
 57 |     }
 58 |   });
 59 | }
 60 | 
 61 | export default async function compress(mpq, progress) {
 62 |   progress("Loading...");
 63 |   const files = [];
 64 |   function updateProgress() {
 65 |     progress("Loading...", files.reduce((sum, {loaded, weight}) => sum + loaded * weight, 0),
 66 |       files.reduce((sum, {total, weight}) => sum + total * weight, 0));
 67 |   }
 68 |   const loader = file => e => { file.loaded = e.loaded; updateProgress(); };
 69 | 
 70 |   const mpqsize = mpq.size;
 71 | 
 72 |   const fHeader = {loaded: 0, weight: 1, total: mpqsize};
 73 |   fHeader.ready = readFile(mpq.slice(0, 32), loader(fHeader));
 74 |   files.push(fHeader);
 75 | 
 76 |   const fBinary = {loaded: 0, weight: 5, total: MpqSize};
 77 |   fBinary.ready = loadFile(MpqBinary, loader(fBinary));
 78 |   files.push(fBinary);
 79 | 
 80 |   const fList = {loaded: 0, weight: 5, total: ListSize};
 81 |   fList.ready = loadFile(ListFile, loader(fList), 'text');
 82 |   files.push(fList);
 83 | 
 84 |   const header = new Uint32Array(await fHeader.ready);
 85 |   const header16 = new Uint16Array(header.buffer);
 86 | 
 87 |   if (header[0] !== 0x1A51504D) {
 88 |     throw Error('invalid MPQ file');
 89 |   }
 90 | 
 91 |   const blockSize = 1 << (9 + header16[7]);
 92 |   const hashTablePos = header[4];
 93 |   const blockTablePos = header[5];
 94 |   const hashTableSize = header[6];
 95 |   const blockTableSize = header[7];
 96 |   if (hashTablePos + hashTableSize * 16 > mpqsize || blockTablePos + blockTableSize * 16 > mpqsize) {
 97 |     throw Error('invalid MPQ file');
 98 |   }
 99 | 
100 |   const fHashTable = {loaded: 0, weight: 1, total: hashTableSize * 16};
101 |   const fBlockTable = {loaded: 0, weight: 1, total: blockTableSize * 16};
102 |   fHeader.total -= fHashTable.total + fBlockTable.total;
103 |   fHashTable.ready = readFile(mpq.slice(hashTablePos, hashTablePos + fHashTable.total), loader(fHashTable));
104 |   fBlockTable.ready = readFile(mpq.slice(blockTablePos, blockTablePos + fBlockTable.total), loader(fBlockTable));
105 |   files.push(fHashTable, fBlockTable);
106 | 
107 |   const hashTable = new Uint32Array(await fHashTable.ready);
108 |   const blockTable = new Uint32Array(await fBlockTable.ready);
109 |   decrypt(hashTable, hash("(hash table)", 3));
110 |   decrypt(blockTable, hash("(block table)", 3));
111 | 
112 |   const list = (await fList.ready).split("\n").map(name => name.trim()).filter(name => name.length);
113 |   const listMap = {};
114 |   const hashStr = (h1, h2) => h1.toString(16).padStart(8, '0') + h2.toString(16).padStart(8, '0');
115 |   for (let name of list) {
116 |     listMap[hashStr(hash(name, 1), hash(name, 2))] = name;
117 |   }
118 | 
119 |   const NUM_TASKS = 4;
120 |   const tasks = [];
121 |   for (let i = 0; i < NUM_TASKS; ++i) {
122 |     tasks.push({
123 |       entries: [],
124 |       min: mpqsize,
125 |       max: 0,
126 |       progress: 0,
127 |     });
128 |   }
129 |   
130 |   for (let i = 0; i < hashTable.length / 4; ++i) {
131 |     const index = hashTable[i * 4 + 3];
132 |     if (index === 0xFFFFFFFF || index === 0xFFFFFFFE) {
133 |       continue;
134 |     }
135 |     const name = listMap[hashStr(hashTable[i * 4], hashTable[i * 4 + 1])];
136 |     if (!name) {
137 |       hashTable[i * 4 + 3] = 0xFFFFFFFE;
138 |       continue;
139 |     }
140 | 
141 |     const filePos = blockTable[index * 4];
142 |     const cSize = blockTable[index * 4 + 1];
143 | 
144 |     const task = tasks[Math.floor(filePos * NUM_TASKS / mpqsize)];
145 |     task.entries.push(i);
146 |     task.min = Math.min(task.min, filePos);
147 |     task.max = Math.max(task.max, filePos + cSize);
148 |   }
149 | 
150 |   const numFiles = tasks.reduce((sum, task) => sum + task.entries.length, 0);
151 | 
152 |   fHeader.total = 32;
153 |   for (let task of tasks) {
154 |     if (task.min < task.max) {
155 |       const fLoad = {loaded: 0, weight: 1, total: task.max - task.min};
156 |       task.ready = readFile(mpq.slice(task.min, task.max), loader(fLoad)).then(data => task.data = data);
157 |       files.push(fLoad);
158 |     }
159 |   }
160 | 
161 |   await Promise.all(tasks.map(t => t.ready).filter(Boolean));
162 |   const binary = await fBinary.ready;
163 | 
164 |   progress("Processing...");
165 | 
166 |   for (let task of tasks) {
167 |     if (task.data) {
168 |       const input = new Uint32Array(task.entries.length * 6);
169 |       task.entries.forEach((i, pos) => {
170 |         const index = hashTable[i * 4 + 3];
171 |         const name = listMap[hashStr(hashTable[i * 4], hashTable[i * 4 + 1])];
172 |         input[pos * 6] = blockTable[index * 4];
173 |         input[pos * 6 + 1] = blockTable[index * 4 + 1];
174 |         input[pos * 6 + 2] = blockTable[index * 4 + 2];
175 |         input[pos * 6 + 3] = blockTable[index * 4 + 3];
176 |         input[pos * 6 + 4] = hash(path_name(name), 3);
177 |         input[pos * 6 + 5] = name.match(/\.wav$/i) ? 1 : 0;
178 |       });
179 |       task.run = runWorker({binary, mpq: task.data, input, offset: task.min, blockSize}, [task.data, input.buffer], value => {
180 |         task.progress = value;
181 |         const sum = tasks.reduce((sum, task) => sum + task.progress, 0);
182 |         progress("Processing...", sum, numFiles);
183 |       }).then(res => task.result = res);
184 |     }
185 |   }
186 | 
187 |   await Promise.all(tasks.map(t => t.run).filter(Boolean));
188 | 
189 |   let outputPos = 32 + fHashTable.total + fBlockTable.total;
190 |   const outputSize = tasks.reduce((sum, {result}) => sum + (result ? result.buffer.byteLength : 0), outputPos);
191 |   const output = [header.buffer, hashTable.buffer, blockTable.buffer];
192 | 
193 |   blockTable.fill(0);
194 |   let blockPos = 0;
195 |   for (let task of tasks) {
196 |     if (task.result) {
197 |       const {buffer, blocks} = task.result;
198 |       for (let pos = 0; pos < task.entries.length; ++pos) {
199 |         const i = task.entries[pos];
200 |         hashTable[i * 4 + 3] = blockPos + pos;
201 |         blocks[pos * 4] += outputPos;
202 |       }
203 |       blockTable.set(blocks, blockPos * 4);
204 |       blockPos += task.entries.length;
205 |       output.push(buffer);
206 |       outputPos += buffer.byteLength;
207 |     }
208 |   }
209 | 
210 |   header[1] = 32;
211 |   header[2] = outputSize;
212 |   header16[6] = 1;
213 |   header16[7] = 7;
214 |   header[4] = 32;
215 |   header[5] = 32 + hashTable.length * 4;
216 |   header[6] = hashTable.length / 4;
217 |   header[7] = blockTable.length / 4;
218 | 
219 |   encrypt(hashTable, hash("(hash table)", 3));
220 |   encrypt(blockTable, hash("(block table)", 3));
221 | 
222 |   return new Blob(output, {type: 'binary/octet-stream'});
223 | }
224 | 


--------------------------------------------------------------------------------
/src/mpqcmp/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import compress from './compress';
 3 | 
 4 | export default class CompressMpq extends React.Component {
 5 |   state = {};
 6 | 
 7 |   parseFile = e => {
 8 |     const files = e.target.files;
 9 |     if (files.length > 0) {
10 |       this.start(files[0]);
11 |     }
12 |   }
13 | 
14 |   onProgress(progress) {
15 |     this.setState({progress});
16 |   }
17 |   onDone = blob => {
18 |     //const blob = new Blob([result], {type: 'binary/octet-stream'});
19 |     const url = URL.createObjectURL(blob);
20 |     this.setState({url});
21 | 
22 |     const lnk = document.createElement('a');
23 |     lnk.setAttribute('href', url);
24 |     lnk.setAttribute('download', 'DIABDAT.MPQ');
25 |     document.body.appendChild(lnk);
26 |     lnk.click();
27 |     document.body.removeChild(lnk);
28 |   }
29 |   onError(message, stack) {
30 |     const { api } = this.props;
31 |     api.setState({compress: false});
32 |     api.onError(message, stack);
33 |   }
34 | 
35 |   onClose = () => {
36 |     if (this.state.url) {
37 |       URL.revokeObjectURL(this.state.url);
38 |     }
39 |     this.props.api.setState({compress: false});
40 |   }
41 | 
42 |   start(file) {
43 |     this.setState({started: true});
44 |     compress(file, (text, loaded, total) => this.onProgress({text, loaded, total}))
45 |       .then(this.onDone, e => this.onError(e.message, e.stack));
46 |   }
47 | 
48 |   render() {
49 |     const { url, started, progress } = this.state;
50 |     if (url) {
51 |       return (
52 |         <div className="start">
53 |           <p>
54 |             <a href={url} download="DIABDAT.MPQ">Click here if download doesn't start.</a>
55 |           </p>
56 |           <div className="startButton" onClick={this.onClose}>Back</div>
57 |         </div>
58 |       );
59 |     }
60 |     if (started) {
61 |       return (
62 |         <div className="loading">
63 |           {(progress && progress.text) || 'Processing...'}
64 |           {progress != null && !!progress.total && (
65 |             <span className="progressBar"><span><span style={{width: `${Math.round(100 * progress.loaded / progress.total)}%`}}/></span></span>
66 |           )}
67 |         </div>
68 |       );
69 |     }
70 |     return (
71 |       <div className="start">
72 |         <p>
73 |           You can use this tool to reduce the original MPQ to about half its size. It encodes sounds in MP3 format and uses better compression for regular files.
74 |           To begin, click the button below or drop the MPQ onto the page.
75 |         </p>
76 |         <form>
77 |           <label htmlFor="loadFile" className="startButton">Select MPQ</label>
78 |           <input accept=".mpq" type="file" id="loadFile" style={{display: "none"}} onChange={this.parseFile}/>
79 |         </form>
80 |         <div className="startButton" onClick={this.onClose}>Back</div>
81 |       </div>
82 |     );
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/mpqcmp/mpqcmp.worker.js:
--------------------------------------------------------------------------------
 1 | import MpqModule from './MpqCmp.jscc';
 2 | 
 3 | /* eslint-disable-next-line no-restricted-globals */
 4 | const worker = self;
 5 | 
 6 | let input_file = null;
 7 | let input_offset = 0;
 8 | let output_file = null;
 9 | let last_progress = 0;
10 | function progress(value) {
11 |   worker.postMessage({action: "progress", value});
12 | }
13 | 
14 | const DApi = {
15 |   exit_error(error) {
16 |     throw Error(error);
17 |   },
18 | 
19 |   get_file_contents(array, offset) {
20 |     array.set(input_file.subarray(offset - input_offset, offset - input_offset + array.byteLength));
21 |   },
22 |   put_file_size(size) {
23 |     output_file = new Uint8Array(size);
24 |   },
25 |   put_file_contents(array, offset) {
26 |     output_file.set(array, offset);
27 |   },
28 | 
29 |   progress(done, total) {
30 |     if (done === total || performance.now() > last_progress + 100) {
31 |       progress(done);
32 |       last_progress = performance.now();
33 |     }
34 |   },
35 | };
36 | 
37 | worker.DApi = DApi;
38 | 
39 | async function run({binary, mpq, input, offset, blockSize}) {
40 |   const wasm = await MpqModule({wasmBinary: binary}).ready;
41 | 
42 |   input_file = new Uint8Array(mpq);
43 |   input_offset = offset;
44 | 
45 |   const count = input.length / 6;
46 |   const ptr = wasm._DApi_Alloc(input.byteLength);
47 |   wasm.HEAPU32.set(input, ptr >> 2);
48 | 
49 |   const dst = wasm._DApi_Compress(offset + input_file.length, blockSize, count, ptr) >> 2;
50 | 
51 |   return [output_file.buffer, wasm.HEAPU32.slice(dst , dst + count * 4)];
52 | }
53 | 
54 | worker.addEventListener("message", ({data}) => {
55 |   switch (data.action) {
56 |   case "run":
57 |     run(data).then(
58 |       ([buffer, blocks]) => worker.postMessage({action: "result", buffer, blocks}, [buffer, blocks.buffer]),
59 |       err => worker.postMessage({action: "error", error: err.toString(), stack: err.stack}));
60 |     break;
61 |   default:
62 |   }
63 | });
64 | 


--------------------------------------------------------------------------------
/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video, input, button {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 |   font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | /*body {
32 | 	line-height: 1;
33 | }*/
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/storage.js:
--------------------------------------------------------------------------------
 1 | import create_fs from './fs';
 2 | 
 3 | const fs = create_fs();
 4 | window.addEventListener('message', ({data, source}) => {
 5 |   if (data.method === 'transfer') {
 6 |     fs.then(({files}) => {
 7 |       source.postMessage({method: 'storage', files}, '*');
 8 |     });
 9 |   } else if (data.method === 'clear') {
10 |     fs.then(({clear}) => clear());
11 |   }
12 | });


--------------------------------------------------------------------------------