@m2c2kit/cli 0.1.1 → 0.1.6

package/dist/templates/starter.ts.handlebars

@@ -1,99 +1,377 @@
-import {
-  WebColors,
-  Action,
-  Game,
-  Scene,
-  Rect,
-  Shape,
-  Sprite,
-  Point,
-  Label,
-} from "@m2c2kit/core";
-
-const game = new Game();
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as unknown as any).game = game;
-
-game
-  .init({
-    showFps: true,
-    // set this color so we can see the boundaries of the game
-    bodyBackgroundColor: WebColors.Wheat,
-    // note: using 2:1 aspect ratio, because that is closer to modern phones
-    width: 400,
-    height: 800,
-    // set stretch to true if you want to fill the screen
-    stretch: false,
-    fontUrls: [
-      "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf",
-    ],
-    // each svgImage below, you specify either a tag of an svg in the property "svgString" (as I do below)
-    // or you specify a URL to an svg in the property "url", such as url: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg'
-    svgImages: [
-      {
-        name: "star",
-        height: 60,
-        width: 60,
-        svgString:
-          '<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" style="fill:#00FF00;stroke:#0000FF;stroke-width:15;stroke-linejoin:round"/></svg>',
-      },
-    ],
-  })
-  .then(() => {
-    const s = new Scene({
-      backgroundColor: WebColors.SlateBlue,
-      name: "first-scene",
-    });
-    game.addScene(s);
-
-    const greeting = new Label({
-      text: "Hello, {{appName}}",
-      fontColor: WebColors.WhiteSmoke,
-      position: new Point(200, 200),
-    });
-    s.addChild(greeting);
-
-    const starImage = new Sprite({
-      imageName: "star",
-      position: new Point(200, 400),
-    });
-    s.addChild(starImage);
-
-    const rectangle = new Shape({
-      rect: new Rect({ width: 300, height: 50, x: 200, y: 700 }),
-      cornerRadius: 9,
-      fillColor: WebColors.RebeccaPurple,
-    });
-
-    const messageLabel = new Label({
-      text: "you tapped the bar!",
-      fontColor: WebColors.Yellow,
-      position: new Point(200, 600),
-    });
-    s.addChild(messageLabel);
-    messageLabel.hidden = true;
-
-    rectangle.isUserInteractionEnabled = true;
-    rectangle.onTap(() => {
-      console.log("you tapped it!");
-      rectangle.run(
-        Action.Sequence([
-          Action.Custom({
-            callback: () => {
-              messageLabel.hidden = false;
-            },
-          }),
-          Action.Wait({ duration: 500 }),
-          Action.Custom({
-            callback: () => {
-              messageLabel.hidden = true;
-            },
-          }),
-        ])
-      );
-    });
-
-    s.addChild(rectangle);
-
-    game.start("first-scene");
-  });
+import {
+  WebColors,
+  Action,
+  Game,
+  Scene,
+  Sprite,
+  Point,
+  Label,
+  LabelHorizontalAlignmentMode,
+  Shape,
+  Rect,
+  GameOptions,
+  GameParameters,
+  TrialSchema,
+  Session,
+  GameTrialEvent,
+  GameLifecycleEvent,
+} from "@m2c2kit/core";
+import { Button, Instructions } from "@m2c2kit/addons";
+
+class {{className}} extends Game {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(specifiedParameters?: any) {
+    const defaultParameters: GameParameters = {
+      ReadyTime: {
+        value: 1000,
+        description:
+          "How long the 'get ready' message scene is shown, milliseconds",
+      },
+      TrialNum: { value: 3, description: "How many trials to run" },
+    };
+
+    const demoTrialSchema: TrialSchema = {
+      colorChosen: { type: "string", description: "the color that was picked" },
+      correct: { type: "boolean", description: "was the answer correct?" },
+    };
+
+    const options: GameOptions = {
+      name: "{{appName}}",
+      version: "1.0.0",
+      uri: "https://your-repo-or-webpage-here",
+      shortDescription: "A brief couple sentence description.",
+      longDescription: "An extended, many-sentence description.",
+      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,
+      // note: using 2:1 aspect ratio, because that is closer to modern phones
+      width: 400,
+      height: 800,
+      // set stretch to true if you want to fill the screen on large windows
+      // (e.g., iPad, desktop browser)
+      stretch: false,
+      // Roboto is included by default. Leave fontUrls unchanged, unless you want to use different font
+      fontUrls: ["./fonts/roboto/Roboto-Regular.ttf"],
+      // for each image below, you specify either a tag of an svg in the property "svgString"
+      // or you specify a URL to an image in the property "url",
+      // such as url: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg'
+      images: [
+        {
+          name: "star",
+          height: 60,
+          width: 60,
+          svgString:
+            '<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" style="fill:#00FF00;stroke:#0000FF;stroke-width:15;stroke-linejoin:round"/></svg>',
+        },
+        {
+          name: "smiley",
+          height: 64,
+          width: 64,
+          svgString:
+            '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="451.451 -28.549 1657.098 1657.098" enable-background="new 451.451 -28.549 1657.098 1657.098" xml:space="preserve"><g><g><circle cx="992.682" cy="640.47" r="66.818"/></g><g><circle cx="1558.728" cy="640.47" r="66.818"/></g><g><path d="M1280,1600c-107.984,0-212.756-21.157-311.407-62.883c-95.268-40.295-180.819-97.973-254.279-171.432c-73.459-73.459-131.137-159.01-171.432-254.278C501.157,1012.757,480,907.984,480,800s21.157-212.756,62.883-311.407c40.295-95.268,97.973-180.819,171.432-254.279c73.46-73.459,159.011-131.137,254.279-171.432C1067.244,21.157,1172.016,0,1280,0s212.757,21.157,311.407,62.883c95.268,40.295,180.819,97.973,254.278,171.432c73.459,73.46,131.137,159.011,171.432,254.279C2058.843,587.244,2080,692.016,2080,800s-21.157,212.757-62.883,311.407c-40.295,95.268-97.973,180.819-171.432,254.278s-159.01,131.137-254.278,171.432C1492.757,1578.843,1387.984,1600,1280,1600z M1280,71.591c-401.646,0-728.409,326.763-728.409,728.409S878.354,1528.409,1280,1528.409S2008.409,1201.646,2008.409,800C2008.409,398.354,1681.646,71.591,1280,71.591z"/></g><g><path d="M1665.953,1071.004c-213.156,213.156-558.75,213.156-771.905,0c20.534-20.534,41.068-41.068,61.602-61.602c179.134,179.134,469.567,179.134,648.7,0C1624.884,1029.936,1645.418,1050.47,1665.953,1071.004z"/></g><g><path d="M1167.066,463.279c-96.31-96.31-252.459-96.31-348.768,0c16.971,16.971,33.941,33.941,50.912,50.912c68.192-68.192,178.753-68.192,246.945,0C1133.125,497.22,1150.096,480.249,1167.066,463.279z"/></g><g><path d="M1733.112,463.279c-96.31-96.31-252.459-96.31-348.768,0c16.971,16.971,33.941,33.941,50.912,50.912c68.192-68.192,178.753-68.192,246.945,0C1699.171,497.22,1716.142,480.249,1733.112,463.279z"/></g></g></svg>',
+        },
+      ],
+    };
+
+    super(options, specifiedParameters);
+    // 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
+    const game = this;
+
+    const instructionsScenes = Instructions.Create({
+      sceneNamePrefix: "instructions",
+      backgroundColor: WebColors.White,
+      nextButtonBackgroundColor: WebColors.Black,
+      backButtonBackgroundColor: WebColors.Black,
+      instructionScenes: [
+        {
+          title: "{{appName}} Demo",
+          text: "For this task, you will click the red rectangle. Open the developer console to see the trial data and other output.",
+          textFontSize: 24,
+          titleFontSize: 30,
+          image: "smiley",
+        },
+        {
+          title: "{{appName}} Demo",
+          text: "Press START to begin!",
+          textFontSize: 24,
+          titleFontSize: 30,
+          textAlignmentMode: LabelHorizontalAlignmentMode.center,
+          textVerticalBias: 0.25,
+          nextButtonText: "START",
+          nextButtonBackgroundColor: WebColors.Green,
+        },
+      ],
+      // this is the name of the scene to go to after the last instructions scene
+      postInstructionsScene: "getReady",
+    });
+    game.addScenes(instructionsScenes);
+
+    const getReadyScene = new Scene({
+      // Because this is the scene after the instructions, we must give
+      // it a name and provide it to postInstructionsScene, above
+      name: "getReady",
+      backgroundColor: WebColors.White,
+    });
+    game.addScene(getReadyScene);
+
+    const getReadyMessage = new Label({
+      text: "Get Ready",
+      fontSize: 24,
+      position: new Point(200, 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),
+    });
+    getReadyScene.addChild(starSprite);
+
+    // getReadyScene.setup() has a callback that is executed each time this scene is shown
+    getReadyScene.setup(() => {
+      getReadyScene.run(
+        Action.Sequence([
+          // Get the wait duration from the default game parameters, defined above
+          Action.Wait({ duration: game.getParameter("ReadyTime") }),
+          Action.Custom({
+            callback: () => {
+              game.presentScene(chooseRectangleScene);
+            },
+          }),
+        ])
+      );
+    });
+
+    // these entities before the setup() can be defined outside of a setup()
+    // 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()
+    const chooseRectangleScene = new Scene({
+      backgroundColor: WebColors.LightGray,
+    });
+    game.addScene(chooseRectangleScene);
+    const redRect = new Shape({
+      rect: new Rect({ width: 150, height: 100 }),
+      fillColor: WebColors.Red,
+    });
+    chooseRectangleScene.addChild(redRect);
+    const blueRect = new Shape({
+      rect: new Rect({ width: 150, height: 100 }),
+      fillColor: WebColors.Blue,
+    });
+    chooseRectangleScene.addChild(blueRect);
+    const correctMessage = new Label({
+      text: "CORRECT!",
+      position: new Point(200, 500),
+    });
+
+    const chooseMessage = new Label({
+      text: "Choose the red rectangle",
+      position: new Point(200, 200),
+    });
+    chooseRectangleScene.addChild(chooseMessage);
+
+    correctMessage.hidden = true;
+    chooseRectangleScene.addChild(correctMessage);
+    const wrongMessage = new Label({
+      text: "WRONG!",
+      position: new Point(200, 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
+    // what side the red rectangle is shown
+    chooseRectangleScene.setup(() => {
+      let redOnLeft = true;
+      if (Math.random() > 0.5) {
+        redOnLeft = false;
+      }
+
+      if (redOnLeft) {
+        redRect.position = new Point(100, 300);
+        blueRect.position = new Point(300, 300);
+      } else {
+        redRect.position = new Point(300, 300);
+        blueRect.position = new Point(100, 300);
+      }
+
+      // helper function to record the user's choice and
+      // decide if we are done
+      function recordUserInput(choseRedRect: boolean) {
+        game.addTrialData("correct", choseRedRect);
+        if (choseRedRect) {
+          game.addTrialData("colorChosen", "red");
+        } else {
+          game.addTrialData("colorChosen", "blue");
+        }
+        game.trialComplete();
+        // have we finished the number of trials?
+        if (game.trialIndex < game.getParameter<number>("TrialNum")) {
+          game.presentScene(getReadyScene);
+        } else {
+          game.presentScene(endScene);
+        }
+      }
+
+      redRect.isUserInteractionEnabled = true;
+      redRect.onTapDown(() => {
+        redRect.run(
+          Action.Sequence([
+            Action.Custom({
+              callback: () => {
+                // once a choice is made, don't allow additional taps
+                redRect.isUserInteractionEnabled = false;
+                blueRect.isUserInteractionEnabled = false;
+              },
+            }),
+            // short animation to shrink and grow button
+            Action.Scale({ scale: 0.8, duration: 250 }),
+            Action.Scale({ scale: 1, duration: 250 }),
+            // Show the "CORRECT" message
+            Action.Custom({
+              callback: () => {
+                correctMessage.hidden = false;
+              },
+            }),
+            Action.Wait({ duration: 1000 }),
+            // Handle the logic of recording data, and deciding if we should
+            // do another trial in recordUserInput
+            Action.Custom({
+              callback: () => {
+                correctMessage.hidden = true;
+                recordUserInput(true);
+              },
+            }),
+          ])
+        );
+      });
+
+      blueRect.isUserInteractionEnabled = true;
+      blueRect.onTapDown(() => {
+        blueRect.run(
+          Action.Sequence([
+            Action.Custom({
+              callback: () => {
+                redRect.isUserInteractionEnabled = false;
+                blueRect.isUserInteractionEnabled = false;
+              },
+            }),
+            Action.Scale({ scale: 0.8, duration: 250 }),
+            Action.Scale({ scale: 1, duration: 250 }),
+            Action.Custom({
+              callback: () => {
+                wrongMessage.hidden = false;
+              },
+            }),
+            Action.Wait({ duration: 1000 }),
+            Action.Custom({
+              callback: () => {
+                wrongMessage.hidden = true;
+                recordUserInput(false);
+              },
+            }),
+          ])
+        );
+      });
+    });
+
+    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),
+    });
+    endScene.addChild(doneLabel);
+
+    const startOverButton = new Button({
+      text: "Start over",
+      position: new Point(200, 600),
+    });
+    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);
+    });
+    endScene.addChild(startOverButton);
+
+    const exitButton = new Button({
+      text: "Exit",
+      position: new Point(200, 675),
+    });
+    exitButton.isUserInteractionEnabled = true;
+    exitButton.onTapDown(() => {
+      // hide the start over button
+      startOverButton.hidden = true;
+      // don't allow repeated taps on exit button
+      exitButton.isUserInteractionEnabled = false;
+      game.end();
+    });
+    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";
+  }
+}
+
+// default was 3 trials; this is how we can specify a different value
+const game1 = new {{className}}({ TrialNum: 2 });
+
+const session = new Session({
+  activities: [game1],
+  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: (e: GameTrialEvent) => {
+      console.log(`********** trial ${e.trialIndex} complete`);
+      console.log("data: " + JSON.stringify(e.gameData));
+      console.log("trial schema: " + JSON.stringify(e.trialSchema));
+      console.log("game parameters: " + JSON.stringify(e.gameParameters));
+    },
+    // onGameEnd() is called when the user is done
+    onGameEnd: (e: GameLifecycleEvent) => {
+      if (e.ended) {
+        console.log(`user requested exit in game ${e.gameName}`);
+        // this session has only one activity, but this is how it would go to
+        // the next activity
+        if (session.nextActivity) {
+          session.advanceToNextActivity();
+        }
+      }
+    },
+  },
+});
+
+// make session also available on window in case we want to control
+// the session through another means
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as unknown as any).session = session;
+
+session.init().then(() => {
+  session.start();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/cli",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "description": "m2c2kit command line interface",
   "module": "dist/cli.js",
   "files": [
@@ -10,26 +10,35 @@
   "bin": {
     "m2": "./dist/cli.js"
   },
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "scripts": {
-    "build": "npm run clean && npm run compile && npm run copy-files",
+    "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/* dist/"
+    "copy-files": "copyfiles -f build/src/cli.js dist && copyfiles templates/* fonts/**/* dist/",
+    "write-dotenv": "node write-dotenv.js"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "chalk": "^5.0.0",
-    "handlebars": "^4.7.7",
-    "ora": "^6.0.1",
-    "yargs": "^17.3.0"
+    "axios": "0.24.0",
+    "chalk": "5.0.0",
+    "conf": "10.1.1",
+    "form-data": "4.0.0",
+    "handlebars": "4.7.7",
+    "ora": "6.0.1",
+    "prompts": "2.4.2"
   },
   "devDependencies": {
-    "@types/node": "^16.11.12",
-    "@types/yargs": "^17.0.7",
-    "copyfiles": "^2.4.1",
-    "rimraf": "^3.0.2",
-    "tslib": "~2.3.1",
-    "typescript": "^4.5.2"
+    "@types/node": "17.0.8",
+    "@types/prompts": "2.0.14",
+    "@types/yargs": "17.0.8",
+    "copyfiles": "2.4.1",
+    "rimraf": "3.0.2",
+    "tslib": "2.3.1",
+    "typescript": "4.5.4",
+    "yargs": "17.3.1"
   }
 }