!-- Header-->
Home Blog

Gänseblümchen Battle Cards

Gänseblümchen

What is Gänseblümchen? It is the super awesome role play battlecard game that I am creating live on Twitch! Wanna join my Gänseblümchen team?

Join Commander Candy!

Tuesdays, 12:00pm - 4:00pm EST

Thursdays, 12:00pm - 4:00pm EST

✶ Learn Complex Logic

✶ Help Develop a Web Browser Battlecard Game

✶ Learn Web Development

✶ Linux (Ubuntu) Open Source Creative Software

Cartoon #1 - Meet Paladin Hatnix

Cartoon #2 - Big Ohren!

Twitch: daisychaincosplay Live Coding!!!
Donate to Coding Commanders
battle card game code
1) Intro to Logic for Programmers: Propositional Logic + Set TheTheory

2) Full Stack Web Development:
  a) What is a Software Stack? (Cartoon)
  b) LAMP: Intro to Full Stack Web Development

3) JavaScript Basics:
  a) JavaScript: What is Asynchronous Programming?
    i) Written Lesson
    ii) YouTube Video

  b) JavaScript: What are Callbacks?
    i) Written Lesson
    ii) YouTube Video

  c) JavaScript: How do we define sets of data? (arrays + objects)

4) Learn HTML

5) Learn CSS

The software stack I will use in this project includes:

Operating System: Ubuntu (Linux/Debian)
Not using Ubuntu? Don't worry! These tutorials are about the logic and the code. I will use Atom text editor. If you are interested in learning Ubuntu I have tutorials for that!

Web Server Software: Undecided
Apache or ExpressJS? My viewers will decide!

Database:
PostgreSQL

Server-side Language: Undecided
NodeJS or PHP? My viewers will decide!

Client-side Language: Vanilla JavaScript
The front end of our project will be written in Vanilla JavaScript, HTML, and CSS. All vanilla baby!!!
Follow me on Twitter, because I am really funny...

When dudes ask me what I do for fun...

I made a cartoon about me getting killed by an elf && a penguin. pic.twitter.com/FQIgYlYL69

— Coding Commanders (@codingCommander) March 10, 2019

Willkommen zu "Kirche hat Nix"!

The main church in our game is named "Kirche hat Nix". In German that means "church has nothing". I named our church after the great Linux gaming streamer.

Welcome to "Church HatNix"!


Who is Hatnix?

He is Commander Candy's favorite game streamer. With his sly cunning and electrifying personality, Hatnix streams the best adventure, role play, and puzzle games!

Follow Paladin Hatnix:

Twitter
Twitch
YouTube

Card Constructor

Commander Candy has defined a "battle card" using a JavaScript Object constructor. If you are not familar with JavaScript objects, check out JavaScript Datatyes.
function Card (name,img,skillArray,alignment){
  this.name = name;
  this.img = "cards/" + img;
  this.skillArray = skillArray;
  this.alignment = alignment;
}
    
Now let's take a look at a card's properties.
// img:  the location of the card's associated image file.

// name: the name of the card

/* skillArray: an array of skill points
   [intelligence, stregth, dexterity, spirituality, brutaility, diplomacy]

   Each skill is given a score (1-20)*/

// alignment: (0) lawful, (1) unlawful
    

Card Points

Each card is given offensive points and defensive points. Some cards also provide healing. All card points are calculated using a card's skillArray. We are currently working on the functions. Take a look at what we have so far...

Offensive Points

function offensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[4] - skillArray[5];
  var intelligence = (skillArray[0] * .01) + 1;
  var spirit = (skillArray[3] * .015) + 1;
  var offensive = 1 + baseScore * intelligence * spirit;
  var adjust = offensive / 5;
  return adjust;
}
      

Defensive Points

function defensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[5];
  var intelligence = (skillArray[0] * .04) + 1;
  var spirit = (skillArray[3] * .05) + 1;
  var defense = baseScore * intelligence * spirit;
  var adjust = defense / 5;
  return adjust;
};
      

Healing Points

How many points per round will be added to each active card's defensive score.
function healing(skillArray) {
  var baseScore = skillArray[3] - skillArray[4];
  if (baseScore > 10) {
    var heal = baseScore / 5;
  }
  else {
    var heal = 0;
  }
  return heal;
};
      

Calculate Points

