@decidables/discountable-elements 0.1.0

package/src/examples/htd-example.js

@@ -0,0 +1,73 @@
+
+import {html, css} from 'lit';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  CPTExample Base Class - Not intended for instantiation!
+  <sdt-example>
+*/
+export default class HTDExample extends DiscountableElement {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---border: var(--border, 1px solid var(---color-border));
+          display: inline-block;
+
+          margin-bottom: 1rem;
+        }
+
+        .holder {
+          display: flex;
+        }
+
+        .body {
+          display: flex;
+
+          flex-wrap: wrap;
+
+          align-items: center;
+          justify-content: left;
+
+          padding: 0.625rem;
+
+          border: var(---border);
+          border-radius: 0.25rem;
+        }
+
+        .body ::slotted(*) {
+          margin: 0.625rem;
+        }
+
+        /* HACK: Sibling selectors not working with ::slotted */
+        /* .body > rdk-task + sdt-response,
+        ::slotted(rdk-task) + ::slotted(sdt-response) { */
+        /* .body ::slotted(sdt-response) {
+          margin-left: 0;
+        } */
+
+        /* HACK: Sibling selectors not working with ::slotted */
+        /* .body > sdt-control + rdk-task,
+        ::slotted(sdt-control) + ::slotted(rdk-task) {
+          margin-left: 0;
+        } */
+        /* .body ::slotted(rdk-task) {
+          margin-left: 0;
+        } */
+      `,
+    ];
+  }
+
+  render() { /* eslint-disable-line class-methods-use-this */
+    return html`
+      <div class="holder">
+        <div class="body">
+          <slot>Empty!</slot>
+        </div>
+      </div>`;
+  }
+}
+
+customElements.define('htd-example', HTDExample);

package/src/examples/human.js

@@ -0,0 +1,154 @@
+
+// import HTDMath from '@decidables/discountable-math';
+
+import HTDExample from './htd-example';
+
+/*
+  HTDExampleHuman element
+  <htd-example-human>
+*/
+export default class HTDExampleHuman extends HTDExample {
+  firstUpdated(/* changedProperties */) {
+    this.discountableControl = this.querySelector('discountable-control');
+    this.itcTask = this.querySelector('itc-task');
+    this.discountableResponse = this.querySelector('discountable-response');
+
+    this.htdFit = this.querySelector('htd-fit');
+    this.htdCurves = this.querySelector('htd-curves');
+
+    if (this.discountableControl) {
+      if (this.discountableControl.hasAttribute('trials')) {
+        this.discountableControl.addEventListener('discountable-control-trials', (event) => {
+          if (this.itcTask) {
+            this.itcTask.trials = event.detail.trials;
+          }
+
+          if (this.discountableResponse) {
+            this.discountableResponse.trialTotal = event.detail.trials;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('duration')) {
+        this.discountableControl.addEventListener('discountable-control-duration', (event) => {
+          if (this.itcTask) {
+            this.itcTask.duration = event.detail.duration;
+            this.itcTask.iti = event.detail.duration;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('run')) {
+        this.discountableControl.addEventListener('discountable-control-run', (/* event */) => {
+          if (this.itcTask) {
+            this.itcTask.running = true;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('pause')) {
+        this.discountableControl.addEventListener('discountable-control-pause', (/* event */) => {
+          if (this.itcTask) {
+            this.itcTask.running = false;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('reset')) {
+        this.discountableControl.addEventListener('discountable-control-reset', (/* event */) => {
+          if (this.itcTask) {
+            this.itcTask.reset();
+          }
+
+          if (this.discountableResponse) {
+            this.discountableResponse.reset();
+          }
+
+          if (this.htdFit) {
+            this.htdFit.clear();
+          }
+
+          if (this.htdCurves) {
+            this.htdCurves.clearOptions();
+          }
+        });
+      }
+    }
+
+    if (this.itcTask) {
+      if (this.discountableResponse) {
+        this.discountableResponse.trialTotal = this.itcTask.trials;
+      }
+
+      this.itcTask.addEventListener('itc-trial-start', (event) => {
+        if (this.discountableResponse) {
+          this.discountableResponse.start(
+            event.detail.as,
+            event.detail.ds,
+            event.detail.al,
+            event.detail.dl,
+            event.detail.trial,
+          );
+        }
+
+        if (this.htdCurves) {
+          this.htdCurves.setOption(
+            event.detail.as,
+            event.detail.ds,
+            'smaller-sooner',
+            's',
+          );
+          this.htdCurves.setOption(
+            event.detail.al,
+            event.detail.dl,
+            'larger-later',
+            'l',
+          );
+        }
+      });
+
+      this.itcTask.addEventListener('itc-trial-end', (/* event */) => {
+        if (this.discountableResponse) {
+          this.discountableResponse.stop();
+        }
+
+        if (this.htdCurves) {
+          this.htdCurves.removeOption('smaller-sooner');
+          this.htdCurves.removeOption('larger-later');
+        }
+      });
+
+      this.itcTask.addEventListener('itc-block-end', (/* event */) => {
+        if (this.discountableControl) {
+          this.discountableControl.complete();
+        }
+      });
+    }
+
+    if (this.discountableResponse) {
+      this.discountableResponse.addEventListener('discountable-response', (event) => {
+        if (this.htdFit) {
+          this.htdFit.set(
+            event.detail.as,
+            event.detail.ds,
+            event.detail.al,
+            event.detail.dl,
+            event.detail.response,
+            event.detail.trial.toString(),
+            event.detail.trial.toString(),
+          );
+        }
+      });
+    }
+
+    if (this.htdFit) {
+      this.htdFit.addEventListener('htd-fit-update', (event) => {
+        if (this.htdCurves) {
+          this.htdCurves.k = event.detail.k;
+        }
+      });
+    }
+  }
+}
+
+customElements.define('htd-example-human', HTDExampleHuman);

package/src/examples/index.js

@@ -0,0 +1,4 @@
+
+export {default as HTDExampleHuman} from './human';
+export {default as HTDExampleInteractive} from './interactive';
+export {default as HTDExampleModel} from './model';

package/src/examples/interactive.js

@@ -0,0 +1,123 @@
+
+import HTDExample from './htd-example';
+
+/*
+  HTDExampleInteractive element
+  <htd-example-interactive>
+*/
+export default class HTDExampleInteractive extends HTDExample {
+  static get properties() {
+    return {
+      as: {
+        attribute: 'amount-ss',
+        type: Number,
+        reflect: true,
+      },
+      ds: {
+        attribute: 'delay-ss',
+        type: Number,
+        reflect: true,
+      },
+      al: {
+        attribute: 'amount-ll',
+        type: Number,
+        reflect: true,
+      },
+      dl: {
+        attribute: 'delay-ll',
+        type: Number,
+        reflect: true,
+      },
+
+      k: {
+        attribute: 'k',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.as = 10;
+    this.ds = 1;
+    this.al = 50;
+    this.dl = 40;
+    this.k = 0.05;
+
+    this.htdCalculation = null;
+    this.htdCurves = null;
+    this.itcChoice = null;
+  }
+
+  firstUpdated(/* changedProperties */) {
+    this.htdCalculation = this.querySelector('htd-calculation');
+    this.htdCurves = this.querySelector('htd-curves');
+    this.itcChoice = this.querySelector('itc-choice');
+
+    if (this.htdCalculation) {
+      this.htdCalculation.addEventListener('htd-calculation-change', (event) => {
+        this.as = event.detail.as;
+        this.ds = event.detail.ds;
+        this.al = event.detail.al;
+        this.dl = event.detail.dl;
+
+        this.k = event.detail.k;
+      });
+    }
+
+    if (this.htdCurves) {
+      this.htdCurves.addEventListener('htd-curves-change', (event) => {
+        this.k = event.detail.k;
+        if (event.detail.name === 'default') {
+          this.as = event.detail.a;
+          this.ds = event.detail.d;
+        } else if (event.detail.name === 'larger-later') {
+          this.al = event.detail.a;
+          this.dl = event.detail.d;
+        }
+      });
+    }
+
+    if (this.itcChoice) {
+      this.itcChoice.addEventListener('itc-choice-change', (event) => {
+        this.as = event.detail.as;
+        this.ds = event.detail.ds;
+        this.al = event.detail.al;
+        this.dl = event.detail.dl;
+      });
+    }
+
+    this.requestUpdate();
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.htdCalculation) {
+      this.htdCalculation.as = this.as;
+      this.htdCalculation.ds = this.ds;
+      this.htdCalculation.al = this.al;
+      this.htdCalculation.dl = this.dl;
+
+      this.htdCalculation.k = this.k;
+    }
+
+    if (this.htdCurves) {
+      this.htdCurves.setOption(this.as, this.ds, 'default', 's');
+      this.htdCurves.setOption(this.al, this.dl, 'larger-later', 'l');
+
+      this.htdCurves.k = this.k;
+    }
+
+    if (this.itcChoice) {
+      this.itcChoice.as = this.as;
+      this.itcChoice.ds = this.ds;
+      this.itcChoice.al = this.al;
+      this.itcChoice.dl = this.dl;
+    }
+  }
+}
+
+customElements.define('htd-example-interactive', HTDExampleInteractive);

package/src/examples/model.js

@@ -0,0 +1,179 @@
+
+import HTDMath from '@decidables/discountable-math';
+
+import HTDExample from './htd-example';
+
+/*
+  HTDExampleModel element
+  <htd-example-model>
+*/
+export default class HTDExampleModel extends HTDExample {
+  static get properties() {
+    return {
+      k: {
+        attribute: 'k',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.k = 0.2;
+
+    this.discountableControl = null;
+    this.discountableResponse = null;
+    this.htdCalculation = null;
+    this.htdCurves = null;
+    this.itcTask = null;
+  }
+
+  firstUpdated(/* changedProperties */) {
+    this.discountableControl = this.querySelector('discountable-control');
+    this.discountableResponse = this.querySelector('discountable-response');
+    this.htdCalculation = this.querySelector('htd-calculation');
+    this.htdCurves = this.querySelector('htd-curves');
+    this.itcTask = this.querySelector('itc-task');
+
+    if (this.discountableControl) {
+      if (this.discountableControl.hasAttribute('trials')) {
+        this.discountableControl.addEventListener('discountable-control-trials', (event) => {
+          if (this.itcTask) {
+            this.itcTask.trials = event.detail.trials;
+          }
+
+          if (this.discountableResponse) {
+            this.discountableResponse.trialTotal = event.detail.trials;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('duration')) {
+        this.discountableControl.addEventListener('discountable-control-duration', (event) => {
+          if (this.itcTask) {
+            this.itcTask.duration = event.detail.duration;
+            this.itcTask.iti = event.detail.duration;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('run')) {
+        this.discountableControl.addEventListener('discountable-control-run', (/* event */) => {
+          if (this.htdCurves) {
+            this.htdCurves.resumeTrial();
+          }
+
+          if (this.itcTask) {
+            this.itcTask.running = true;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('pause')) {
+        this.discountableControl.addEventListener('discountable-control-pause', (/* event */) => {
+          if (this.htdCurves) {
+            this.htdCurves.pauseTrial();
+          }
+
+          if (this.itcTask) {
+            this.itcTask.running = false;
+          }
+        });
+      }
+
+      if (this.discountableControl.hasAttribute('reset')) {
+        this.discountableControl.addEventListener('discountable-control-reset', (/* event */) => {
+          if (this.discountableResponse) {
+            this.discountableResponse.reset();
+          }
+
+          if (this.htdCurves) {
+            this.htdCurves.clearOptions();
+          }
+
+          if (this.itcTask) {
+            this.itcTask.reset();
+          }
+        });
+      }
+    }
+
+    if (this.htdCurves) {
+      this.htdCurves.addEventListener('htd-curves-change', (event) => {
+        this.k = event.detail.k;
+      });
+
+      this.htdCurves.addEventListener('discountable-response', (event) => {
+        if (this.discountableResponse) {
+          this.discountableResponse.responded(event.detail.response);
+        }
+      });
+    }
+
+    if (this.itcTask) {
+      if (this.discountableResponse) {
+        this.discountableResponse.trialTotal = this.itcTask.trials;
+      }
+
+      this.itcTask.addEventListener('itc-trial-start', (event) => {
+        if (this.discountableResponse) {
+          this.discountableResponse.start(
+            event.detail.as,
+            event.detail.ds,
+            event.detail.al,
+            event.detail.dl,
+            event.detail.trial,
+          );
+        }
+
+        const vs = HTDMath.adk2v(event.detail.as, event.detail.ds, this.k);
+        const vl = HTDMath.adk2v(event.detail.al, event.detail.dl, this.k);
+
+        const response = (vs > vl)
+          ? 'first'
+          : 'second';
+
+        if (this.htdCurves) {
+          this.htdCurves.trial(
+            event.detail.as,
+            event.detail.ds,
+            event.detail.al,
+            event.detail.dl,
+            event.detail.trial,
+            response,
+          );
+        }
+      });
+
+      this.itcTask.addEventListener('itc-trial-end', (/* event */) => {
+        if (this.discountableResponse) {
+          this.discountableResponse.stop();
+        }
+      });
+
+      this.itcTask.addEventListener('itc-block-end', (/* event */) => {
+        if (this.discountableControl) {
+          this.discountableControl.complete();
+        }
+      });
+    }
+
+    this.requestUpdate();
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.htdCalculation) {
+      this.htdCalculation.k = this.k;
+    }
+
+    if (this.htdCurves) {
+      this.htdCurves.k = this.k;
+    }
+  }
+}
+
+customElements.define('htd-example-model', HTDExampleModel);

package/src/index.js

@@ -0,0 +1,6 @@
+
+// Internal dependencies
+export {default as DiscountableElement} from './discountable-element';
+export * from './components';
+export * from './equations';
+export * from './examples';