<repo_name>dnrahmath/algoritmaAer<file_sep>/module/imgCore.js
class imgClass {          //Class Model Memanggil seluruh function pada Class Car
    constructor() {

      this.dataArray;

    }






    //--- Start --- statusAwal() ---
    statusAwal(Q,W,R) {
        var elemKondisi = document.getElementById("kondisi");

        var varGelasA = Q;
        var varGelasB = W;
        var varGelasC = R;
        var varGelasD = R;
        var varGelasE = R;

        var dataStatus;
        
        
        //--- Start --- Options
        if (elemKondisi.value !== "satuGelas"){  

            document.getElementById("img").src = "./images/imgFrame/duaGelas/duaGelas-Frame0000.png";

            dataStatus = { 
                kondisGelas : elemKondisi.value,
                status : {
                    gelasA: varGelasA,
                    gelasB: varGelasB,
                    gelasD: varGelasD,
                    gelasE: varGelasE
                }
            };
    
        }
        else {

            document.getElementById("img").src = "./images/imgFrame/satuGelas/satuGelas-Frame0000.png";
            
            dataStatus = { 
                kondisGelas : elemKondisi.value,
                status : {
                    gelasA: varGelasA,
                    gelasB: varGelasB,
                    gelasC: varGelasC
                }
            };
    
        }

        var dataJsonStatus = JSON.stringify(dataStatus, null, 2);
        document.getElementById("statusJSON").innerHTML = dataJsonStatus;
        
    };
    //--- STOP --- statusAwal() ---






    //--- START --- statusUpdate() ---
    statusUpdate(bertambah) {
        var elemKondisi = document.getElementById("kondisi");

        var Point = [
            [0, 48, 90, 138], 
            [0, 70, 112, 166]
        ];

        var titikPoint = bertambah ;  //btnNext
        var titikPointSebelumnya = titikPoint - 1;  //sudah otomatis nanti terisi

        var frameAwal;
        var frameAkhir;
        var finish;
    
        switch (elemKondisi.value) {
    
            case "satuGelas":
              frameAwal = Point[0][titikPointSebelumnya];
              frameAkhir = Point[0][titikPoint]; //mendapatkan tempat berhenti
              finish = Point[0][3];
              break;
    
            case "duaGelas":
              frameAwal = Point[1][titikPointSebelumnya];
              frameAkhir = Point[1][titikPoint];
              finish = Point[1][3];
        }

        var dataPoinArray = [ 
                             frameAwal,frameAkhir,finish
                            ];

        var dataPoin = { 
                          "frameAwal" : frameAwal,
                          "frameAkhir" : frameAkhir,
                          "finish" : finish
                        };

        var dataPoinJson = JSON.stringify(dataPoin, null, 2);
        document.getElementById("outputJs").innerHTML = dataPoinJson;
        this.dataArray = dataPoinArray;

    };
    //--- STOP --- statusUpdate() ---






    //--- START --- frameBerjalan() ---
    frameBerjalan() {
        var elemKondisi = document.getElementById("kondisi");

        var titikAwal = this.dataArray[0];
        var titikAkhir = this.dataArray[1];
        var finishbar = this.dataArray[2];
        var interval;
        var i = titikAwal; //angkaFrame , value array didapatkan lalu disimpan di variabel
    
        function frameLooping() {
    
            interval = setTimeout(function() {

                
                if (i <= 9){
                    i = "000" + i ;
                }
    
                else if (i <= 99){
                    i = "00" + i ;
                }
    
                else if (i <= 999){
                    i = "0" + i ;
                }

                

                if (elemKondisi.value !== "satuGelas"){
                    document.getElementById("img").src = "./images/imgFrame/duaGelas/duaGelas-Frame"+i+".png";
                    //document.getElementById("img").src = ImgSrc_satuGelas[i];
                    document.getElementById("frameNumber").innerHTML = i;
                }
                else {
                    document.getElementById("img").src = "./images/imgFrame/satuGelas/satuGelas-Frame"+i+".png";
                    document.getElementById("frameNumber").innerHTML = i;
                }

                document.getElementById("persenId").value = i;
                document.getElementById("persenId").max = finishbar;
                var per = i / finishbar * 100;
                var sen = per.toString().substr(0,4);
                document.getElementById("persenTextId").innerHTML = sen + "%";
    
                i++;

                if (i <= titikAkhir) {
                    frameLooping();
                }
    
            }, 1000/6);  // 6 fps
    
        }
    
        frameLooping();

    };
    //--- STOP --- frameBerjalan() ---


};
  
