@decidables/discountable-elements 0.1.0

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@decidables/discountable-elements",
+  "version": "0.1.0",
+  "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
+  "keywords": [
+    "web component",
+    "explorable explanation",
+    "explorable",
+    "decision making",
+    "decidables",
+    "hyperbolic temporal discounting",
+    "temporal discounting",
+    "delay discounting",
+    "discountable"
+  ],
+  "type": "module",
+  "main": "./lib/discountableElements.umd.min.js",
+  "browser": "./lib/discountableElements.umd.min.js",
+  "module": "./lib/discountableElements.esm.min.js",
+  "exports": {
+    "./lib/*.js": "./lib/*.js",
+    ".": "./src/index.js",
+    "./components": "./src/components/index.js",
+    "./equations": "./src/equations/index.js",
+    "./examples": "./src/examples/index.js",
+    "./*": "./src/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decidables/decidables.git",
+    "directory": "libraries/discountable-elements"
+  },
+  "bugs": "https://github.com/decidables/decidables/issues",
+  "homepage": "https://github.com/decidables/decidables/tree/main/libraries/discountable-elements",
+  "author": "Adam Krawitz (https://web.uvic.ca/psyc/krawitz/)",
+  "license": "CC-BY-SA-4.0 AND GPL-3.0-or-later",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "package.json",
+    "*.md",
+    "src",
+    "lib"
+  ],
+  "scripts": {
+    "lint": "gulp lint",
+    "test": "web-test-runner test/**/*.test.js --config ../../.webtestrunnerrc.js",
+    "test:watch": "web-test-runner test/**/*.test.js --config ../../.webtestrunnerrc.js --watch",
+    "test:file": "web-test-runner $@ --config ../../.webtestrunnerrc.js",
+    "build": "gulp build"
+  },
+  "devDependencies": {
+    "@web/test-runner": "^0.17.1",
+    "gulp": "^4.0.2"
+  },
+  "dependencies": {
+    "@decidables/decidables-elements": "^0.4.0",
+    "@decidables/discountable-math": "^0.1.0",
+    "@lit-labs/motion": "^1.0.4",
+    "@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",
+    "regenerator-runtime": "^0.14.0"
+  },
+  "gitHead": "0c1c25702476045288038e7cacaaa70245b84cd1"
+}

package/src/components/discountable-control.js

