<commit_before><link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="bf-timer">
  <template>
    <style>
      .container {
        align-items: center;
        color: tomato;
        display: flex;
        justify-content: center;
      }

      .seconds {
        height: 200px;
        transform: rotate(-90deg);
        width: 200px;
      }

      .track,
      .progress {
        stroke-width: 1em;
      }

      .track {
        stroke: #ccc;
      }

      .progress {
        stroke: currentColor;
        transition: stroke-dashoffset 0.017s linear;
      }

      .minutes {
        font-size: 4em;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
      }
    </style>

    <div class="container" on-tap="_toggleTimer">
      <div class="minutes">[[_computeMinutes(seconds)]]</div>
      <svg class="seconds">
        <circle
          class="track"
          r="90"
          cx="100"
          cy="100"
          fill="transparent"></circle>
        <circle
          class="progress"
          style$="stroke-dashoffset: [[_computeStrokeDashoffset(maxOffset, seconds)]]"
          r="90"
          cx="100"
          cy="100"
          fill="transparent"
          stroke-dasharray$="[[maxOffset]]"></circle>
      </svg>
    </div>
  </template>

  <script>
    Polymer({
      is: 'bf-timer',

      properties: {
        active: Boolean,
        requestId: Number,
        maxOffset: {
          type: Number,
          value: 565.48,
          readOnly: true,
        },
        start: Number,
        seconds: {
          type: Number,
          value: 0,
        },
      },

      detached: function () {
        window.cancelAnimationFrame(this.requestId);
      },

      _computeMinutes: function (seconds) {
        return Math.floor(seconds / 60);
      },

      _computeStrokeDashoffset: function (maxOffset, seconds) {
        // TODO: Tweak accuracy of this. Minutes change just before complete.
        return maxOffset - (seconds / 60) * Math.PI * 180;
      },

      _toggleTimer: function (evt) {
        evt.preventDefault();
        if (!this.active) {
          this.requestId = window.requestAnimationFrame(this._progress.bind(this));
          this.active = true;
        } else {
          window.cancelAnimationFrame(this.requestId);
          this.active = false;
          // const finalTime = new Date(performance.now() - start);
          // const seconds = finalTime.getSeconds();
          // TODO: Do something with the final time
        }
      },

      _progress: function (ms) {
        // TODO: Need to handle start/stop. e.g., multiple "start" times
        if (!this.start) {
          this.start = ms;
        }

        this.seconds = (ms - this.start) / 1000;

        this.requestId = window.requestAnimationFrame(this._progress.bind(this));
      },
    });
  </script>
</dom-module><commit_msg>Minor changes. Need to pause.<commit_after><link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="bf-timer">
  <template>
    <style>
      .container {
        align-items: center;
        color: tomato;
        display: flex;
        justify-content: center;
      }

      .seconds {
        height: 200px;
        transform: rotate(-90deg);
        width: 200px;
      }

      .track,
      .progress {
        stroke-width: 1em;
      }

      .track {
        stroke: #ccc;
      }

      .progress {
        stroke: currentColor;
        transition: stroke-dashoffset 0.016s linear;
      }

      .minutes {
        font-size: 4em;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
      }
    </style>

    <div class="container" on-tap="_toggleTimer">
      <div class="minutes">[[_computeMinutes(seconds)]]</div>
      <svg class="seconds">
        <circle
          class="track"
          r="90"
          cx="100"
          cy="100"
          fill="transparent"></circle>
        <circle
          class="progress"
          style$="stroke-dashoffset: [[_computeStrokeDashoffset(seconds)]]"
          r="90"
          cx="100"
          cy="100"
          fill="transparent"
          stroke-dasharray$="[[_maxOffset]]"></circle>
      </svg>
    </div>
  </template>

  <script>
    Polymer({
      is: 'bf-timer',

      properties: {
        _requestId: Number,
        _maxOffset: {
          type: Number,
          value: 565.48,
          readOnly: true,
        },
        active: Boolean,
        start: Number,
        seconds: {
          type: Number,
          value: 0,
        },
      },

      detached: function () {
        window.cancelAnimationFrame(this._requestId);
      },

      _computeMinutes: function (seconds) {
        return Math.floor(seconds / 60);
      },

      _computeStrokeDashoffset: function (seconds) {
        // TODO: Tweak accuracy of this. Minutes change just before complete.
        return this._maxOffset - (seconds / 60) * Math.PI * 180;
      },

      _toggleTimer: function (evt) {
        evt.preventDefault();
        if (!this.active) {
          this._requestId = window.requestAnimationFrame(this._progress.bind(this));
          this.active = true;
        } else {
          window.cancelAnimationFrame(this._requestId);
          this.active = false;
          // const finalTime = new Date(performance.now() - start);
          // const seconds = finalTime.getSeconds();
          // TODO: Do something with the final time
        }
      },

      _progress: function (ms) {
        // TODO: Need to handle start/stop.
        // ms is just an ongoing timestamp (i.e., pausing doesn't reset it),
        // so we need to remove the pause time from the counter.
        if (!this.start) {
          this.start = ms;
        }

        this.seconds = (ms - this.start) / 1000;

        this._requestId = window.requestAnimationFrame(this._progress.bind(this));
      },
    });
  </script>
</dom-module>
{'fraction_non_alphanumeric': 0.13098827470686766, 'fraction_numerical': 0.017085427135678392, 'mean_word_length': 1.6908517350157728, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3346755', 'n_tokens_mistral': 1825, 'n_tokens_neox': 1695, 'n_words': 375}