script.js

// do not modify directly
var airplane = {
    altitude: 0,
    speed: 0,

    orientation: {
        pitch: 0,
        roll: 0,
        yaw: 0
    }

};


Math.clamp = (value, min, max) => {
    if (value < min) return min;
    if (value > max) return max;
    return value;
};

function map(x, in_min, in_max, out_min, out_max) {
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

function normalizeAngle(valueDeg) {
    valueDeg = (valueDeg < 0) ? 359 - valueDeg : valueDeg % 360;
    return Math.clamp(valueDeg, 0, 359);
}

function getGraphOffetY(stepY = 25, thX = 90, thX2 = 100, valueX = 0) {
    const segmentIndex = Math.trunc(valueX / thX2);
    let currentY = valueX % thX2;
    currentY = (currentY <= thX) ? thX : currentY;
    return stepY * segmentIndex + map(currentY, thX, thX2, 0, stepY);
}





function generateCompass() {

    compass.innerHTML = "";

    for (let i = 0; i < 360 / 5; i++) {
        const isBigMark = i % 2 == 0;
        const angle = i * 5;

        const mark = document.createElement("div");
        mark.classList.add(isBigMark ? "compassMark_big" : "compassMark_mini");
        mark.style.transform = `rotate(${angle}deg)`;

        if (isBigMark) {
            const isBigDigit = angle % 30 == 0;
            const valueDigit = i / 2;
            mark.innerHTML = `<div>${valueDigit}</div>`;
            mark.firstElementChild.classList.add(isBigDigit ? "compassDigit_big" : "compassDigit_mini");
        }

        compass.appendChild(mark);

    }

}




function generateArtificalHorizonLadder() {

    artificalHorizonLadderList.innerHTML = "";

    for (let i = 0; i < 2; i++) {

        for (let j = 0; j < 9; j++) {
            const value = (i == 0) ? 100 - (j + 1) * 10 : (j + 1) * 10;

            const artificialHorizonMarkBig = document.createElement("div");
            artificialHorizonMarkBig.classList.add("artificialHorizonMarkBig");
            artificialHorizonMarkBig.innerHTML = `<div class="artificialHorizonAngle">${value}</div>`;

            const artificialHorizonMarkMini = document.createElement("div");
            artificialHorizonMarkMini.classList.add("artificialHorizonMarkMini");

            const artificalHorizonMarkMedium = document.createElement("div");
            artificalHorizonMarkMedium.classList.add("artificalHorizonMarkMedium");

            if (i == 0) {
                artificalHorizonLadderList.appendChild(artificialHorizonMarkBig);
            }
            artificalHorizonLadderList.appendChild(artificialHorizonMarkMini.cloneNode());
            artificalHorizonLadderList.appendChild(artificalHorizonMarkMedium);
            artificalHorizonLadderList.appendChild(artificialHorizonMarkMini.cloneNode());
            if (i == 1) {
                artificalHorizonLadderList.appendChild(artificialHorizonMarkBig);
            }


        }

        if (i == 0) {
            const artificalHorizonMarkLine = document.createElement("div");
            artificalHorizonMarkLine.classList.add("artificalHorizonMarkLine");
            artificalHorizonLadderList.appendChild(artificalHorizonMarkLine);
        }

    }

}




function generateSpeedStrip() {

    speedWrapper.innerHTML = "";

    for (let i = 0; i < 1000 / 20; i++) {
        const speedMark_big = document.createElement("div");
        speedMark_big.classList.add("speedMark_big");
        speedMark_big.innerHTML = `<div class="speedDigit">${i * 20}</div>`;

        const speedMark_mini = document.createElement("div");
        speedMark_mini.classList.add("speedMark_mini");

        speedWrapper.appendChild(speedMark_big);
        speedWrapper.appendChild(speedMark_mini);

    }

    speedWrapper.lastElementChild.remove();

}




function generateAltitudeStrip() {
    altitudeWrapper.innerHTML = "";

    // NEGATIVE
    for (let i = 0; i < 2000 / 200; i++) {
        const altitudeVoidMark = document.createElement("div");
        altitudeVoidMark.classList.add("altitudeVoidMark");
        altitudeVoidMark.innerHTML = `<div class="altitudeDigit">${-2000 + i * 200}</div>`;


        const altitudeMark = document.createElement("div");
        altitudeMark.classList.add("altitudeMark");

        altitudeWrapper.appendChild(altitudeVoidMark);
        altitudeWrapper.appendChild(altitudeMark);
    }

    // POSITIVE
    for (let i = 0; i < 60000 / 200 + 1; i++) {
        const altitudeVoidMark = document.createElement("div");
        altitudeVoidMark.classList.add("altitudeVoidMark");
        altitudeVoidMark.innerHTML = `<div class="altitudeDigit">${i * 200}</div>`;


        const altitudeMark = document.createElement("div");
        altitudeMark.classList.add("altitudeMark");

        altitudeWrapper.appendChild(altitudeVoidMark);
        altitudeWrapper.appendChild(altitudeMark);
    }

    altitudeWrapper.lastElementChild.remove();

}




function updatePtichRoll() {
    artificalHorizonWrapper.style.transform = `rotate(${airplane.orientation.roll}deg) translateY(${map(airplane.orientation.pitch, -90, 90, -360, 360)}px)`;
    artificalHorizonLadderList.style.transform = `rotate(${airplane.orientation.roll}deg) translateY(${map(airplane.orientation.pitch, -90, 90, -360, 360)}px)`;
    rollIndicatorMark_centerMoveable.style.transform = `rotate(${Math.clamp(airplane.orientation.roll > 180 ? airplane.orientation.roll - 360 : airplane.orientation.roll, -50, 50)}deg)`;
}


function setPitch(valueDeg) {
    valueDeg = Math.clamp(valueDeg, -90, 90);
    airplane.orientation.pitch = valueDeg;
    updatePtichRoll();
}


function setRoll(valueDeg) {
    valueDeg = normalizeAngle(valueDeg);
    airplane.orientation.roll = valueDeg;
    updatePtichRoll();
}


function setYaw(valueDeg = 0) {
    valueDeg = normalizeAngle(valueDeg);
    airplane.orientation.yaw = valueDeg;
    compass.style.transform = `rotate(${360 - valueDeg}deg)`;
}


function setSpeed(value) {
    value = Math.clamp(value, 0, 980);
    airplane.speed = value;

    // INDICATOR
    speedIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[0].style.transform = `translateY(${getGraphOffetY(16, 95, 100, airplane.speed % (100 * 10))}px)`;
    speedIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[1].style.transform = `translateY(${getGraphOffetY(16, 8, 10, airplane.speed % 100)}px)`;
    speedIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[2].style.transform = `translateY(${getGraphOffetY(16, 0, 1, airplane.speed % 10) + 16}px)`;

    // STRIP
    speedWrapper.style.transform = `translateY(${map(value, 0, 980, 0, 2352)}px)`;
}


function setAltitude(value) {
    value = Math.clamp(value, -2000, 60000);
    airplane.altitude = value;

    const absoluteValue = Math.abs(airplane.altitude);
    // INDICATOR
    altitudeIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[0].style.transform = `translateY(${getGraphOffetY(16, 10000 - 5, 10000, absoluteValue % (10000 * 10))}px)`;
    altitudeIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[1].style.transform = `translateY(${getGraphOffetY(16, 1000 - 5, 1000, absoluteValue % (1000 * 10))}px)`;
    altitudeIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[2].style.transform = `translateY(${getGraphOffetY(16, 95, 100, absoluteValue % (100 * 10))}px)`;
    altitudeIndicatorContainer.querySelectorAll(".indicatorDigitMasked")[3].style.transform = `translateY(${getGraphOffetY(16, 0, 20, absoluteValue % 100) + 16}px)`;

    // STRIP
    if (value >= 0) {
        altitudeWrapper.style.transform = `translateY(${map(value, 0, 60000, 480, 14880)}px)`;
        return;
    }

    altitudeWrapper.style.transform = `translateY(${map(value, -2000, 0, 0, 480)}px)`;

}




// LOCALIZER
function setLocalizer(percent = 0) {
    percent = Math.clamp(percent, -100, 100);
    localizerContainer.querySelector(".glideLocalizerCurrent").style.transform = `translateX(${percent * 64 / 100}px)`;
}

function setLocalizerVisibility(state) {
    localizerContainer.style.visibility = state ? 'visible' : 'hidden';
}

function setLocalizerThumbVisibility(state) {
    if (state) {
        setLocalizerVisibility(true);
    }
    localizerContainer.querySelector(".glideLocalizerCurrent").style.visibility = state ? 'visible' : 'hidden';
}


// GLIDE SLOPE
function setGlideSlope(percent) {
    percent = Math.clamp(percent, -100, 100);
    glideSlopeContainer.querySelector(".glideLocalizerCurrent").style.transform = `translateY(${percent * 64 / 100}px)`;
}

function setGlideSlopeVisibility(state) {
    glideSlopeContainer.style.visibility = state ? 'visible' : 'hidden';
}

function setGlideSlopeThumbVisibility(state) {
    if (state) {
        setGlideSlopeVisibility(true);
    }
    glideSlopeContainer.querySelector(".glideLocalizerCurrent").style.visibility = state ? 'visible' : 'hidden';
}




// LEFT TEXT INDICATOR
function setIndicatorLeft(text = "") {
    upperIndicatorList.firstElementChild.innerHTML = text;
}

// RIGHT TEXT INDICATOR
function setIndicatorRight(text = "") {
    upperIndicatorList.lastElementChild.innerHTML = text;
}





// TOGGLE BACKLIGHT
function setBacklight(state) {
    isdf.classList.toggle("isdf_backlight", state);
}





// FAILURES
function setFailureAirspeed(state) {
    isdf.classList.toggle("airspeed_flag", state);
}
function setFailureLocalizer(state) {
    isdf.classList.toggle("localizer_flag", state);
}
function setFailureGlideSlope(state) {
    isdf.classList.toggle("glideslope_flag", state);
}
function setFailureAltitude(state) {
    isdf.classList.toggle("altitude_flag", state);
}
function setFailureAttitude(state) {
    isdf.classList.toggle("attitude_flag", state);
}
function setFailureHeading(state) {
    isdf.classList.toggle("heading_flag", state);
}



// MESSAGES: UPPER
function setMessageUpper(type = 0) {
    isdf.classList.remove("AttRst_message", "Att10_message", "AttWait_message");
    switch (type) {
        case 1:
            isdf.classList.add("AttRst_message");
            break;
        case 2:
            isdf.classList.add("Att10_message");
            break;
        case 3:
            isdf.classList.add("AttWait_message");
            break;

    }
}


// MESSAGE: LOWER (INIT)
function setMessageInit(state) {
    isdf.classList.toggle("AttInit90_messageBorder", state);
}







var keyController = {

    // ROLL
    ArrowLeft: {
        pressed: false,
        call: () => { setRoll(airplane.orientation.roll + 2); }
    },
    ArrowRight: {
        pressed: false,
        call: () => { setRoll(airplane.orientation.roll - 2); }
    },

    // PITCH
    ArrowUp: {
        pressed: false,
        call: () => { setPitch(airplane.orientation.pitch - Math.cos(airplane.orientation.roll * Math.PI / 180)); }
    },
    ArrowDown: {
        pressed: false,
        call: () => { setPitch(airplane.orientation.pitch + Math.cos(airplane.orientation.roll * Math.PI / 180)); }
    },

    // YAW
    q: {
        pressed: false,
        call: () => { setYaw(airplane.orientation.yaw - 1); }
    },
    e: {
        pressed: false,
        call: () => { setYaw(airplane.orientation.yaw + 1); }
    },

    // SPEED
    1: {
        pressed: false,
        call: () => { setSpeed(airplane.speed - 1); }
    },
    2: {
        pressed: false,
        call: () => { setSpeed(airplane.speed + 1); }
    },

    // ALTITUDE
    3: {
        pressed: false,
        call: () => { setAltitude(airplane.altitude - 1); }
    },
    4: {
        pressed: false,
        call: () => { setAltitude(airplane.altitude + 1); }
    },

};






onkeydown = onkeyup = onblur = (event) => {

    if (event.type == 'keydown' && !event.repeat) {
        if (event.key == ' ') {
            setBacklight();
        } else if (event.key == 'Enter') {
            isdf.classList.toggle("frame_hidden");
        }
    }

    if (keyController[event.key] != null) {
        keyController[event.key].pressed = event.type == 'keydown';
    }
};


function update() {
    Object.keys(keyController).forEach(key => keyController[key].pressed && keyController[key].call());
    requestAnimationFrame(update);
}



// Buttons
function onClickButtonAPP() { console.log("APP"); }
function onClickButtonHPIN() { console.log("HP/IN"); }
function onClickButtonRST() { console.log("RST"); }
function onClickButtonPlus() { console.log("Plus"); }
function onClickButtonMinus() { console.log("Minus"); }

// Knob
function onPushKnob() { console.log("click knob"); }
function onRotateKnob(event) { console.log("rotate knob", event.deltaY); }

onload = () => {
    generateAltitudeStrip();
    generateSpeedStrip();
    generateArtificalHorizonLadder();
    generateCompass();

    update();
};