Hacked version of Harris's card_viewer

card_viewer.js

import { nextCard } from "./card_list.js";
import { previousCard } from "./card_list.js";
import { flipCard } from "./card_list.js";

// Variable that controls which side of the flashcard comes up first
//Default is Characters
var firstSide = "Characters";

const labels = [
  "English", "Pinyin", "Characters"
];

function nextSide(step) {
  let i = labels.indexOf(firstSide);
  i = (i + 3 + step) % 3;
  firstSide = labels[i];
}

setSide(firstSide);

/*
Setting up the functionality of the up arrow button
*/
const upArrow = document.getElementById("upArrow")

function handleUpClick() {
    console.log('Up arrow button clicked');
  nextSide(1);
  setSide(firstSide);
}

upArrow.addEventListener('click', function click() {
    handleUpClick();
});


/*
Setting up the functionality of the down arrow button
*/
const downArrow = document.getElementById("downArrow")

function handleDownClick() {
    console.log('Down arrow button clicked');
  nextSide(-1);
  setSide(firstSide);
}

downArrow.addEventListener('click', function click() {
    handleDownClick();
});


/*
Setting up the functionality of the previous card button
*/
const previousCardButton = document.getElementById("previousCardButton")

function handlePrevCardClick() {
    console.log('Previous card button clicked');
    previousCard();
  setSide(firstSide);
}

previousCardButton.addEventListener('click', function click() {
    handlePrevCardClick();
});


/*
Setting up the functionality of the next card button
*/
const nextCardButton = document.getElementById("nextCardButton")

function handleNextCardClick() {
    console.log('Next card button clicked');
    nextCard();
  setSide(firstSide);
}

nextCardButton.addEventListener('click', function click() {
    handleNextCardClick();
});


/*
Adding key press functionality to the program
*/
document.addEventListener('keydown', function (keyPress) {
    switch (keyPress.key) {
        case "ArrowUp":
            handleUpClick();
            break;
        case "ArrowDown":
            handleDownClick();
            break;
        case "ArrowLeft":
            handlePrevCardClick();
            break;
        case "ArrowRight":
            handleNextCardClick();
    }
});


function setSide(which) {
  const index = labels.indexOf(which);
  for(let i = 0; i < 3; i++) {
    const id = ["upTextType", "curTextType", "downTextType"][i];
    document.getElementById(id).innerHTML = labels[(i + index) % 3];
  }
  document.getElementById("cardText").innerHTML = flipCard(labels[(1 + index) % 3]);
}

/*
Putting redundant code bits that set the card values in their own functions
*/
function setSidePinyin() {
    //Setting button text
    document.getElementById("upTextType").innerHTML = "▲ English ▲";
    document.getElementById("curTextType").innerHTML = "Pinyin";
    document.getElementById("downTextType").innerHTML = "▼ Characters ▼";
    //Setting flashcard text
    document.getElementById("cardText").innerHTML = flipCard("Pinyin");
}

function setSideEnglish() {
    //Setting button text
    document.getElementById("upTextType").innerHTML = "▲ Characters ▲";
    document.getElementById("curTextType").innerHTML = "English";
    document.getElementById("downTextType").innerHTML = "▼ Pinyin ▼";
    //Setting flashcard text
    document.getElementById("cardText").innerHTML = flipCard("English");
}

function setSideCharacters() {
    //Setting button text
    document.getElementById("upTextType").innerHTML = "▲ Pinyin ▲";
    document.getElementById("curTextType").innerHTML = "Characters";
    document.getElementById("downTextType").innerHTML = "▼ English ▼";
    //Setting flashcard text
    document.getElementById("cardText").innerHTML = flipCard("Characters");
}

/*
Creating the new settings menu window
*/
const settingsPanel = document.getElementById('settingsPanel')
const screenDarken = document.getElementById('screenDarken')
const cardSettings = document.getElementById('cardSettingsButton')

cardSettings.addEventListener('click', function showCardSettings() {
    settingsPanel.style.opacity = 1;
    settingsPanel.style.pointerEvents = 'all';
    screenDarken.style.opacity = 0.8;
    screenDarken.style.pointerEvents = 'all';
});

const settingsSelect = document.getElementById('firstCardSideSelector')
const settingsApplyButton = document.getElementById("settingsApply")

settingsApplyButton.addEventListener('click', function handleSettingsApply() {
    console.log('Apply button clicked');
  firstSide = settingsSelect.value;
  setSide(firstSide);
    settingsPanel.style.opacity = 0;
    settingsPanel.style.pointerEvents = 'none';
    screenDarken.style.opacity = 0;
    screenDarken.style.pointerEvents = 'none';
});

const settingsCancelButton = document.getElementById("settingsCancel")

settingsCancelButton.addEventListener('click', function handleSettingsCancel() {
    console.log('Cancel button clicked');
  settingsSelect.value = firstSide;
    settingsPanel.style.opacity = 0;
    settingsPanel.style.pointerEvents = 'none';
    screenDarken.style.opacity = 0;
    screenDarken.style.pointerEvents = 'none';
});