//************************
// JavaScript ES 6:
//************************

//--------------------------------------------------------------------------------------------
// Class Card UI [from DHTML String literals]:
//--------------------------------------------------------------------------------------------

cardArticle_DOM.insertAdjacentHTML('BeforeEnd', `
<div class="radioDiv" id="div${class1stUpper_S}${ttt_totalClassCards_i_g}">
  <input type="radio" name="classRadio" id="radio${class1stUpper_S}${ttt_totalClassCards_i_g}" class="radio0" />
  <label for="radio${class1stUpper_S}${ttt_totalClassCards_i_g}" class="radioLabel"> Set ${class1stUpper_S} character class.
    <div class="zIndex-999 radio0unchecked_display-inline"></div>
  </label>
  <a href="/#${class_S_}" class="maxW-350px_maxH-745px aLink">

    <div class="portraitDiv">
      <article id="portrait${class1stUpper_S}" class="portraitScale portraitScaleUp">
        
        <div class="divMenu cardFogFx classFrameExtrasOn"></div>
        <div class="divMenu w-302px_h-702px_opac-0x5 classBg"></div>
        <div class="hashBg opac-1"></div>
        <div class="divMenu w-302px_h-702px_opac-0x5 classBg"></div>
        <div class="divMenu trans-all-0x4_opac-0x5 opac-1 classNamePlate"></div>
        <div class="divMenu trans-all-0x4_opac-0x5 classFrameOn"></div>
        <div class="divMenu trans-0x4s_opac-0 clip_opac-0x5 classFrameOn"></div>
        <div class="divMenu trans-0x4s_opac-0 radio0checked_fadeSlide-1s-easeOut-1_opac-0x7 greeble-tr"></div>

        <div class="divPortrait${class1stUpper_S}">
          <div class="portraitAll divMenu portrait0 opac-1 portrait${class1stUpper_S}"></div>
          <div class="portraitAll divMenu colorDodge_scale-0x93_trans-opac-0x2s-scale0x4s_opac-0 radio0checked__glowAnim_1s portrait${class1stUpper_S}"></div>
          <div class="portraitAll divMenu color__scale_0x93__opac_0 opac-1 portrait${class1stUpper_S}"></div>
          <div class="portraitAll divMenu screen_trans-0x4s_scale-0x93_opac-0 radio0checked__glowAnim_1s portrait${class1stUpper_S}"></div>
        </div>

        <div class="classFontDiv top16px">
          <h2 class="classFontTitle opac-0x75">${classTitle_S}</h2>
        </div>

        <div class="classFontDiv top19px">
          <h3 class="classFontItem top618px">${item1_S_}</h3>
        </div>
        <div class="classFontDiv top16px">
          <h3 class="classFontItem top660px">${item2_S_}</h3>
        </div>

        <div class="excerptDiv">
          <div class="excerptFont opac-0x75">${excerpt_S_}
        </div>

        </div>
      </article>
    </div>

  </a>
</div>
`); // END cardArticle_DOM.insertAdjacentHTML.

//************************
// JavaScript ES 6:
//************************

//--------------------------------------------------------------------------------------------
// ttt_doCard_fn [create custom class cards with function calls]:
//--------------------------------------------------------------------------------------------

// NOTE: only ttt_doCard_fn function code parsed (NO comments or anything else).
// Media must be `adventurer`, `expatriate`, `explorer`, `soldier`, `stowaway` or it defaults to `stowaway`. 
// Use back tics '`' instead to capture quotes & literals.
// Use a blank space ` ` to avoid setting defaults.

// Debug test:
//ttt_doCard_fn();
//ttt_doCard_fn('');
//ttt_doCard_fn(`className`, `item1`, `item2`, `excerpt`, `media`);

// Base class cards:
ttt_doCard_fn(`adventurer`, `great axe`,        `reed blowgun`,      `Now having a night, a day, and still another night following before me in New Bedford, ere I could embark for my destined port, it became a matter of concernment where I was to eat and sleep meanwhile.`);
ttt_doCard_fn(`expatriate`, `dual pistols`,     `worn whip`,         `Tex was bound and half-dragged and half-carried down the slope to the bottom of the valley. Bringing his horse down was a hard proposition for him to bear.`);
ttt_doCard_fn(`explorer`,   `heirloom rapier`,  `cracked compass`,   `He was a very silent man by custom. All day he hung round the cove or upon the cliffs with a brass telescope; all evening he sat in a corner dreaming of riches and fame.`);

ttt_doCard_fn(`soldier`,    `sterling rifle`,   `health potion`,     `You are off to the war, Prince?" said Anna Pavlovna. "General Kutuzov," said Bolkonski, speaking French and stressing the last syllable of each battlefield. `);
ttt_doCard_fn(`stowaway`,   `rusty longsword`,  `alley dice`,        `Then she sprang away and ran around and around the desks and benches, with Tom after her, and took refuge in a corner at last, with her little friend besides her and ready to fight.`);

// Blank Spacer div:
ttt_doCard_fn();

// Custom cards:
ttt_doCard_fn(`wizard`,        `spellbook`,   `mystical ring`, `Not the wandering wizard that gave Old Took a pair of magic diamond studs that fastened themselves and never came undone till ordered? Not the fellow who used to tell such wonderful tales at parties, about dragons and goblins and giants and the rescue of princesses and the unexpected luck of widows' sons?`, `soldier`);
ttt_doCard_fn(`fur trapper`,   `bear trap`,   `coonskin hood`, `Gotta catch 'em all!`,  `adventurer`);
ttt_doCard_fn(`thief`,         `blackjack`,   `lock picks`,    `Steals, literally.`,    `stowaway`);

ttt_doCard_fn(`bard`,          `guitar`,      `flute`,         `Musics man.`,           `expatriate`);
ttt_doCard_fn(`assassin`,      `frog poison`, `hidden dagger`, `Backstabber!`,          `explorer`);