And to calculate our scores we used the following function:
function calculatePoints(deckArray,callback) {
  for (var i=0; i < deckArray.length; i++) {
    var card = deckArray[i];
    var skills = card.skillArray;
    var score = callback(skills);
    var roundDat = Math.round(score);
    var num = i + 1;
    console.log(num + " " + card.name + " " + roundDat);
  }
}
Learn more about: Callback Functions

Meet Our Battle Cards

Paladin Hatnix

Do not cross the great Paladin Hatnix. Kirche hat Nix has nothing, but power to bestow on him.
Paladin Hatnix - Battle Card Game
// paladin skill array
var paladinSkills = [20,5,15,18,5,10];

// Declare Hatnix <3
var hatnix = new Card ("Paladin Hatnix", "cards/paladin-hatnix.png", paladin, 0);
                

Priestess Jill

Although Priestess Jill is non-violent, Kirche hat Nix strengthens her healing and protection power.
Prestist Jill - Battle Card Game
// priest skill array
var priestSkills = [18,8,10,20,1,18];

// Declare Jill
var priestessJill = new Card ("Priestess Jill", "priestess-jill.png", priestSkills,0);
                

Sir Diealot

Despite his lack of spirituality, out of love for Paladin Hatnix, Sir Diealot serves as a church knight.
Sir Diealot - Battle Card Game
 // knight skill array
var knightSkills = [13,15,10,5,15,10];

// Declare Sir Diealot
var sirDiealot = new Card ("Sir Diealot","sir-diealot.png", knightSkills,0);
                

Verrucktes Huhn

Beware of the Verrucktes Huhn! She is a very powerful unlawful halfling wizard.
Verrucktes Huhnt - Battle Card Game
 // mage skill array
var mageSkills = [18,5,20,15,10,5];

// Declare Verrucktes Huhn
var verrucktesHuhn = new Card ("Verrucktes Huhn","cards/crazy-chicken.png", mageSkills,1);
                
The art is based on a photo shoot I had with MC Illusion Photography. Check out the Borderlands Psycho Shoot.

Bladex Dragon

Bladex Dragon is a fiercely unlawful dragon king. He is also Verrucktes Huhn's bestie!
Bladex Dragon - Battle Card Game
 // Dragon  Skill Array
var dragonSkills = [15, 18, 15, 5, 18, 10]; // 81

// Declare Bladex Dragon
var bladexDragon = new Card ("Bladex Dragon", "dragon-card.jpg", dragonSkills,1);
              
Follow Bladex on Twitch and Twitter

Doove Druid

Doove Druid's sixth sense is so intense, he doesn't need eyes or ears.
Doove Druid - Battle Card Game
// Druid Skill Array
var druidSkills = [15,10,10,20,1,15];

// Declare Doove Druid
var dooveDruid = new Card ("Doove Druid", "doove-druid.png",druidSkills,0);
        
Doove is a cool dude who makes python games. Follow him on Twitter and Twitch.

Ryan Rogue

The unlawful Ryan Rouge is also known to hang out with Verrucktes and Bladex.
Ryan Rouge - Battle Card Game
// Rouge Skills
  var rogueSkills = [12,5,18,5,20,10];

  // Declare Ryan
  var ryanRogue = new Card ("Ryan Rouge", "ryan-rogue.png",rogueSkills,1);
        
It has been a good while since Ryan lived the "has Nix" life. Catch him if you can!

Rogue Crowbar

Crowbar uses legal means to fight for what is rightgeous and just. Who decides what is right? Rogue Crowbar.
Rouge Crowbar - Battle Card Game
// Declare Crowbar
var rogueCrowbar = new Card("Rogue Crowbar", "rogue-crowbar.png",rogueSkills,0);
        
Wanna see the awesome game Crowbar is helping to create? Follow Creator Crate on Twitter and Twitch.

Mage Eva

Eva, is a lawful vampire. She uses her powerful magic to fight for what is fair and just.
Eva Mage - Battle Card Game
// Declare Eva
var EvaMage = new Card ("Eva Mage", "eva-mage.jpg", mageSkills,0);
        

Master Warrior

He is a master at the art of war who is not affraid to bend the rules or resort to brutality.
Master Warrior - Battle Card Game
var warriorSkills = [10,18,15,5,15,5];
var mastr50Warrior = new Card ("Master Warrior", "master-warrior.png", warriorSkills, 1);
        

