refactor webpack config - end

.gitignore

@@ -60,14 +60,12 @@ typings/
 # next.js build output
 .next
 
-#prod build
-dist
-
 #mock db
 db.json
 
-#babel build
-webpack.config.dev.babel.js
+#webpack dev build
+assets
+webpack
 
 #cordova build
 platforms/

buildScripts/srcServer.js

@@ -1,42 +0,0 @@
-import express from 'express';
-import path from 'path';
-import open from 'open';
-import webpack from 'webpack';
-import config from '../webpack.config.dev';
-
-/* eslint-disable no-console */
-
-const port = 3000;
-const app = express();
-const compiler = webpack(config);
-
-app.use(require('webpack-dev-middleware')(compiler, {
-  noInfo: true,
-  publicPath: config.output.publicPath
-}));
-
-app.get('/', function (req, res) {
-  // bind path
-  res.sendFile(path.join(__dirname, '../src/index.html'));
-});
-
-
-// The onle below is let's say the real prod DB, the test one will be json server
-// Use same express for test and for serving API to web app :
-app.get('/users', function (req, res) {
-  //Hard coding here but ler's pretend it is a real DB
-
-  res.json([
-    { "id": 1, "firstName": "Jojo", "lastName": "LB", "email": "jojo@gmail.com" },
-    { "id": 2, "firstName": "Lily", "lastName": "Ma", "email": "lily@gmail.com" },
-    { "id": 3, "firstName": "Bob", "lastName": "Smith", "email": "bob@gmail.com" }
-  ]);
-});
-
-app.listen(port, function (err) {
-  if (err) {
-    console.log(err);
-  } else {
-    open('http://localhost:' + port);
-  }
-});

buildScripts/startMessage.js

@@ -1,5 +0,0 @@
-import chalk from 'chalk';
-
-//var chalk = require('chalk');
-
-console.log(chalk.green('Starting app in dev mode...')); // eslint-disable-line no-console

buildScripts/testSetup.js

@@ -1,7 +0,0 @@
-// This file isn't transpiled, so must use CommonJS and ES5
-
-// Register babel to transpile before our tests run.
-require('@babel/register')();
-
-// Disable webpack features that Mocha doesn't understand.
-require.extensions['.css'] = function() {};

package.json

@@ -6,36 +6,23 @@
     "ecosystem:cordova"
   ],
   "scripts": {
-    "dev": "webpack",
+    "dev": "webpack --watch",
     "precor-build": "cordova prepare",
-    "cor-build": "babel webpack.config.dev.js -o webpack.config.dev.babel.js && cordova build -- --webpackConfig webpack.config.dev.babel.js",
-    "cor-run": "cordova run -- -w webpack.config.dev.babel.js -l",
-    "prestart": "babel-node buildScripts/startMessage.js",
-    "start": "npm-run-all --parallel open:src lint:watch test:watch",
-    "open:src": "babel-node buildScripts/srcServer.js",
-    "lint": "esw webpack.config.* src buildScripts --color",
+    "cor-build": "CORDOVA=true cordova build -- --webpackConfig webpack.config.js",
+    "cordova": "CORDOVA=true cordova run -- -w webpack.config.js",
+    "start": "npm-run-all --parallel dev lint:watch",
+    "lint": "esw webpack.config.* src --color",
     "lint:watch": "npm run lint -- --watch",
     "localtunnel": "lt --port 3000",
     "share": "npm-run-all --parallel open:src localtunnel",
-    "test": "mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\"",
-    "test:watch": "npm run test -- --watch",
-    "generate-mock-data": "babel-node buildScripts/generateMockData.js",
-    "prestart-mockapi": "npm run generate-mock-data",
-    "start-mockapi": "json-server --watch src/api/db.json --port 3001",
-    "clean-dist": "rimraf ./dist && mkdir dist",
-    "prebuild": "npm-run-all clean-dist test lint",
-    "build": "babel-node buildScripts/build.js",
-    "postbuild": "babel-node buildScripts/distServer.js",
-    "deploy": "surge ./dist"
+    "test": "mocha --reporter progress \"src/**/*.test.js\"",
+    "test:watch": "npm run test -- --watch"
   },
-  "author": "Cory House",
+  "author": "JOJO",
   "license": "MIT",
   "dependencies": {
     "@babel/node": "7.6.2",
     "@babel/polyfill": "7.6.0",
-    "cordova-browser": "^6.0.0",
-    "cordova-plugin-browsersync": "1.1.0",
-    "cordova-plugin-webpack": "^0.4.7",
     "phaser": "3.19.0"
   },
   "devDependencies": {
@@ -51,11 +38,12 @@
     "chalk": "2.4.2",
     "clean-webpack-plugin": "3.0.0",
     "copy-webpack-plugin": "5.0.4",
+    "cordova-browser": "^6.0.0",
+    "cordova-plugin-webpack": "^0.4.7",
     "cordova-plugin-whitelist": "^1.3.4",
     "eslint": "6.4.0",
     "eslint-plugin-import": "2.18.2",
     "eslint-watch": "6.0.1",
-    "express": "4.17.1",
     "file-loader": "4.2.0",
     "html-webpack-plugin": "3.2.0",
     "mocha": "6.2.0",
@@ -77,4 +65,4 @@
       "browser"
     ]
   }
-}
+}

src/controller/menu/main-menu-scene.js

