cardInfo.js

var VAROBJ = {
 cardswithHtml : [],
 suits : ['spades','diamonds', "clubs" , 'hearts'],
 values : ['A','2','3','4','5','6','7','8','9','10','J','Q','K'],
 prioritySeq : {'A':13,'2':1,'3':2,'4':3,'5':4,'6':5,'7':6,'8':7,'9':8,'10':9,'J':10,'Q':11,'K':12},
 cardSeq : ['ace', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'jack', 'queen', 'king'],
 trumpArr : ['2S', '2D', '2C', '2H', 'Joker'],
 cardIconsUnicodes : {
    'spades': ['🂡', '🂢', '🂣', '🂤', '🂥', '🂦', '🂧', '🂨', '🂩', '🂪', '🂫', '🂭', '🂮'],
    'diamonds' : [ '🃁', '🃂', '🃃', '🃄', '🃅', '🃆', '🃇', '🃈', '🃉', '🃊', '🃋', '🃍', '🃎'],
    'clubs' : [ '🃑', '🃒', '🃓', '🃔', '🃕', '🃖', '🃗', '🃘', '🃙', '🃚', '🃛',  '🃝', '🃞'],
    'hearts': [ '🂱', '🂲', '🂳', '🂴', '🂵', '🂶', '🂷', '🂸', '🂹', '🂺', '🂻', '🂽', '🂾']
 },
 spadesCollection : ['🂡', '🂢', '🂣', '🂤', '🂥', '🂦', '🂧', '🂨', '🂩', '🂪', '🂫', '🂭', '🂮'],
 heartsCollection : [ '🂱', '🂲', '🂳', '🂴', '🂵', '🂶', '🂷', '🂸', '🂹', '🂺', '🂻', '🂽', '🂾'],
 redJoker : [ '🂿'],
 diamondsCollection : [ '🃁', '🃂', '🃃', '🃄', '🃅', '🃆', '🃇', '🃈', '🃉', '🃊', '🃋', '🃍', '🃎'],
 blackJoker : [ '🃏'],
 clubsCollection : [ '🃑', '🃒', '🃓', '🃔', '🃕', '🃖', '🃗', '🃘', '🃙', '🃚', '🃛',  '🃝', '🃞'],
 whiteJoker : [ '🃟'],
 cardPoints : {
    'spades': [25,0,50,0,0,0,0,0,0,0,15,15,20],
    'diamonds': [25,0,0,0,0,0,0,0,0,0,15,15,20],
    'clubs': [25,0,0,0,0,0,0,0,0,0,15,15,20],
    'hearts': [25,0,0,0,0,0,0,0,0,0,15,15,20],
}
}
function variableScreen() {
   toggleVariablesPopup();
   populateVariablesPopup();
}
function toggleVariablesPopup() {
   let variablePopup = document.getElementById('variablesPopup');
   variablePopup.classList.toggle('show');
}
function populateVariablesPopup() {
   let variablePopup = document.getElementsByClassName('variableSettings')[0];
   //idea is to use a makeEditDiv funciotn which will iterate through VAROBJ and display a div having thos values, which can be editable on click.
   let valueDiv = makeEditDiv('values');

   appendAsChild(variablePopup, valueDiv);
}
function makeEditDiv(someName) {
   if (!VAROBJ[someName]) {
      return;
   }
   let content = VAROBJ[someName];
   if (Array().constructor.isArray(content)) {
      //its an array. directly make divs
      let contentDiv = makeArrayEditSpans(someName,content);
      return contentDiv;
   } else {
      //its an object where each child has an array for it.
      let contentDiv = document.createElement('div');
      for(elem of content) {
         let elemDiv = makeArrayEditSpans(elem);
         appendAsChild(contentDiv, elemDiv);
      }
      return contentDiv;
   }
}
function makeArrayEditSpans(arrayName,arrayElems) {
   let groupDiv = document.createElement('div');
   groupDiv.className = 'start_of ' + arrayName;
   let nameSpan = document.createElement('span');
   nameSpan.className = 'arrayName';
   nameSpan.textContent = arrayName;
   appendAsChild(groupDiv, nameSpan);

   for (elem of arrayElems) {
      let elemSpan = document.createElement('span');
      elemSpan.className = 'arrayElem';
      elemSpan.setAttribute('contenteditable', true);
      elemSpan.textContent = elem;
      appendAsChild(groupDiv,elemSpan);
   }
   return groupDiv;
}