@m2c2kit/cli 0.1.9 → 0.1.10

package/dist/.env

@@ -1 +1 @@
-CLI_VERSION=0.1.9
+CLI_VERSION=0.1.10

package/dist/cli.js

@@ -146,6 +146,10 @@ await yarg
             sourceFilePath: path.join(packageHomeFolderPath, "fonts", "roboto", "Roboto-Regular.ttf"),
             destinationFilePath: path.join(newFolderPath, "fonts", "roboto", "Roboto-Regular.ttf"),
         },
+        {
+            sourceFilePath: path.join(packageHomeFolderPath, "scripts", "post-install.mjs"),
+            destinationFilePath: path.join(newFolderPath, "post-install.mjs"),
+        },
     ];
     let errorCopyingFiles = false;
     copyFiles.forEach((c) => {

package/dist/scripts/post-install.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import fs from "fs";
+import { resolve, basename } from "path";
+
+const { dependencies } = JSON.parse(fs.readFileSync("./package.json"));
+
+/** If this m2c2kit app uses surveys, then copy the required css
+ * files from node_modules so they can be bundled */
+if (Object.keys(dependencies).includes("@m2c2kit/survey")) {
+  // does ./css folder exist? if not, create
+  if (!fs.existsSync("./css")) {
+    fs.mkdirSync("./css");
+  }
+
+  const cssDistDir = "./node_modules/@m2c2kit/survey/dist/css/";
+  const cssFiles = fs
+    .readdirSync(cssDistDir, {
+      withFileTypes: true,
+    })
+    .filter((dirent) => !dirent.isDirectory())
+    .map((dirent) => resolve(cssDistDir, dirent.name));
+
+  cssFiles.forEach((file) => {
+    const sourceContents = fs.readFileSync(file);
+    fs.writeFileSync(`./css/${basename(file)}`, sourceContents);
+  });
+}

package/dist/templates/package.json.handlebars

@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "scripts": {
     "serve": "rollup -c --watch --configServe",
-    "build": "rollup -c --configProd"
+    "build": "rollup -c --configProd",
+    "postinstall": "node ./post-install.mjs"
   },
   "private": true,
   "dependencies": {
-    "@m2c2kit/core": "0.1.7",
-    "@m2c2kit/addons": "0.1.7"
+    "@m2c2kit/core": "0.1.8",
+    "@m2c2kit/addons": "0.1.8"
   },
   "devDependencies": {
     "rollup": "2.63.0",

package/dist/templates/rollup.config.js.handlebars

@@ -58,7 +58,11 @@ export default (commandLineArgs) => {
             {
               src: "img/*",
               dest: `${outputFolder}/img`,
-            },            
+            },
+            {
+              src: "css/*",
+              dest: `${outputFolder}/css`,
+            },
           ],
           copyOnce: false,
           hook: "writeBundle",

package/dist/templates/starter.ts.handlebars

@@ -1,29 +1,31 @@
 import {
-  WebColors,
-  Action,
   Game,
+  Action,
   Scene,
-  Sprite,
+  Shape,
   Point,
   Label,
-  LabelHorizontalAlignmentMode,
-  Shape,
+  WebColors,
   Rect,
-  GameOptions,
+  LabelHorizontalAlignmentMode,
   GameParameters,
+  GameOptions,
   TrialSchema,
   Session,
-  GameTrialEvent,
-  GameLifecycleEvent,
   SessionLifecycleEvent,
-  EventBase,
-  EventType
+  ActivityDataEvent,
+  ActivityLifecycleEvent,
+  Sprite,
 } from "@m2c2kit/core";
 import { Button, Instructions } from "@m2c2kit/addons";
 
 class {{className}} extends Game {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor() {
+    /**
+     * These are configurable game parameters and their defaults.
+     * At run time, they can be changed with the setParameters() method.
+     */    
     const defaultParameters: GameParameters = {
       ReadyTime: {
         value: 1000,
@@ -33,6 +35,12 @@ class {{className}} extends Game {
       TrialNum: { value: 3, description: "How many trials to run" },
     };
 
+    /**
+     * This describes all the data that will be generated by the assessment.
+     * At runtime, when a trial completes, the data will be returned to the
+     * session with a callback, along with this schema transformed into
+     * JSON Schema Draft-07 format.
+     */    
     const demoTrialSchema: TrialSchema = {
       colorChosen: { type: "string", description: "the color that was picked" },
       correct: { type: "boolean", description: "was the answer correct?" },
@@ -47,9 +55,9 @@ class {{className}} extends Game {
       showFps: true,
       trialSchema: demoTrialSchema,
       parameters: defaultParameters,
-      // set this color so we can see the boundaries of the game during development,
-      // but typically we would not set this
-      bodyBackgroundColor: WebColors.Wheat,
+      // You can set this color so we can see the boundaries of the game during development,
+      // but typically we would not set this, so it is commented out
+      // bodyBackgroundColor: WebColors.Wheat,
       // note: using 2:1 aspect ratio, because that is closer to modern phones
       width: 400,
       height: 800,
@@ -97,6 +105,7 @@ class {{className}} extends Game {
           textFontSize: 24,
           titleFontSize: 30,
           image: "smiley",
+          imageMarginBottom: 24
         },
         {
           title: "{{appName}} Demo",
@@ -301,11 +310,6 @@ class {{className}} extends Game {
     });
     startOverButton.isUserInteractionEnabled = true;
     startOverButton.onTapDown(() => {
-      // in the setup() for the end scene, we animate the smiley sprite with
-      // a move action. if the user taps the start over button before the
-      // animation is completed, we should remove it by calling
-      // removeAllActions()
-      smileySprite.removeAllActions();
       game.initData();
       game.presentScene(getReadyScene);
     });
@@ -325,69 +329,14 @@ class {{className}} extends Game {
     });
     endScene.addChild(exitButton);
 
-    const smileySprite = new Sprite({ imageName: "smiley" });
-    endScene.addChild(smileySprite);
-
     endScene.setup(() => {
       doneLabel.text = `You did ${game.trialIndex} trials. You're done!`;
-
-      // example of how to position a sprite and create an action to move it
-      smileySprite.position = new Point(200, 500);
-      smileySprite.run(
-        Action.Move({ point: new Point(200, 100), duration: 3000 })
-      );
     });
 
     game.entryScene = "instructions-01";
   }
 }
 
-// ===========================================================================
-
-//#region to support m2c2kit in Android WebView
-/** When running within an Android WebView, the below defines how the session
- * can communicate events back to the Android app. Note: names of this Android
- * namespace and its functions must match the corresponding Android code
- * in addJavascriptInterface() and @JavascriptInterface */
-// eslint-disable-next-line @typescript-eslint/no-namespace
-declare namespace Android {
-  function onGameTrialComplete(gameTrialEventAsString: string): void;
-  function onGameLifecycleChange(gameLifecycleEventAsString: string): void;
-  function onSessionLifecycleChange(
-    sessionLifecycleEventAsString: string
-  ): void;
-  /** if the Android native app will control the session execution and be
-   * able to set custom game paraemters (which is probably what you want),
-   * be sure that sessionManualStart() in the native code returns true */
-  function sessionManualStart(): boolean;
-}
-
-function contextIsAndroidWebView(): boolean {
-  return typeof Android !== "undefined";
-}
-
-function sendEventToAndroid(event: EventBase) {
-  switch (event.eventType) {
-    case EventType.sessionLifecycle: {
-      Android.onSessionLifecycleChange(JSON.stringify(event));
-      break;
-    }
-    case EventType.gameTrial: {
-      Android.onGameTrialComplete(JSON.stringify(event));
-      break;
-    }
-    case EventType.gameLifecycle: {
-      Android.onGameLifecycleChange(JSON.stringify(event));
-      break;
-    }
-    default:
-      throw new Error(
-        `attempt to send unknown event ${event.eventType} to Android`
-      );
-  }
-}
-//#endregion
-
 const game1 = new {{className}}();
 // default was 3 trials; this is how we can specify a different value
 game1.setParameters({ TrialNum: 2 });
@@ -395,68 +344,71 @@ game1.setParameters({ TrialNum: 2 });
 const session = new Session({
   activities: [game1],
   sessionCallbacks: {
-    // onSessionLifecycleChange() will be called on events such
-    // as when the session initialization is complete. Once initialized,
-    // the session will automatically start, unless we're running
-    // in an Android WebView and a manual start is desired.
-    onSessionLifecycleChange: (event: SessionLifecycleEvent) => {
-      if (event.initialized) {
-        //#region to support m2c2kit in Android WebView
-        if (contextIsAndroidWebView()) {
-          sendEventToAndroid(event);
-        }
-        if (contextIsAndroidWebView() && Android.sessionManualStart()) {
-          return;
-        }
-        //#endregion
+    /**
+     * onSessionLifecycleChange() will be called on events such
+     * as when the session initialization is complete or when it
+     * ends.
+     *
+     * Once initialized, the session will automatically start,
+     * unless we're running in an Android WebView AND a manual start
+     * is desired.
+     */
+    onSessionLifecycleChange: (ev: SessionLifecycleEvent) => {
+      if (ev.initialized) {
         session.start();
       }
-      if (event.ended) {
+      if (ev.ended) {
         console.log("session ended");
-        //#region to support m2c2kit in Android WebView
-        if (contextIsAndroidWebView()) {
-          sendEventToAndroid(event);
-        }
-        //#endregion
       }
     },
   },
-  gameCallbacks: {
-    // onGameTrialComplete() is where you insert code to post data to an API
-    // or interop with a native function in the host app, if applicable    
-    onGameTrialComplete: (event: GameTrialEvent) => {
-      console.log(`********** trial (index ${event.trialIndex}) complete`);
-      console.log("data: " + JSON.stringify(event.gameData));
-      console.log("trial schema: " + JSON.stringify(event.trialSchema));
-      console.log("game parameters: " + JSON.stringify(event.gameParameters));
-
-      //#region to support m2c2kit in Android WebView
-      if (contextIsAndroidWebView()) {
-        sendEventToAndroid(event);
-      }
-      //#endregion
+  activityCallbacks: {
+    /**
+     * onActivityDataCreate() is where you insert code to post data to an API
+     * or interop with a native function in the host app.
+     *
+     * newData is the data that was just generated by the completed trial
+     * data is all the data, cumulative of all trials, that have been generated.
+     *
+     * We separate out newData from data in case you want to alter the execution
+     * based on the most recent trial, e.g., maybe you want to stop after
+     * a certain user behavior or performance threshold in the just completed
+     * trial.
+     */
+    onActivityDataCreate: (ev: ActivityDataEvent) => {
+      console.log(`********** trial complete`);
+      console.log("newData: " + JSON.stringify(ev.newData));
+      console.log("newData schema: " + JSON.stringify(ev.newDataSchema));
+      console.log("data: " + JSON.stringify(ev.data));
+      console.log("data schema: " + JSON.stringify(ev.dataSchema));
+      console.log(
+        "activity parameters: " + JSON.stringify(ev.activityConfiguration)
+      );
     },
-    onGameLifecycleChange: (event: GameLifecycleEvent) => {
-      if (event.ended) {
-        console.log(`ended game ${event.gameName}`);
+    /**
+     * onActivityLifecycleChange() notifies us when an activity, such
+     * as an assessment or a survey, has completed. Usually, however,
+     * we want to know when all the activities are done, so we'll
+     * look for the session ending via onSessionLifecycleChange
+     */
+    onActivityLifecycleChange: (ev: ActivityLifecycleEvent) => {
+      if (ev.ended) {
+        console.log(`ended activity ${ev.name}`);
         if (session.nextActivity) {
           session.advanceToNextActivity();
         } else {
           session.end();
         }
-        //#region to support m2c2kit in Android WebView
-        if (contextIsAndroidWebView()) {
-          sendEventToAndroid(event);
-        }
-        //#endregion
       }
     },
   },
 });
 
-/** make session also available on window in case we want to control
+/**
+ * Make session also available on window in case we want to control
  * the session through another means, such as other javascript or
- * browser code, or the Android WebView loadUrl() method */
+ * browser code, or the Android WebView loadUrl() method
+ * */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as unknown as any).session = session;
 session.init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/cli",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "m2c2kit command line interface",
   "module": "dist/cli.js",
   "files": [
@@ -17,7 +17,7 @@
     "build": "npm run clean && npm run compile && npm run copy-files && npm run write-dotenv",
     "compile": "tsc",
     "clean": "rimraf dist/ && rimraf build/",
-    "copy-files": "copyfiles -f build/src/cli.js dist && copyfiles templates/* fonts/**/* dist/",
+    "copy-files": "copyfiles -f build/src/cli.js dist && copyfiles scripts/* templates/* fonts/**/* dist/",
     "write-dotenv": "node write-dotenv.js"
   },
   "author": "",