<commit_before><template>
  <span/>
</template>

<script>
export default {
  props: {
    seed: { default: 2 },
    size: { default: 1000 },
  },
  mounted () {
    this.$el.appendChild(this.box)
  },
  watch: {
    box (box, prevBox) {
      this.$el.replaceChild(box, prevBox)
    },
  },
  computed: {
    box () {
      function pseudoRandom (seed) {
        let random = Math.sin(seed) * 10000
        random -= Math.floor(random)
        return random
      }

      const ratio = 1.2

      let seed = pseudoRandom(this.seed)
      let size = 100
      // let sizeHeight = Math.floor(size / ratio)

      function getRandomRange (min, max, add = 1000) {
        return Math.floor(pseudoRandom(seed * add) * (max - min) + min)
      }

      const svgns = 'http://www.w3.org/2000/svg'
      const box = document.createElementNS(svgns, 'svg')

      const rows = 10
      const columns = 10
      const blockSize = Math.floor(size / rows * 2)
      const blockSizeHeight = Math.floor(blockSize / ratio)
      const rotate = blockSize * rows / 2

      // box.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
      // box.setAttribute('width', size)
      // box.setAttribute('height', sizeHeight)
      // box.setAttribute('width', '100%')
      // box.setAttribute('height', '100%')
      // box.setAttribute('style', 'width: 100%; height: auto')
      box.setAttribute('viewBox', '0 0 100 100')
      box.setAttribute('class', 'box')

      const g = document.createElementNS(svgns, 'g')
      g.setAttribute(
        'transform',
        `translate(${-(rows * blockSize - size) / 2} ${-((rows * blockSize - size) / 2)}) ` +
        `rotate(${90 * seed} ${rotate} ${rotate})`,
      )

      for (let i = 0; i < columns; i++) {
        // noprotect
        for (let j = 0; j < rows; j++) {
          let rect = document.createElementNS(svgns, 'rect')
          rect.setAttribute('width', blockSize)
          rect.setAttribute('height', blockSizeHeight)
          rect.setAttribute('fill', 'rgba(' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 1) + ',' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 2) + ',' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 3) + ',1)',
          )
          rect.setAttribute('x', i * blockSize)
          rect.setAttribute('y', j * blockSizeHeight)

          g.appendChild(rect)
        }
      }
      box.appendChild(g)

      let overlay = document.createElementNS(svgns, 'rect')
      overlay.setAttribute('width', size)
      overlay.setAttribute('height', size)
      overlay.setAttribute('fill', 'rgba(' +
        getRandomRange(100, 255, 1) + ',' +
        getRandomRange(100, 255, 2) + ',' +
        getRandomRange(100, 255, 3) + ',0.5)',
      )
      overlay.setAttribute('x', 0)
      overlay.setAttribute('y', 0)
      box.appendChild(overlay)
      return box
    },
  },
}
</script>

<style scoped lang='stylus'>
</style>
<commit_msg>Added possibility to add text to banner<commit_after><template>
  <span/>
</template>

<script>
export default {
  props: {
    seed: { default: 2 },
    text: { default: false },
  },
  mounted () {
    this.$el.appendChild(this.box)
  },
  watch: {
    box (box, prevBox) {
      this.$el.replaceChild(box, prevBox)
    },
  },
  computed: {
    box () {
      function pseudoRandom (seed) {
        let random = Math.sin(seed) * 10000
        random -= Math.floor(random)
        return random
      }

      const ratio = 1.2

      let seed = pseudoRandom(this.seed)
      let size = 100

      function getRandomRange (min, max, add = 1000) {
        return Math.floor(pseudoRandom(seed * add) * (max - min) + min)
      }

      const svgns = 'http://www.w3.org/2000/svg'
      const box = document.createElementNS(svgns, 'svg')

      const rows = 10
      const columns = 10
      const blockSize = Math.floor(size / rows * 2)
      const blockSizeHeight = Math.floor(blockSize / ratio)
      const rotate = blockSize * rows / 2

      // box.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
      // box.setAttribute('width', size)
      // box.setAttribute('height', sizeHeight)
      // box.setAttribute('width', '100%')
      // box.setAttribute('height', '100%')
      // box.setAttribute('style', 'width: 100%; height: auto')
      box.setAttribute('viewBox', '0 0 100 100')
      box.setAttribute('class', 'box')

      const g = document.createElementNS(svgns, 'g')
      g.setAttribute(
        'transform',
        `translate(${-(rows * blockSize - size) / 2} ${-((rows * blockSize - size) / 2)}) ` +
        `rotate(${90 * seed} ${rotate} ${rotate})`,
      )

      for (let i = 0; i < columns; i++) {
        // noprotect
        for (let j = 0; j < rows; j++) {
          let rect = document.createElementNS(svgns, 'rect')
          rect.setAttribute('width', blockSize)
          rect.setAttribute('height', blockSizeHeight)
          rect.setAttribute('fill', 'rgba(' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 1) + ',' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 2) + ',' +
            getRandomRange(100, 255, (i + 1) * (j + 1) * 3) + ',1)',
          )
          rect.setAttribute('x', i * blockSize)
          rect.setAttribute('y', j * blockSizeHeight)

          g.appendChild(rect)
        }
      }
      box.appendChild(g)

      let overlay = document.createElementNS(svgns, 'rect')
      overlay.setAttribute('width', size)
      overlay.setAttribute('height', size)
      overlay.setAttribute('fill', 'rgba(' +
        getRandomRange(100, 255, 1) + ',' +
        getRandomRange(100, 255, 2) + ',' +
        getRandomRange(100, 255, 3) + ',0.5)',
      )
      overlay.setAttribute('x', 0)
      overlay.setAttribute('y', 0)
      box.appendChild(overlay)

      let initialsText = this.text

      if (initialsText) {
        let initials = document.createTextNode(initialsText)
        let textOverlay = document.createElementNS(svgns, 'text')
        textOverlay.setAttribute('width', size)
        textOverlay.setAttribute('height', 20)
        textOverlay.setAttribute('fill', 'rgba(' +
          getRandomRange(210, 250, 1) + ',' +
          getRandomRange(210, 250, 2) + ',' +
          getRandomRange(210, 250, 3) + ',1)',
        )
        textOverlay.setAttribute('font-size', 5)
        textOverlay.setAttribute('font-weight', 'bold')
        textOverlay.setAttribute('text-anchor', 'start')
        textOverlay.setAttribute('x', 3)
        textOverlay.setAttribute('y', 4.5)
        textOverlay.appendChild(initials)
        box.appendChild(textOverlay)
      }

      return box
    },
  },
}
</script>

<style scoped lang='stylus'>
</style>

{'fraction_non_alphanumeric': 0.16249437865387498, 'fraction_numerical': 0.03687603058012292, 'mean_word_length': 2.2482960077896785, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 2}, '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': '7645862', 'n_tokens_mistral': 2311, 'n_tokens_neox': 2124, 'n_words': 468}