Warrior John Smith

John Smith is a fearless warrior. Rules don't apply to him.
Warrior John Smith - Battle Card Game
// Declare John Smith
var johnWarrior = new Card ("John Smith Warrior", "john-smith.png",warriorSkills,1);
        

Afro Wolf

Afro Wolf is a kind beast with a mighty bite.
Afro Wolf - Battle Card Game
var wolfSkills = [8,15,10,10,5,2];
// Declare Afro Wolf
var afroWolf = new Card ("Afro Wolf", "afro-wolf.png",wolfSkills,0);
        

Shayna Madela

Shayna Madela is a beutifully powerful nature druid. She is friends with Verrucktes Huhn and Doove Druid.
 Shayna Madela - Battle Card Game
var shaynaMadela = new Card ("ShaynaMadela", "shaynaMadela.png",druidSkills,0);
        

Goston the Mad Cyber Rogue

Goston is a chaotic cyber rogue. Careful or he will steal your loot!
Goston the Mad Cyber Rogue - Battle Card Game
var goston = new Card ("Ryan Rouge", "goston-mad-cyber-rogue.png",rogueSkills,1);
        

Stregth Inside

Strength Inside is a friendly unicorn who helps defend and heal his comrades.
StregthInside Unicorn - Battle Card Game
var unicornSkills = [15, 5, 12, 18, 1, 15];
          var stregthInsideUnicorn = new Card ("Stregth Inside", "strength-inside-unicorn.png", unicornSkills,0);
        

Deck

We combine all our cards together to create our battle deck array!

      var deck = Array (stregthInsideUnicorn,valiantCheeseUnicorn,evaMage, johnWarrior, mastr50Warrior, bladexDragon, rogueCrowbar, ryanRogue, dooveDruid, verrucktesHuhn, afroWolf, jill, sirDiealot, hatnix, goston, shaynaMadela);
    

Live Code...

Below, you will find our current project code. Keep in mind this is a work in progress, the project just started, and the code is not complete. However, you will find many useful JavaScript functions and CSS classes in the code below.

cards.js

function Card (name,img,skillArray,alignment){
  this.name = name;
  this.img = "cards/" + img;
  this.skillArray = skillArray;
  this.alignment = alignment;
}

// skillArray is an array of skill points
// Intelligence, stregth, dex, spirituality, brutaility, diplomacy
// Alignment: (0) lawful, (1) unlawful

// Paladin
var paladinSkills = [20,5,15,18,5,10]; // 73
var hatnix = new Card ("Paladin Hatnix", "paladin-hatnix.png", paladinSkills, 0);

// Knight
var knightSkills = [13,15,10,5,15,10]; // 68
var sirDiealot = new Card ("Sir Diealot","sir-diealot.png", knightSkills,0);

// Priest
var priestSkills = [18,8,10,20,1,18]; // 65
var jill = new Card ("Priestess Jill", "priest-jill.png", priestSkills,0);

// wolf
var wolfSkills = [8,15,10,10,5,2]; // 50
var afroWolf = new Card ("Afro Wolf", "afro-wolf.png",wolfSkills,0);


// Mage
var halflingArray = [18,5,20,15,10,5]; // 73
var verrucktesHuhn = new Card ("Verrucktes Huhn","crazy-chicken.png", mageSkills,1);
var evaMage = new Card ("Eva Mage", "Eva-page.png", mageSkills,0);

// Druid
var druidSkills = [15,10,10,20,1,15]; // 71
var dooveDruid = new Card ("Doove Druid", "doove-druid.png",druidSkills,0);

// Rouge
var rogueSkills = [12,5,18,5,20,10]; // 70
var ryanRogue = new Card ("Ryan Rouge", "ryan-rogue.png",rogueSkills,1);
var rogueCrowbar = new Card("Rogue Crowbar", "rogue-crowbar.png",rogueSkills,0);

// Dragon
var dragonSkills = [15, 18, 15, 5, 18, 10]; // 81
var bladexDragon = new Card ("Bladex Dragon", "bladex-dragon.png", dragonSkills,1);

// Warrior
var warriorSkills = [10,18,15,5,15,5]; //68
var mastr50Warrior = new Card ("Mastr50 Warrior", "master-warrior.png", warriorSkills, 1);
var johnWarrior = new Card ("John Smith", "john-smith.png",warriorSkills,1);