@@ -1,7 +1,6 @@
 'use strict';
 import GameGenerator from '../game-generator';
 import {GameType} from '../../utils/const/game-type-enum';
-// import logo from '../../assets/twelveHeroes_cover.png';
 import { PhaserScene } from '../../utils/const/phaser-scene-enum';
 
 export default class MainMenu extends Phaser.Scene {
@@ -20,7 +19,7 @@ export default class MainMenu extends Phaser.Scene {
 
   create() {
     console.log('create');
-    let logo = this.add.sprite(0,0,'logo');
+    let logo = this.add.sprite(20,0,'logo');
     logo.setOrigin(0,0);
     setTimeout(() => {
       console.log('timeout end');

src/index.html

@@ -18,8 +18,9 @@
     under the License.
 -->
 <html>
-    <head>
-        <!--
+
+<head>
+  <!--
         Customize this policy to fit your own app's needs. For more guidance, see:
             https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
         Some notes:
@@ -28,21 +29,26 @@
             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                 * Enable inline JS: add 'unsafe-inline' to default-src
         -->
-        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;"> -->
-        <meta name="format-detection" content="telephone=no">
-        <meta name="msapplication-tap-highlight" content="no">
-        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
-        <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
-        <title>Hello World</title>
-    </head>
-    <body>
-        <div class="app">
-            <h1>Twelve Heroes</h1>
-            <div id="deviceready" class="blink">
-                <p class="event listening"></p>
-                <p class="event received"></p>
-            </div>
-        </div>
-        <script type="text/javascript" src="cordova.js"></script>
-    </body>
+  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;"> -->
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
+  <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
+  <title>Hello World</title>
+</head>
+
+<body>
+  <% if (process.env.CORDOVA) { %>
+
+  <div class="app">
+    <h1>Twelve Heroes</h1>
+    <div id="deviceready" class="blink">
+      <p class="event listening"></p>
+      <p class="event received"></p>
+    </div>
+  </div>
+  <script type="text/javascript" src="cordova.js"></script>
+  <% } %>
+</body>
+
 </html>

src/main.js

@@ -5,37 +5,49 @@
 
 import PhaserEngine from './controller/phaser-engine';
 
-var app = {
+function startGame() {
+  console.log('start Game')
+  let phaserEngine = new PhaserEngine();
+  phaserEngine.start();
+}
+
+let app = {
   // Application Constructor
-  initialize: function() {
+  initialize: function () {
     console.log('app initialize');
-      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
+    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
 
   // deviceready Event Handler
   //
   // Bind any cordova events here. Common events are:
   // 'pause', 'resume', etc.
-  onDeviceReady: function() {
-      this.receivedEvent('deviceready');
-      let phaserEngine = new PhaserEngine();
-      phaserEngine.start();
+  onDeviceReady: function () {
+    this.receivedEvent('deviceready');
+    startGame();
   },
 
   // Update DOM on a Received Event
-  receivedEvent: function(id) {
-      var parentElement = document.getElementById(id);
-      var listeningElement = parentElement.querySelector('.listening');
-      var receivedElement = parentElement.querySelector('.received');
+  receivedEvent: function (id) {
+    var parentElement = document.getElementById(id);
+    var listeningElement = parentElement.querySelector('.listening');
+    var receivedElement = parentElement.querySelector('.received');
 
-      listeningElement.setAttribute('style', 'display:none;');
-      receivedElement.setAttribute('style', 'display:block;');
+    listeningElement.setAttribute('style', 'display:none;');
+    receivedElement.setAttribute('style', 'display:block;');
 
-      console.log('Received Event: ' + id);
+    console.log('Received Event: ' + id);
   }
 };
 
-app.initialize();
+console.log('cordova  :', process.env.CORDOVA );
+
+if (process.env.CORDOVA) {
+
+  app.initialize();
+} else {
+  startGame();
+}
 
 
 

webpack.config.js

@@ -3,12 +3,18 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
-var {CleanWebpackPlugin} = require('clean-webpack-plugin');
+var { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 var definePlugin = new webpack.DefinePlugin({
-  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
+  'process.env.CORDOVA': JSON.stringify(JSON.parse(process.env.CORDOVA || 'false'))
 });
 
+var outpath = './webpack/';
+
+if (process.env.CORDOVA) {
+  var outpath = 'www/';
+}
+
 module.exports = {
   devtool: 'cheap-source-map',
   mode: 'development',
@@ -22,7 +28,7 @@ module.exports = {
     pathinfo: true,
     filename: '[name].bundle.js',
     chunkFilename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'www/dist/')
+    path: path.resolve(__dirname, outpath + 'dist')
   },
   optimization: {
     splitChunks: {
@@ -33,12 +39,12 @@ module.exports = {
   },
   plugins: [
     definePlugin,
-    new CleanWebpackPlugin({verbose:true}),
+    new CleanWebpackPlugin(),
     new CopyWebpackPlugin([
       {
         context: path.resolve(__dirname, 'src', 'assets'),
         from: '**/*',
-        to: path.resolve(__dirname, 'www', 'assets')
+        to: path.resolve(__dirname, outpath, 'assets')
       }
     ]),
     new HtmlWebpackPlugin({
@@ -63,7 +69,7 @@ module.exports = {
       host: process.env.IP || 'localhost',
       port: process.env.PORT || 3000,
       server: {
-        baseDir: ['./', './build']
+        baseDir: [outpath, './build']
       }
     }),
     new webpack.DefinePlugin({