@@ -0,0 +1,173 @@
+
+import {html, css} from 'lit';
+
+import '@decidables/decidables-elements/button';
+import '@decidables/decidables-elements/slider';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  DiscountableControl element
+  <discountable-control>
+
+  Attributes:
+
+*/
+export default class DiscountableControl extends DiscountableElement {
+  static get properties() {
+    return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+      run: {
+        attribute: 'run',
+        type: Boolean,
+        reflect: true,
+      },
+      pause: {
+        attribute: 'pause',
+        type: Boolean,
+        reflect: true,
+      },
+      reset: {
+        attribute: 'reset',
+        type: Boolean,
+        reflect: true,
+      },
+
+      state: {
+        atribute: false,
+        type: String,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.trials = undefined;
+    this.duration = undefined;
+    this.run = false;
+    this.pause = false;
+    this.reset = false;
+
+    // Properties
+    this.states = ['resetted', 'running', 'paused', 'ended'];
+    this.state = 'resetted';
+  }
+
+  setTrials(e) {
+    this.trials = e.target.value;
+    this.dispatchEvent(new CustomEvent('discountable-control-trials', {
+      detail: {
+        trials: this.trials,
+      },
+      bubbles: true,
+    }));
+  }
+
+  setDuration(e) {
+    this.duration = e.target.value;
+    this.dispatchEvent(new CustomEvent('discountable-control-duration', {
+      detail: {
+        duration: this.duration,
+      },
+      bubbles: true,
+    }));
+  }
+
+  doRun() {
+    this.state = 'running';
+    this.dispatchEvent(new CustomEvent('discountable-control-run', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  doPause() {
+    this.state = 'paused';
+    this.dispatchEvent(new CustomEvent('discountable-control-pause', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  doReset() {
+    this.state = 'resetted';
+    this.dispatchEvent(new CustomEvent('discountable-control-reset', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  complete() {
+    this.state = 'ended';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        .holder {
+          display: flex;
+
+          flex-direction: row;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+
+        .buttons {
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        ${this.trials
+          ? html`<decidables-slider min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>`
+          : html``}
+        ${this.duration
+          ? html`<decidables-slider min="10" max="4000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>`
+          : html``}
+        ${this.run || this.pause || this.reset
+          ? html`
+            <div class="buttons">
+              ${this.run
+                ? html`<decidables-button name="run" ?disabled=${this.state === 'running' || this.state === 'ended'} @click=${this.doRun.bind(this)}>Run</decidables-button>`
+                : html``}
+              ${this.pause
+                ? html`<decidables-button name="pause" ?disabled=${this.state !== 'running'} @click=${this.doPause.bind(this)}>Pause</decidables-button>`
+                : html``}
+              ${this.reset
+                ? html`<decidables-button name="reset" ?disabled=${this.state === 'resetted'} @click=${this.doReset.bind(this)}>Reset</decidables-button>`
+                : html``}
+            </div>
+            `
+          : html``}
+      </div>`;
+  }
+}
+
+customElements.define('discountable-control', DiscountableControl);

package/src/components/discountable-response.js

@@ -0,0 +1,283 @@
+
+import {html, css} from 'lit';
+
+import '@decidables/decidables-elements/button';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  DiscountableResponse element
+  <discountable-response>
+
+  Attributes:
+
+*/
+export default class DiscountableResponse extends DiscountableElement {
+  static get properties() {
+    return {
+      trial: {
+        attribute: 'trial',
+        type: Boolean,
+        reflect: true,
+      },
+      feedback: {
+        attribute: 'feedback',
+        type: Boolean,
+        reflect: true,
+      },
+
+      state: {
+        attribute: false,
+        type: String,
+        reflect: false,
+      },
+      trialCount: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+      trialTotal: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.trial = false; // Show trial count?
+    this.feedback = false; // Show response feedback?
+
+    // Properties
+    this.states = ['off', 'waiting', 'feedback']; // Possible states
+    this.state = 'off'; // Current state
+
+    this.trialCount = 0; // Current trial
+    this.trialTotal = 0; // Total trials
+
+    // Private
+    this.as = 0;
+    this.ds = 0;
+    this.al = 0;
+    this.dl = 0;
+    this.responses = ['first', 'second', 'nr']; // Possible values of 'response'
+    this.response = undefined; // Response for current trial
+  }
+
+  start(as, ds, al, dl, trial) {
+    this.state = 'waiting';
+
+    this.as = as;
+    this.ds = ds;
+    this.al = al;
+    this.dl = dl;
+    this.trialCount = trial;
+
+    this.response = undefined;
+  }
+
+  stop() {
+    this.state = 'feedback';
+    if (this.response === undefined) {
+      this.response = 'nr';
+    }
+  }
+
+  first() {
+    this.responded('first');
+  }
+
+  second() {
+    this.responded('second');
+  }
+
+  responded(response) {
+    this.state = 'feedback';
+    this.response = response;
+
+    this.dispatchEvent(new CustomEvent('discountable-response', {
+      detail: {
+        trial: this.trialCount,
+        as: this.as,
+        ds: this.ds,
+        al: this.al,
+        dl: this.dl,
+        response: this.response,
+      },
+      bubbles: true,
+    }));
+  }
+
+  reset() {
+    this.state = 'off';
+    this.trialCount = 0;
+    this.response = undefined;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        /* Overall container */
+        .holder {
+          display: flex;
+
+          flex-direction: column;
+        }
+
+        /* Trial messages */
+        .trials {
+          display: flex;
+
+          flex-direction: column;
+
+          justify-content: center;
+        }
+
+        .trial {
+          text-align: center;
+        }
+
+        .trial .label {
+          font-weight: 600;
+        }
+
+        /* Response buttons */
+        .responses {
+          display: flex;
+
+          flex-direction: row;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+
+        .response {
+          width: 5.25rem;
+        }
+
+        .waiting[disabled] {
+          --decidables-button-background-color: var(---color-element-enabled);
+        }
+
+        .selected[disabled][name="first"] {
+          --decidables-button-background-color: var(---color-worse);
+        }
+
+        .selected[disabled][name="second"] {
+          --decidables-button-background-color: var(---color-better);
+        }
+
+        /* Feedback messages */
+        .feedbacks {
+          display: flex;
+
+          flex-direction: row;
+
+          justify-content: center;
+        }
+
+        /* Outcome feedback */
+        .feedback {
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: center;
+          justify-content: center;
+
+          width: 5.25rem;
+          height: 3.5rem;
+          padding: 0.375rem 0.75rem;
+          margin: 0.25rem;
+
+          text-align: center;
+
+          background-color: var(---color-element-background);
+          border: 1px solid var(---color-element-border);
+        }
+
+        .feedback.first {
+          background-color: var(---color-worse-light);
+        }
+
+        .feedback.second {
+          background-color: var(---color-better-light);
+        }
+
+        .feedback.nr {
+          background-color: var(---color-nr-light);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        ${(this.trial)
+          ? html`
+            <div class="trials">
+              <div class="trial">
+                <span class="label">Trial: </span
+                ><span class="count">${this.trialCount}</span
+                ><span class="of"> of </span
+                ><span class="total">${this.trialTotal}</span>
+              </div>
+            </div>`
+          : html``}
+        <div class="responses">
+          <decidables-button 
+            name="first"
+            class="response ${
+              (this.state === 'feedback' && this.response === 'first')
+                ? 'selected'
+                : (this.state === 'waiting')
+                  ? 'waiting'
+                  : ''
+            }"
+            ?disabled=${this.state !== 'waiting' || this.interactive !== true}
+            @click=${this.first.bind(this)}
+          >First</decidables-button>
+          <decidables-button 
+            name="second"
+            class="response ${
+              (this.state === 'feedback' && this.response === 'second')
+                ? 'selected'
+                : (this.state === 'waiting')
+                  ? 'waiting'
+                  : ''
+            }"
+            ?disabled=${this.state !== 'waiting' || this.interactive !== true}
+            @click=${this.second.bind(this)}
+          >Second</decidables-button>
+        </div>
+        ${this.feedback
+          ? html`
+            <div class="feedbacks">
+              <div class="feedback
+                ${((this.state === 'feedback') && this.feedback)
+                  ? this.response
+                  : ''}">
+                ${((this.state === 'feedback') && this.feedback)
+                  ? (this.response === 'first')
+                    ? html`<span class="response">First</span>`
+                    : (this.response === 'second')
+                      ? html`<span class="response">Second</span>`
+                      : html`<span class="response">No<br>Response</span>`
+                  : ''}
+              </div>
+            </div>`
+          : html``}
+      </div>`;
+  }
+}
+
+customElements.define('discountable-response', DiscountableResponse);