export { imgClass };





<file_sep>/mainModule.js
import * as coreImg from "./module/imgCore.js";
import * as hotkeyPackage from "./module/hotkeys.min.js"; //dapat dipanggil langsung functionnya



//-START--ImgCore---------------------------------------------------------------------------------------------------------------

let core = new coreImg.imgClass();            //memanggil class 


var i = 0;     //untuk awal2 jangan terlalu mempermasalkan var, let, const soalnya ini berkaitan dengan Javascript ES6
window.onload = function () {
    document.getElementById('targetAccor').hidden = false;

    var txt = i.toString().bold();
    document.getElementById("tahapText").innerHTML = "Hasil dari Tahap ke  - " + txt + " : ";

    core.statusAwal("Air Kopi","Air Bening",null,null);
    core.statusUpdate();
};




document.getElementById("tahapText").onclick = function() {
    //accorFunc('targetAccor');
};

document.getElementById("btnAccor").onclick = function() {
    accorFunc('targetAccor');
};

//var bollean = false; // default  FAQ
var bollean;
function accorFunc(id) {
    var targetElemen = document.getElementById(id);
    if (bollean === true) {
      targetElemen.hidden = false;
      bollean = false; 
    } else { 
      targetElemen.hidden = true;
      bollean = true;
    }
};




document.getElementById("kondisi").onchange = function() {
    core.statusAwal("Air Kopi","Air Bening",null,null);  //terdapat perubahan data di internal functionnya
};




var elemKondisi = document.getElementById("kondisi");
document.getElementById("btnNext").onclick = function() {
    
    if (i <= 2) { //2 termasuk
        i = i + 1;
        core.statusUpdate(i); //disi berdasarkan angka yang terinput

        var txt = i.toString().bold();
        document.getElementById("tahapText").innerHTML = "Hasil dari Tahap ke  - " + txt + " : ";

        if (elemKondisi.value !== "satuGelas"){
            switch (i){
                case 1 : core.statusAwal(null,"Air Bening","&#0189; Air Kopi"); break;
                case 2 : core.statusAwal("Air Bening",null,"&#0189; Air Kopi"); break;
                case 3 : core.statusAwal("Air Bening","Air Kopi",null);
            }
        }
        else {
            switch (i){
                case 1 : core.statusAwal(null,"Air Bening","Air Kopi"); break;
                case 2 : core.statusAwal("Air Bening",null,"Air Kopi"); break;
                case 3 : core.statusAwal("Air Bening","Air Kopi",null);
            }
        }
        
    }
    
    else {
        location.reload(); 
    }


    core.frameBerjalan();

    
};

//-END--ImgCore---------------------------------------------------------------------------------------------------------------









//- START -- CallHotkey -----------------------------------

hotkeys('space', function(event,handler){

    accorFunc('targetAccor');
    console.log('Key yang ditekan :' , hotkeys.getPressedKeyCodes());  // , +

});

//- STOP -- CallHotkey -----------------------------------
<file_sep>/README.md
## Documents Web Application algoritmaAer
-------------------------------------------------------------------------------------------------

Studi Kasus : menukar posisi air tanpa mencampurnya.
<br>
Tujuan : 
- Posisi gelas tidak berubah.
- gelas A = air Bening.
- gelas B = air Kopi.
- air Bening tidak tercampur dengan air Kopi.

-------------------------------------------------------------------------------------------------

### Target yang ingin dicapai :

[ 1 ] Melihat Perubahan Data dari Tahap ke Tahap
<br>
<br>
[ 2 ] Structur App
<br>
_{-- Input type=module - Import - Export Class --}_
<br>
<br>
[ 3 ] Pemanggilan Function setelah Class dideklarasikan
<br>
_{-- new importName.className().functName(); --}_
<br>
<br>
[ 4 ] Manipulasi HTML DOM(Document Object Model) dengan Javascript
<br>
_{-- getElementById() --}_
<br>
<br>
[ 5 ] Pergerakan Data
<br>
_{-- constructor-variabel-Array-JSON --}_
<br>
<br>