@decidables/discountable-elements 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/lib/discountableElements.esm.js +526 -576
  3. package/lib/discountableElements.esm.js.map +1 -1
  4. package/lib/discountableElements.esm.min.js +98 -101
  5. package/lib/discountableElements.esm.min.js.map +1 -1
  6. package/lib/discountableElements.umd.js +526 -576
  7. package/lib/discountableElements.umd.js.map +1 -1
  8. package/lib/discountableElements.umd.min.js +98 -101
  9. package/lib/discountableElements.umd.min.js.map +1 -1
  10. package/package.json +7 -7
  11. package/src/components/discountable-response.js +4 -4
  12. package/src/components/itc-option.js +1 -1
  13. package/src/components/itc-task.js +4 -4
  14. package/src/discountable-element.js +20 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decidables/discountable-elements",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
5
5
  "keywords": [
6
6
  "web component",
@@ -51,19 +51,19 @@
51
51
  "build": "gulp build"
52
52
  },
53
53
  "devDependencies": {
54
- "@web/test-runner": "^0.17.1",
54
+ "@web/test-runner": "^0.18.0",
55
55
  "gulp": "^4.0.2"
56
56
  },
57
57
  "dependencies": {
58
- "@decidables/decidables-elements": "^0.4.0",
59
- "@decidables/discountable-math": "^0.1.1",
60
- "@lit-labs/motion": "^1.0.4",
58
+ "@decidables/decidables-elements": "^0.4.1",
59
+ "@decidables/discountable-math": "^0.1.2",
60
+ "@lit-labs/motion": "^1.0.6",
61
61
  "@observablehq/plot": "^0.6.11",
62
62
  "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
63
63
  "d3": "^7.8.5",
64
64
  "jstat": "^1.9.6",
65
- "lit": "^2.8.0",
65
+ "lit": "^3.1.0",
66
66
  "regenerator-runtime": "^0.14.0"
67
67
  },
68
- "gitHead": "0333bc21a69ead0e4999d36e29458b9f8ce04d92"
68
+ "gitHead": "84c6fb7df16db2086e9f20496f873e67e05c56b4"
69
69
  }
package/src/components/discountable-response.js CHANGED
@@ -168,11 +168,11 @@ export default class DiscountableResponse extends DiscountableElement {
168
168
  }
169
169
 
170
170
  .selected[disabled][name="first"] {
171
- --decidables-button-background-color: var(---color-worse);
171
+ --decidables-button-background-color: var(---color-sooner);
172
172
  }
173
173
 
174
174
  .selected[disabled][name="second"] {
175
- --decidables-button-background-color: var(---color-better);
175
+ --decidables-button-background-color: var(---color-later);
176
176
  }
177
177
 
178
178
  /* Feedback messages */
@@ -205,11 +205,11 @@ export default class DiscountableResponse extends DiscountableElement {
205
205
  }
206
206
 
207
207
  .feedback.first {
208
- background-color: var(---color-worse-light);
208
+ background-color: var(---color-sooner-light);
209
209
  }
210
210
 
211
211
  .feedback.second {
212
- background-color: var(---color-better-light);
212
+ background-color: var(---color-later-light);
213
213
  }
214
214
 
