diff --git a/assets/stars.css b/assets/css/stars.css similarity index 96% rename from assets/stars.css rename to assets/css/stars.css index 0d8f42d..eb81da9 100644 --- a/assets/stars.css +++ b/assets/css/stars.css @@ -11,7 +11,7 @@ html, body { margin: 0; } body { - background: rgb(20, 50, 74); + background: rgb(89, 8, 36); } .rating { diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..7ae1cca --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,338 @@ +html { + --black: #21252a; + --grey-1: #343A40; + --grey-2: #495057; + --grey-3: #868E96; + --grey-4: #ADB5BD; + --grey-5: #CED4DA; + --grey-6: #DEE2E6; + --grey-7: #E9ECEF; + --grey-8: #F1F3F5; + --grey-9: #F8F9FA; + --trans-black: rgba(33, 37, 42, .9); + --red: #e10600; + --gold: #ffda65; + --gold-dark: #a3862c; + --bronze: #c99355; + --bronze-dark: #80582c; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + font-family: "Inter UI", system-ui; + color: var(--black); + background: var(--black); +} + +.list { + width: 100%; + max-width: 600px; + margin: 3rem auto 3rem; + border-radius: 0.4rem; + box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07); +} + +@media screen and (max-width: 800px) { + .list { + margin: 0 auto; + } +} + +.list__table { + width: 100%; + border-spacing: 0; + color: var(--grey-3); + border:none; +} + +body { + padding-bottom: 40px; +} + +.list__header { + padding: 2rem 2rem; + background: white; + border-top-left-radius: 0.4rem; + border-top-right-radius: 0.4rem; +} + +.list__header h1, +.list__header h5 { + margin: 0; + padding: 0; +} + +.list__header h5 { + margin-bottom: 0.5rem; + 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; +} + +.list__row { + background: var(--grey-7); + cursor: pointer; + transition: all 300ms ease; +} + +.list__row:hover, +.list__row:focus { + transform: scale(1.05); + /* box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08); */ + transition: all 0.1s ease; +} + +.list__row:not(:last-of-type) .list__cell { + box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08); +} + +.first-place { + color: var(--gold-dark); + background: var(--grey-9); +} + +.first-place .list__cell:first-of-type { + background: var(--gold); + color: var(--gold-dark); +} + +.second-place { + color: var(--grey-2); + background: var(--grey-9); +} + +.second-place .list__cell:first-of-type { + background: var(--grey-4); + color: var(--grey-2); +} + +.third-place { + color: var(--bronze-dark); + background: var(--grey-9); +} + +.third-place .list__cell:first-of-type { + background: var(--bronze); + color: var(--bronze-dark); +} + +.list__cell { + padding: 1rem; +} + +.list__cell:first-of-type { + text-align: center; + padding: 1rem 0.2rem; + background: var(--grey-5); +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: var(--trans-black); + display: none; + cursor: pointer; + transition: all 300ms ease; +} + +.overlay.is-open { + display: block; +} + +.sidebar { + position: fixed; + background: white; + width: 100%; + max-width: 500px; + top: 0; + bottom: 0; + box-shadow: none; + right: -500px; + display: flex; + flex-direction: column; + justify-content: flex-start; + /*@media screen and (max-width: 650px) { + flex-direction: column-reverse; + justify-content: space-between; + }*/ + transition: all 300ms ease; +} + +.sidebar.is-open { + right: 0; + transition: all 300ms ease; + box-shadow: 0px 0px 100px var(--black); +} + +.sidebar__header { + display: flex; + justify-content: space-between; + background: var(--grey-9); + align-items: center; +} + +.sidebar__header, +.sidebar__body { + padding: 2rem; +} + +.sidebar__title { + font-size: 1.5rem; + font-weight: 700; + color: var(--grey-4); +} + +.button { + font-family: inherit; + border: 0; + background: transparent; + cursor: pointer; +} + +.button:focus, +.button:active { + outline: 0; +} + +.button--close { + padding: 0; + margin: 0; + height: auto; + line-height: 1; + color: var(--grey-5); +} + +.button--close:hover { + color: var(--grey--4); +} + +.driver { + display: flex; + align-items: flex-start; + opacity: 0; + position: relative; + left: 100px; + -webkit-animation: fade 500ms ease 150ms forwards; + animation: fade 500ms ease 150ms forwards; +} + +.driver__image { + width: 150px; + height: 100px; + border-radius: 50%; + background-size: 85px; + background-repeat: no-repeat; + background-position: center; + border: 3px solid white; + /* box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12); */ + margin-right: 1.5rem; +} + +.driver__content { + width: auto; +} + +.driver__title { + font-weight: 700; + font-size: 1.6rem; + margin: 0.5rem 0; +} + +.driver__table { + width: 100%; + color: var(--grey-2); +} + +.driver__table small { + color: var(--grey-4); +} + +.driver__table td { + padding: 0.3rem 0.6rem 0.3rem 0; + height: 2rem; +} + +.driver__table td img { + position: relative; + top: 5px; + margin-right: 6px; +} + +@-webkit-keyframes fade { + from { + opacity: 0; + } + + to { + opacity: 1; + left: 0; + } +} + +@keyframes fade { + from { + opacity: 0; + } + + to { + opacity: 1; + left: 0; + } +} + +.activity-badge{ + width: 35px; + background: lightgray; + padding: 5px; + border-radius: 10px; + filter: invert(1); +} + +.caps{ + font-variant: petite-caps; + font-weight: bold; +} + +.a-no-link{ + text-decoration: none; + color: initial; +} \ No newline at end of file diff --git a/assets/f-ninja.png b/assets/f-ninja.png deleted file mode 100644 index 3b0ef05..0000000 Binary files a/assets/f-ninja.png and /dev/null differ diff --git a/assets/img/activity/build.png b/assets/img/activity/build.png new file mode 100644 index 0000000..62bb310 Binary files /dev/null and b/assets/img/activity/build.png differ diff --git a/assets/img/activity/discover.png b/assets/img/activity/discover.png new file mode 100644 index 0000000..1597a24 Binary files /dev/null and b/assets/img/activity/discover.png differ diff --git a/assets/img/activity/explore.png b/assets/img/activity/explore.png new file mode 100644 index 0000000..7f83dd5 Binary files /dev/null and b/assets/img/activity/explore.png differ diff --git a/assets/img/activity/project.png b/assets/img/activity/project.png new file mode 100644 index 0000000..2c3bd21 Binary files /dev/null and b/assets/img/activity/project.png differ diff --git a/assets/img/activity/solve.png b/assets/img/activity/solve.png new file mode 100644 index 0000000..effcaec Binary files /dev/null and b/assets/img/activity/solve.png differ diff --git a/assets/img/belts/White.png b/assets/img/belts/White.png new file mode 100644 index 0000000..680addd Binary files /dev/null and b/assets/img/belts/White.png differ diff --git a/assets/img/belts/Yellow.png b/assets/img/belts/Yellow.png new file mode 100644 index 0000000..e94cc78 Binary files /dev/null and b/assets/img/belts/Yellow.png differ diff --git a/assets/favicon.png b/assets/img/favicon.png similarity index 100% rename from assets/favicon.png rename to assets/img/favicon.png diff --git a/assets/img/impact.png b/assets/img/impact.png new file mode 100644 index 0000000..8fc435b Binary files /dev/null and b/assets/img/impact.png differ diff --git a/assets/m-ninja.png b/assets/img/ninja-default.png similarity index 100% rename from assets/m-ninja.png rename to assets/img/ninja-default.png diff --git a/assets/img/ninja-glasses.png b/assets/img/ninja-glasses.png new file mode 100644 index 0000000..cfa2339 Binary files /dev/null and b/assets/img/ninja-glasses.png differ diff --git a/assets/leaderboard.js b/assets/js/leaderboard.js similarity index 53% rename from assets/leaderboard.js rename to assets/js/leaderboard.js index ef7b59a..76af733 100644 --- a/assets/leaderboard.js +++ b/assets/js/leaderboard.js @@ -31,50 +31,56 @@ tableRow.forEach(tableRow => { const sidebarBody = document.querySelector(".sidebar__body"); sidebarBody.innerHTML = ''; - const driverPlace = this.querySelector(".list__cell:nth-of-type(1) .list__value").innerHTML; - const driverName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML; - 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 ninjaName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML; + const ninjaBelt = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML; + const ninjaLevel = this.querySelector(".list__cell:nth-of-type(5) .list__value").innerHTML; + const ninjaPicture = this.dataset.image; const ninjaActivity = this.dataset.activity; - const driverDOB = this.dataset.dob; - const driverCountry = this.dataset.country; + const ninjaActivityImg = this.dataset.country; - const newDriver = document.createElement('div'); - newDriver.classList = 'driver'; + const newNinja = document.createElement('div'); + newNinja.classList = 'driver'; - const driverContent = document.createElement('div'); - driverContent.classList = 'driver__content'; + const ninjaContent = document.createElement('div'); + ninjaContent.classList = 'driver__content'; const profile = document.createElement('div'); profile.classList = 'driver__image'; - profile.style.backgroundImage = `url('${driverImage}')`; - newDriver.appendChild(profile); + profile.style.backgroundImage = `url('/assets/img/belts/${ninjaBelt}.png')`; + newNinja.appendChild(profile); - const driverTitle = document.createElement('div'); - driverTitle.classList = 'driver__title'; - driverTitle.innerHTML = driverName; - driverContent.appendChild(driverTitle); + const ninjaTitle = document.createElement('div'); + ninjaTitle.classList = 'driver__title'; + ninjaTitle.innerHTML = ninjaName; + ninjaContent.appendChild(ninjaTitle); - const driverInfo = document.createElement('div'); - driverInfo.innerHTML = ` + activityNames = { + 'Build 1':'build', + 'Build 2':'build', + 'Quest':'project', + 'Explore':'explore', + 'Adventure':'solve' + } + + const ninjaInfo = document.createElement('div'); + ninjaInfo.innerHTML = ` - + - + - + - + @@ -83,10 +89,10 @@ tableRow.forEach(tableRow => {
Belt${driverTeam}${ninjaBelt}
Level${driverPoints}${ninjaLevel}
Activity${ninjaActivity}${ninjaActivity}
Score${this.dataset.score} ${this.dataset.score}
Latest Update
`; - driverContent.appendChild(driverInfo); + ninjaContent.appendChild(ninjaInfo); - newDriver.appendChild(driverContent); - sidebarBody.appendChild(newDriver); + newNinja.appendChild(ninjaContent); + sidebarBody.appendChild(newNinja); }); }); diff --git a/assets/papaparse.min.js b/assets/js/papaparse.min.js similarity index 100% rename from assets/papaparse.min.js rename to assets/js/papaparse.min.js diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..d34afda --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,53 @@ +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 = 0; + + 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' + } + + const places = ['first','second','third']; + + var prev_score = -1; + ninjas.forEach(ninja => { + if(ninja.Score!=prev_score){ + // Increment only if prev score changes + count+=1 + } + tr = document.createElement('tr'); + if(count <= 3){ + tr.classList.add(places[count-1]+'-place'); + console.log(count, places[count-1]); + } + tr.innerHTML = `${count} + ${ninja.Ninja}Ninja + + ${ninja.Belt}Belt + ${ninja.Level}Level + `; + // + tr.classList.add('list__row') + tr.dataset.image = `/assets/img/ninja-default.png`; + tr.dataset.activity = ninja.Activity; + tr.dataset.score = ninja.Score; + + tr.dataset.remark = ninja.Remark; + // count+=1; + tab.appendChild(tr); + prev_score = ninja.Score; + }); + + formatTable() + } \ No newline at end of file diff --git a/assets/script.js b/assets/script.js deleted file mode 100644 index 68c1e95..0000000 --- a/assets/script.js +++ /dev/null @@ -1,41 +0,0 @@ -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 => { - tr = document.createElement('tr'); - tr.innerHTML = `${count} - ${ninja.Ninja}Ninja - ${ninja.Belt}Belt - ${ninja.Level}Level` - tr.classList.add('list__row') - tr.dataset.image = `/assets/${Gen[ninja.Gen]}`; - tr.dataset.activity = ninja.Activity; - tr.dataset.score = ninja.Score; - tr.dataset.remark = ninja.Remark; - - // row = ` - - // `; - count+=1; - tab.appendChild(tr); - }); - - formatTable() - } \ No newline at end of file diff --git a/assets/style.css b/assets/style.css deleted file mode 100644 index 9cb7bcd..0000000 --- a/assets/style.css +++ /dev/null @@ -1,280 +0,0 @@ -html { - --black: #21252a; - --grey-1: #343A40; - --grey-2: #495057; - --grey-3: #868E96; - --grey-4: #ADB5BD; - --grey-5: #CED4DA; - --grey-6: #DEE2E6; - --grey-7: #E9ECEF; - --grey-8: #F1F3F5; - --grey-9: #F8F9FA; - --trans-black: rgba(33, 37, 42, .9); - --red: #e10600; - --gold: #ffda65; - --gold-dark: #a3862c; - --bronze: #c99355; - --bronze-dark: #80582c; - } - - html { - box-sizing: border-box; - } - - *, *:before, *:after { - box-sizing: inherit; - } - - html, body { - width: 100%; - height: 100%; - } - - body { - font-family: "Inter UI", system-ui; - color: var(--black); - background: var(--black); - } - - .list { - width: 100%; - max-width: 600px; - margin: 3rem auto 3rem; - border-radius: 0.4rem; - box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07); - } - @media screen and (max-width: 800px) { - .list { - margin: 0 auto; - } - } - .list__table { - width: 100%; - border-spacing: 0; - color: var(--grey-3); - } - - body{ - padding-bottom: 40px; - } - - .list__header { - padding: 2rem 2rem; - background: white; - border-top-left-radius: 0.4rem; - border-top-right-radius: 0.4rem; - } - .list__header h1, .list__header h5 { - margin: 0; - padding: 0; - } - .list__header h5 { - margin-bottom: 0.5rem; - 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; - } - .list__row { - background: var(--grey-7); - cursor: pointer; - transition: all 300ms ease; - } - .list__row:hover, .list__row:focus { - transform: scale(1.05); - box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08); - transition: all 300ms ease; - } - .list__row:not(:last-of-type) .list__cell { - box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08); - } - .list__row:first-of-type { - color: var(--gold-dark); - background: var(--grey-9); - } - .list__row:first-of-type .list__cell:first-of-type { - background: var(--gold); - color: var(--gold-dark); - } - .list__row:nth-of-type(2) { - color: var(--grey-2); - background: var(--grey-9); - } - .list__row:nth-of-type(2) .list__cell:first-of-type { - background: var(--grey-4); - color: var(--grey-2); - } - .list__row:nth-of-type(3) { - color: var(--bronze-dark); - background: var(--grey-9); - } - .list__row:nth-of-type(3) .list__cell:first-of-type { - background: var(--bronze); - color: var(--bronze-dark); - } - .list__cell { - padding: 1rem; - } - .list__cell:first-of-type { - text-align: center; - padding: 1rem 0.2rem; - background: var(--grey-5); - } - - .overlay { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: var(--trans-black); - display: none; - cursor: pointer; - transition: all 300ms ease; - } - .overlay.is-open { - display: block; - } - - .sidebar { - position: fixed; - background: white; - width: 100%; - max-width: 500px; - top: 0; - bottom: 0; - box-shadow: none; - right: -500px; - display: flex; - flex-direction: column; - justify-content: flex-start; - /*@media screen and (max-width: 650px) { - flex-direction: column-reverse; - justify-content: space-between; - }*/ - transition: all 300ms ease; - } - .sidebar.is-open { - right: 0; - transition: all 300ms ease; - box-shadow: 0px 0px 100px var(--black); - } - .sidebar__header { - display: flex; - justify-content: space-between; - background: var(--grey-9); - align-items: center; - } - .sidebar__header, .sidebar__body { - padding: 2rem; - } - .sidebar__title { - font-size: 1.5rem; - font-weight: 700; - color: var(--grey-4); - } - - .button { - font-family: inherit; - border: 0; - background: transparent; - cursor: pointer; - } - .button:focus, .button:active { - outline: 0; - } - .button--close { - padding: 0; - margin: 0; - height: auto; - line-height: 1; - color: var(--grey-5); - } - .button--close:hover { - color: var(--grey--4); - } - - .driver { - display: flex; - align-items: flex-start; - opacity: 0; - position: relative; - left: 100px; - -webkit-animation: fade 500ms ease 150ms forwards; - animation: fade 500ms ease 150ms forwards; - } - .driver__image { - width: 100px; - height: 100px; - border-radius: 50%; - /* background-size: 220px; */ - background-repeat: no-repeat; - background-position: center; - border: 3px solid white; - box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12); - margin-right: 1.5rem; - } - .driver__content { - width: auto; - } - .driver__title { - font-weight: 700; - font-size: 1.6rem; - margin: 0.5rem 0; - } - .driver__table { - width: 100%; - color: var(--grey-2); - } - .driver__table small { - color: var(--grey-4); - } - .driver__table td { - padding: 0.3rem 0.6rem 0.3rem 0; - height: 2rem; - } - .driver__table td img { - position: relative; - top: 5px; - margin-right: 6px; - } - - @-webkit-keyframes fade { - from { - opacity: 0; - } - to { - opacity: 1; - left: 0; - } - } - - @keyframes fade { - from { - opacity: 0; - } - to { - opacity: 1; - left: 0; - } - } \ No newline at end of file diff --git a/index.html b/index.html index 27a3b42..55bc4a8 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,20 @@ Code Ninjas Langley | Leaderboard + - - + +
-
-
Code Ninjas Langley
-

IMPACT leaderboard

+
+
Code Ninjas Langley
+ +

leaderboard

@@ -146,7 +148,7 @@
-
Ninja Information
+
Ninja Stats
- - - + + + \ No newline at end of file