// Unicorn
var unicornSkills = [15, 5, 12, 18, 1, 15]; //66
var valiantCheeseUnicorn = new Card("Valiant Cheese Corn","valiant-cheese.png", unicornSkills,0);
var stregthInsideUnicorn = new Card ("StregthInside Unicorn", "strength-inside-unicorn.png", unicornSkills,0);

// Mimic
var mimicSkills = [10,10,10,10,10,10]; // 60
var maskedMimic = new Card ("Masked Mimic", "masked-mimic.png", mimicSkills, 1);

var deck = Array (maskedMimic,stregthInsideUnicorn,valiantCheeseUnicorn,EvaMage, johnWarrior, mastr50Warrior, bladexDragon, rogueCrowbar, ryanRogue, dooveDruid, verrucktesHuhn, afroWolf, jill, sirDiealot, hatnix);

/* Calculate OP:
Strength(+), Brutality(+), diplomacy(-), Dex(+), spirit(?-Depends on Church */
function offensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[4] - skillArray[5];
  var intelligence = (skillArray[0] * .01) + 1;
  var spirit = (skillArray[3] * .015) + 1;
  var offensive = 1 + baseScore * intelligence * spirit;
  var adjust = offensive / 5;
  return adjust;
}

/* Calculate DP
   Stregth(+), Brutality(n), diplomacy(+), dex(+), spirit(+) */
/* Calculate Healing: Brutality(-),Spirituality(+)  */
function defensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[5];
  var intelligence = (skillArray[0] * .04) + 1;
  var spirit = (skillArray[3] * .05) + 1;
  var defense = baseScore * intelligence * spirit;
  var adjust = defense / 5;
  return adjust;
};

function healing(skillArray) {
  var baseScore = skillArray[3] - skillArray[4];
  if (baseScore > 10) {
    var heal = baseScore / 5;
  }
  else {
    var heal = 0;
  }
  return heal;
};

function calculatePoints(deckArray,callback) {
  for (var i=0; i<deckArray.length; i++) {
    var card = deckArray[i];
    var skills = card.skillArray;
    var score = callback(skills);
    var roundDat = Math.round(score);
    var num = i + 1;
    console.log(num + " " + card.name + " " + roundDat);
  }
}
/*
console.log("Offensive Scores");
calculatePoints(deck,offensiveScore);
console.log("Defensive Scores");
calculatePoints(deck,defensiveScore);
console.log("Healing");
calculatePoints(deck,healing);
*/

function cardScores(deckArray){
  for(var i = 0; i < deckArray.length; i++) {
    var card = deckArray[i];
    var cardSkill = deckArray[i].skillArray;
    var name = card.name;
    var toReturn = name;
    toReturn += " Offensive Score: ";
    var offense = offensiveScore(cardSkill);
    toReturn += offense;
    toReturn += " Defensive Score: ";
    var defense = defensiveScore(cardSkill);
    toReturn += " " + healing;
    console.log(toReturn);
  }
}

cardScores(deck);

    

js/hand.js

'use strict';

  // Generate a random integer between 1 and max
  function randNum(max){
    return Math.floor(Math.random() * Math.floor(max));
  };


  /* cardKeys(): generates an array of 6 random numbers between
                 1 and the number of cards in the deck

     deck:       Array of all the player's cards  */

  function cardKeys(deck) {
    var hand_indexes = Array(); // an array of indexes
    var max = deck.length;  // how many cards are in the deck
    while (hand_indexes.length < 6){
      var num = randNum(max);
      var exists = hand_indexes.includes(num);
      if (!exists) {
        hand_indexes.push(num);
      }
    }
    return hand_indexes;
  };


  /*    giveHand: Creates and array of cards

        keys:     An array of keys pointing to cards in
                  the deck
        deck:     Array of all the player's cards */

  function giveHand(keys,deck,removal) {
    var hand = Array();  // hand is an array
    for (var i = 0; i < keys.length; i++) {  // loop through card keys and add the corresponding card to the hand
      var key = keys[i];
      hand.push(deck[key]);
      var card = document.getElementById(key);
      card.parentNode.removeChild(card);
    }
    return hand;
  }