215
215
  .feedback.nr {
package/src/components/itc-option.js CHANGED
@@ -69,7 +69,7 @@ export default class ITCOption extends DiscountableElement {
69
69
 
70
70
  background: var(---color-element-background);
71
71
  border: 2px solid var(---color-element-emphasis);
72
- border-radius: 50%;
72
+ border-radius: var(---border-radius);
73
73
  }
74
74
 
75
75
  .interactive,
package/src/components/itc-task.js CHANGED
@@ -60,10 +60,10 @@ export default class ITCTask extends DiscountableElement {
60
60
 
61
61
  // Decision parameters
62
62
  this.range = {};
63
- this.range.as = {start: 10, stop: 20, step: 1}; // Amount SS
64
- this.range.ds = {start: 10, stop: 40, step: 1}; // Delay SS
65
- this.range.al = {start: 20, stop: 40, step: 1}; // Amount LL
66
- this.range.dl = {start: 50, stop: 80, step: 1}; // Delay LL
63
+ this.range.as = {start: 5, stop: 20, step: 5}; // Amount SS
64
+ this.range.ds = {start: 5, stop: 20, step: 5}; // Delay SS
65
+ this.range.al = {start: 40, stop: 80, step: 5}; // Amount LL
66
+ this.range.dl = {start: 40, stop: 80, step: 5}; // Delay LL
67
67
 
68
68
  this.range.as.values = d3.range(
69
69
  this.range.as.start,
package/src/discountable-element.js CHANGED
@@ -33,12 +33,11 @@ export default class DiscountableElement extends DecidablesElement {
33
33
  d: d3.schemeSet1[1],
34
34
  k: d3.schemeSet1[2],
35
35
  v: d3.schemeSet1[3],
36
- chosen: d3.schemeSet1[8],
37
- better: '#4545d0',
38
- worse: '#f032e6',
39
- even: '#10dbc9',
40
- correct: '#ffffff',
41
- error: '#000000',
36
+ sooner: d3.schemeSet1[5],
37
+ later: d3.schemeSet1[7],
38
+ larger: '#4545d0',
39
+ smaller: '#f032e6',
40
+ equal: '#10dbc9',
42
41
  nr: '#cccccc',
43
42
  };
44
43
  }
@@ -67,36 +66,33 @@ export default class DiscountableElement extends DecidablesElement {
67
66
  ---color-d: var(--color-d, ${unsafeCSS(this.colors.d)});
68
67
  ---color-k: var(--color-k, ${unsafeCSS(this.colors.k)});
69
68
  ---color-v: var(--color-v, ${unsafeCSS(this.colors.v)});
70
- ---color-chosen: var(--color-chosen, ${unsafeCSS(this.colors.chosen)});
71
- ---color-better: var(--color-better, ${unsafeCSS(this.colors.better)});
72
- ---color-worse: var(--color-worse, ${unsafeCSS(this.colors.worse)});
73
- ---color-even: var(--color-even, ${unsafeCSS(this.colors.even)});
74
- ---color-correct: var(--color-correct, ${unsafeCSS(this.colors.correct)});
75
- ---color-error: var(--color-error, ${unsafeCSS(this.colors.error)});
69
+ ---color-sooner: var(--color-sooner, ${unsafeCSS(this.colors.sooner)});
70
+ ---color-later: var(--color-later, ${unsafeCSS(this.colors.later)});
71
+ ---color-larger: var(--color-larger, ${unsafeCSS(this.colors.larger)});
72
+ ---color-smaller: var(--color-smaller, ${unsafeCSS(this.colors.smaller)});
73
+ ---color-equal: var(--color-equal, ${unsafeCSS(this.colors.equal)});
76
74
  ---color-nr: var(--color-nr, ${unsafeCSS(this.colors.nr)});
77
75
 
78
76
  ---color-a-light: var(--color-a-light, ${unsafeCSS(this.lights.a)});
79
77
  ---color-d-light: var(--color-d-light, ${unsafeCSS(this.lights.d)});
80
78
  ---color-k-light: var(--color-k-light, ${unsafeCSS(this.lights.k)});
81
79
  ---color-v-light: var(--color-v-light, ${unsafeCSS(this.lights.v)});
82
- ---color-chosen-light: var(--color-chosen-light, ${unsafeCSS(this.lights.chosen)});
83
- ---color-better-light: var(--color-better-light, ${unsafeCSS(this.lights.better)});
84
- ---color-worse-light: var(--color-worse-light, ${unsafeCSS(this.lights.worse)});
85
- ---color-even-light: var(--color-even-light, ${unsafeCSS(this.lights.even)});
86
- ---color-correct-light: var(--color-correct-light, ${unsafeCSS(this.lights.correct)});
87
- ---color-error-light: var(--color-error-light, ${unsafeCSS(this.lights.error)});
80
+ ---color-sooner-light: var(--color-sooner-light, ${unsafeCSS(this.lights.sooner)});
81
+ ---color-later-light: var(--color-later-light, ${unsafeCSS(this.lights.later)});
82
+ ---color-larger-light: var(--color-larger-light, ${unsafeCSS(this.lights.larger)});
83
+ ---color-smaller-light: var(--color-smaller-light, ${unsafeCSS(this.lights.smaller)});
84
+ ---color-equal-light: var(--color-equal-light, ${unsafeCSS(this.lights.equal)});
88
85
  ---color-nr-light: var(--color-nr-light, ${unsafeCSS(this.lights.nr)});
89
86
 
90
87
  ---color-a-dark: var(--color-a-dark, ${unsafeCSS(this.darks.a)});
91
88
  ---color-d-dark: var(--color-d-dark, ${unsafeCSS(this.darks.d)});
92
89
  ---color-k-dark: var(--color-k-dark, ${unsafeCSS(this.darks.k)});
93
90
  ---color-v-dark: var(--color-v-dark, ${unsafeCSS(this.darks.v)});
94
- ---color-chosen-dark: var(--color-chosen-dark, ${unsafeCSS(this.darks.chosen)});
95
- ---color-better-dark: var(--color-better-dark, ${unsafeCSS(this.darks.better)});
96
- ---color-worse-dark: var(--color-worse-dark, ${unsafeCSS(this.darks.worse)});
97
- ---color-even-dark: var(--color-even-dark, ${unsafeCSS(this.darks.even)});
98
- ---color-correct-dark: var(--color-correct-dark, ${unsafeCSS(this.darks.correct)});
99
- ---color-error-dark: var(--color-error-dark, ${unsafeCSS(this.darks.error)});
91
+ ---color-sooner-dark: var(--color-sooner-dark, ${unsafeCSS(this.darks.sooner)});
92
+ ---color-later-dark: var(--color-later-dark, ${unsafeCSS(this.darks.later)});
93
+ ---color-larger-dark: var(--color-larger-dark, ${unsafeCSS(this.darks.larger)});
94
+ ---color-smaller-dark: var(--color-smaller-dark, ${unsafeCSS(this.darks.smaller)});
95
+ ---color-equal-dark: var(--color-equal-dark, ${unsafeCSS(this.darks.equal)});
100
96
  ---color-nr-dark: var(--color-nr-dark, ${unsafeCSS(this.darks.nr)});
101
97
  }
102
98
  `,