README and minor startup updates, GameApp and game-view.

README.md

@@ -8,8 +8,57 @@ This project is a sandbox for building the Nice Arcade SDK. I'm tinkering right
 yarn start
 ```
 
-This will run [minigame-engine.js](minigame-engine.js), which is just enough ExpressJS and Pug to emulate how the game will be loaded and presented by a DTP application.
+This will run [minigame-engine.js](minigame-engine.js), which is just enough ExpressJS and Pug to emulate how the game will be loaded and presented by a DTP application. This harness is not bundled with your game or application, so any changes you make to minigame-engine.js will not be available in the final hosting environment.
 
-## Nice Arcade SDK
+## Nice Game SDK
 
-[dist/js](dist/js) basically now _is_ the Nice Arcade SDK. At some point, it will be extracted from this project and added as a dependency.
+CyberEgg 2077 is a demonstration or sample game showing how to use the [Nice Game SDK](https://git.digitaltelepresence.com/digital-telepresence/dtp-nice-game) to build games for the Nice Arcade.
+
+## Game View
+
+Everything begins with the game view. This is implemented using [Pug](https://pugjs.org/), a templating and scripting language for generating HTML (and other) output. You are defining a view partial, not the whole page. Your view must implement the `game-view` block.
+
+The [layout.pug](views/layout.pug) script included in this project provides enough to put your game on the page. It will be different in production, and will wrap your game in a different overall page structure. You can only rely on the elements you create in the `game-view` block. All other elements and CSS classes are provided by the system, and are subject to change at any time.
+
+## Game CSS
+
+Your Game View will likely want to also provide custom CSS for styling the elements you'll add to the view. This sample project uses LESS to compile `dist/css/style.css`. The system will inject this CSS into your page when loading your game, and only when loading your game. This enables you to style everything within the `game-view` block however you see fit. How you build the file is entirely up to you. You can type raw CSS3, or you can use tools like SASS/SCSS, LESS, and others. You will need to modify [gulpfile.js](gulpfile.js) in the project root to provide alternate tools and build rules.
+
+## Game Scripts
+
+The [dist/js](dist/js) directory exists to host your JavaScript source files. These should be the final, output, bundled-up builds you want to distribute to the public.
+
+The system will load `dist/js/game-app.js`. How you produce that file, and what it contains as a bundle, is entirely up to you. At a minimum, you application object must be named `GameApp` and must be derived from `NiceGame` as shown here:
+
+```js
+
+const DTP_COMPONENT_NAME = 'your-game';
+
+import { NiceGame } from '/dtp-nice-game/nice-game.js';
+
+export default class GameApp extends NiceGame {
+
+  constructor ( ) {
+    super(DTP_COMPONENT_NAME);
+  }
+
+  async run ( ) {
+    await this.startGameEngine(
+      this.onGameUpdate.bind(this),
+      this.onGameRender.bind(this),
+    );
+  }
+
+  onGameUpdate ( ) {
+    /*
+     * Update all the things in the game
+     */
+  }
+
+  onGameRender (ctx) {
+    /*
+     * Render/draw all the things in the game
+     */
+  }
+}
+```

dist/js/cyberegg2077.js → dist/js/game-app.js

@@ -1,10 +1,10 @@
-// cyberegg2077.js
+// game-app.js
 // Copyright (C) 2022 Rob Colbert @[email protected]
 // License: Apache-2.0
 
 'use strict';
 
-const DTP_COMPONENT_NAME = 'nice-game';
+const DTP_COMPONENT_NAME = 'game-app';
 
 import { NiceGame } from '/dtp-nice-game/nice-game.js';
 
@@ -13,7 +13,7 @@ import GameEggSimulator from './lib/game-egg-simulator.js';
 import GamePlayer from './lib/game-player.js';
 import GameEnemies from './lib/game-enemies.js';
 
-class CyberEgg2077 extends NiceGame {
+export default class GameApp extends NiceGame {
 
   constructor ( ) {
     super(DTP_COMPONENT_NAME);
@@ -27,7 +27,10 @@ class CyberEgg2077 extends NiceGame {
   }
 
   async run ( ) {
-    await this.startGameEngine(this.onUpdateDisplay.bind(this));
+    await this.startGameEngine(
+      this.onGameUpdate.bind(this),
+      this.onGameRender.bind(this),
+    );
 
     this.input.addKey('moveLeft', 'ArrowLeft');
     this.input.addKey('moveRight', 'ArrowRight');
@@ -69,23 +72,36 @@ class CyberEgg2077 extends NiceGame {
     this.nextSpawnTime = NOW.valueOf() + this.nextSpawnInterval;
   }
 
-  onUpdateDisplay (ctx) {
+  onGameUpdate ( ) {
     switch (this.mode) {
       case 'loading':
         break;
       case 'menu':
-        return this.updateMenu(ctx);
+        return this.updateMenu( );
       case 'game':
-        return this.updateGame(ctx);
+        return this.updateGame( );
     }
   }
 
-  updateMenu (ctx) {
+  onGameRender (ctx) {
+    switch (this.mode) {
+      case 'loading':
+        break;
+      case 'menu':
+        return this.renderMenu(ctx);
+      case 'game':
+        return this.renderGame(ctx);
+    }
+  }
+
+  updateMenu ( ) { }
+
+  renderMenu (ctx) {
     this.background.draw(ctx, 0, 0);
     this.tex.render(ctx);
   }
 
-  updateGame (ctx) {
+  updateGame ( ) {
     const NOW = new Date();
 
     this.background.update();
@@ -113,16 +129,10 @@ class CyberEgg2077 extends NiceGame {
     }
     this.eggs.update();
 
-    /*
-     * See if any eggs have hit any enemies
-     */
+  }
 
-    /*
-     * Render "back to front" (painter's algorithm)
-     */
-     
+  renderGame (ctx) {
     this.background.draw(ctx, 0, 0);
-
     this.enemies.render(ctx);
     this.eggs.render(ctx);
     this.tex.render(ctx);
@@ -181,6 +191,6 @@ class CyberEgg2077 extends NiceGame {
 }
 
 window.addEventListener('load', async ( ) => {
-  window.game = new CyberEgg2077();
+  window.game = new GameApp();
   window.game.run();
 });

minigame-engine.js

@@ -2,6 +2,14 @@
 // Copyright (C) 2022 Rob Colbert
 // License: Apache-2.0
 
+/*
+ * This module provides the most basic runtime environment for testing your game
+ * in an environment similar to what will be provided when hosted in the arcade.
+ * 
+ * You should not alter this script at all. None of your changes made will be
+ * available in the final environment(s).
+ */
+
 'use strict';
 
 const path = require('path');
@@ -13,8 +21,8 @@ module.config = {
 };
 
 module.getHomeView = async (req, res) => {
-  res.locals.gameModuleUrl = '/dist/js/cyberegg2077.js';
-  res.render('index');
+  res.locals.gameModuleUrl = '/dist/js/game-app.js';
+  res.render('game-view');
 };
 
 (async ( ) => {