js/displayCards.js




  // Function to create the image id inside a for loop
  function makeID(i) {
    var num = i + 1;
    var myID = "image" + num;
    return myID;
  }

  function displayCards(hand) {
    for (var i = 0; i < hand.length; i++) {
      var thisID = makeID(i);
      var image = hand[i].img;
      var textAlt = hand[i].name + " Offensive Points: " + hand[i].offensive + " Defensive Points: " + hand[i].defensive + "  ";
      console.log(textAlt);
      document.getElementById(thisID).src = image;
      document.getElementById(thisID).alt = textAlt;
    }
  }

  document.addEventListener("click", displayCards);

js/selection.js

function clickCard(elmnt) {
  var count = watchSelection ();
  if (count >= 3) {
      document.getElementById("error").innerHTML = "Please note that you may only play 3 cards.  Choose wisely!";
      if (elmnt.className == "selectedCard") {
        toggleThis(elmnt);
      }
  }
  else {
    toggleThis(elmnt);
  }
}

function toggleThis(elmnt) {
  elmnt.classList.toggle("card");
  elmnt.classList.toggle("selectedCard");
}

function watchSelection (){
  var container = document.getElementById("player-hand");
  var inner = container.getElementsByClassName("selectedCard");
  var selectedCards = 0;
  for (var i=0; i<inner.length; i++) {
    selectedCards++;
  }
  return selectedCards;
}
document.addEventListener("click", clickCard);
document.addEventListener("click", watchSelection);
document.addEventListener("click", toggleThis);

