Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Huffman</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

  <style>
    * {
      background: rgb(200, 200, 200);
    }
    #drop_zone {
      margin: 50px;
      border: 3px solid rgb(75, 75, 75);
      width:  80%;
      margin-left: 10%;
      margin-right: 10%;
      text-align: center;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-size: 10vmin;
    }
    #wynik {
      width: 30%;
      font-size: 2em;
      word-spacing: 25px;
    }
  </style>


  <script>

    // !!!!! TUTAJ ZNAJDUJE SIE KOD ALGORYTMU !!!!!

    class Wezel {
      constructor(znak, ilosc) {
        this.znak = znak;
        this.ilosc = ilosc;
        this.lewy = null;
        this.prawy = null;
      }
    }

    //funkcja sortujaca wezly po ilosci powtorzen danego znaku
    function sortuj(wezly) {
      return _.sortBy(wezly, x => x.ilosc)
    }

    function wypisz(wezel, poziom) {
      //przemieszczanie sie po drzewie
      if(wezel.lewy !== null)
        wypisz(wezel.lewy, poziom.concat('0'))
      if(wezel.prawy !== null)
        wypisz(wezel.prawy, poziom.concat('1'))

      //wypisywanie
      if(wezel.znak !== null) {
        const para = document.createElement("tr");
        const node = document.createTextNode(wezel.znak + ' ' + wezel.ilosc + ' ' + poziom);
        para.appendChild(node);

        const element = document.getElementById("wynik");
        element.appendChild(para);
      }
    }

    //przykladowy tekst
    let tekst = "aaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh"

    function huffman() {
      document.getElementById("wynik").innerHTML = ""

      //rozbijam tekst na tablice, np "aabbc", daje ['a', 'a', 'b', 'b', 'c']
      const tablica = tekst.split('')

      // grupuje po literach, np "aabcccc" daje {
      //   a: [a, a],
      //   b: [b],
      //   c: [c, c, c, c]
      // }
      // a nastepnie zmieniam tablice z powtarzajacymi sie literami na jej rozmiar, czyli
      // a: 2,
      // b: 1,
      // c: 4
      const pogrupowane = _.mapValues(_.groupBy(tablica, el => el), el => el.length)


      // sortuje po ilosci powtorzen
      const posortowane = _.mapValues(_.invert(_.invert(pogrupowane)), x => parseInt(x))

      // tworze wezly z posortowanych danych i dodaje je do tablicy
      // w tej tablicy przechowuje wezly, ktore nie maja jeszcze rodzica
      let wezly = []
      _.forIn(posortowane, function (wartosc, klucz) {
        wezly.push(new Wezel(klucz, wartosc))
      })

      let korzen = null

      //budowanie drzewa
      while(! _.isEmpty(wezly)) {
        const wartosc = wezly[0].ilosc + wezly[1].ilosc
        const nowy = new Wezel(null, wartosc)
        nowy.lewy = wezly[0]
        nowy.prawy = wezly[1]

        //jezeli zostaly tylko dwa wezly, ustawiam korzen
        if(wezly.length === 2) {
          korzen = nowy
        }
        else {
          //dodaje nowy wezel o znaku null do tablicy z ktorej wybieram dwa najmniejsze wezly
          wezly.push(nowy)
          wezly = sortuj(wezly)
        }

        //usuwa dwa pierwsze elementy tablicy z wezlami
        wezly.splice(0, 2)
      }

      wypisz(korzen, '')
    }


    //funkcja wczytujaca plik
    function dropHandler(ev) {

      ev.preventDefault();

      if (ev.dataTransfer.items) {
        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
          if (ev.dataTransfer.items[i].kind === 'file') {
            const file = ev.dataTransfer.items[i].getAsFile();
            const reader = new FileReader()

            reader.onload = function(e) {
              tekst = e.target.result
              huffman()
            }
            reader.readAsText(file)
          }
        }
      } else {
        for (let i = 0; i < ev.dataTransfer.files.length; i++) {
          console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
        }
      }
    }

    function dragOverHandler(ev) {
      ev.preventDefault();
    }
</script>

</head>
<body>

  <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
    <p> Tutaj przeciagnac plik z danymi </p>
  </div>
  <button onclick="huffman()"> przyklad z wykladu </button>
  <div id="wynik"></div>

</body>
</html>