Skip to content

Commit

Permalink
Map with kills, deaths, and assists! Need to implement filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@hcaseyal
hcaseyal committed Nov 23, 2017
1 parent 2b037dd commit 0f42ca7
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 74 deletions.
Binary file modified img/map.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="index.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
Expand All @@ -13,6 +13,7 @@
<div class="filters"></div>
<div class="vis-area">
<div class="summmoner-name-display"></div>
<div id="map"></div>
</div>
<div class="analysis-area"></div>
</body>
Expand Down
78 changes: 53 additions & 25 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
var mapWidth = 750;
var mapHeight = 750;
var analysisArea = d3.select('.analysis-area');
var visArea = d3.select('.vis-area');
var mapWidth = 512,
mapHeight = 512,
bg = "img/map.png",
analysisArea = d3.select('.analysis-area');
visArea = d3.select('.vis-area');

// Node server url
var baseURL = "http://localhost:8081/";

// Add an SVG element to the DOM
var svg = d3.select('body').select('.vis-area')
.append('svg')
.attr('width', mapWidth)
.attr('height', mapHeight);
var svg = d3.select("#map").append("svg:svg")
.attr("width", mapWidth)
.attr("height", mapHeight);

// Add SVG map at correct size, assuming map is saved in a subdirectory called `data`
svg.append('image')
.attr('width', mapWidth)
.attr('height', mapHeight)
.attr('xlink:href', 'img/map.png');
svg.append('image')
.attr('xlink:href', bg)
.attr('x', '0')
.attr('y', '0')
.attr('width', mapWidth)
.attr('height', mapHeight);

