Skip to content

Commit

Permalink
Tables aligned
Browse files Browse the repository at this point in the history
  • Loading branch information
@hcaseyal
hcaseyal committed Dec 2, 2017
1 parent 6cd1b79 commit 82e1f7e
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 55 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
Binary file modified data/.DS_Store
View file
Binary file not shown.
24 changes: 24 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,28 @@

.assists {
fill: purple;
}

.interactive-area {
flex: 1;
padding: 5px;
}

.analysis-area {
flex: 2;
padding: 5px;
}

.layout {
display: flex;
}

.analysis-layout {
table-layout: fixed;
}

td {
vertical-align: top;
width: 1%;
padding: 15px;
}
108 changes: 67 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,52 +14,78 @@
</head>

<body>
<div class="summoner-name-wrapper">Summoner:
<input class="summoner-name"></input>
<input type="button" class="enter-btn" value="Enter" onclick="searchSummoner()"></input>
</div>
<div class="layout">
<div class="interactive-area">
<div class="summoner-name-wrapper">Summoner:
<input class="summoner-name"></input>
<input type="button" class="enter-btn" value="Enter" onclick="searchSummoner()"></input>
</div>

<div class="filters">
Self:
<select class="championSelect-self"></select>
<select class="roleSelect-self"></select>
<br/>
Allies:
<select class="championSelect-ally"></select>
<select class="roleSelect-ally"></select>
<br/>
Enemies:
<select class="championSelect-enemy"></select>
<select class="roleSelect-enemy"></select>
<div class="timeSliderWrapper">
<div class="timeSlider"> </div>
</div>
<div class="filters">
Self:
<select class="championSelect-self"></select>
<select class="roleSelect-self"></select>
<br/>
Allies:
<select class="championSelect-ally"></select>
<select class="roleSelect-ally"></select>
<br/>
Enemies:
<select class="championSelect-enemy"></select>
<select class="roleSelect-enemy"></select>
<div class="timeSliderWrapper">
<div class="timeSlider"> </div>
</div>

<div class="timeSliderText"> minutes </div>
<div class="timeSliderText"> minutes </div>

<input type="radio" name="sideSelect" id="blueSide" value="blueSide" onclick="blueSideSelected()" />Blue
<input type="radio" name="sideSelect" id="redSide" value="redSide" onclick="redSideSelected()" />Red
<input type="radio" name="sideSelect" id="bothSides" value="bothSides" onclick="bothSidesSelected()" checked />Both
<input type="radio" name="sideSelect" id="blueSide" value="blueSide" onclick="blueSideSelected()" />Blue
<input type="radio" name="sideSelect" id="redSide" value="redSide" onclick="redSideSelected()" />Red
<input type="radio" name="sideSelect" id="bothSides" value="bothSides" onclick="bothSidesSelected()" checked />Both

<br/>
<input type="radio" name="outcomeSelect" id="winOutcome" value="winOutcome" onclick="winOutcomeSelected()" />Win
<input type="radio" name="outcomeSelect" id="lossOutcome" value="lossOutcome" onclick="lossOutcomeSelected()" />Loss
<input type="radio" name="outcomeSelect" id="bothOutcomes" value="bothOutcomes" onclick="bothOutcomesSelected()" checked />Both
<br/>
Enable area filter <input type="checkbox" class="areaFilter-checkbox">
<br/>
<input type="radio" name="outcomeSelect" id="winOutcome" value="winOutcome" onclick="winOutcomeSelected()" />Win
<input type="radio" name="outcomeSelect" id="lossOutcome" value="lossOutcome" onclick="lossOutcomeSelected()" />Loss
<input type="radio" name="outcomeSelect" id="bothOutcomes" value="bothOutcomes" onclick="bothOutcomesSelected()" checked />Both
<br/>
Enable area filter <input type="checkbox" class="areaFilter-checkbox">

</div>
<div class="vis-area">
<div class="summmoner-name-display"></div>
<div id="map"></div>
</div>
<div class="analysis-area">
<table id="enemyChampKilled" class="display" width="100%"></table>
<table id="enemyRoleKilled" class="display" width="100%"></table>
<table id="participatingAllyChamps" class="display" width="100%"></table>
<table id="participatingAllyRoles" class="display" width="100%"></table>
<table id="participatingEnemyChamps" class="display" width="100%"></table>
<table id="participatingEnemyRoles" class="display" width="100%"></table>
</div>
<div class="vis-area">
<div class="summmoner-name-display"></div>
<div id="map"></div>
</div>
</div>
<div class="analysis-area">
<table class="analysis-layout">
<tbody>
<tr>
<td>
<table id="enemyRoleKilled" class="display" width="100%"></table>
</td>
<td>
<table id="enemyChampKilled" class="display" width="100%"></table>
</td>
</tr>
<tr>
<td>
<table id="participatingAllyRoles" class="display" width="100%"></table>
</td>
<td>
<table id="participatingAllyChamps" class="display" width="100%"></table>
</td>
</tr>
<tr>
<td>
<table id="participatingEnemyRoles" class="display" width="100%"></table>
</td>
<td>
<table id="participatingEnemyChamps" class="display" width="100%"></table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

Expand Down
36 changes: 24 additions & 12 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ yScale = d3.scale.linear()
.range([mapHeight, 0]);

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

var svg = d3.select("#map").append("svg:svg")
.attr("width", mapWidth)
Expand All @@ -47,48 +47,60 @@ var svg = d3.select("#map").append("svg:svg")
.attr('height', mapHeight);

loadStaticData();
$('#enemyChampKilled').DataTable( {
columns: [
{ title: "Champion Killed in Takedowns", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#enemyRoleKilled').DataTable( {
paging: false,
columns: [
{ title: "Role Killed in Takedowns", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#participatingAllyChamps').DataTable( {
$('#enemyChampKilled').DataTable( {
pageLength: 6,
lengthChange: false,
pagingType: "full",
columns: [
{ title: "Ally Champs in Takedowns", data: "championOrRole" },
{ title: "Champion Killed in Takedowns", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#participatingAllyRoles').DataTable( {
paging: false,
columns: [
{ title: "Ally Roles in Takedowns", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#participatingEnemyChamps').DataTable( {
$('#participatingAllyChamps').DataTable( {
pageLength: 7,
lengthChange: false,
pagingType: "full",
columns: [
{ title: "Enemy Champs in Deaths", data: "championOrRole" },
{ title: "Ally Champs in Takedowns", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#participatingEnemyRoles').DataTable( {
paging: false,
columns: [
{ title: "Enemy Roles in Deaths", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

$('#participatingEnemyChamps').DataTable( {
pageLength: 7,
lengthChange: false,
pagingType: "full",
columns: [
{ title: "Enemy Champs in Deaths", data: "championOrRole" },
{ title: "Ratio", data: "ratio"}
]
} );

setupAreaFilter();
drawTimeFilter();

Expand Down
4 changes: 2 additions & 2 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ let express = require('express');
let app = express();
let fs = require('fs');

const port = 8081;
const port = 8082;
let baseURL = 'https://na1.api.riotgames.com/lol/';
let apiKey = 'RGAPI-e7e5b3c4-a8fc-4ef3-8570-ddd484b0dee0';
let apiKey = 'RGAPI-dce505ed-21a4-4809-89c8-1ccc16ac1bfb';

const queues = {2: "5v5 Blind Pick",
4: "5v5 Ranked Solo",
Expand Down

0 comments on commit 82e1f7e

Please sign in to comment.