@decidables/discountable-elements 0.1.1 → 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 (16) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +418 -996
  3. package/lib/discountableElements.esm.js +534 -582
  4. package/lib/discountableElements.esm.js.map +1 -1
  5. package/lib/discountableElements.esm.min.js +102 -103
  6. package/lib/discountableElements.esm.min.js.map +1 -1
  7. package/lib/discountableElements.umd.js +534 -582
  8. package/lib/discountableElements.umd.js.map +1 -1
  9. package/lib/discountableElements.umd.min.js +102 -103
  10. package/lib/discountableElements.umd.min.js.map +1 -1
  11. package/package.json +7 -7
  12. package/src/components/discountable-response.js +8 -8
  13. package/src/components/itc-choice.js +4 -2
  14. package/src/components/itc-option.js +1 -1
  15. package/src/components/itc-task.js +4 -4
  16. 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.1.1",
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": "0ee019e9f305b42f134a9b8b465a8f5db191b244"
68
+ "gitHead": "84c6fb7df16db2086e9f20496f873e67e05c56b4"
69
69
  }
package/src/components/discountable-response.js CHANGED
@@ -15,13 +15,13 @@ import DiscountableElement from '../discountable-element';
15
15
  export default class DiscountableResponse extends DiscountableElement {
16
16
  static get properties() {
17
17
  return {
18
- trial: {
19
- attribute: 'trial',
18
+ feedback: {
19
+ attribute: 'feedback',
20
20
  type: Boolean,
21
21
  reflect: true,
22
22
  },
23
- feedback: {
24
- attribute: 'feedback',
23
+ trial: {
24
+ attribute: 'trial',
25
25
  type: Boolean,
26
26
  reflect: true,
27
27
  },
@@ -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-choice.js CHANGED
@@ -112,7 +112,8 @@ export default class ITCChoice extends DiscountableElement {
112
112
  render() {
113
113
  return html`
114
114
  <div class="holder">
115
- <itc-option
115
+ <itc-option
116
+ class="ss"
116
117
  state=${this.state}
117
118
  ?interactive=${this.interactive}
118
119
  amount="${this.as}"
@@ -120,7 +121,8 @@ export default class ITCChoice extends DiscountableElement {
120
121
  @itc-option-change=${this.ssChange.bind(this)}>
121
122
  </itc-option><span class="query"
122
123
  >${(this.state === 'choice') ? '?' : (this.state === 'fixation') ? '+' : html`∙`}</span
123
- ><itc-option
124
+ ><itc-option
125
+ class="ll"
124
126
  state=${this.state}
125
127
  ?interactive=${this.interactive}
126
128
  amount="${this.al}"
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
  `,