add adaptive version for mobile

bundler/webpack.common.js

@@ -0,0 +1,77 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+module.exports = {
+    entry: path.resolve(__dirname, '../src/script.js'),
+    output:
+        {
+            hashFunction: 'xxhash64',
+            filename: 'bundle.[contenthash].js',
+            path: path.resolve(__dirname, '../dist')
+        },
+    devtool: 'source-map',
+    plugins:
+        [
+            new HtmlWebpackPlugin({
+                template: path.resolve(__dirname, '../src/index.html'),
+                minify: true
+            }),
+            new MiniCSSExtractPlugin()
+        ],
+    module:
+        {
+            rules:
+                [
+                    // HTML
+                    {
+                        test: /\.(html)$/,
+                        use:
+                            [
+                                'html-loader'
+                            ]
+                    },
+
+                    // JS
+                    {
+                        test: /\.js$/,
+                        exclude: /node_modules/,
+                        use:
+                            [
+                                'babel-loader'
+                            ]
+                    },
+
+                    // CSS
+                    {
+                        test: /\.css$/,
+                        use:
+                            [
+                                MiniCSSExtractPlugin.loader,
+                                'css-loader'
+                            ]
+                    },
+
+                    // Images
+                    {
+                        test: /\.(jpg|png|gif|svg)$/,
+                        type: 'images/resource',
+                        generator:
+                            {
+                                filename: 'images/images/[hash][ext]'
+                            }
+                    },
+
+                    // Fonts
+                    {
+                        test: /\.(ttf|eot|woff|woff2)$/,
+                        type: 'images/resource',
+                        generator:
+                            {
+                                filename: 'images/fonts/[hash][ext]'
+                            }
+                    }
+                ]
+        }
+}

bundler/webpack.dev.js

@@ -0,0 +1,50 @@
+const path = require('path')
+const { merge } = require('webpack-merge')
+const commonConfiguration = require('./webpack.common.js')
+const portFinderSync = require('portfinder-sync')
+
+const infoColor = (_message) =>
+{
+    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
+}
+
+module.exports = merge(
+    commonConfiguration,
+    {
+        stats: 'errors-warnings',
+        mode: 'development',
+        infrastructureLogging:
+            {
+                level: 'warn',
+            },
+        devServer:
+            {
+                host: 'local-ip',
+                port: portFinderSync.getPort(8080),
+                open: true,
+                https: false,
+                allowedHosts: 'all',
+                hot: false,
+                watchFiles: ['src/**'],
+                client:
+                    {
+                        logging: 'none',
+                        overlay: true,
+                        progress: false
+                    },
+                setupMiddlewares: function (middlewares, devServer)
+                {
+                    console.log('------------------------------------------------------------')
+                    console.log(devServer.options.host)
+                    const port = devServer.options.port
+                    const https = devServer.options.https ? 's' : ''
+                    const domain1 = `http${https}://${devServer.options.host}:${port}`
+                    const domain2 = `http${https}://localhost:${port}`
+
+                    console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
+
+                    return middlewares
+                }
+            }
+    }
+)

bundler/webpack.prod.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge')
+const commonConfiguration = require('./webpack.common.js')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = merge(
+    commonConfiguration,
+    {
+        mode: 'production',
+        plugins:
+            [
+                new CleanWebpackPlugin()
+            ]
+    }
+)

dist/664d11f069eab128.css

@@ -0,0 +1,2 @@
+// extracted by mini-css-extract-plugin
+export {};

dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="664d11f069eab128.css"><title>Block shooter</title><script src="https://tgames.store/scripts/include.js"></script><script defer="defer" src="bundle.c4f6431aa8e8c42f.js"></script></head><body><div id="titleBar"><img id="icon" src="https://raw.githubusercontent.com/Deftwun/BlockBlaster/master/assets/icon.png"><div id="titleBarButtons"><img id="minimizeButton" src="https://raw.githubusercontent.com/Deftwun/BlockBlaster/master/assets/minimize.png"> <img id="closeButton" src="https://raw.githubusercontent.com/Deftwun/BlockBlaster/master/assets/close.png"></div></div></body></html>