Star Wars Top Trumps

index.html

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Kavoon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">

<div id="image" class="center-align container">
  <img class="responsive-image" src="http://vignette2.wikia.nocookie.net/logopedia/images/5/5b/Star-Wars-Logo_Silver.png/revision/latest?cb=20151106011636" />
  <h3>Top Trumps</h3>
</div>

<div class="wrapper">
  <div class="row">
    <div class="col s6 m4 offset-m1">
      <div class="card blue-grey darken-1">
        <div class="card-action">Player Card</div>
        <div id="player" class="card-content white-text">
        </div>
        
      </div>
    </div>
    <div id="buttons" class="col s2">
      <h6 class="center-align">Compare:</h6>
      <button id="cost" class="waves-effect waves-light btn">Cost</button>
      <button id="max" class="waves-effect waves-light btn">Max Atmos Spd</button>
      <button id="hyper" class="waves-effect waves-light btn">Hyperdrive Rtg</button>
      <button id="MGLT" class="waves-effect waves-light btn">MGLT</button>
    </div>
    <div class="col s6 m4">
      <div class="card blue-grey darken-1">
        <div class="card-action">Computer's Card</div>
        <div id="computer" class="card-content white-text hidden">
        </div>
      </div>
    </div>
  </div>
  <div id='result'></div>
  <div id="newBtn">
  <button id="newGame" class="waves-effect waves-light btn">New Game</button>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

script.js

// swapi.co - for all your Star Wars API needs

var playerURL, compURL, playShip, compShip;

function getURL() {
  var link = "http://swapi.co/api/starships/";
  var arr = [2, 3, 5, 9, 10, 11, 12, 13, 15, 21, 22, 23];
  var playRandom = Math.floor(Math.random() * 12);
  return link + arr[playRandom];
};

function checkDuplicate(p1, c1) {
  if (p1 === c1) {
    compURL = getURL;
    console.log("Switched");
  }
}

function newGame() {
  $('#computer').addClass('hidden');  
  $('#result').empty();
  
  playerURL = getURL();
  compURL = getURL();
  
  checkDuplicate(playerURL, compURL);

  $.when($.getJSON(playerURL, function(data) {

    }),
    $.getJSON(compURL, function(json) {

    })).then(function(player, computer) {
    playShip = player[0];
    compShip = computer[0];
    
    $('#buttons button').removeClass('disabled');

    $('#player').html(formatDisplay(playShip));
    $('#computer').html(formatDisplay(compShip));
    
    var pCost = getVari(playShip.cost_in_credits);
  var cCost = getVari(compShip.cost_in_credits);
  var pMax = getVari(playShip.max_atmosphering_speed);
  var cMax = getVari(compShip.max_atmosphering_speed);
  var pHyper = getVari(playShip.hyperdrive_rating);
  var cHyper = getVari(compShip.hyperdrive_rating);
  var pMGLT = getVari(playShip.MGLT);
  var cMGLT = getVari(compShip.MGLT);

  $('#cost').on('click', function() {
    compare(pCost, cCost);
  });
  $('#max').on('click', function() {
    compare(pMax, cMax);
  });
  $('#hyper').on('click', function() {
    compare(pHyper, cHyper);
  });
  $('#MGLT').on('click', function() {
    compare(pMGLT, cMGLT);
  });

  })
};

$(document).ready(function() {
  newGame();  
  $('#newGame').on('click', newGame);
});

function compare(p1, c1) {
  $('#computer').removeClass('hidden');
  if (p1 > c1) {
    $('#result').html("The force is with you (You win!)");
  } else if (c1 > p1) {
    $('#result').html("You will never defeat the dark side (You lose)");
  } else if (p1 === c1) {
    $('#result').html("Do, or do not, it is a tie");
  } else {
    $('#result').html("I've got a bad feeling about this (something went wrong...)");
  }
  $('#buttons button').addClass('disabled');
}

function getVari(category) {
  var returnVal;
  if (isNaN(parseInt(category))) {
    returnVal = 0;
  } else {
    returnVal = parseInt(category);
  }
  return returnVal;
}

function formatDisplay(name) {
  return "<span class='card-title'>" + name.name + "</span><p>Model: " + name.model + "</p><p>Cost: " + name.cost_in_credits + "</p><p>Max Atmos Spd: " + name.max_atmosphering_speed + "</p><p>Hyperdrive Rtg: " + name.hyperdrive_rating + "</p><p>MGLT: " + name.MGLT + "</p>";
};

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Star Wars Top Trumps.markdown

Star Wars Top Trumps

A Pen by db on CodePen.

License.

style.css

body {
  padding: 25px;
  background-color: black;
  background-size: 100% auto;
  color: #fff;
}

img {
  width: 35%;
  margin-bottom: 0;
}

h3 {
  font-family: 'Kavoon', cursive;
}

.card {
  height: 250px;
}

.row {
  margin: 25px auto;
}

.hidden {
  display: none;
}

.card-action {
  height: 25px;
}

#buttons button {
  display: block;
  text-align: center;
  margin: 10px auto;
}

#result {
  margin: 50px 0 auto;
  text-align: center;
  font-size: 2em;
  height: 50px;
  font-family: 'Bangers', cursive;
}

#newBtn {
  margin-top: 25px;
  text-align: center;
}