@decidables/discountable-elements 0.3.8 → 0.4.0

package/src/components/htd-parameters.js

@@ -0,0 +1,112 @@
+
+import {html, css} from 'lit';
+
+import '@decidables/decidables-elements/slider';
+import HTDMath from '@decidables/discountable-math';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  HTDParameters element
+  <htd-paramters>
+
+  Attributes:
+
+*/
+export default class HTDParameters extends DiscountableElement {
+  static get properties() {
+    return {
+      k: {
+        attribute: 'k',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.k = undefined;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if ((this.k !== undefined) && (this.kSlider === undefined)) {
+      this.kSlider = this.shadowRoot.querySelector('decidables-slider.k');
+      this.kSlider.nonlinearRange(
+        true,
+        (k) => { return k ** (1 / 2) / (k ** (1 / 2) + 1); },
+        (r) => { return (r / (1 - r)) ** 2; },
+      );
+    } else if ((this.k === undefined) && (this.kSlider !== undefined)) {
+      this.kSlider = undefined;
+    }
+  }
+
+  setK(e) {
+    this.k = +e.target.value;
+    this.dispatchEvent(new CustomEvent('htd-parameters-k', {
+      detail: {
+        k: this.k,
+      },
+      bubbles: true,
+    }));
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        .holder {
+          display: flex;
+
+          flex-direction: row;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+
+        decidables-slider {
+          line-height: 1;
+          text-align: center;
+        }
+
+        decidables-slider  div {
+          margin-bottom: 0.25rem;
+        }
+
+        .k {
+          --decidables-slider-background-color: var(---color-k-light);
+          --decidables-slider-color: var(---color-k);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        ${this.k != null
+          ? html`<decidables-slider class="k"
+            ?disabled=${!this.interactive}
+            scale
+            min=${HTDMath.k.MIN}
+            max=${HTDMath.k.MAX}
+            step=${HTDMath.k.STEP}
+            .value=${+this.k.toFixed(3)}
+            @change=${this.setK.bind(this)}
+            @input=${this.setK.bind(this)}
+          ><div>Discounting Factor<br><span class="math-var">k</span></div></decidables-slider>`
+          : html``}
+      </div>`;
+  }
+}
+
+customElements.define('htd-parameters', HTDParameters);

package/src/components/index.js

@@ -4,6 +4,7 @@ export {default as DiscountableResponse} from './discountable-response';
 export {default as HTDCalculation} from './htd-calculation';
 export {default as HTDCurves} from './htd-curves';
 export {default as HTDFit} from './htd-fit';
+export {default as HTDParameters} from './htd-parameters';
 export {default as ITCChoice} from './itc-choice';
 export {default as ITCOption} from './itc-option';
 export {default as ITCTask} from './itc-task';

package/src/equations/adk2v.js

@@ -42,9 +42,12 @@ export default class HTDEquationADK2V extends HTDEquation {
 
   constructor() {
     super();
+
     this.a = 100;
     this.d = 30;
-    this.k = 0.05;
+
+    this.k = HTDMath.k.DEFAULT;
+
     this.alignState();
   }
 
@@ -92,16 +95,38 @@ export default class HTDEquationADK2V extends HTDEquation {
     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)}>
+      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)}>
+      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)}>
+      k = html`<decidables-spinner class="k bottom"
+          ?disabled=${!this.interactive}
+          min=${HTDMath.k.MIN}
+          max=${HTDMath.k.MAX}
+          step=${HTDMath.k.STEP}
+          .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)}">
+      v = html`<decidables-spinner class="v bottom"
+          disabled
+          step=".001"
+          .value=${+this.v.toFixed(3)}
+        >
           <var class="math-var">V</var>
         </decidables-spinner>`;
     } else {

package/src/examples/human.js

@@ -1,5 +1,5 @@
 
-// import HTDMath from '@decidables/discountable-math';
+import HTDMath from '@decidables/discountable-math';
 
 import HTDExample from './htd-example';
 
@@ -8,6 +8,43 @@ import HTDExample from './htd-example';
   <htd-example-human>
 */
 export default class HTDExampleHuman extends HTDExample {
+  static get properties() {
+    return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+
+      k: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.trials = 10;
+    this.duration = 2000;
+
+    this.k = HTDMath.k.DEFAULT;
+
+    this.discountableControl = null;
+    this.itcTask = null;
+    this.discountableResponse = null;
+    this.htdFit = null;
+    this.htdParameters = null;
+    this.htdCurves = null;
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -16,72 +53,50 @@ export default class HTDExampleHuman extends HTDExample {
     this.discountableResponse = this.querySelector('discountable-response');
 
     this.htdFit = this.querySelector('htd-fit');
+    this.htdParameters = this.querySelector('htd-parameters');
     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();
-          }
-        });
-      }
+      this.discountableControl.addEventListener('discountable-control-trials', (event) => {
+        this.trials = event.detail.trials;
+      });
+
+      this.discountableControl.addEventListener('discountable-control-duration', (event) => {
+        this.duration = event.detail.duration;
+      });
+
+      this.discountableControl.addEventListener('discountable-control-run', (/* event */) => {
+        if (this.itcTask) {
+          this.itcTask.running = true;
+        }
+      });
+
+      this.discountableControl.addEventListener('discountable-control-pause', (/* event */) => {
+        if (this.itcTask) {
+          this.itcTask.running = false;
+        }
+      });
+
+      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(
@@ -145,12 +160,43 @@ export default class HTDExampleHuman extends HTDExample {
 
     if (this.htdFit) {
       this.htdFit.addEventListener('htd-fit-update', (event) => {
-        if (this.htdCurves) {
-          this.htdCurves.k = event.detail.k;
-        }
+        this.k = event.detail.k;
       });
     }
   }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.discountableControl) {
+      this.discountableControl.trials = (this.discountableControl.trials != null)
+        ? this.trials
+        : undefined;
+      this.discountableControl.duration = (this.discountableControl.duration != null)
+        ? this.duration
+        : undefined;
+    }
+
+    if (this.discountableResponse) {
+      this.discountableResponse.trialTotal = this.trials;
+    }
+
+    if (this.itcTask) {
+      this.itcTask.duration = this.duration;
+      this.itcTask.iti = this.duration;
+      this.itcTask.trials = this.trials;
+    }
+
+    if (this.htdCurves) {
+      this.htdCurves.k = this.k;
+    }
+
+    if (this.htdParameters) {
+      this.htdParameters.k = (this.htdParameters.k != null)
+        ? this.k
+        : undefined;
+    }
+  }
 }
 
 customElements.define('htd-example-human', HTDExampleHuman);

package/src/examples/interactive.js

@@ -1,4 +1,6 @@
 
+import HTDMath from '@decidables/discountable-math';
+
 import HTDExample from './htd-example';
 
 /*
@@ -44,10 +46,12 @@ export default class HTDExampleInteractive extends HTDExample {
     this.ds = 1;
     this.al = 50;
     this.dl = 40;
-    this.k = 0.05;
+
+    this.k = HTDMath.k.DEFAULT;
 
     this.htdCalculation = null;
     this.htdCurves = null;
+    this.htdParameters = null;
     this.itcChoice = null;
   }
 
@@ -56,6 +60,7 @@ export default class HTDExampleInteractive extends HTDExample {
 
     this.htdCalculation = this.querySelector('htd-calculation');
     this.htdCurves = this.querySelector('htd-curves');
+    this.htdParameters = this.querySelector('htd-parameters');
     this.itcChoice = this.querySelector('itc-choice');
 
     if (this.htdCalculation) {
@@ -82,6 +87,12 @@ export default class HTDExampleInteractive extends HTDExample {
       });
     }
 
+    if (this.htdParameters) {
+      this.htdParameters.addEventListener('htd-parameters-k', (event) => {
+        this.k = event.detail.k;
+      });
+    }
+
     if (this.itcChoice) {
       this.itcChoice.addEventListener('itc-choice-change', (event) => {
         this.as = event.detail.as;
@@ -113,6 +124,12 @@ export default class HTDExampleInteractive extends HTDExample {
       this.htdCurves.k = this.k;
     }
 
+    if (this.htdParameters) {
+      this.htdParameters.k = (this.htdParameters.k != null)
+        ? this.k
+        : undefined;
+    }
+
     if (this.itcChoice) {
       this.itcChoice.as = this.as;
       this.itcChoice.ds = this.ds;

package/src/examples/model.js

@@ -10,6 +10,17 @@ import HTDExample from './htd-example';
 export default class HTDExampleModel extends HTDExample {
   static get properties() {
     return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+
       k: {
         attribute: 'k',
         type: Number,
@@ -21,12 +32,16 @@ export default class HTDExampleModel extends HTDExample {
   constructor() {
     super();
 
-    this.k = 0.2;
+    this.trials = 10;
+    this.duration = 2000;
+
+    this.k = HTDMath.k.DEFAULT;
 
     this.discountableControl = null;
     this.discountableResponse = null;
     this.htdCalculation = null;
     this.htdCurves = null;
+    this.htdParameters = null;
     this.itcTask = null;
   }
 
@@ -37,69 +52,51 @@ export default class HTDExampleModel extends HTDExample {
     this.discountableResponse = this.querySelector('discountable-response');
     this.htdCalculation = this.querySelector('htd-calculation');
     this.htdCurves = this.querySelector('htd-curves');
+    this.htdParameters = this.querySelector('htd-parameters');
     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();
-          }
-        });
-      }
+      this.discountableControl.addEventListener('discountable-control-trials', (event) => {
+        this.trials = event.detail.trials;
+      });
+
+      this.discountableControl.addEventListener('discountable-control-duration', (event) => {
+        this.duration = event.detail.duration;
+      });
+
+      this.discountableControl.addEventListener('discountable-control-run', (/* event */) => {
+        if (this.htdCurves) {
+          this.htdCurves.resumeTrial();
+        }
+
+        if (this.itcTask) {
+          this.itcTask.running = true;
+        }
+      });
+
+      this.discountableControl.addEventListener('discountable-control-pause', (/* event */) => {
+        if (this.htdCurves) {
+          this.htdCurves.pauseTrial();
+        }
+
+        if (this.itcTask) {
+          this.itcTask.running = false;
+        }
+      });
+
+      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) {
@@ -114,11 +111,13 @@ export default class HTDExampleModel extends HTDExample {
       });
     }
 
