JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<canvas id="myChart" width="290" height="250"></canvas>
<ol id="matchScores">
    <li id="redScore"></li>
    <li id="blueScore"></li>
    <li id="greenScore"></li>
</ol>

CSS

#matchScores {
    list-style: none;
}

#redScore {
    color: red;
}

#blueScore {
    color: blue;
}

#greenScore {
    color: green;
}

JavaScript

var currentMatch = {},
    currentMatchDetails = {},
    matches = [],
    rankedWorlds = [],
    worldNames = [],
    buildChart = function(){},
    findMatch = function(){},
    findWorld = function(){},
    rankWorlds = function(){};

buildChart = function(data) {
  var ctx = $("#myChart").get(0).getContext("2d");

  var redWorld = findWorld(currentMatch.red_world_id),
      blueWorld = findWorld(currentMatch.blue_world_id),
      greenWorld = findWorld(currentMatch.green_world_id);

  var data = [{
    value: currentMatchDetails.scores[0],
    color: "red"
  }, {
    value: currentMatchDetails.scores[1],
    color: "blue"
  }, {
    value: currentMatchDetails.scores[2],
    color: "green"
  }];

  var myNewChart = new Chart(ctx).Pie(data);

  $("#redScore").html(
    redWorld.name + ": " + currentMatchDetails.scores[0]
  );

  $("#blueScore").html(
    blueWorld.name + ": " + currentMatchDetails.scores[1]
  );

  $("#greenScore").html(
    greenWorld.name + ": " + currentMatchDetails.scores[2]
  );
};

findMatch = function() {
  var i, j,
      sorrowsFurnace = findWorld(1006);

  for (i = 0, j = matches.length; i < j; i += 1) {
    if (matches[i].red_world_id === sorrowsFurnace.id ||
        matches[i].blue_world_id === sorrowsFurnace.id ||
        matches[i].green_world_id === sorrowsFurnace.id)
    {
      currentMatch = matches[i];
      break;
    }
  }

  $.getJSON(
    'https://api.guildwars2.com/v1/wvw/match_details.json?match_id=' + currentMatch.wvw_match_id,
    function(json) {
      currentMatchDetails = json;
      buildChart();
    }
  );
};

findWorld = function(worldId) {
  var i, j, result;
  for (i = 0, j = worldNames.length; i < j; i += 1) {
    if (parseInt(worldNames[i].id, 10) === worldId) {
      result = worldNames[i];
      result.id = parseInt(result.id, 10);
      break;
    }
  }
  return result;
};

$.getScript(
  'https://raw.github.com/nnnick/Chart.js/master/Chart.js',
  function() {
    $.getJSON(
     ...