@decidables/accumulable-elements 0.1.0

package/src/equations/azv2pc.js

@@ -0,0 +1,146 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import DDMMath from '@decidables/accumulable-math';
+
+import DDMEquation from './ddm-equation';
+
+/*
+  DDMEquationAZV2PC element
+  <ddm-equation-azv2pc>
+
+  Attributes:
+*/
+export default class DDMEquationAZV2PC extends DDMEquation {
+  static get properties() {
+    return {
+      a: {
+        attribute: 'boundary-separation',
+        type: Number,
+        reflect: true,
+      },
+      z: {
+        attribute: 'starting-point',
+        type: Number,
+        reflect: true,
+      },
+      v: {
+        attribute: 'drift-rate',
+        type: Number,
+        reflect: true,
+      },
+
+      accuracy: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.a = 1.5;
+    this.z = 0.5;
+    this.v = 0.1;
+    this.alignState();
+  }
+
+  alignState() {
+    this.accuracy = DDMMath.azv2pC(this.a, this.z, this.v);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('ddm-equation-azv2pc-change', {
+      detail: {
+        a: this.a,
+        z: this.z,
+        v: this.v,
+        accuracy: this.accuracy,
+      },
+      bubbles: true,
+    }));
+  }
+
+  aInput(event) {
+    this.a = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  zInput(event) {
+    this.z = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  vInput(event) {
+    this.v = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  willUpdate() {
+    this.alignState();
+  }
+
+  render() {
+    let a;
+    let z;
+    let v;
+    let s;
+    let accuracy;
+    if (this.numeric) {
+      a = html`<decidables-spinner class="a bottom" ?disabled=${!this.interactive} min="0.1" max="2" step="0.01" .value="${this.a}" @input=${this.aInput.bind(this)}>
+          <var class="math-var">a</var>
+        </decidables-spinner>`;
+      z = html`<decidables-spinner class="z bottom" ?disabled=${!this.interactive} min="0.01" max="0.99" step="0.01" .value="${this.z}" @input=${this.zInput.bind(this)}>
+          <var class="math-var">z</var>
+        </decidables-spinner>`;
+      v = html`<decidables-spinner class="v bottom" ?disabled=${!this.interactive} min="0.01" max="5" step="0.01" .value="${this.v}" @input=${this.vInput.bind(this)}>
+          <var class="math-var">v</var>
+        </decidables-spinner>`;
+      s = html`<decidables-spinner class="s bottom" disabled min="0.01" max="1" step="0.01" .value="${DDMMath.s}">
+          <var class="math-var">s</var>
+        </decidables-spinner>`;
+      accuracy = html`<decidables-spinner class="accuracy bottom" disabled min="0" max="1" step="0.01" .value="${+this.accuracy.toFixed(2)}">
+          <var>Accuracy</var>
+        </decidables-spinner>`;
+    } else {
+      a = html`<var class="math-var a">a</var>`;
+      z = html`<var class="math-var z">z</var>`;
+      v = html`<var class="math-var v">v</var>`;
+      s = html`<var class="math-var s">s</var>`;
+      accuracy = html`<var class="accuracy">Accuracy</var>`;
+    }
+    const equation = html`
+      <tr>
+        <td rowspan="2">
+          ${accuracy}<span class="equals">=</span>
+        </td>
+        <td class="underline">
+          <var class="math-greek e tight">e</var><sup class="exp"><span class="minus tight">−</span><span class="paren tight">(</span>2${v}${a} / ${s}<sup class="exp">2</sup><span class="paren tight">)</span></sup>
+          <span class="minus">−</span>
+          <var class="math-greek e tight">e</var><sup class="exp"><span class="minus tight">−</span><span class="paren tight">(</span>2${v}${z} / ${s}<sup class="exp">2</sup><span class="paren tight">)</span></sup>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <var class="math-greek e tight">e</var><sup class="exp"><span class="minus tight">−</span><span class="paren tight">(</span>2${v}${a} / ${s}<sup class="exp">2</sup><span class="paren tight">)</span></sup>
+            <span class="minus">−</span>
+          1
+        </td>
+      </tr>`;
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            ${equation}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('ddm-equation-azv2pc', DDMEquationAZV2PC);

package/src/equations/azvt02m.js

@@ -0,0 +1,182 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import DDMMath from '@decidables/accumulable-math';
+
+import DDMEquation from './ddm-equation';
+
+/*
+  DDMEquationAZVT02M element
+  <ddm-equation-azvt02m>
+
+  Attributes:
+*/
+export default class DDMEquationAZVT02M extends DDMEquation {
+  static get properties() {
+    return {
+      a: {
+        attribute: 'boundary-separation',
+        type: Number,
+        reflect: true,
+      },
+      z: {
+        attribute: 'starting-point',
+        type: Number,
+        reflect: true,
+      },
+      v: {
+        attribute: 'drift-rate',
+        type: Number,
+        reflect: true,
+      },
+      t0: {
+        attribute: 'nondecision-time',
+        type: Number,
+        reflect: true,
+      },
+
+      meanRT: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.a = 1.5;
+    this.z = 0.5;
+    this.v = 0.1;
+    this.t0 = 200;
+    this.alignState();
+  }
+
+  alignState() {
+    this.meanRT = DDMMath.azvt02m(this.a, this.z, this.v, this.t0);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('ddm-equation-azvt02m-change', {
+      detail: {
+        a: this.a,
+        z: this.z,
+        v: this.v,
+        t0: this.t0,
+        meanRT: this.meanRT,
+      },
+      bubbles: true,
+    }));
+  }
+
+  aInput(event) {
+    this.a = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  zInput(event) {
+    this.z = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  vInput(event) {
+    this.v = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  t0Input(event) {
+    this.t0 = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  willUpdate() {
+    this.alignState();
+  }
+
+  render() {
+    let a;
+    let z;
+    let v;
+    let t0;
+    let s;
+    let meanRT;
+    if (this.numeric) {
+      a = html`<decidables-spinner class="a bottom" ?disabled=${!this.interactive} min="0.1" max="2" step="0.01" .value="${this.a}" @input=${this.aInput.bind(this)}>
+          <var class="math-var">a</var>
+        </decidables-spinner>`;
+      z = html`<decidables-spinner class="z bottom" ?disabled=${!this.interactive} min="0.01" max="0.99" step="0.01" .value="${this.z}" @input=${this.zInput.bind(this)}>
+          <var class="math-var">z</var>
+        </decidables-spinner>`;
+      v = html`<decidables-spinner class="v bottom" ?disabled=${!this.interactive} min="0.01" max="5" step="0.01" .value="${this.v}" @input=${this.vInput.bind(this)}>
+          <var class="math-var">v</var>
+        </decidables-spinner>`;
+      t0 = html`<decidables-spinner class="t0 bottom" ?disabled=${!this.interactive} min="0" max="500" step="1" .value="${this.t0}" @input=${this.t0Input.bind(this)}>
+          <var class="math-var">t<sub>0</sub></var>
+        </decidables-spinner>`;
+      s = html`<decidables-spinner class="s bottom" disabled min="0.01" max="1" step="0.01" .value="${DDMMath.s}">
+          <var class="math-var">s</var>
+        </decidables-spinner>`;
+      meanRT = html`<decidables-spinner class="mean-rt bottom" disabled min="0" max="1" step="0.01" .value="${+this.meanRT.toFixed(0)}">
+          <var>Mean RT</var>
+        </decidables-spinner>`;
+    } else {
+      a = html`<var class="math-var a">a</var>`;
+      z = html`<var class="math-var z">z</var>`;
+      v = html`<var class="math-var v">v</var>`;
+      t0 = html`<var class="math-var t0">t<sub>0</sub></var>`;
+      s = html`<var class="math-var s">s</var>`;
+      meanRT = html`<var class="mean-rt">Mean RT</var>`;
+    }
+    const equation = html`
+      <tr>
+        <td rowspan="2">
+          ${meanRT}<span class="equals">=</span>
+          ${t0}
+          <span class="minus">−</span>
+        </td>
+        <td class="underline">
+          ${z}
+        </td>
+        <td rowspan="2">
+          <span class="plus">+</span>
+        </td>
+        <td class="underline">
+          ${a}
+        </td>
+        <td rowspan="2">&nbsp;</td>
+        <td class="underline">
+          <var class="math-greek e tight">e</var><sup class="exp"><span class="minus tight">−</span><span class="paren tight">(</span>2${v}${z} / ${s}<sup class="exp">2</sup><span class="paren tight">)</span></sup>
+          <span class="minus">−</span>
+          1
+        </td>
+      </tr>
+      <tr>
+        <td>
+          ${v}
+        </td>
+        <td>
+          ${v}
+        </td>
+        <td>
+          <var class="math-greek e tight">e</var><sup class="exp"><span class="minus tight">−</span><span class="paren tight">(</span>2${v}${a} / ${s}<sup class="exp">2</sup><span class="paren tight">)</span></sup>
+            <span class="minus">−</span>
+          1
+        </td>
+      </tr>`;
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            ${equation}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('ddm-equation-azvt02m', DDMEquationAZVT02M);

package/src/equations/ddm-equation.js

@@ -0,0 +1,193 @@
+
+import {css} from 'lit';
+
+import AccumulableElement from '../accumulable-element';
+
+/*
+  DDMEquation Base Class - Not intended for instantiation!
+*/
+export default class DDMEquation extends AccumulableElement {
+  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;
+          white-space: nowrap;
+
+          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;
+        }
+
+        var {
+          border-radius: var(---border-radius);
+        }
+
+        .tight {
+          padding: 0;
+        }
+
+        .paren {
+          font-size: 150%;
+        }
+
+        .bracket {
+          font-size: 175%;
+        }
+
+        .brace {
+          font-size: 200%;
+        }
+
+        .addend {
+          position: relative;
+          display: inline-block;
+        }
+
+        .comparison {
+          position: relative;
+          display: inline-block;
+
+          font-size: 125%;
+          font-weight: 600;
+        }
+
+        .function {
+          display: inline-block;
+
+          border-radius: var(---border-radius);
+        }
+
+        :host([numeric]) .function {
+          padding: 0.25rem;
+        }
+
+        .exp {
+          display: inline-block;
+
+          font-size: 0.75rem;
+        }
+
+        .subscript {
+          display: inline-block;
+
+          font-size: 66.667%;
+        }
+
+        .summation {
+          display: flex;
+
+          flex-direction: column;
+
+          line-height: 0.8;
+        }
+
+        .sigma {
+          display: inline-block;
+
+          font-size: 200%;
+        }
+
+        /* Input wrapping <label> */
+        decidables-spinner {
+          --decidables-spinner-input-width: 4rem;
+
+          display: inline-block;
+
+          padding: 0.125rem 0.375rem 0.375rem;
+
+          line-height: 1.5;
+          vertical-align: middle;
+
+          border-radius: var(---border-radius);
+        }
+
+        .n {
+          --decidables-spinner-input-width: 2rem;
+        }
+
+        .left {
+          text-align: left;
+        }
+
+        .right {
+          text-align: right;
+        }
+
+        .bottom {
+          vertical-align: bottom;
+        }
+
+        .top {
+          vertical-align: top;
+        }
+
+        /* Color scheme */
+        .a {
+          background: var(---color-a-light);
+        }
+
+        .z {
+          background: var(---color-z-light);
+        }
+
+        .v {
+          background: var(---color-v-light);
+        }
+
+        .t0 {
+          background: var(---color-t0-light);
+        }
+
+        .s {
+          background: var(---color-s-light);
+        }
+      `,
+    ];
+  }
+}

package/src/equations/index.js

@@ -0,0 +1,3 @@
+
+export {default as DDMEquationAZV2PC} from './azv2pc';
+export {default as DDMEquationAZVT02M} from './azvt02m';

package/src/examples/ddm-example.js

@@ -0,0 +1,72 @@
+
+import {html, css} from 'lit';
+
+import AccumulableElement from '../accumulable-element';
+
+/*
+  DDMExample Base Class - Not intended for instantiation!
+*/
+export default class DDMExample extends AccumulableElement {
+  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('ddm-example', DDMExample);