@decidables/discountable-elements 0.1.0

package/src/components/itc-task.js

@@ -0,0 +1,253 @@
+
+import {html, css} from 'lit';
+import * as d3 from 'd3';
+
+import DiscountableElement from '../discountable-element';
+import './itc-choice';
+
+/*
+  ITCTask element
+  <itc-task>
+
+  Attributes:
+  Dots; Coherence;
+  # Direction, Speed, Lifetime
+*/
+export default class ITCTask extends DiscountableElement {
+  static get properties() {
+    return {
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+      iti: {
+        attribute: 'iti',
+        type: Number,
+        reflect: true,
+      },
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      running: {
+        attribute: 'running',
+        type: Boolean,
+        reflect: true,
+      },
+
+      state: {
+        attribute: false,
+        type: String,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.duration = 2000; // Duration of stimulus in milliseconds
+    this.iti = 2000; // Duration of inter-trial interval in milliseconds
+    this.trials = 5; // Number of trials per block
+    this.running = false; // Currently executing block of trials
+
+    // Properties
+    this.states = ['resetted', 'iti', 'stimulus', 'ended']; // Possible states of task
+    this.state = 'resetted'; // Current state of task
+
+    // Decision parameters
+    this.range = {};
+    this.range.as = {start: 10, stop: 20, step: 1}; // Amount SS
+    this.range.ds = {start: 10, stop: 40, step: 1}; // Delay SS
+    this.range.al = {start: 20, stop: 40, step: 1}; // Amount LL
+    this.range.dl = {start: 50, stop: 80, step: 1}; // Delay LL
+
+    this.range.as.values = d3.range(
+      this.range.as.start,
+      this.range.as.stop + 0.01,
+      this.range.as.step,
+    );
+    this.range.ds.values = d3.range(
+      this.range.ds.start,
+      this.range.ds.stop + 0.01,
+      this.range.ds.step,
+    );
+    this.range.al.values = d3.range(
+      this.range.al.start,
+      this.range.al.stop + 0.01,
+      this.range.al.step,
+    );
+    this.range.dl.values = d3.range(
+      this.range.dl.start,
+      this.range.dl.stop + 0.01,
+      this.range.dl.step,
+    );
+
+    // Private
+    this.firstUpdate = true;
+
+    this.as = 0;
+    this.ds = 0;
+    this.al = 0;
+    this.dl = 0;
+
+    this.trial = 0; // Count of current trial
+
+    this.baseTime = 0; // Real time, in milliseconds, that the current block started
+    this.pauseTime = 0; // Real time, in milliseconds, that block was paused at
+    this.startTime = 0; // Virtual time, in milliseconds, that current stage of trial started
+    this.lastTime = 0; // Virtual time, in milliseconds, of the most recent frame
+
+    this.runner = undefined; // D3 Interval for frame timing
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        <itc-choice 
+          state="${(this.state === 'stimulus')
+            ? 'choice'
+            : (this.state === 'iti')
+              ? 'fixation'
+              : 'blank'}"
+          amount-ss="${this.as}"
+          delay-ss="${this.ds}"
+          amount-ll="${this.al}"
+          delay-ll="${this.dl}">
+        </itc-choice>
+      </div>`;
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    // Start or stop trial block
+    if (this.firstUpdate || changedProperties.has('running')) {
+      if (this.running) {
+        // (Re)Start
+        if (this.pauseTime) {
+          // Shift timeline forward as if paused time never happened
+          this.baseTime += (d3.now() - this.pauseTime);
+          this.pauseTime = 0;
+        }
+        this.runner = d3.interval(this.run.bind(this), 20); // FIXME??
+      } else if (this.runner !== undefined) {
+        // Pause
+        this.runner.stop();
+        this.pauseTime = d3.now();
+      }
+    }
+
+    this.firstUpdate = false;
+  }
+
+  reset() {
+    this.runner.stop();
+    this.running = false;
+    this.trial = 0;
+    this.state = 'resetted';
+
+    this.as = 0;
+    this.ds = 0;
+    this.al = 0;
+    this.dl = 0;
+
+    this.baseTime = 0;
+    this.pauseTime = 0;
+    this.startTime = 0;
+    this.lastTime = 0;
+  }
+
+  run(/* elapsed */) {
+    const realTime = d3.now();
+    const currentTime = (this.baseTime) ? (realTime - this.baseTime) : 0;
+    const elapsedTime = (this.baseTime) ? (currentTime - this.startTime) : 0;
+    this.lastTime = currentTime;
+    if (this.state === 'resetted') {
+      // Start block with an ITI
+      this.state = 'iti';
+      this.baseTime = realTime;
+      this.startTime = 0;
+      this.dispatchEvent(new CustomEvent('itc-block-start', {
+        detail: {
+          trials: this.trials,
+        },
+        bubbles: true,
+      }));
+    } else if ((this.state === 'iti') && (elapsedTime >= this.iti)) {
+      // Start new trial with a stimulus
+      this.trial += 1;
+      this.state = 'stimulus';
+      this.startTime = currentTime;
+      // Determine trial
+      this.as = this.range.as.values[Math.floor(Math.random() * this.range.as.values.length)];
+      this.ds = this.range.ds.values[Math.floor(Math.random() * this.range.ds.values.length)];
+      this.al = this.range.al.values[Math.floor(Math.random() * this.range.al.values.length)];
+      this.dl = this.range.dl.values[Math.floor(Math.random() * this.range.dl.values.length)];
+      this.dispatchEvent(new CustomEvent('itc-trial-start', {
+        detail: {
+          trials: this.trials,
+          duration: this.duration,
+          iti: this.iti,
+          trial: this.trial,
+          as: this.as,
+          ds: this.ds,
+          al: this.al,
+          dl: this.dl,
+        },
+        bubbles: true,
+      }));
+    } else if ((this.state === 'stimulus') && (elapsedTime >= this.duration)) {
+      // Stimulus is over, end of trial
+      this.dispatchEvent(new CustomEvent('itc-trial-end', {
+        detail: {
+          trials: this.trials,
+          duration: this.duration,
+          iti: this.iti,
+          trial: this.trial,
+          as: this.as,
+          ds: this.ds,
+          al: this.al,
+          dl: this.dl,
+        },
+        bubbles: true,
+      }));
+      if (this.trial >= this.trials) {
+        // End of block
+        this.runner.stop();
+        this.running = false;
+        this.state = 'ended';
+        this.baseTime = 0;
+        this.pauseTime = 0;
+        this.startTime = 0;
+        this.lastTime = 0;
+        this.dispatchEvent(new CustomEvent('itc-block-end', {
+          detail: {
+            trials: this.trial,
+          },
+          bubbles: true,
+        }));
+      } else {
+        // ITI
+        this.state = 'iti';
+        this.startTime = currentTime;
+      }
+    }
+  }
+}
+
+customElements.define('itc-task', ITCTask);

package/src/discountable-element.js

@@ -0,0 +1,105 @@
+
+import {
+  css,
+  unsafeCSS,
+} from 'lit';
+import * as d3 from 'd3';
+
+import {DecidablesElement} from '@decidables/decidables-elements';
+
+/*
+  DiscountableElement Base Class - Not intended for instantiation!
+  <sdt-element>
+*/
+export default class DiscountableElement extends DecidablesElement {
+  static get properties() {
+    return {
+      interactive: {
+        attribute: 'interactive',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.interactive = false;
+  }
+
+  static get colors() {
+    return {
+      a: d3.schemeSet1[0],
+      d: d3.schemeSet1[1],
+      k: d3.schemeSet1[2],
+      v: d3.schemeSet1[3],
+      chosen: d3.schemeSet1[8],
+      better: '#4545d0',
+      worse: '#f032e6',
+      even: '#10dbc9',
+      correct: '#ffffff',
+      error: '#000000',
+      nr: '#cccccc',
+    };
+  }
+
+  static get lights() {
+    return Object.keys(DiscountableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(DiscountableElement.colors[cur], '#ffffff')(0.5);
+      return acc;
+    }, {});
+  }
+
+  static get darks() {
+    return Object.keys(DiscountableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(DiscountableElement.colors[cur], '#000000')(0.5);
+      return acc;
+    }, {});
+  }
+
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---color-a: var(--color-a, ${unsafeCSS(this.colors.a)});
+          ---color-d: var(--color-d, ${unsafeCSS(this.colors.d)});
+          ---color-k: var(--color-k, ${unsafeCSS(this.colors.k)});
+          ---color-v: var(--color-v, ${unsafeCSS(this.colors.v)});
+          ---color-chosen: var(--color-chosen, ${unsafeCSS(this.colors.chosen)});
+          ---color-better: var(--color-better, ${unsafeCSS(this.colors.better)});
+          ---color-worse: var(--color-worse, ${unsafeCSS(this.colors.worse)});
+          ---color-even: var(--color-even, ${unsafeCSS(this.colors.even)});
+          ---color-correct: var(--color-correct, ${unsafeCSS(this.colors.correct)});
+          ---color-error: var(--color-error, ${unsafeCSS(this.colors.error)});
+          ---color-nr: var(--color-nr, ${unsafeCSS(this.colors.nr)});
+
+          ---color-a-light: var(--color-a-light, ${unsafeCSS(this.lights.a)});
+          ---color-d-light: var(--color-d-light, ${unsafeCSS(this.lights.d)});
+          ---color-k-light: var(--color-k-light, ${unsafeCSS(this.lights.k)});
+          ---color-v-light: var(--color-v-light, ${unsafeCSS(this.lights.v)});
+          ---color-chosen-light: var(--color-chosen-light, ${unsafeCSS(this.lights.chosen)});
+          ---color-better-light: var(--color-better-light, ${unsafeCSS(this.lights.better)});
+          ---color-worse-light: var(--color-worse-light, ${unsafeCSS(this.lights.worse)});
+          ---color-even-light: var(--color-even-light, ${unsafeCSS(this.lights.even)});
+          ---color-correct-light: var(--color-correct-light, ${unsafeCSS(this.lights.correct)});
+          ---color-error-light: var(--color-error-light, ${unsafeCSS(this.lights.error)});
+          ---color-nr-light: var(--color-nr-light, ${unsafeCSS(this.lights.nr)});
+
+          ---color-a-dark: var(--color-a-dark, ${unsafeCSS(this.darks.a)});
+          ---color-d-dark: var(--color-d-dark, ${unsafeCSS(this.darks.d)});
+          ---color-k-dark: var(--color-k-dark, ${unsafeCSS(this.darks.k)});
+          ---color-v-dark: var(--color-v-dark, ${unsafeCSS(this.darks.v)});
+          ---color-chosen-dark: var(--color-chosen-dark, ${unsafeCSS(this.darks.chosen)});
+          ---color-better-dark: var(--color-better-dark, ${unsafeCSS(this.darks.better)});
+          ---color-worse-dark: var(--color-worse-dark, ${unsafeCSS(this.darks.worse)});
+          ---color-even-dark: var(--color-even-dark, ${unsafeCSS(this.darks.even)});
+          ---color-correct-dark: var(--color-correct-dark, ${unsafeCSS(this.darks.correct)});
+          ---color-error-dark: var(--color-error-dark, ${unsafeCSS(this.darks.error)});
+          ---color-nr-dark: var(--color-nr-dark, ${unsafeCSS(this.darks.nr)});
+        }
+      `,
+    ];
+  }
+}

