<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mastermind</title>
    <style media="screen">
      input[type=range] {
        -webkit-appearance: none;
        outline: none;
      }
      input[type=range][value~="0"] { background-color: red; }
      input[type=range][value~="1"] { background-color: blue; }
      input[type=range][value~="2"] { background-color: green; }
      input[type=range][value~="3"] { background-color: yellow; }
      input[type=range][value~="4"] { background-color: cyan; }
      input[type=range][value~="5"] { background-color: magenta; }
    </style>
  </head>
  <body>
    <form class="js-secret">
      <input class="js-sync-value-attr" name="0" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="1" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="2" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="3" type="range" min="0" max="5" />
    </form>
    <form class="js-attempt">
      <input class="js-sync-value-attr" name="0" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="1" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="2" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="3" type="range" min="0" max="5" />
      <input type="submit" value="Play" />
      <span class="js-hits"></span>
      <span class="js-nearby-hits"></span>
    </form>
    <script type="text/javascript">
      'use strict';

      (function () {
        var tokens = [0,1,2,3,4,5];
        unserializeRow(document.getElementsByClassName('js-secret')[0], createTokens(tokens, 4));
        unserializeRow(document.getElementsByClassName('js-attempt')[0], createTokens(tokens, 4));
        document.getElementsByClassName('js-attempt')[0].addEventListener('submit', attempt);
        document.addEventListener('change', function (e) {
          let className = e.target.getAttribute('class');
          if (className.indexOf('js-sync-value-attr') > -1) {
            syncValueAttr(e.target);
          }
        })
      })();

      function syncValueAttr(that) {
        that.setAttribute('value', that.value);
      }

      function attempt(e) {
        e.preventDefault();
        var secret = serializeRow(document.getElementsByClassName('js-secret')[0]);
        var attempt = serializeRow(this);
        var _hits = hits(secret, attempt);
        var _nearbyHits = nearbyHits(secret, attempt) - _hits;
        this.getElementsByClassName('js-hits')[0].innerHTML = _hits;
        this.getElementsByClassName('js-nearby-hits')[0].innerHTML = _nearbyHits;
      }

      function serializeRow(formEl) {
        var i = 0;
        var tokens = [];
        while (true) {
          let field = formEl.elements.namedItem(`${i}`);
          if (field) {
            tokens.push(parseInt(field.value, 10));
            i++;
          } else {
            break;
          }
        }
        return tokens;
      }

      function unserializeRow(formEl, tokens) {
        tokens.forEach(function(token, i){
          const inputEl = formEl.elements.namedItem(`${i}`);
          inputEl.value = token;
          inputEl.setAttribute('value', token);
        });
      }

      function createTokens(tokens, size) {
        var secret = [];
        for (var i = 0; i < size; i++) {
          secret.push(Math.round(Math.random() * (tokens.length - 1)));<commit_msg>Style appearance and clone attempts<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mastermind</title>
    <style media="screen">
      input[type=range] {
        -webkit-appearance: none;
        width: 20%;
        outline: none;
        margin: 0;
        height: 30px;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: rgba(255, 255, 255, 0.8);
        height: 30px;
        width: 30px;
      }
      input[type=range][value~="0"] { background-color: red; }
      input[type=range][value~="1"] { background-color: blue; }
      input[type=range][value~="2"] { background-color: green; }
      input[type=range][value~="3"] { background-color: yellow; }
      input[type=range][value~="4"] { background-color: cyan; }
      input[type=range][value~="5"] { background-color: magenta; }
      .js-secret input { display: none; }
    </style>
  </head>
  <body>
    <form class="js-secret">
      <input class="js-sync-value-attr" name="0" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="1" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="2" type="range" min="0" max="5" />
      <input class="js-sync-value-attr" name="3" type="range" min="0" max="5" />
    </form>
    <div class="js-attempts">
      <form class="js-attempt">
        <input class="js-sync-value-attr" name="0" type="range" min="0" max="5" />
        <input class="js-sync-value-attr" name="1" type="range" min="0" max="5" />
        <input class="js-sync-value-attr" name="2" type="range" min="0" max="5" />
        <input class="js-sync-value-attr" name="3" type="range" min="0" max="5" />
        <input type="submit" value="Bet" />
        <span class="js-hits"></span>
        <span class="js-nearby-hits"></span>
      </form>
    </div>
    <script type="text/javascript">
      'use strict';

      (function () {
        var tokens = [0,1,2,3,4,5];
        unserializeRow(document.getElementsByClassName('js-secret')[0], createTokens(tokens, 4));
        unserializeRow(document.getElementsByClassName('js-attempt')[0], createTokens(tokens, 4));
        document.addEventListener('submit', attempt);
        document.addEventListener('change', function (e) {
          let className = e.target.getAttribute('class');
          if (className.indexOf('js-sync-value-attr') > -1) {
            syncValueAttr(e.target);
          }
        })
      })();

      function syncValueAttr(that) {
        that.setAttribute('value', that.value);
      }

      function attempt(e) {
        e.preventDefault();
        var form = e.target;

        var newAttempt = form.cloneNode();
        newAttempt.innerHTML = form.innerHTML;
        document.getElementsByClassName('js-attempts')[0].appendChild(newAttempt);

        var secret = serializeRow(document.getElementsByClassName('js-secret')[0]);
        var attempt = serializeRow(form);
        var _hits = hits(secret, attempt);
        var _nearbyHits = nearbyHits(secret, attempt) - _hits;
        form.getElementsByClassName('js-hits')[0].innerHTML = _hits;
        form.getElementsByClassName('js-nearby-hits')[0].innerHTML = _nearbyHits;
      }

      function serializeRow(formEl) {
        var i = 0;
        var tokens = [];
        while (true) {
          let field = formEl.elements.namedItem(`${i}`);
          if (field) {
            tokens.push(parseInt(field.value, 10));
            i++;
          } else {
            break;
          }
        }
        return tokens;
      }

      function unserializeRow(formEl, tokens) {
        tokens.forEach(function(token, i){
          const inputEl = formEl.elements.namedItem(`${i}`);
          inputEl.value = token;
          inputEl.setAttribute('value', token);
        });
      }

      function createTokens(tokens, size) {
        var secret = [];
        for (var i = 0; i < size; i++) {
          secret.push(Math.round(Math.random() * (tokens.length - 1)));
{'fraction_non_alphanumeric': 0.17701118806606286, 'fraction_numerical': 0.016249334043686735, 'mean_word_length': 2.568916349809886, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, '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': '1109381', 'n_tokens_mistral': 2441, 'n_tokens_neox': 2384, 'n_words': 429}