mirror of
https://github.com/codeninjasuk/leaderboard.git
synced 2024-11-22 15:27:54 -05:00
Initial Framework
This commit is contained in:
elvistony
parent
f335abc8f6
commit
f4c603fd38
9 changed files with 128 additions and 265 deletions
250
assets/csvkit.js
250
assets/csvkit.js
|
|
@ -1,250 +0,0 @@
|
|||
(function() {
|
||||
this.CSVKit = {};
|
||||
|
||||
/* Utils */
|
||||
|
||||
var ctor = function() {};
|
||||
var inherits = function(child, parent){
|
||||
ctor.prototype = parent.prototype;
|
||||
child.prototype = new ctor();
|
||||
child.prototype.constructor = child;
|
||||
};
|
||||
|
||||
/* CSVKit.Reader */
|
||||
|
||||
CSVKit.Reader = function(options) {
|
||||
options = options || {};
|
||||
|
||||
this.separator = options.separator || ',';
|
||||
this.quote_char = options.quote_char || '"';
|
||||
this.escape_char = options.escape_char || '"';
|
||||
this.column_names = options.column_names || [];
|
||||
this.columns_from_header = 'columns_from_header' in options ? options.columns_from_header : true;
|
||||
this.nested_quotes = 'nested_quotes' in options ? options.nested_quotes : false;
|
||||
this.rows = [];
|
||||
|
||||
this.state = {
|
||||
rows: 0,
|
||||
open_record: [],
|
||||
open_field: '',
|
||||
last_char: '',
|
||||
in_quoted_field: false
|
||||
};
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype.parse = function(data) {
|
||||
if (this.state.open_record.length === 0) {
|
||||
if (data.charCodeAt(0) === 0xFEFF) {
|
||||
data = data.slice(1);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var c = data.charAt(i), next_char;
|
||||
switch (c) {
|
||||
// escape and separator may be the same char, typically '"'
|
||||
case this.escape_char:
|
||||
case this.quote_char:
|
||||
var is_escape = false;
|
||||
|
||||
if (c === this.escape_char) {
|
||||
next_char = data.charAt(i + 1);
|
||||
|
||||
if (this._is_escapable(next_char)) {
|
||||
this._add_character(next_char);
|
||||
i++;
|
||||
is_escape = true;
|
||||
}
|
||||
}
|
||||
if (!is_escape && (c === this.quote_char)) {
|
||||
if (this.state.open_field && !this.state.in_quoted_field) {
|
||||
this.state.in_quoted_field = true;
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.state.in_quoted_field) {
|
||||
// closing quote should be followed by separator unless the nested quotes option is set
|
||||
next_char = data.charAt(i + 1);
|
||||
|
||||
if (next_char && next_char !== '\r' && next_char != '\n' && next_char !== this.separator && this.nested_quotes !== true) {
|
||||
throw new Error("separator expected after a closing quote; found " + next_char);
|
||||
} else {
|
||||
this.state.in_quoted_field = false;
|
||||
}
|
||||
} else if (this.state.open_field === '') {
|
||||
this.state.in_quoted_field = true;
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case this.separator:
|
||||
if (this.state.in_quoted_field) {
|
||||
this._add_character(c);
|
||||
} else {
|
||||
this._add_field();
|
||||
}
|
||||
break;
|
||||
case '\n':
|
||||
// handle CRLF sequence
|
||||
if (!this.state.in_quoted_field && (this.state.last_char === '\r')) {
|
||||
break;
|
||||
}
|
||||
case '\r':
|
||||
if (this.state.in_quoted_field) {
|
||||
this._add_character(c);
|
||||
} else {
|
||||
this._add_field();
|
||||
this._add_record();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
this._add_character(c);
|
||||
}
|
||||
|
||||
this.state.last_char = c;
|
||||
}
|
||||
|
||||
if (this.state.in_quoted_field) {
|
||||
throw new Error("Input stream ended but closing quotes expected");
|
||||
} else {
|
||||
if (this.state.open_field) {
|
||||
this._add_field();
|
||||
}
|
||||
|
||||
if (this.state.open_record.length > 0) {
|
||||
this._add_record();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype._is_escapable = function(c) {
|
||||
if ((c === this.escape_char) || (c === this.quote_char)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype._add_character = function(c) {
|
||||
this.state.open_field += c;
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype._add_field = function() {
|
||||
this.state.open_record.push(this.state.open_field);
|
||||
this.state.open_field = '';
|
||||
this.state.in_quoted_field = false;
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype._add_record = function() {
|
||||
if (this.columns_from_header && this.state.rows === 0) {
|
||||
this.column_names = this.state.open_record;
|
||||
} else {
|
||||
this.rows.push(this._serialize_record(this.state.open_record));
|
||||
}
|
||||
|
||||
this.state.rows++;
|
||||
this.state.open_record = [];
|
||||
this.state.open_field = '';
|
||||
this.state.in_quoted_field = false;
|
||||
};
|
||||
|
||||
CSVKit.Reader.prototype._serialize_record = function(record) {
|
||||
return record;
|
||||
};
|
||||
|
||||
/* CSVKit.ObjectReader */
|
||||
|
||||
CSVKit.ObjectReader = function(options) {
|
||||
CSVKit.Reader.call(this, options);
|
||||
};
|
||||
inherits(CSVKit.ObjectReader, CSVKit.Reader);
|
||||
|
||||
CSVKit.ObjectReader.prototype._serialize_record = function(record) {
|
||||
var obj = {};
|
||||
|
||||
for (var i = 0; i < this.column_names.length; i++) {
|
||||
obj[this.column_names[i]] = record[i];
|
||||
}
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
/* CSVKit.Writer */
|
||||
|
||||
CSVKit.Writer = function(options) {
|
||||
options = options || {};
|
||||
|
||||
this.separator = options.separator || ',';
|
||||
this.quote_char = options.quote_char || '"';
|
||||
this.escape_char = options.escape_char || '"';
|
||||
this.quote_all = options.quote_all || false;
|
||||
this.newline = '\n';
|
||||
|
||||
CSVKit.Writer.prototype.write = function(rows) {
|
||||
var formatted_rows = [];
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
formatted_rows.push(this._serialize_row(rows[i]));
|
||||
}
|
||||
|
||||
return formatted_rows.join(this.newline);
|
||||
};
|
||||
|
||||
CSVKit.Writer.prototype._serialize_row = function(row) {
|
||||
var formatted_cells = [];
|
||||
|
||||
for (var i = 0; i < row.length; i++) {
|
||||
formatted_cells.push(this._serialize_cell(row[i]));
|
||||
}
|
||||
|
||||
return formatted_cells.join(this.separator);
|
||||
};
|
||||
|
||||
CSVKit.Writer.prototype._serialize_cell = function(cell) {
|
||||
if (cell.indexOf(this.quote_char) >= 0) {
|
||||
cell = cell.replace(new RegExp(this.quote_char, 'g'), this.escape_char + this.quote_char);
|
||||
}
|
||||
|
||||
if (this.quote_all || cell.indexOf(this.separator) >= 0 || cell.indexOf(this.newline) >= 0) {
|
||||
return this.quote_char + cell + this.quote_char;
|
||||
}
|
||||
|
||||
return cell;
|
||||
};
|
||||
}
|
||||
|
||||
/* CSVKit.ObjectWriter */
|
||||
|
||||
CSVKit.ObjectWriter = function(options) {
|
||||
CSVKit.Writer.call(this, options);
|
||||
|
||||
if (!('column_names' in options)) {
|
||||
throw "The column_names option is required.";
|
||||
}
|
||||
|
||||
this.column_names = options.column_names;
|
||||
};
|
||||
inherits(CSVKit.ObjectWriter, CSVKit.Writer);
|
||||
|
||||
CSVKit.ObjectWriter.prototype.write = function(rows) {
|
||||
var header = {};
|
||||
|
||||
for (var i = 0; i < this.column_names.length; i++) {
|
||||
header[this.column_names[i]] = this.column_names[i];
|
||||
}
|
||||
|
||||
rows.splice(0, 0, header);
|
||||
|
||||
return CSVKit.Writer.prototype.write.call(this, rows);
|
||||
}
|
||||
|
||||
CSVKit.ObjectWriter.prototype._serialize_row = function(row) {
|
||||
var cells = [];
|
||||
|
||||
for (var i = 0; i < this.column_names.length; i++) {
|
||||
cells.push(row[this.column_names[i]]);
|
||||
}
|
||||
|
||||
return CSVKit.Writer.prototype._serialize_row.call(this, cells);
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
BIN
assets/f-ninja.png
Normal file
BIN
assets/f-ninja.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assets/favicon.png
Normal file
BIN
assets/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -16,6 +16,8 @@ const sidebarClose = () => {
|
|||
}, 300);
|
||||
};
|
||||
|
||||
function formatTable(){
|
||||
const tableRow = document.querySelectorAll(".list__row");
|
||||
tableRow.forEach(tableRow => {
|
||||
tableRow.addEventListener("click", function () {
|
||||
overlay.style.opacity = 0;
|
||||
|
|
@ -34,7 +36,7 @@ tableRow.forEach(tableRow => {
|
|||
const driverTeam = this.querySelector(".list__cell:nth-of-type(3) .list__value").innerHTML;
|
||||
const driverPoints = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;
|
||||
const driverImage = this.dataset.image;
|
||||
const driverNationality = this.dataset.nationality;
|
||||
const ninjaActivity = this.dataset.activity;
|
||||
const driverDOB = this.dataset.dob;
|
||||
const driverCountry = this.dataset.country;
|
||||
|
||||
|
|
@ -68,11 +70,11 @@ tableRow.forEach(tableRow => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td><small>Activity</small></td>
|
||||
<td><img src="https://www.countryflags.io/${driverCountry}/shiny/24.png">${driverNationality}</td>
|
||||
<td><img src="https://www.countryflags.io/${driverCountry}/shiny/24.png">${ninjaActivity}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><small>Place</small></td>
|
||||
<td>${driverPlace}</td>
|
||||
<td>${driverPlace} </td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
|
@ -84,6 +86,7 @@ tableRow.forEach(tableRow => {
|
|||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
closeOverlayBtn.addEventListener("click", function () {
|
||||
sidebarClose();
|
||||
|
|
|
|||
BIN
assets/m-ninja.png
Normal file
BIN
assets/m-ninja.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
7
assets/papaparse.min.js
vendored
Normal file
7
assets/papaparse.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
43
assets/stars.css
Normal file
43
assets/stars.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* Credits to MarcMalignan */
|
||||
|
||||
@-webkit-keyframes grow {
|
||||
0% { font-size: 10px; }
|
||||
75% { font-size: 15px; }
|
||||
100% { font-size: 30px; }
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background: steelblue;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 90px;
|
||||
top:50%; left:50%;
|
||||
margin: -45px 0 0 -225px;
|
||||
}
|
||||
|
||||
.rating .star {
|
||||
float: left;
|
||||
/* width: 90px; */
|
||||
width: 40px;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
/* font-size: 100px; */
|
||||
font-size: 30px;
|
||||
-webkit-animation: grow .8s cubic-bezier(0,3,.3,0);
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
.rating .star:after {
|
||||
content: '\2606';
|
||||
color: gold;
|
||||
}
|
||||
.rating .star:nth-child(2) { -webkit-animation-duration: .9s; }
|
||||
.rating .star:nth-child(3) { -webkit-animation-duration: 1s; }
|
||||
.rating .star:nth-child(4) { -webkit-animation-duration: 1.1s; }
|
||||
.rating .star:nth-child(5) { -webkit-animation-duration: 1.2s; }
|
||||
|
|
@ -53,6 +53,11 @@ html {
|
|||
border-spacing: 0;
|
||||
color: var(--grey-3);
|
||||
}
|
||||
|
||||
body{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.list__header {
|
||||
padding: 2rem 2rem;
|
||||
background: white;
|
||||
|
|
@ -68,10 +73,24 @@ html {
|
|||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.list__footer{
|
||||
padding: 1rem 1rem;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 0.4rem;
|
||||
border-bottom-right-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.list__value {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.list__label {
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
|
|
@ -208,9 +227,9 @@ html {
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-size: 220px;
|
||||
/* background-size: 220px; */
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
background-position: center;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12);
|
||||
margin-right: 1.5rem;
|
||||
|
|
|
|||
61
index.html
61
index.html
|
|
@ -1,10 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- <meta http-equiv="refresh" content="10"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="stylesheet" href="/assets/stars.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -15,14 +18,9 @@
|
|||
<h1><b>IMPACT</b> <span style="font-variant-caps:small-caps">leaderboard</span></h1>
|
||||
</div>
|
||||
<div class="list__body">
|
||||
<table class="list__table">
|
||||
<tr class="list__row" data-image="https://www.formula1.com/content/fom-website/en/drivers/lewis-hamilton/_jcr_content/image.img.1920.medium.jpg/1533294345447.jpg" data-nationality="British" data-dob="1985-01-07" data-country="gb">
|
||||
<td class="list__cell"><span class="list__value">1</span></td>
|
||||
<td class="list__cell"><span class="list__value">Lewis Hamilton</span><small class="list__label">Ninja</small></td>
|
||||
<td class="list__cell"><span class="list__value">White</span><small class="list__label">Belt</small></td>
|
||||
<td class="list__cell"><span class="list__value">8</span><small class="list__label">Level</small></td>
|
||||
</tr>
|
||||
<tr class="list__row" data-image="https://www.formula1.com/content/fom-website/en/drivers/sebastian-vettel/_jcr_content/image.img.1920.medium.jpg/1533294389985.jpg" data-nationality="German" data-dob="1987-07-03" data-country="de">
|
||||
<table class="list__table" id="leaderboard_table">
|
||||
|
||||
<!-- <tr class="list__row" data-image="https://www.formula1.com/content/fom-website/en/drivers/sebastian-vettel/_jcr_content/image.img.1920.medium.jpg/1533294389985.jpg" data-nationality="German" data-dob="1987-07-03" data-country="de">
|
||||
<td class="list__cell"><span class="list__value">2</span></td>
|
||||
<td class="list__cell"><span class="list__value">Sebastian Vettel</span><small class="list__label">Driver</small></td>
|
||||
<td class="list__cell"><span class="list__value">Ferrari</span><small class="list__label">Constructor</small></td>
|
||||
|
|
@ -135,9 +133,12 @@
|
|||
<td class="list__cell"><span class="list__value">Sergey Sirotkin</span><small class="list__label">Driver</small></td>
|
||||
<td class="list__cell"><span class="list__value">Williams</span><small class="list__label">Constructor</small></td>
|
||||
<td class="list__cell"><span class="list__value">0</span><small class="list__label">Points</small></td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
</table>
|
||||
</div>
|
||||
<div class="list__footer">
|
||||
<h5>Code Ninjas Langley</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay"></div>
|
||||
|
|
@ -154,7 +155,47 @@
|
|||
</div>
|
||||
<div class="sidebar__body"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/papaparse.min.js"></script>
|
||||
<script src="assets/leaderboard.js"></script>
|
||||
<script src="assets/csvkit.js"></script>
|
||||
|
||||
<script>
|
||||
getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3FphomzJ7o-TcTmCzCtY-grKUIzpI6GV0piJBy_hU_VH6OOWrbjhmfI9j/pub?gid=892912605&single=true&output=csv");
|
||||
var tab = document.getElementById('leaderboard_table')
|
||||
async function getText(file) {
|
||||
let myObject = await fetch(file);
|
||||
let myText = await myObject.text();
|
||||
let ninjas = Papa.parse(myText, {header:true}).data;
|
||||
console.log(ninjas);
|
||||
|
||||
var count = 1;
|
||||
|
||||
var n = ninjas.sort(function(a, b) {
|
||||
return b.Score - a.Score;
|
||||
})
|
||||
|
||||
Gen={
|
||||
'M':'m-ninja.png',
|
||||
'F':'f-ninja.png',
|
||||
'O':'o-ninja.png'
|
||||
}
|
||||
|
||||
ninjas.forEach(ninja => {
|
||||
|
||||
row = `<tr class="list__row" data-image="/assets/${Gen[ninja.Gen]}" data-activity="${ninja.Activity}" data-nationality="Swedish" data-dob="1990-09-02" data-country="se" data-remark="${ninja.Activity}" data-score="${ninja.Score}">
|
||||
<td class="list__cell"><span class="list__value">${count}</span></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>
|
||||
</tr>`;
|
||||
count+=1;
|
||||
tab.innerHTML+=row;
|
||||
});
|
||||
|
||||
formatTable()
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue