@m2c2kit/cli 0.1.10 → 0.1.11

package/dist/.env

@@ -1 +1 @@
-CLI_VERSION=0.1.10
+CLI_VERSION=0.1.11

package/dist/templates/index.html.handlebars

@@ -20,7 +20,7 @@
         height: 100vh;
         width: 100vw;
       ">
-    <canvas style="height: 100vh; width: 100vw"></canvas>
+    <canvas style="height: 100vh; width: 100vw" id="m2c2-canvas"></canvas>
       <!-- If you don't want the game to start immediately, remove session.start()
            from the code and call session.start() somehow else, such as with
            the button shown below or a programmatic call -->

package/dist/templates/package.json.handlebars

@@ -8,14 +8,14 @@
   },
   "private": true,
   "dependencies": {
-    "@m2c2kit/core": "0.1.8",
-    "@m2c2kit/addons": "0.1.8"
+    "@m2c2kit/core": "0.1.9",
+    "@m2c2kit/addons": "0.1.9"
   },
   "devDependencies": {
-    "rollup": "2.63.0",
-    "@rollup/plugin-typescript": "8.3.0",
+    "rollup": "2.70.0",
+    "@rollup/plugin-typescript": "8.3.1",
     "@rollup/plugin-node-resolve": "13.1.3",
-    "@rollup/plugin-commonjs": "21.0.1",
+    "@rollup/plugin-commonjs": "21.0.2",
     "rollup-plugin-shim": "1.0.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-delete": "2.0.0",

package/dist/templates/starter.ts.handlebars

@@ -3,10 +3,8 @@ import {
   Action,
   Scene,
   Shape,
-  Point,
   Label,
   WebColors,
-  Rect,
   LabelHorizontalAlignmentMode,
   GameParameters,
   GameOptions,
@@ -16,6 +14,7 @@ import {
   ActivityDataEvent,
   ActivityLifecycleEvent,
   Sprite,
+  Timer,
 } from "@m2c2kit/core";
 import { Button, Instructions } from "@m2c2kit/addons";
 
@@ -44,6 +43,7 @@ class {{className}} extends Game {
     const demoTrialSchema: TrialSchema = {
       colorChosen: { type: "string", description: "the color that was picked" },
       correct: { type: "boolean", description: "was the answer correct?" },
+      responseTime: { type: "number", description: "response time (ms) to choose shape" }
     };
 
     const options: GameOptions = {
@@ -52,7 +52,7 @@ class {{className}} extends Game {
       uri: "https://your-repo-or-webpage-here",
       shortDescription: "A brief couple sentence description.",
       longDescription: "An extended, many-sentence description.",
-      showFps: true,
+      showFps: false,
       trialSchema: demoTrialSchema,
       parameters: defaultParameters,
       // You can set this color so we can see the boundaries of the game during development,
@@ -88,6 +88,9 @@ class {{className}} extends Game {
     };
 
     super(options);
+  }
+
+  init(): void {
     // just for convenience, alias the variable game to "this"
     // (even though eslint doesn't like it)
     // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -134,19 +137,19 @@ class {{className}} extends Game {
     const getReadyMessage = new Label({
       text: "Get Ready",
       fontSize: 24,
-      position: new Point(200, 400),
+      position: { x: 200, y: 400 },
     });
     getReadyScene.addChild(getReadyMessage);
 
     // example of how to use an image. The image must be previously loaded
     const starSprite = new Sprite({
       imageName: "star",
-      position: new Point(200, 500),
+      position: { x: 200, y: 500 },
     });
     getReadyScene.addChild(starSprite);
 
-    // getReadyScene.setup() has a callback that is executed each time this scene is shown
-    getReadyScene.setup(() => {
+    // getReadyScene.onSetup() has a callback that is executed each time this scene is shown
+    getReadyScene.onSetup(() => {
       getReadyScene.run(
         Action.Sequence([
           // Get the wait duration from the default game parameters, defined above
@@ -160,32 +163,32 @@ class {{className}} extends Game {
       );
     });
 
-    // these entities before the setup() can be defined outside of a setup()
+    // these entities before the onSetup() can be defined outside of a onSetup()
     // because they exist through multiple trials
     // Their position and how they respond to interactions may differ across trials,
-    // and that logic will be written within a setup()
+    // and that logic will be written within a onSetup()
     const chooseRectangleScene = new Scene({
       backgroundColor: WebColors.LightGray,
     });
     game.addScene(chooseRectangleScene);
     const redRect = new Shape({
-      rect: new Rect({ width: 150, height: 100 }),
+      rect: { width: 150, height: 100 },
       fillColor: WebColors.Red,
     });
     chooseRectangleScene.addChild(redRect);
     const blueRect = new Shape({
-      rect: new Rect({ width: 150, height: 100 }),
+      rect: { width: 150, height: 100 },
       fillColor: WebColors.Blue,
     });
     chooseRectangleScene.addChild(blueRect);
     const correctMessage = new Label({
       text: "CORRECT!",
-      position: new Point(200, 500),
+      position: { x: 200, y: 500 },
     });
 
     const chooseMessage = new Label({
       text: "Choose the red rectangle",
-      position: new Point(200, 200),
+      position: { x: 200, y: 200 },
     });
     chooseRectangleScene.addChild(chooseMessage);
 
@@ -193,32 +196,34 @@ class {{className}} extends Game {
     chooseRectangleScene.addChild(correctMessage);
     const wrongMessage = new Label({
       text: "WRONG!",
-      position: new Point(200, 500),
+      position: {x: 200, y: 500 },
     });
 
     wrongMessage.hidden = true;
     chooseRectangleScene.addChild(wrongMessage);
 
-    // chooseRectangleScene.setup() is passed a callback that is executed each
-    // time this scene is shown. Within setup(), We will randomly decide on
+    // chooseRectangleScene.onSetup() is passed a callback that is executed each
+    // time this scene is shown. Within onSetup(), We will randomly decide on
     // what side the red rectangle is shown
-    chooseRectangleScene.setup(() => {
+    chooseRectangleScene.onSetup(() => {
+      let responseTime = NaN;
       let redOnLeft = true;
       if (Math.random() > 0.5) {
         redOnLeft = false;
       }
 
       if (redOnLeft) {
-        redRect.position = new Point(100, 300);
-        blueRect.position = new Point(300, 300);
+        redRect.position = { x: 100, y: 300 };
+        blueRect.position = { x: 300, y: 300 };
       } else {
-        redRect.position = new Point(300, 300);
-        blueRect.position = new Point(100, 300);
+        redRect.position = { x: 300, y: 300 };
+        blueRect.position = { x: 100, y: 300 };;
       }
 
       // helper function to record the user's choice and
       // decide if we are done
       function recordUserInput(choseRedRect: boolean) {
+        game.addTrialData("responseTime", responseTime);
         game.addTrialData("correct", choseRedRect);
         if (choseRedRect) {
           game.addTrialData("colorChosen", "red");
@@ -240,6 +245,7 @@ class {{className}} extends Game {
           Action.Sequence([
             Action.Custom({
               callback: () => {
+                responseTime = Timer.elapsed("rt");
                 // once a choice is made, don't allow additional taps
                 redRect.isUserInteractionEnabled = false;
                 blueRect.isUserInteractionEnabled = false;
@@ -273,6 +279,7 @@ class {{className}} extends Game {
           Action.Sequence([
             Action.Custom({
               callback: () => {
+                responseTime = Timer.elapsed("rt");        
                 redRect.isUserInteractionEnabled = false;
                 blueRect.isUserInteractionEnabled = false;
               },
@@ -296,17 +303,22 @@ class {{className}} extends Game {
       });
     });
 
+    chooseRectangleScene.onAppear(() => {
+      Timer.removeAll();
+      Timer.start("rt");
+    });
+
     const endScene = new Scene();
     game.addScene(endScene);
     const doneLabel = new Label({
-      text: `This will be reassigned in the setup() callback. If you see this, something went wrong!`,
-      position: new Point(200, 300),
+      text: `This will be reassigned in the onSetup() callback. If you see this, something went wrong!`,
+      position: { x: 200, y: 300},
     });
     endScene.addChild(doneLabel);
 
     const startOverButton = new Button({
       text: "Start over",
-      position: new Point(200, 600),
+      position: { x: 200, y: 600 },
     });
     startOverButton.isUserInteractionEnabled = true;
     startOverButton.onTapDown(() => {
@@ -317,7 +329,7 @@ class {{className}} extends Game {
 
     const exitButton = new Button({
       text: "Exit",
-      position: new Point(200, 675),
+      position: { x: 200, y: 675 },
     });
     exitButton.isUserInteractionEnabled = true;
     exitButton.onTapDown(() => {
@@ -329,7 +341,7 @@ class {{className}} extends Game {
     });
     endScene.addChild(exitButton);
 
-    endScene.setup(() => {
+    endScene.onSetup(() => {
       doneLabel.text = `You did ${game.trialIndex} trials. You're done!`;
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/cli",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "m2c2kit command line interface",
   "module": "dist/cli.js",
   "files": [
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "axios": "0.24.0",
-    "chalk": "5.0.0",
+    "chalk": "5.0.1",
     "conf": "10.1.1",
     "form-data": "4.0.0",
     "handlebars": "4.7.7",
-    "ora": "6.0.1",
+    "ora": "6.1.0",
     "prompts": "2.4.2",
     "yargs": "17.3.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.8",
+    "@types/node": "17.0.21",
     "@types/prompts": "2.0.14",
-    "@types/yargs": "17.0.8",
+    "@types/yargs": "17.0.9",
     "copyfiles": "2.4.1",
     "rimraf": "3.0.2",
     "tslib": "2.3.1",
-    "typescript": "4.5.4"
+    "typescript": "4.6.2"
   }
 }