@citolab/tspci 2.4.0-alpha.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.4.0-alpha.0",
+  "version": "2.4.0",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -46,5 +46,5 @@
     "help": "tspci --help",
     "init": "tspci init --force --path=../../pcis"
   },
-  "gitHead": "881b3b40f3e31eafdc38ff79b51a16384e67f89d"
+  "gitHead": "3f39a92aa0d565cb5a0fc4b4f2d3102aab9402dc"
 }

package/preset/preact/src/index.tsx

@@ -1,25 +1,24 @@
 import "preact/debug";
 import { render } from "preact";
-import { initStore, Store } from "@citolab/preact-store";
-
+import { IStore } from "@citolab/preact-store";
 import * as ctx from "qtiCustomInteractionContext";
 import Interaction from "./interaction";
 import style from "./styles.css";
 import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
 import configProps from "./config.json";
-import { IStore } from "@citolab/preact-store";
+import { StateModel, initStore } from "./store";
 
 type PropTypes = typeof configProps;
 
 class App implements IMSpci<PropTypes> {
-  typeIdentifier = "myPci"; // typeIdentifier is mandatory for all PCI's
+  typeIdentifier = "###___PCI_NAME___###"; // typeIdentifier is mandatory for all PCI's
   config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot; // Not mandatory, but its wise to create a shadowroot
   store: IStore<StateModel>;
 
   private logActions: { type: string; payload: unknown }[] = []; // optional logActions
-
+  private initialState: StateModel = { input: undefined }; // optional initial state
   constructor() {
     ctx && ctx.register(this);
   }
@@ -28,12 +27,17 @@ class App implements IMSpci<PropTypes> {
     config.properties = { ...configProps, ...config.properties }; // merge current props with incoming
     this.config = config;
 
-    const initState: StateModel = stateString ? JSON.parse(stateString).state : { input: 0 };
     this.logActions = stateString ? JSON.parse(stateString).log : [];
-    this.store = initStore(this.initialState );
-    if (restoredState || logActions) {
-      this.store.restoreState(restoredState, logActions);
+    this.store = initStore(this.initialState);
+    try {
+      const restoredState = stateString ? JSON.parse(stateString) : null;
+      if (restoredState) {
+        this.store.restoreState(restoredState?.state, this.logActions);
+      }
+    } catch (error) {
+      console.log(error);
     }
+
     this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
 
@@ -45,7 +49,7 @@ class App implements IMSpci<PropTypes> {
     const css = document.createElement("style");
     css.innerHTML = style;
     this.shadowdom.appendChild(css);
-    render(<Interaction config={this.config.properties} dom={this.shadowdom} />, this.shadowdom);
+    render(<Interaction config={this.config.properties} dom={this.shadowdom} store={this.store} />, this.shadowdom);
   };
 
   getState = () =>

package/preset/preact/src/interaction.tsx

@@ -1,12 +1,23 @@
 import { useStore, IStore, Action } from "@citolab/preact-store";
 import { ActionType, StateModel } from "./store";
 import configProps from "./config.json";
+import { useState } from "preact/hooks";
+
 import procenten from "./assets/procenten.png"; // image types are bundled inside the js
 
 type PropTypes = typeof configProps;
 
-const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | ShadowRoot, store: IStore<StateModel> }) => {
+const Interaction = ({ config, dom, store }: { config: PropTypes; dom: Document | ShadowRoot, store: IStore<StateModel> }) => {
   const state = useStore(store);
+  const [eventHandled, setEventHandled] = useState<boolean>(false);
+  
+  const handleInput = (e: Event) => {
+    if (!eventHandled) {
+      const input = e.target as HTMLInputElement;
+      store.dispatch<{ input: number }>({ type: "SET_INPUT", payload: { input: +input.value } });
+      setEventHandled(true);
+    }
+  };
 
   return <div className="pci-container">
     <h1>{config.title}</h1>
@@ -16,18 +27,15 @@ const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | Shado
     <div className="interaction">
       <label htmlFor="tentacles">{config.prompt}</label>
       <input type="number"
-        onKeyUp={(e) => {
-          const input = e.target as HTMLInputElement;
-          store.dispatch<{ input: number }>({ type: "SET_INPUT", payload: { input: +input.value } });
-        }
-        }
-        onChange={(e) => {
-          const input = e.target as HTMLInputElement;
-          store.dispatch<{ input: number }>({ type: "SET_INPUT", payload: { input: +input.value } });
-        }} min="0" max="100" />%
+        value={state.input}
+        onInput={handleInput}
+        onPaste={() => setEventHandled(false)}
+        onKeyDown={() => setEventHandled(false)}
+        min="0" max="100" />%
     </div>
   </div>;
 };
 
 
 export default Interaction;
+

package/preset/preact/src/store.ts

@@ -4,7 +4,7 @@ export type ActionType = "SET_INPUT" | "RESTORE_STATE";
 export type StateModel = { input: number };
 
 export const initStore = (initialState: StateModel, restoreData?: {
-  state: StateModel;
+  state?: StateModel;
   actions: { type: string; payload: any; timestamp?: number }[];
 }) => {
   const store = new Store<StateModel>(initialState, restoreData);

package/public/index.html

@@ -99,8 +99,8 @@
       async function scrubRange(value) {
         if (!isReplaying.current) {
           setCurrentRangeValue(value);
-          resetResponse();
           if (store) {
+            store.reset();
             isReplaying.current = true;
             replayedIndex.current = 0;
             setCurrentRangeValue(value);
@@ -172,7 +172,7 @@
 
       async function playState() {
         if (store && !isReplaying.current) {
-          resetResponse();
+          store.reset();
           isReplaying.current = true;
           replayedIndex.current = 0;
           await store.replay([...actions]);

package/src/cli.js

@@ -232,7 +232,7 @@ const run = async () => {
     console.log(chalk.green(figlet.textSync("@citolab/tspci", { horizontalLayout: "full" })));
 
     // prompt for name
-    let pciName = (await askOption("What your pci identifier (typeIdentifier) (default: myPci)  ")) || "myPci";
+    let pciName = (await askOption("What your pci identifier (typeIdentifier). this can only contain alphanumeric characters (default: myPci)  ")) || "myPci";
     let destinationFolder = path.join(process.cwd(), pciName);
     if (args.find((arg) => arg.startsWith("--path"))) {
       const pathIndex = args.findIndex((arg) => arg.startsWith("--path"));
@@ -255,11 +255,11 @@ const run = async () => {
       return;
     }
     // check if contains other characters than letters and numbers
-    if (!/^[a-zA-Z0-9]+$/.test(pciName)) {
+    if (!/^[a-zA-Z]+$/.test(pciName)) {
       console.log(
-        chalk.yellow("The identifier of your pci can only contain letters and numbers, stripping special characters")
+        chalk.yellow("The identifier of your pci can only contain alphanumeric characters, stripping others")
       );
-      pciName = pciName.replace(/[^a-zA-Z0-9]/g, "");
+      pciName = pciName.replace(/[^a-zA-Z]/g, "");
     }
     console.log(chalk.green(`pci: ${pciName}`));
     const description =