package/src/equations/adk2v.js

@@ -0,0 +1,135 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import HTDMath from '@decidables/discountable-math';
+
+import HTDEquation from './htd-equation';
+
+/*
+  HTDEquationADK2V element
+  <htd-equation-adk2v>
+
+  Attributes:
+  amount, delay, k, value;
+*/
+export default class HTDEquationADK2V extends HTDEquation {
+  static get properties() {
+    return {
+      a: {
+        attribute: 'amount',
+        type: Number,
+        reflect: true,
+      },
+      d: {
+        attribute: 'delay',
+        type: Number,
+        reflect: true,
+      },
+      k: {
+        attribute: 'k',
+        type: Number,
+        reflect: true,
+      },
+
+      v: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.a = 100;
+    this.d = 30;
+    this.k = 0.05;
+    this.alignState();
+  }
+
+  alignState() {
+    this.v = HTDMath.adk2v(this.a, this.d, this.k);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('htd-equation-adk2v-change', {
+      detail: {
+        a: this.a,
+        d: this.d,
+        k: this.k,
+        v: this.v,
+      },
+      bubbles: true,
+    }));
+  }
+
+  aInput(event) {
+    this.a = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  dInput(event) {
+    this.d = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  kInput(event) {
+    this.k = parseFloat(event.target.value);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let a;
+    let d;
+    let k;
+    let v;
+    if (this.numeric) {
+      a = html`<decidables-spinner class="a bottom" ?disabled=${!this.interactive} step="1" .value="${this.a}" @input=${this.aInput.bind(this)}>
+          <var class="math-var">A</var>
+        </decidables-spinner>`;
+      d = html`<decidables-spinner class="d bottom" ?disabled=${!this.interactive} min="0" step="1" .value="${this.d}" @input=${this.dInput.bind(this)}>
+          <var class="math-var">D</var>
+        </decidables-spinner>`;
+      k = html`<decidables-spinner class="k bottom" ?disabled=${!this.interactive} min="0" max="100" step=".001" .value="${this.k}" @input=${this.kInput.bind(this)}>
+          <var class="math-var">k</var>
+        </decidables-spinner>`;
+      v = html`<decidables-spinner class="v bottom" disabled step=".001" .value="${+this.v.toFixed(3)}">
+          <var class="math-var">V</var>
+        </decidables-spinner>`;
+    } else {
+      a = html`<var class="math-var a">A</var>`;
+      d = html`<var class="math-var d">D</var>`;
+      k = html`<var class="math-var k">k</var>`;
+      v = html`<var class="math-var v">V</var>`;
+    }
+    const equation = html`
+      <tr>
+        <td rowspan="2">
+          ${v}<span class="equals">=</span>
+        </td>
+        <td class="underline">
+          ${a}
+        </td>
+      </tr>
+      <tr>
+        <td class="">
+          <span class="paren tight">(</span>1<span class="plus">+</span>${k}${d}<span class="paren tight">)</span>
+        </td>
+      </tr>`;
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            ${equation}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+customElements.define('htd-equation-adk2v', HTDEquationADK2V);

package/src/equations/htd-equation.js

@@ -0,0 +1,202 @@
+
+import {css} from 'lit';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  HTDEquation Base Class - Not intended for instantiation!
+  <cpt-equation>
+*/
+export default class HTDEquation extends DiscountableElement {
+  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 */
+        /* .win {
+          background: var(---color-better);
+        }
+
+        .loss {
+          background: var(---color-worse);
+        }
+
+        .sure {
+          background: var(---color-even);
+        } */
+
+        .a {
+          background: var(---color-a-light);
+        }
+
+        .d {
+          background: var(---color-d-light);
+        }
+
+        .k {
+          background: var(---color-k-light);
+        }
+
+        .v {
+          background: var(---color-v-light);
+        }
+      `,
+    ];
+  }
+}

package/src/equations/index.js

@@ -0,0 +1,3 @@
+
+/* eslint-disable-next-line import/prefer-default-export */
+export {default as HTDEquationADK2V} from './adk2v';