css/style.css


  /* Element sizing includes padding and border*/
  * {
      box-sizing: border-box;
  }
  /* "row class"-->*/
  .row::after {
      content: "";
      clear: both;
      display: table;
  }
  /* Columns containing "col-"*/
  [class*="col-"] {
      float: left;
      padding: 15px;
  }
  /* Column size for small devices (phones)*/
  [class*="col-"] {
      width: 100%;
  }
  /* Column size for large devices (computers)*/
  @media only screen and (min-width: 768px) {
      /* For Large Devices*/
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  }
  /* Header Container*/
  .topContainer{
    width: 97%;
    margin-left: 1.5%;
    background-color: #050937;
    box-shadow: 4px 4px 2.5px black;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Page Heading*/
  .headline{
    display: inline-block;
    color: #FFECD8;
    float: right;
  }

  /* Nav link text color in paragraphs*/
  p a {
    color: red;
  }
  /* Page Body*/
  body {
    background-color: black;
    color: #02052A;
    font-family: helvetica, arial, sans-serif;
    font-size: 16px;
  }
  /* Header Image*/
  img.topImage {
    max-width: 150px;
    float: left;
  }

  /* Bordered Container*/
  div.bordered {
    font-size: 18px;
    color: #39FF11;
    background-color: black;
    border-style: solid;
    border-color: #09326B;
    border-width: 4px;
    padding: 10px;
    margin: 50px;
    width: 90%;
  }

  .card {
    color: black;
    font-size: 14px;
    font-weight: bold;
    border-color: black;
    border-width: 1px;
    border-style: groove;
  }

  .card img{
    width: 150px;
    border-radius: 9px;
  }

  .selectedCard img {
    width: 200px;
    border-style: solid;
    border-color: blue;
    border-width: 4px;
    border-radius: 9px;
  }

  /** Wood Texture Image: https://pixabay.com/photos/background-old-dirty-wood-texture-1588600/ **/
  .handContainer {
    background-size:cover;
    width: 90%;
    margin: 10px;
    padding: 10px;
    background-image: url("../media/pictures/woody.jpg");
    background-color: tan;
    background-repeat: no-repeat;
    border-radius: 9px;
  }

  .error {
    color: red;
  }

  .battleForm input {
    background-color: #0A0101;
    color: #5BF21D;
  }

  button {
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin: 5px;
    font-size: 30px;
    border-radius: 6px;
  }

  button:hover {
    background-color: lightgreen;
    color: black;
  }

  a.about {
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin: 10px;
    font-size: 30px;
    border-radius: 6px;
  }

  a.about:hover {
    background-color: lightgreen;
    color: black;
  }

  .menu {
    overflow: hidden;
    border-radius: 9px;
  }
  /* Navigation links in "topMenu" container*/
  .menu a {
    background-color: #110000;
    float: left;
    display: block;
    color: #E7F0D8;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  /* Navigation links in "topMenu" container: On mouse hover*/
  .menu a:hover {
    background-color: blue;
    color: lightyellow;
  }

index.html


  <!DOCTYPE html>
  <html lang="en-us">
  <meta charset="UTF-8">
  <head>
    <!-- Meta Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Font Awesome Stylesheet: Social Media (and other) icons: http://fontawesome.io/ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Page Title-->
    <title>ccBattleCard</title>
  </head>
  <body>
    <script type="text/javascript" src="js/deck.js"></script>
    <script type="text/javascript" src="js/hand.js"></script>
    <script type="text/javascript" src="js/selection.js"></script>
    <script type="text/javascript" src="js/displayCards.js"></script>
    <script type="text/javascript" src="js/expand.js"></script>

      <!-- Top Menu-->
      <div class = "menu">
        <a  href = "https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ" class= "fa fa-youtube"> YouTube</a>
        <a href= "https://www.facebook.com/codingcommanders/" class= "fa fa-facebook"> Facebook</a>
        <a href= "https://www.instagram.com/codingcommanders" class= "fa fa-instagram"> Instagram</a>
        <a href= "https://twitter.com/codingCommander" class= "fa fa-twitter"> Twitter</a>
      </div>
    <br><br>
    <!-- Game Instructions -->
    <div class="row">
      <br>
      <div class="bordered">
        <div align="center">
        <a class="about" href=https://www.codingcommanders.com/battlecards/>About this Project</a>
      </div><br>Welcome to ccBattleCards, the super awesomwe competitive battle card game!<br><br>
      You will recieve 3 action points per round.  Each AP allows you to play a card.
    Played cards will automatically be replaced by new cards in the deck.  Destroy
  all your oppoinent's defense before he destroys you!</div>
    </div>
    <!--- Computer's Territory------------------------>
    <!-- Row 1-->
    <div class = "row" align="center">
      <!-- Hand Face Down (6 cards) plus Face Down Deck (Full Deck === 100 cards)-->
      <div class="row">
  <div class="handContainer">
    <div class="computer-hand" align="center">
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
    </div>
  </div>
      </div>
      <div class="row" align="center">
         <button onclick="displayCards(myHand)">DEAL</button>
      </div>
    <!--- Player's Territory------------------------>
    <div class2= "row"  align="center">
      <div class="row">
        <div class="handContainer" align="center" id="player-hand">
          <div id="error" class="error"></div>
          <div align="center" class="hand">
            <span onclick="clickCard(this)" class="card"><img id="image1" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image2" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image3" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image4" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image5" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image6" src="media/cards/cardBack2.jpg"/></span>
          </div>
      </div>
      </div>
    </div>
    <!--- Deck Data -->
    <form class="battleForm" id="battleForm" align="center">
      <input id="0" type="text" name="0" value="Tommy Troll" readonly>
      <input id="1" type="text" name="1" value="Ula Unicorn" readonly>
      <input id="2" type="text" name="1" value="Ula Unicorn" readonly>
      <input id="3" type="text" name="2" value="Priest Attendis" readonly>
      <input id="4" type="text" name="3" value="Whaling Wolf" readonly>
      <input id="5" type="text" name="4" value="Nagging Knight" readonly>
      <input id="6" type="text" name="5" value="Ratman Rouge" readonly>
      <input id="7" type="text" name="6" value="Paladin Hatnix" readonly>
      <input id="8" type="text" name="7" value="Chaotic Candy" readonly>
      <input id="9" type="text" name="8" value="Speed Cyclist" readonly>
      <input id="10" type="text" name="9" value="Nature Druid" readonly>
      <input id="11" type="text" name="10" value="Masked Mimic" readonly>
      <input id="12" type="text" name="11" value="Faerie Ninja" readonly>
      <input id="13" type="text" name="12" value="Village Warrior" readonly>
      <input id="14" type="text" name="13" value="Eva Mage" readonly>
      <input id="15" type="text" name="14" value="Dragon King" readonly>
    </form>
    <script>
      var deck = getDeck();
      console.log(deck);
      var randomKeys = cardKeys(deck);
      var myHand = giveHand(randomKeys,deck);
          /*var myDeck = deck;
          var myKeys = cardKeys(myDeck);
          var myHand = giveHand(myKeys,myDeck);
          var myDeck = updateDeck(myKeys,myDeck);*/
    </script>
   </body>
  </html>

It should liike like this: GUI so far