@decidables/detectable-elements 0.0.3

package/src/equations/sdt-equation.js

@@ -0,0 +1,141 @@
+
+import {css} from 'lit';
+
+import DetectableElement from '../detectable-element';
+
+/*
+  SDTEquation Base Class - Not intended for instantiation!
+  <sdt-equation>
+*/
+export default class SDTEquation extends DetectableElement {
+  static get properties() {
+    return {
+      numeric: {
+        attribute: 'numeric',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.numeric = false;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+
+          margin: 1rem;
+        }
+
+        /* Containing <div> */
+        .holder {
+          display: flex;
+
+          flex-direction: row;
+
+          justify-content: left;
+        }
+
+        /* Overall <table> */
+        .equation {
+          text-align: center;
+
+          border-collapse: collapse;
+
+          border: 0;
+        }
+
+        /* Modifies <td> */
+        .underline {
+          border-bottom: 1px solid var(---color-text);
+        }
+
+        /* Basic <span> and <var> w/modifiers */
+        span,
+        var {
+          padding: 0 0.25rem;
+
+          font-style: normal;
+        }
+
+        .tight {
+          padding: 0;
+        }
+
+        .paren {
+          font-size: 150%;
+        }
+
+        .bracket {
+          font-size: 175%;
+        }
+
+        .exp {
+          font-size: 0.75rem;
+        }
+
+        /* Input wrapping <label> */
+        decidables-spinner {
+          --decidables-spinner-input-width: 4rem;
+
+          display: inline-block;
+
+          padding: 0.125rem 0.375rem 0.375rem;
+
+          vertical-align: middle;
+        }
+
+        .bottom {
+          vertical-align: bottom;
+        }
+
+        /* Color scheme */
+        .h {
+          background: var(---color-h-light);
+        }
+
+        .m {
+          background: var(---color-m-light);
+        }
+
+        .hr {
+          background: var(---color-hr-light);
+        }
+
+        .fa {
+          background: var(---color-fa-light);
+        }
+
+        .acc {
+          background: var(---color-acc-light);
+        }
+
+        .cr {
+          background: var(---color-cr-light);
+        }
+
+        .far {
+          background: var(---color-far-light);
+        }
+
+        .d {
+          background: var(---color-d-light);
+        }
+
+        .c {
+          background: var(---color-c-light);
+        }
+
+        .s {
+          background: var(---color-s-light);
+        }
+      `,
+    ];
+  }
+}

package/src/examples/double-interactive.js

@@ -0,0 +1,171 @@
+
+import SDTMath from '@decidables/detectable-math';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExample_DoubleInteractive element
+  <sdt-example-interactive>
+*/
+export default class SDTExampleDoubleInteractive extends SDTExample {
+  firstUpdated(/* changedProperties */) {
+    this.one = {};
+    this.one.h = 95;
+    this.one.m = 5;
+    this.one.fa = 35;
+    this.one.cr = 65;
+    this.one.hr = SDTMath.hM2Hr(this.one.h, this.one.m);
+    this.one.far = SDTMath.faCr2Far(this.one.fa, this.one.cr);
+    this.one.d = SDTMath.hrFar2D(this.one.hr, this.one.far);
+    this.one.c = SDTMath.hrFar2C(this.one.hr, this.one.far);
+
+    this.two = {};
+    this.two.h = 40;
+    this.two.m = 60;
+    this.two.fa = 20;
+    this.two.cr = 80;
+    this.two.hr = SDTMath.hM2Hr(this.two.h, this.two.m);
+    this.two.far = SDTMath.faCr2Far(this.two.fa, this.two.cr);
+    this.two.d = SDTMath.hrFar2D(this.two.hr, this.two.far);
+    this.two.c = SDTMath.hrFar2C(this.two.hr, this.two.far);
+
+    this.detectableTableOne = this.querySelector('detectable-table:nth-of-type(1)');
+    this.detectableTableTwo = this.querySelector('detectable-table:nth-of-type(2)');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModelOne = this.querySelector('sdt-model:nth-of-type(1)');
+    this.sdtModelTwo = this.querySelector('sdt-model:nth-of-type(2)');
+
+    if (this.detectableTableOne) {
+      this.detectableTableOne.h = this.one.h;
+      this.detectableTableOne.m = this.one.m;
+      this.detectableTableOne.fa = this.one.fa;
+      this.detectableTableOne.cr = this.one.cr;
+
+      this.detectableTableOne.addEventListener('detectable-table-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.set(event.detail.hr, event.detail.far, 'default', '↑');
+        }
+
+        if (this.sdtModelOne) {
+          this.sdtModelOne.d = SDTMath.hrFar2D(event.detail.hr, event.detail.far);
+          this.sdtModelOne.c = SDTMath.hrFar2C(event.detail.hr, event.detail.far);
+        }
+      });
+    }
+
+    if (this.detectableTableTwo) {
+      this.detectableTableTwo.h = this.two.h;
+      this.detectableTableTwo.m = this.two.m;
+      this.detectableTableTwo.fa = this.two.fa;
+      this.detectableTableTwo.cr = this.two.cr;
+
+      this.detectableTableTwo.addEventListener('detectable-table-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.set(event.detail.hr, event.detail.far, 'two', '↓');
+        }
+
+        if (this.sdtModelTwo) {
+          this.sdtModelTwo.d = SDTMath.hrFar2D(event.detail.hr, event.detail.far);
+          this.sdtModelTwo.c = SDTMath.hrFar2C(event.detail.hr, event.detail.far);
+        }
+      });
+    }
+
+    if (this.rocSpace) {
+      this.rocSpace.set(this.one.hr, this.one.far, 'default', '↑');
+      this.rocSpace.set(this.two.hr, this.two.far, 'two', '↓');
+
+      this.rocSpace.addEventListener('roc-point-change', (event) => {
+        if (event.detail.name === 'default' && this.sdtModelOne) {
+          this.sdtModelOne.d = event.detail.d;
+          this.sdtModelOne.c = event.detail.c;
+        } else if (event.detail.name === 'two' && this.sdtModelTwo) {
+          this.sdtModelTwo.d = event.detail.d;
+          this.sdtModelTwo.c = event.detail.c;
+        }
+
+        if (event.detail.name === 'default' && this.detectableTableOne) {
+          const newh = Math.round(
+            (this.detectableTableOne.h + this.detectableTableOne.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTableOne.h + this.detectableTableOne.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTableOne.fa + this.detectableTableOne.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTableOne.fa + this.detectableTableOne.cr) - newfa;
+          this.detectableTableOne.h = newh;
+          this.detectableTableOne.m = newm;
+          this.detectableTableOne.fa = newfa;
+          this.detectableTableOne.cr = newcr;
+        } else if (event.detail.name === 'two' && this.detectableTableTwo) {
+          const newh = Math.round(
+            (this.detectableTableTwo.h + this.detectableTableTwo.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTableTwo.h + this.detectableTableTwo.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTableTwo.fa + this.detectableTableTwo.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTableTwo.fa + this.detectableTableTwo.cr) - newfa;
+          this.detectableTableTwo.h = newh;
+          this.detectableTableTwo.m = newm;
+          this.detectableTableTwo.fa = newfa;
+          this.detectableTableTwo.cr = newcr;
+        }
+      });
+    }
+
+    if (this.sdtModelOne) {
+      this.sdtModelOne.d = this.one.d;
+      this.sdtModelOne.c = this.one.c;
+
+      this.sdtModelOne.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '↑');
+        }
+
+        if (this.detectableTableOne) {
+          const newh = Math.round(
+            (this.detectableTableOne.h + this.detectableTableOne.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTableOne.h + this.detectableTableOne.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTableOne.fa + this.detectableTableOne.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTableOne.fa + this.detectableTableOne.cr) - newfa;
+          this.detectableTableOne.h = newh;
+          this.detectableTableOne.m = newm;
+          this.detectableTableOne.fa = newfa;
+          this.detectableTableOne.cr = newcr;
+        }
+      });
+    }
+
+    if (this.sdtModelTwo) {
+      this.sdtModelTwo.d = this.two.d;
+      this.sdtModelTwo.c = this.two.c;
+
+      this.sdtModelTwo.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'two', '↓');
+        }
+
+        if (this.detectableTableTwo) {
+          const newh = Math.round(
+            (this.detectableTableTwo.h + this.detectableTableTwo.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTableTwo.h + this.detectableTableTwo.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTableTwo.fa + this.detectableTableTwo.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTableTwo.fa + this.detectableTableTwo.cr) - newfa;
+          this.detectableTableTwo.h = newh;
+          this.detectableTableTwo.m = newm;
+          this.detectableTableTwo.fa = newfa;
+          this.detectableTableTwo.cr = newcr;
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-double-interactive', SDTExampleDoubleInteractive);

package/src/examples/human.js

@@ -0,0 +1,184 @@
+
+import SDTMath from '@decidables/detectable-math';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExample_Human element
+  <sdt-example-human>
+*/
+export default class SDTExampleHuman extends SDTExample {
+  firstUpdated(/* changedProperties */) {
+    this.count = 1;
+
+    this.detectableControl = this.querySelector('detectable-control');
+    this.rdkTask = this.querySelector('rdk-task');
+    this.detectableResponse = this.querySelector('detectable-response');
+    this.detectableTable = this.querySelector('detectable-table');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModel = this.querySelector('sdt-model');
+
+    if (this.rocSpace) {
+      if (this.rocSpace.hasAttribute('history')) {
+        this.rocSpace.set(0.5, 0.5, 'default', this.count);
+      }
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('trials')) {
+      this.detectableControl.addEventListener('detectable-control-trials', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.trials = event.detail.trials;
+        }
+
+        if (this.detectableResponse) {
+          this.detectableResponse.trialTotal = event.detail.trials;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('duration')) {
+      this.detectableControl.addEventListener('detectable-control-duration', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.duration = event.detail.duration;
+          this.rdkTask.wait = event.detail.duration;
+          this.rdkTask.iti = event.detail.duration;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('coherence')) {
+      this.detectableControl.addEventListener('detectable-control-coherence', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.coherence = event.detail.coherence;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('payoff')) {
+      this.detectableControl.addEventListener('detectable-control-payoff', (event) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.hPayoff = event.detail.payoff;
+          this.detectableResponse.mPayoff = -event.detail.payoff + 0; // Get rid of -0
+          this.detectableResponse.faPayoff = -(100 - event.detail.payoff) + 0; // Get rid of -0
+          this.detectableResponse.crPayoff = (100 - event.detail.payoff);
+        }
+        if (this.detectableTable) {
+          this.detectableTable.hPayoff = event.detail.payoff;
+          this.detectableTable.mPayoff = -event.detail.payoff + 0; // Get rid of -0
+          this.detectableTable.faPayoff = -(100 - event.detail.payoff) + 0; // Get rid of -0
+          this.detectableTable.crPayoff = (100 - event.detail.payoff);
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('run')) {
+      this.detectableControl.addEventListener('detectable-control-run', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.running = true;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('pause')) {
+      this.detectableControl.addEventListener('detectable-control-pause', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.running = false;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('reset')) {
+      this.detectableControl.addEventListener('detectable-control-reset', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.reset();
+        }
+
+        if (this.detectableResponse) {
+          this.detectableResponse.reset();
+        }
+
+        if (this.detectableTable) {
+          this.detectableTable.h = 0;
+          this.detectableTable.m = 0;
+          this.detectableTable.fa = 0;
+          this.detectableTable.cr = 0;
+        }
+
+        if (this.rocSpace) {
+          if (this.rocSpace.hasAttribute('history')) {
+            this.count += 1;
+            this.rocSpace.set(0.5, 0.5, `point${this.count}`, this.count);
+          } else {
+            this.rocSpace.hr = 0.5;
+            this.rocSpace.far = 0.5;
+          }
+        }
+
+        if (this.sdtModel) {
+          this.sdtModel.d = 0;
+          this.sdtModel.c = 0;
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      if (this.detectableResponse) {
+        this.detectableResponse.trialTotal = this.rdkTask.trials;
+      }
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-start', (event) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.start(event.detail.signal, event.detail.trial);
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-end', (/* event */) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.stop();
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-block-end', (/* event */) => {
+        if (this.detectableControl) {
+          this.detectableControl.complete();
+        }
+      });
+    }
+
+    if (this.detectableResponse) {
+      this.detectableResponse.addEventListener('detectable-response', (event) => {
+        if (this.detectableTable) {
+          this.detectableTable.h = event.detail.h;
+          this.detectableTable.m = event.detail.m;
+          this.detectableTable.fa = event.detail.fa;
+          this.detectableTable.cr = event.detail.cr;
+        }
+
+        const newhr = SDTMath.hM2Hr((event.detail.h + 1), (event.detail.m + 1));
+        const newfar = SDTMath.faCr2Far((event.detail.fa + 1), (event.detail.cr + 1));
+
+        if (this.rocSpace) {
+          if (this.rocSpace.hasAttribute('history')) {
+            this.rocSpace.set(newhr, newfar, (this.count === 1) ? 'default' : `point${this.count}`, this.count);
+          } else {
+            this.rocSpace.hr = newhr;
+            this.rocSpace.far = newfar;
+          }
+        }
+
+        if (this.sdtModel) {
+          this.sdtModel.d = SDTMath.hrFar2D(newhr, newfar);
+          this.sdtModel.c = SDTMath.hrFar2C(newhr, newfar);
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-human', SDTExampleHuman);

package/src/examples/index.js

@@ -0,0 +1,6 @@
+
+export {default as SDTExampleDoubleInteractive} from './double-interactive';
+export {default as SDTExampleHuman} from './human';
+export {default as SDTExampleInteractive} from './interactive';
+export {default as SDTExampleModel} from './model';
+export {default as SDTExampleUnequal} from './unequal';

package/src/examples/interactive.js

@@ -0,0 +1,131 @@
+
+import SDTMath from '@decidables/detectable-math';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExample_Interactive element
+  <sdt-example-interactive>
+*/
+export default class SDTExampleInteractive extends SDTExample {
+  firstUpdated(/* changedProperties */) {
+    this.detectableControl = this.querySelector('detectable-control');
+    this.detectableTable = this.querySelector('detectable-table');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModel = this.querySelector('sdt-model');
+
+    this.rocSpaces = this.querySelectorAll('roc-space');
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('color')) {
+      this.detectableControl.addEventListener('detectable-control-color', (event) => {
+        if (this.sdtModel) {
+          this.sdtModel.color = event.detail.color;
+        }
+
+        if (this.detectableTable) {
+          this.detectableTable.color = event.detail.color;
+        }
+      });
+    }
+
+    if (this.detectableControl) {
+      this.detectableControl.addEventListener('detectable-control-z-roc', (event) => {
+        if (this.rocSpaces.length > 0) {
+          this.rocSpaces.forEach((rocSpace) => {
+            rocSpace.zRoc = event.detail.zRoc;
+          });
+        }
+      });
+    }
+
+    if (this.detectableTable) {
+      if (this.rocSpace) {
+        this.rocSpace.hr = SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m);
+        this.rocSpace.far = SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr);
+      }
+
+      if (this.sdtModel) {
+        this.sdtModel.d = SDTMath.hrFar2D(
+          SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m),
+          SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr),
+          this.sdtModel.s,
+        );
+        this.sdtModel.c = SDTMath.hrFar2C(
+          SDTMath.hM2Hr(this.detectableTable.h, this.detectableTable.m),
+          SDTMath.faCr2Far(this.detectableTable.fa, this.detectableTable.cr),
+          this.sdtModel.s,
+        );
+      }
+
+      this.detectableTable.addEventListener('detectable-table-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.far = event.detail.far;
+          this.rocSpace.hr = event.detail.hr;
+        }
+
+        if (this.sdtModel) {
+          this.sdtModel.d = SDTMath.hrFar2D(event.detail.hr, event.detail.far, this.sdtModel.s);
+          this.sdtModel.c = SDTMath.hrFar2C(event.detail.hr, event.detail.far, this.sdtModel.s);
+        }
+      });
+    }
+
+    if (this.rocSpace) {
+      if (this.sdtModel && !this.detectableTable) {
+        this.sdtModel.d = SDTMath.hrFar2D(this.rocSpace.hr, this.rocSpace.far, this.rocSpace.s);
+        this.sdtModel.c = SDTMath.hrFar2C(this.rocSpace.hr, this.rocSpace.far, this.rocSpace.s);
+        this.sdtModel.s = this.rocSpace.s;
+      }
+
+      this.rocSpace.addEventListener('roc-point-change', (event) => {
+        if (this.sdtModel) {
+          this.sdtModel.d = event.detail.d;
+          this.sdtModel.c = event.detail.c;
+          this.sdtModel.s = event.detail.s;
+        }
+
+        if (this.detectableTable) {
+          const newh = Math.round(
+            (this.detectableTable.h + this.detectableTable.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTable.h + this.detectableTable.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTable.fa + this.detectableTable.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTable.fa + this.detectableTable.cr) - newfa;
+          this.detectableTable.h = newh;
+          this.detectableTable.m = newm;
+          this.detectableTable.fa = newfa;
+          this.detectableTable.cr = newcr;
+        }
+      });
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpaces.length > 0) {
+          this.rocSpaces.forEach((rocSpace) => {
+            rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
+          });
+        }
+
+        if (this.detectableTable) {
+          const newh = Math.round(
+            (this.detectableTable.h + this.detectableTable.m) * event.detail.hr,
+          );
+          const newm = (this.detectableTable.h + this.detectableTable.m) - newh;
+          const newfa = Math.round(
+            (this.detectableTable.fa + this.detectableTable.cr) * event.detail.far,
+          );
+          const newcr = (this.detectableTable.fa + this.detectableTable.cr) - newfa;
+          this.detectableTable.h = newh;
+          this.detectableTable.m = newm;
+          this.detectableTable.fa = newfa;
+          this.detectableTable.cr = newcr;
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-interactive', SDTExampleInteractive);