function searchSummoner() {
var summoner = d3.select('.summoner-name').node().value;
visArea.text(summoner);
searchForSummoner(summoner);
getAllMatchData(summoner);
}
Expand All @@ -31,10 +30,8 @@ function getAllMatchData(summoner) {
xhttp.open("GET", url);
xhttp.onload = () => {
var data = JSON.parse(xhttp.responseText);
//renderMapKda(receiveKdaData(data));
renderMapKda(data);
//displayAnalysis(data);
console.log(xhttp.responseText);
analysisArea.text(xhttp.responseText);
}
xhttp.onerror = () => analysisArea.text("Couldn't retrieve match data. " + xhttp.statusText);
xhttp.send();
Expand All @@ -57,24 +54,55 @@ function displaySummonerInfo(data) {
d3.select('.summoner-name-display').text(data.name);
}

function renderMapKda(kda) {
function renderMapKda(data) {
// Domain for the current Summoner's Rift on the in-game mini-map
let domain = {
min: {x: -120, y: -120},
max: {x: 14870, y: 14980}
},
xScale, yScale, color;

color = d3.scale.linear()
.domain([0, 3])
.range(["white", "steelblue"])
.interpolate(d3.interpolateLab);

xScale = d3.scale.linear()
.domain([domain.min.x, domain.max.x])
.range([0, mapWidth]);

yScale = d3.scale.linear()
.domain([domain.min.y, domain.max.y])
.range([mapHeight, 0]);

var kills = svg.selectAll('.kills')
.data(kda.kills, d => d.id)
.data(data.kills, d => d.id)
.enter()
.append('circle')
.append('svg:circle')
.attr('cx', function(d) { return xScale(d.position.x) })
.attr('cy', function(d) { return yScale(d.position.y) })
.attr('r', 5)
.attr('class', 'kills');

var circles = svg.selectAll('.deaths')
.data(kda.deaths, d => d.id)
.data(data.deaths, d => d.id)
.enter()
.append('circle')
.append('svg:circle')
.attr('cx', function(d) { return xScale(d.position.x) })
.attr('cy', function(d) { return yScale(d.position.y) })
.attr('r', 5)
.attr('class', 'deaths');

var circles = svg.selectAll('.assists')
.data(kda.assists, d => d.id)
.data(data.assists, d => d.id)
.enter()
.append('circle')
.append('svg:circle')
.attr('cx', function(d) { return xScale(d.position.x) })
.attr('cy', function(d) { return yScale(d.position.y) })
.attr('r', 5)
.attr('class', 'assists');

console.log("Rendered map");
}

function displayAnalysis(data) {
Expand Down
95 changes: 47 additions & 48 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
// https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/RiotSchmick?api_key=RGAPI-0c3f4dea-5a44-40ce-b29d-88e00f218389
// Requests the summoner object for RiotSchmick

var http = require('http');
let http = require('http');
const axios = require('axios');
var express = require('express');
var app = express();
var fs = require('fs');
let express = require('express');
let app = express();
let fs = require('fs');

const port = 8081;
var baseURL = 'https://na1.api.riotgames.com/lol/';
var apiKey = 'RGAPI-9cbea39f-3dc0-426a-ac10-ba2c02eb2fdb';
let baseURL = 'https://na1.api.riotgames.com/lol/';
let apiKey = 'RGAPI-9cbea39f-3dc0-426a-ac10-ba2c02eb2fdb';

app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
Expand All @@ -26,12 +26,12 @@ app.use(function (req, res, next) {
});

app.get('/summoner', function (req, res) {
var name = req.param("name");
let name = req.param("name");
getSummonerInfo(req, res, name);
});

app.get('/all-match-data', function (req, res) {
var id = req.param("name");
let id = req.param("name");
getAllMatchData(req, res, id);
});

Expand All @@ -44,9 +44,9 @@ app.listen(port, function () {
});

function onMatchlistFileContent(filename, content, requestContext, gameIdCache) {
var matches = JSON.parse(content);
var numSoFar = 0;
for (var i = 0; i < matches.length; i++) {
let matches = JSON.parse(content);
let numSoFar = 0;
for (let i = 0; i < matches.length; i++) {
let gameId = matches[i].gameId;

if (!gameIdCache[gameId]) {
Expand Down Expand Up @@ -110,8 +110,8 @@ function readMatchDetailsFile(matchId, onFileContent, onError) {
}

function prefetchTimelinesAndDetailsData() {
var requestContext = {requestId: 0};
var gameIdCache = {};
let requestContext = {requestId: 0};
let gameIdCache = {};
readFiles("./matchlist_data/", function(filename, content) {
onMatchlistFileContent(filename, content, requestContext, gameIdCache)
},
Expand All @@ -136,7 +136,7 @@ function readFiles(dirname, onFileContent, onError) {
});
}
function prefetchFavoritesMatchData() {
var summonerList =
let summonerList =
["Trick2g", "Hikashikun", "Sirhcez", "Amrasarfeiniel",
"FlowerKitten", "Reignover", "Meteos", "Voyboy", "Doublelift", "Bjergsen",
"Svenskeren", "HotGuySixPack", "Xmithie", "ILovePotatoChips", "xNaotox"];
Expand All @@ -145,7 +145,7 @@ function prefetchFavoritesMatchData() {
}

function prefetchMatchListData(summonerNames) {
var requestContext = {requestId: 0};
let requestContext = {requestId: 0};
for (let i = 0; i < summonerNames.length; i++) {
let name = summonerNames[i];
setTimeout(() => {
Expand Down Expand Up @@ -181,7 +181,7 @@ function fetchAndWriteMatchList(info, name, requestContext) {
}

function fetchAndWriteTimelineAndMatchDetails(gameId) {
var timelineUrl = `${baseURL}match/v3/timelines/by-match/${gameId}?api_key=${apiKey}`;
let timelineUrl = `${baseURL}match/v3/timelines/by-match/${gameId}?api_key=${apiKey}`;
axios.get(timelineUrl)
.then(response => {
let filename = timelineFilename(gameId);
Expand All @@ -195,7 +195,7 @@ function fetchAndWriteTimelineAndMatchDetails(gameId) {
});
});

var matchDetailsUrl = `${baseURL}match/v3/matches/${gameId}?api_key=${apiKey}`;
let matchDetailsUrl = `${baseURL}match/v3/matches/${gameId}?api_key=${apiKey}`;

axios.get(matchDetailsUrl)
.then(response => {
Expand All @@ -213,13 +213,13 @@ function fetchAndWriteTimelineAndMatchDetails(gameId) {

function prefetchMasterLeagueMatchListData() {
fetchMasterLeague().then((master) => {
var names = master.entries.map(entry => entry.playerOrTeamName);
let names = master.entries.map(entry => entry.playerOrTeamName);
prefetchMatchListData(names);
});
}

function fetchMasterLeague() {
var url = `${baseURL}league/v3/masterleagues/by-queue/RANKED_SOLO_5x5?api_key=${apiKey}`;
let url = `${baseURL}league/v3/masterleagues/by-queue/RANKED_SOLO_5x5?api_key=${apiKey}`;
return axios.get(url)
.then(response => {
return response.data;
Expand All @@ -231,7 +231,7 @@ function fetchMasterLeague() {

function fetchSummonerInfo(name) {
console.log("Fetching summoner info for " + name);
var url = encodeURI(`${baseURL}summoner/v3/summoners/by-name/${name}?api_key=${apiKey}`);
let url = encodeURI(`${baseURL}summoner/v3/summoners/by-name/${name}?api_key=${apiKey}`);
return axios.get(url)
.then(response => {
return response.data;
Expand All @@ -243,7 +243,7 @@ function fetchSummonerInfo(name) {

function fetchMatchlist(accountId, name, beginIndex, resolve) {
console.log("Fetching match list for " + name);
var url = `${baseURL}match/v3/matchlists/by-account/${accountId}?api_key=${apiKey}&beginIndex=${beginIndex}`;
let url = `${baseURL}match/v3/matchlists/by-account/${accountId}?api_key=${apiKey}&beginIndex=${beginIndex}`;

axios.get(url)
.then(response => {
Expand All @@ -259,15 +259,15 @@ function getSummonerInfo(req, res, name) {
}

function getAllMatchData(req, res, name) {
var retObj = {};
let retObj = {};

fetchSummonerInfo(name)
.then(data => { // get summoner info
retObj.summoner = data;
return data;
})
.then(summonerInfo => { // get matchlist
var accountId = summonerInfo.accountId;
let accountId = summonerInfo.accountId;
return new Promise((resolve, reject) => {
readMatchlistFile(accountId, name, (filename, content) => {
retObj.matchlist = JSON.parse(content);
Expand Down Expand Up @@ -340,18 +340,18 @@ function getAllMatchData(req, res, name) {
}

function parseAllMatchesData(summonerInfo, data) {
var timelines = data.timelines;
var details = data.details;
var kills = [];
var deaths = [];
var assists = [];
var matchDetailsPerGame = {};

var eventId = 0;
for (var matchId in timelines) {
var matchTimeline = timelines[matchId];
var matchDetails = details[matchId];
var matchDetailsToSend = {};
let timelines = data.timelines;
let details = data.details;
let kills = [];
let deaths = [];
let assists = [];
let matchDetailsPerGame = {};

let eventId = 0;
for (let matchId in timelines) {
let matchTimeline = timelines[matchId];
let matchDetails = details[matchId];
let matchDetailsToSend = {};

// Check for empty objects. Sometimes, match timelines or details are
// not available from Riot for some reason.
Expand All @@ -360,14 +360,14 @@ function parseAllMatchesData(summonerInfo, data) {
!isRecentSeason(matchDetails.seasonId)) {
continue;
}
var summonersToParticipants = getSummonersToParticipantsMapping(matchDetails);
var participantId = summonersToParticipants[summonerInfo.accountId];
let summonersToParticipants = getSummonersToParticipantsMapping(matchDetails);
let participantId = summonersToParticipants[summonerInfo.accountId];

// Compile kills, deaths, and assists
for (var j in matchTimeline.frames) {
var frame = matchTimeline.frames[j];
for (var eventIndex in frame.events) {
var event = frame.events[eventIndex];
for (let j in matchTimeline.frames) {
let frame = matchTimeline.frames[j];
for (let eventIndex in frame.events) {
let event = frame.events[eventIndex];

// Attach event metadata
event.id = eventId;
Expand Down Expand Up @@ -405,8 +405,8 @@ function isRedSide(participantId) {
}

function isWin(matchDetails, participantId) {
for (var i in matchDetails.participants) {
var participant = matchDetails.participants[i];
for (let i in matchDetails.participants) {
let participant = matchDetails.participants[i];
if (participant.participantId === participantId) {
return participant.stats.win;
}
Expand All @@ -431,12 +431,11 @@ function isAssist(event, participantId) {
}

function getSummonersToParticipantsMapping(matchDetails){
var mapping = {};
var identities = matchDetails.participantIdentities;
for (var i in identities) {
var participant = identities[i];
let mapping = {};
let identities = matchDetails.participantIdentities;
for (let i in identities) {
let participant = identities[i];
mapping[participant.player.accountId] = participant.participantId;
}
console.log(mapping);
return mapping;
}

0 comments on commit 0f42ca7

Please sign in to comment.