@decidables/discountable-elements 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/discountable-elements",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
   "keywords": [
     "web component",
@@ -51,19 +51,19 @@
     "build": "gulp build"
   },
   "devDependencies": {
-    "@web/test-runner": "^0.17.1",
+    "@web/test-runner": "^0.18.0",
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.4.0",
-    "@decidables/discountable-math": "^0.1.1",
-    "@lit-labs/motion": "^1.0.4",
+    "@decidables/decidables-elements": "^0.4.1",
+    "@decidables/discountable-math": "^0.1.2",
+    "@lit-labs/motion": "^1.0.6",
     "@observablehq/plot": "^0.6.11",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
     "d3": "^7.8.5",
     "jstat": "^1.9.6",
-    "lit": "^2.8.0",
+    "lit": "^3.1.0",
     "regenerator-runtime": "^0.14.0"
   },
-  "gitHead": "0333bc21a69ead0e4999d36e29458b9f8ce04d92"
+  "gitHead": "eb7854f55122ecc8cca629bb95ec4b20e286f9d2"
 }

package/src/components/discountable-response.js

@@ -168,11 +168,11 @@ export default class DiscountableResponse extends DiscountableElement {
         }
 
         .selected[disabled][name="first"] {
-          --decidables-button-background-color: var(---color-worse);
+          --decidables-button-background-color: var(---color-sooner);
         }
 
         .selected[disabled][name="second"] {
-          --decidables-button-background-color: var(---color-better);
+          --decidables-button-background-color: var(---color-later);
         }
 
         /* Feedback messages */
@@ -205,11 +205,11 @@ export default class DiscountableResponse extends DiscountableElement {
         }
 
         .feedback.first {
-          background-color: var(---color-worse-light);
+          background-color: var(---color-sooner-light);
         }
 
         .feedback.second {
-          background-color: var(---color-better-light);
+          background-color: var(---color-later-light);
         }
 
         .feedback.nr {

package/src/components/htd-calculation.js

@@ -135,8 +135,11 @@ export default class HTDCalculation extends HTDEquation {
     ];
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let as;
     let ds;
     let al;

package/src/components/htd-curves.js

@@ -359,15 +359,15 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
 
   render() { /* eslint-disable-line class-methods-use-this */
     return html``;
-    //   ${DiscountableElement.svgFilters}
-    // `;
+  }
+
+  willUpdate() {
+    this.alignState();
   }
 
   update(changedProperties) {
     super.update(changedProperties);
 
-    this.alignState();
-
     // Bail out if we can't get the width/height
     if (Number.isNaN(this.width) || Number.isNaN(this.height) || Number.isNaN(this.rem)) {
       return;

package/src/components/itc-option.js

@@ -69,7 +69,7 @@ export default class ITCOption extends DiscountableElement {
 
           background: var(---color-element-background);
           border: 2px solid var(---color-element-emphasis);
-          border-radius: 50%;
+          border-radius: var(---border-radius);
         }
 
         .interactive,

package/src/components/itc-task.js

@@ -60,10 +60,10 @@ export default class ITCTask extends DiscountableElement {
 
     // 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 = {start: 5, stop: 20, step: 5}; // Amount SS
+    this.range.ds = {start: 5, stop: 20, step: 5}; // Delay SS
+    this.range.al = {start: 40, stop: 80, step: 5}; // Amount LL
+    this.range.dl = {start: 40, stop: 80, step: 5}; // Delay LL
 
     this.range.as.values = d3.range(
       this.range.as.start,

package/src/discountable-element.js

@@ -33,12 +33,11 @@ export default class DiscountableElement extends DecidablesElement {
       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',
+      sooner: d3.schemeSet1[5],
+      later: d3.schemeSet1[7],
+      larger: '#4545d0',
+      smaller: '#f032e6',
+      equal: '#10dbc9',
       nr: '#cccccc',
     };
   }
@@ -67,36 +66,33 @@ export default class DiscountableElement extends DecidablesElement {
           ---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-sooner: var(--color-sooner, ${unsafeCSS(this.colors.sooner)});
+          ---color-later: var(--color-later, ${unsafeCSS(this.colors.later)});
+          ---color-larger: var(--color-larger, ${unsafeCSS(this.colors.larger)});
+          ---color-smaller: var(--color-smaller, ${unsafeCSS(this.colors.smaller)});
+          ---color-equal: var(--color-equal, ${unsafeCSS(this.colors.equal)});
           ---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-sooner-light: var(--color-sooner-light, ${unsafeCSS(this.lights.sooner)});
+          ---color-later-light: var(--color-later-light, ${unsafeCSS(this.lights.later)});
+          ---color-larger-light: var(--color-larger-light, ${unsafeCSS(this.lights.larger)});
+          ---color-smaller-light: var(--color-smaller-light, ${unsafeCSS(this.lights.smaller)});
+          ---color-equal-light: var(--color-equal-light, ${unsafeCSS(this.lights.equal)});
           ---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-sooner-dark: var(--color-sooner-dark, ${unsafeCSS(this.darks.sooner)});
+          ---color-later-dark: var(--color-later-dark, ${unsafeCSS(this.darks.later)});
+          ---color-larger-dark: var(--color-larger-dark, ${unsafeCSS(this.darks.larger)});
+          ---color-smaller-dark: var(--color-smaller-dark, ${unsafeCSS(this.darks.smaller)});
+          ---color-equal-dark: var(--color-equal-dark, ${unsafeCSS(this.darks.equal)});
           ---color-nr-dark: var(--color-nr-dark, ${unsafeCSS(this.darks.nr)});
         }
       `,

package/src/equations/adk2v.js

@@ -82,8 +82,11 @@ export default class HTDEquationADK2V extends HTDEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let a;
     let d;
     let k;

package/src/examples/human.js

@@ -8,7 +8,9 @@ import HTDExample from './htd-example';
   <htd-example-human>
 */
 export default class HTDExampleHuman extends HTDExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.discountableControl = this.querySelector('discountable-control');
     this.itcTask = this.querySelector('itc-task');
     this.discountableResponse = this.querySelector('discountable-response');

package/src/examples/interactive.js

@@ -51,7 +51,9 @@ export default class HTDExampleInteractive extends HTDExample {
     this.itcChoice = null;
   }
 
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.htdCalculation = this.querySelector('htd-calculation');
     this.htdCurves = this.querySelector('htd-curves');
     this.itcChoice = this.querySelector('itc-choice');

package/src/examples/model.js

@@ -30,7 +30,9 @@ export default class HTDExampleModel extends HTDExample {
     this.itcTask = null;
   }
 
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.discountableControl = this.querySelector('discountable-control');
     this.discountableResponse = this.querySelector('discountable-response');
     this.htdCalculation = this.querySelector('htd-calculation');