Webpack and dotenv updates and refactorings

- use dotenv to load developer and game config from .env
- remove game-style.js and game-style.css
- game-app.js now imports LESS source
- mini-css-extract-plugin added to Webpack
- CSS now generated as external file in bundle

.gitignore

@@ -2,4 +2,4 @@ node_modules
 dist
 bundle
 
-developer-credentials.json
+.env

bundle-submit.js

@@ -4,6 +4,8 @@
 
 'use strict';
 
+import 'dotenv/config';
+
 import path, { dirname } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url)); // jshint ignore:line
@@ -11,7 +13,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url)); // jshint ignore:line
 import { createRequire } from "module";
 const require = createRequire(import.meta.url); // jshint ignore:line
 
-import fetch, { FormData } from 'node-fetch';
+import fetch, { FormData, fileFrom } from 'node-fetch';
 
 /*
  * This script loads the developer's credentials, verifies that a bundle exists,
@@ -21,17 +23,21 @@ import fetch, { FormData } from 'node-fetch';
 (async ( ) => {
 
   try {
-    const credentials = require(path.join(__dirname, 'developer-credentials.json'));
     const pkg = require(path.join(__dirname, 'package.json'));
     const formData = new FormData();
 
     formData.set('package', pkg);
-    formData.set('bundle-file', )
-    const response = await fetch('https://arcade.nicecrew.com/submissions', {
+
+    const bundleFileName = path.join(__dirname, 'bundle', process.argv[2]);
+    const bundleFile = fileFrom(bundleFileName, 'application/gzip');
+    formData.set('bundle-file', bundleFile, 'nice-bundle.tar.gz');
+
+    const response = await fetch(`https://${process.env.ARCADE_HOST}/submissions`, {
       method: 'POST',
       headers: {
-        'X-Developer-Id': credentials.developerId,
-        'X-Developer-Key': credentials.developerKey,
+        'X-Game-Id': process.env.ARCADE_GAME_ID,
+        'X-Developer-Id': process.env.ARCADE_DEVELOPER_ID,
+        'X-Developer-Key': process.env.ARCADE_DEVELOPER_KEY,
       },
       body: formData,
     });

game/js/game-app.js

@@ -5,6 +5,7 @@
 'use strict';
 
 const DTP_COMPONENT_NAME = 'game-app';
+import '../less/style.less';
 
 import { NiceGame, NiceVector2d } from 'dtp-nice-game';
 

game/js/game-style.js

@@ -1,7 +0,0 @@
-// game-style.js
-// Copyright (C) 2022 Rob Colbert @[email protected]
-// Licence: Apache-2.0
-
-'use strict';
-
-import '../less/style.less';

game/views/layout.pug

@@ -4,7 +4,7 @@ html(lang="en")
     meta(charset="utf-8")
     meta(name="viewport" content="width=device-width, initial-scale=1")
     title CyberEgg 2077
-    link(rel="stylesheet", href="/dist/game-style.css")
+    link(rel="stylesheet", href="/dist/game-app.css")
   body
 
     .container

nice-harness.js

@@ -61,7 +61,10 @@ async function getHomeView (req, res) {
   // provide the "home" page to serve out the game
   harness.app.get('/', getHomeView);
 
-  harness.app.listen(3000, ( ) => {
+  const port = parseInt(process.env.ARCADE_HTTP_PORT || '3000', 10);
+  const host = process.env.ARCADE_HTTP_BIND || '127.0.0.1';
+  console.log('Starting game server harness', { host, port });
+  harness.app.listen(port, host, ( ) => {
     console.log('CyberEgg 2077 is alive');
   });
 

package.json

@@ -8,13 +8,16 @@
     "description": "In a world where memes come to life, a pineapple takes on evil and wins!"
   },
   "scripts": {
-    "develop": "node nice-harness.js"
+    "develop": "node nice-harness.js",
+    "bundle-build": "./bundle-build",
+    "bundle-submit": "node bundle-submit.js"
   },
   "repository": "https://git.digitaltelepresence.com/rob/cyberegg2077.git",
   "author": "Rob Colbert",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
+    "dotenv": "^16.0.0",
     "dtp-nice-game": "https://git.digitaltelepresence.com/digital-telepresence/dtp-nice-game.git",
     "express": "^4.17.3",
     "node-fetch": "^3.2.3",

webpack.config.js

@@ -13,7 +13,6 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 export default {
   entry: {
     'game-app': './game/js/game-app.js',
-    'game-style': './game/js/game-style.js',
   },
 //  mode: 'development',
   mode: 'production',
@@ -41,6 +40,9 @@ export default {
           },
           {
             loader: MiniCssExtractPlugin.loader,
+            options: {
+              esModule: false,
+            },
           },
           {
             loader: "css-loader",

yarn.lock

@@ -549,6 +549,11 @@ [email protected]:
     dom-serializer "0"
     domelementtype "1"
 
+dotenv@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.0.tgz#c619001253be89ebb638d027b609c75c26e47411"
+  integrity sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==
+
 "dtp-nice-game@https://git.digitaltelepresence.com/digital-telepresence/dtp-nice-game.git":
   version "0.1.5"
   resolved "https://git.digitaltelepresence.com/digital-telepresence/dtp-nice-game.git#9e9cd8a2bad68cacf4110b42ae27d9cfa471dbb6"