@realnation/builder-shared-sdk 2.1.0 → 2.3.0

package/dist/interaction/vue.d.ts

@@ -19,6 +19,17 @@ export interface UseInteractionStateOptions {
      */
     keys?: StyleKeyCase;
 }
+export interface InteractionBindOptions {
+    /**
+     * Makes Click behave like a radio group instead of an independent toggle:
+     * picking one clears the others, and clicking the picked one keeps it picked.
+     *
+     * Single-choice answers need this. Without it a player who picks A and then B
+     * leaves both looking chosen, which is worse than no feedback at all.
+     * Ignored by the other triggers, where a transient state has no siblings.
+     */
+    group?: string;
+}
 export interface InteractionStateApi {
     /**
      * The style to merge onto an element.
@@ -28,7 +39,7 @@ export interface InteractionStateApi {
      */
     style(property: InteractionProperty | null | undefined, key: string, active?: boolean): InteractionStyle;
     /** Event handlers to v-bind. Empty unless the trigger is Hover / Press or Click. */
-    bind(property: InteractionProperty | null | undefined, key: string): Record<string, () => void>;
+    bind(property: InteractionProperty | null | undefined, key: string, options?: InteractionBindOptions): Record<string, () => void>;
     /**
      * Restarts the timed triggers for exactly these elements.
      *

package/dist/interaction/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAChG;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,CAoFjG"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CACF,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,CAyGjG"}

package/dist/interaction/vue.js

@@ -35,12 +35,15 @@ export function useInteractionState(options = {}) {
     // for its first frame; one boolean cannot say both things.
     const instant = reactive({});
     const timers = new Map();
+    // Which group each key belongs to, so a radio click knows whom to clear.
+    const groups = new Map();
     // Guards the deferred On Appear callback: by the time the frame lands the
     // player may already have navigated on, and the element is gone.
     let generation = 0;
     const stop = () => {
         timers.forEach((handle) => clearTimer(handle));
         timers.clear();
+        groups.clear();
         generation += 1;
     };
     const api = {
@@ -54,14 +57,30 @@ export function useInteractionState(options = {}) {
                 selfDriven: forced !== undefined,
             });
         },
-        bind(property, key) {
+        bind(property, key, bindOptions = {}) {
             if (!isInteractionEnabled(property))
                 return {};
             const trigger = interactionTriggerOf(property);
             if (trigger === 'click') {
+                const group = bindOptions.group;
+                if (group)
+                    groups.set(key, group);
                 // Deliberately not stopping propagation: the element may also carry a
-                // link or a node connection, and the visual state is only a layer on top.
-                return { onClick: () => { active[key] = !active[key]; } };
+                // link, a node connection, or the game's own answer handler, and the
+                // visual state is only a layer on top of whatever else happens.
+                return {
+                    onClick: () => {
+                        if (!group) {
+                            active[key] = !active[key];
+                            return;
+                        }
+                        groups.forEach((g, k) => {
+                            if (g === group && k !== key)
+                                active[k] = false;
+                        });
+                        active[key] = true;
+                    },
+                };
             }
             if (trigger !== 'hover')
                 return {};
@@ -96,7 +115,11 @@ export function useInteractionState(options = {}) {
                     active[key] = false;
                     timers.set(key, setTimer(() => { active[key] = !active[key]; }, interactionPeriodOf(property)));
                 }
-                else {
+                else if (trigger !== 'click') {
+                    // Click is a state the player put the element into on purpose (which
+                    // answer they picked). Navigating to another page and back re-syncs
+                    // the timed triggers, and clearing their choice on the way would be
+                    // a bug. Hover has no such meaning: the pointer really has left.
                     active[key] = false;
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realnation/builder-shared-sdk",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "type": "module",
   "private": false,
   "exports": {