-    if (this.itcTask) {
-      if (this.discountableResponse) {
-        this.discountableResponse.trialTotal = this.itcTask.trials;
-      }
+    if (this.htdParameters) {
+      this.htdParameters.addEventListener('htd-parameters-k', (event) => {
+        this.k = event.detail.k;
+      });
+    }
 
+    if (this.itcTask) {
       this.itcTask.addEventListener('itc-trial-start', (event) => {
         if (this.discountableResponse) {
           this.discountableResponse.start(
@@ -168,6 +167,25 @@ export default class HTDExampleModel extends HTDExample {
   update(changedProperties) {
     super.update(changedProperties);
 
+    if (this.discountableControl) {
+      this.discountableControl.trials = (this.discountableControl.trials != null)
+        ? this.trials
+        : undefined;
+      this.discountableControl.duration = (this.discountableControl.duration != null)
+        ? this.duration
+        : undefined;
+    }
+
+    if (this.discountableResponse) {
+      this.discountableResponse.trialTotal = this.trials;
+    }
+
+    if (this.itcTask) {
+      this.itcTask.duration = this.duration;
+      this.itcTask.iti = this.duration;
+      this.itcTask.trials = this.trials;
+    }
+
     if (this.htdCalculation) {
       this.htdCalculation.k = this.k;
     }
@@ -175,6 +193,12 @@ export default class HTDExampleModel extends HTDExample {
     if (this.htdCurves) {
       this.htdCurves.k = this.k;
     }
+
+    if (this.htdParameters) {
+      this.htdParameters.k = (this.htdParameters.k != null)
+        ? this.k
+        : undefined;
+    }
   }
 }