diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index f9c9686..0000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,109 +0,0 @@ -# -# CircleCI 2.0 -# -version: 2 -jobs: - build: - docker: - - image: circleci/node - working_directory: ~/works - steps: - - checkout - - run: - name: Build - command: | - mkdir target - curl -sLo target/builder.sh toast.sh/builder - bash ./target/builder.sh - # npm run build - - persist_to_workspace: - root: ~/works - paths: - - . - publish: - docker: - - image: opspresso/awscli - working_directory: ~/works - steps: - - attach_workspace: - at: ~/works - - run: - name: Publish - command: | - bash ./target/builder.sh - release: - docker: - - image: circleci/golang - working_directory: ~/works - steps: - - attach_workspace: - at: ~/works - - run: - name: Release - command: | - bash ./target/builder.sh - docker: - docker: - - image: circleci/python - working_directory: ~/works - steps: - - attach_workspace: - at: ~/works - - setup_remote_docker: - docker_layer_caching: true - - run: - name: Docker - command: | - bash ./target/builder.sh - trigger: - docker: - - image: circleci/python - working_directory: ~/works - steps: - - attach_workspace: - at: ~/works - - run: - name: Trigger - command: | - bash ./target/builder.sh - slack: - docker: - - image: circleci/python - working_directory: ~/works - steps: - - attach_workspace: - at: ~/works - - run: - name: Slack - command: | - bash ./target/builder.sh - -# Advanced Settings -# - Build forked pull requests -# - Pass secrets to builds from forked pull requests -# - Only build pull requests - -workflows: - version: 2 - apply: - jobs: - - build - - publish: - requires: - - build - filters: - branches: - only: - - master - - release: - requires: - - build - - docker: - requires: - - release - - trigger: - requires: - - release - - slack: - requires: - - release diff --git a/.eslintrc.json b/.eslintrc.json index fa083c2..62158a6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,33 +1,33 @@ { - "env": { - "node": true, - "browser": true, - "commonjs": true, - "es6": true - }, - "extends": "eslint:recommended", - "parserOptions": { - "ecmaVersion": 2018, - "sourceType": "module" - }, - "rules": { - "indent": [ - "error", - 4 - ], - "linebreak-style": [ - "error", - "unix" - ], - "quotes": [ - "error", - "single" - ], - "semi": [ - "error", - "always" - ], - "no-console": 0, - "no-process-env": 0 - } + "env": { + "node": true, + "browser": true, + "commonjs": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "rules": { + "indent": [ + "error", + 4 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" + ], + "no-console": 0, + "no-process-env": 0 + } } diff --git a/public/flip.css b/public/flip.css index 9183f8f..bf6db76 100644 --- a/public/flip.css +++ b/public/flip.css @@ -1,29 +1,29 @@ .flip-container { - -webkit-perspective: 1000; - position: relative; - height: 100%; + -webkit-perspective: 1000; + position: relative; + height: 100%; } .flip-container .flip-body.flipped { - -webkit-transform: rotatey(360deg); + -webkit-transform: rotatey(360deg); } .flip-container .flip-body { - -webkit-transform-style: preserve-3d; - -webkit-transition: 1s; - height: 100%; - width: 100%; + -webkit-transform-style: preserve-3d; + -webkit-transition: 1s; + height: 100%; + width: 100%; } .flip-container .flip-body .face { - -webkit-backface-visibility: hidden; - height: 100%; - position: absolute; - text-align: center; - width: 100%; - z-index: 2; + -webkit-backface-visibility: hidden; + height: 100%; + position: absolute; + text-align: center; + width: 100%; + z-index: 2; } .flip-container .flip-body .back { - -webkit-transform: rotatey(-180deg); + -webkit-transform: rotatey(-180deg); } diff --git a/public/flip.js b/public/flip.js index 00b992b..90fb86e 100644 --- a/public/flip.js +++ b/public/flip.js @@ -5,8 +5,8 @@ // }); function flip() { - document.querySelector('.flip-body').classList.add('flipped'); - setTimeout(function () { - document.querySelector('.flip-body').classList.remove('flipped'); - }, 1000); + document.querySelector('.flip-body').classList.add('flipped'); + setTimeout(function () { + document.querySelector('.flip-body').classList.remove('flipped'); + }, 1000); } diff --git a/public/images/dr-logo-community-races.png b/public/images/dr-logo-community-races.png new file mode 100644 index 0000000..34d564f Binary files /dev/null and b/public/images/dr-logo-community-races.png differ diff --git a/public/images/dr-logo-underground.png b/public/images/dr-logo-underground.png new file mode 100644 index 0000000..97a3074 Binary files /dev/null and b/public/images/dr-logo-underground.png differ diff --git a/public/index.css b/public/index.css index 7a1f9f9..56cdb7d 100644 --- a/public/index.css +++ b/public/index.css @@ -1,56 +1,56 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } html { - background: #111; - color: #eee; - font-family: Menlo, Noto Mono; + background: #111; + color: #eee; + font-family: Menlo, Noto Mono; } figure { - display: block; - margin-block-end: 1em; - margin-block-start: 1em; - margin-inline-end: 40px; - margin-inline-start: 40px; + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-inline-end: 40px; + margin-inline-start: 40px; } footer { - height: 100px; + height: 100px; } div { - display: block; + display: block; } a { - text-decoration: none; + text-decoration: none; } .lb-logo { - display: block; - height: 500px; - line-height: 0; - margin: 50px 0; - overflow: hidden; - text-align: center; + display: block; + height: 500px; + line-height: 0; + margin: 50px 0; + overflow: hidden; + text-align: center; } .lb-logo-front, .lb-logo-back { - height: 100%; + height: 100%; } .lb-logo-front img, .lb-logo-back img { - height: 100%; + height: 100%; } .lb-title { - height: 30px; - margin-bottom: 30px; - margin-top: 30px; - text-align: center; + height: 30px; + margin-bottom: 30px; + margin-top: 30px; + text-align: center; } diff --git a/public/league.css b/public/league.css index 20e2c48..ddd8a3f 100644 --- a/public/league.css +++ b/public/league.css @@ -1,129 +1,129 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } html { - background: #111; - color: #eee; - font-family: Menlo, Noto Mono; + background: #111; + color: #eee; + font-family: Menlo, Noto Mono; } figure { - display: block; - margin-block-end: 1em; - margin-block-start: 1em; - margin-inline-end: 40px; - margin-inline-start: 40px; + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-inline-end: 40px; + margin-inline-start: 40px; } footer { - height: 100px; + height: 100px; } div { - display: block; + display: block; } a { - text-decoration: none; + text-decoration: none; } .lb-logo { - display: block; - height: 200px; - line-height: 0; - margin: 15px 0; - overflow: hidden; - text-align: center; + display: block; + height: 200px; + line-height: 0; + margin: 15px 0; + overflow: hidden; + text-align: center; } .lb-logo-front, .lb-logo-back { - height: 100%; + height: 100%; } .lb-logo-front img, .lb-logo-back img { - height: 100%; + height: 100%; } .lb-title { - height: 30px; - margin-bottom: 15px; - margin-top: 15px; - text-align: center; + height: 30px; + margin-bottom: 15px; + margin-top: 15px; + text-align: center; } .lb-items { - margin: 0 auto; - max-width: 1200px; + margin: 0 auto; + max-width: 1200px; } .lb-items .lb-header, .lb-items .lb-row { - display: flex; - width: 100%; + display: flex; + width: 100%; } .lb-items .lb-header { - color: #aaa; - font-size: 18px; - text-transform: uppercase; + color: #aaa; + font-size: 18px; + text-transform: uppercase; } .lb-items .lb-row { - background: linear-gradient(90deg, #405666 0, #3d246b); - color: #fff; - font-size: 28px; - margin-bottom: 5px; + background: linear-gradient(90deg, #405666 0, #3d246b); + color: #fff; + font-size: 28px; + margin-bottom: 5px; } .lb-items .lb-header>div, .lb-items .lb-row>div { - padding: 15px 30px; - text-align: center; + padding: 15px 30px; + text-align: center; } .lb-items .lb-header>div:nth-child(1), .lb-items .lb-row>div:nth-child(1) { - width: 20%; + width: 20%; } .lb-items .lb-header>div:nth-child(2), .lb-items .lb-row>div:nth-child(2) { - /* font-weight: bold; */ - margin-right: auto; - text-align: left; - width: 50%; + /* font-weight: bold; */ + margin-right: auto; + text-align: left; + width: 50%; } .lb-items .lb-header>div:nth-child(n+3), .lb-items .lb-row>div:nth-child(n+3) { - display: block; - text-align: left; - width: 20%; + display: block; + text-align: left; + width: 20%; } .lb-items.lb-initial .lb-row:nth-child(n+2):nth-child(-n+4)>div:nth-child(-n+2) { - color: #232f3e; + color: #232f3e; } .lb-items.lb-initial .lb-row:nth-child(2) { - background: linear-gradient(90deg, #fbdf47 0, #a66103); + background: linear-gradient(90deg, #fbdf47 0, #a66103); } .lb-items.lb-initial .lb-row:nth-child(3) { - background: linear-gradient(90deg, #cacacd 0, #64656b); + background: linear-gradient(90deg, #cacacd 0, #64656b); } .lb-items.lb-initial .lb-row:nth-child(4) { - background: linear-gradient(90deg, #fac07b 0, #8f6347); + background: linear-gradient(90deg, #fac07b 0, #8f6347); } .icon-trophy { - height: 28px; - position: relative; - top: 50%; - transform: translateY(-50%); + height: 28px; + position: relative; + top: 50%; + transform: translateY(-50%); } diff --git a/public/league.js b/public/league.js index 8993947..c5f9096 100644 --- a/public/league.js +++ b/public/league.js @@ -11,231 +11,231 @@ let items = []; let scroller = 0; function reload() { - let url = '/times/' + league; - $.ajax({ - url: url, - type: 'get', - success: function (res, status) { - if (res) { - reloaded(res); - } - } - }); + let url = '/times/' + league; + $.ajax({ + url: url, + type: 'get', + success: function (res, status) { + if (res) { + reloaded(res); + } + } + }); } function reloaded(res) { - let isNew = false; - if (items.length > 0 && items.length < res.items.length) { - isNew = true; + let isNew = false; + if (items.length > 0 && items.length < res.items.length) { + isNew = true; + } + + let rank; + let racerName; + let lapTime; + + res.items.sort(compare); + + for (let i = 0; i < items.length; i++) { + if (items[i].racerName !== res.items[i].racerName || items[i].lapTime !== res.items[i].lapTime) { + rank = i + 1; + racerName = res.items[i].racerName; + lapTime = res.items[i].lapTime; + break; } + } - let rank; - let racerName; - let lapTime; + if (isNew && !racerName) { + let j = res.items.length - 1; + rank = res.items.length; + racerName = res.items[j].racerName; + lapTime = res.items[j].lapTime; + } - res.items.sort(compare); + if (items.length == 0 || racerName || items.length != res.items.length) { + print(res); + } - for (let i = 0; i < items.length; i++) { - if (items[i].racerName !== res.items[i].racerName || items[i].lapTime !== res.items[i].lapTime) { - rank = i + 1; - racerName = res.items[i].racerName; - lapTime = res.items[i].lapTime; - break; - } - } + if (racerName) { + console.log(`new ${isNew} ${rank} ${racerName} ${lapTime}`); - if (isNew && !racerName) { - let j = res.items.length - 1; - rank = res.items.length; - racerName = res.items[j].racerName; - lapTime = res.items[j].lapTime; - } - - if (items.length == 0 || racerName || items.length != res.items.length) { - print(res); - } - - if (racerName) { - console.log(`new ${isNew} ${rank} ${racerName} ${lapTime}`); - - scroll(rank); + scroll(rank); - if (isNew) { - popup('New Challenger!', rank, racerName, lapTime); - } else { - popup('New Record!', rank, racerName, lapTime); - } + if (isNew) { + popup('New Challenger!', rank, racerName, lapTime); + } else { + popup('New Record!', rank, racerName, lapTime); } + } - items = res.items; + items = res.items; } function print(res) { - lb_anim = res.anim; + lb_anim = res.anim; - clear(res.logo, res.title); + clear(res.logo, res.title); - addRow('lb-header', 'Rank', 'Name', 'Time') + addRow('lb-header', 'Rank', 'Name', 'Time') - let rank = 0; - res.items.forEach(function (item) { - rank++; - addRow('lb-row', rank, item.racerName, item.lapTime); - }); + let rank = 0; + res.items.forEach(function (item) { + rank++; + addRow('lb-row', rank, item.racerName, item.lapTime); + }); } function compare(a, b) { - a2 = sec(a.lapTime); - b2 = sec(b.lapTime); - if (a2 < b2) { - return -1; - } else if (a2 > b2) { - return 1; - } - return 0; + a2 = sec(a.lapTime); + b2 = sec(b.lapTime); + if (a2 < b2) { + return -1; + } else if (a2 > b2) { + return 1; + } + return 0; } function sec(t) { - let a = t.split(':'); - return ((+a[0]) * 60) + (+a[1]); + let a = t.split(':'); + return ((+a[0]) * 60) + (+a[1]); } function clear(logo, title) { - if (logo && logo !== '') { - document.querySelector('.lb-logo-front').innerHTML = ``; - document.querySelector('.lb-logo-back').innerHTML = ``; - } + if (logo && logo !== '') { + document.querySelector('.lb-logo-front').innerHTML = ``; + document.querySelector('.lb-logo-back').innerHTML = ``; + } - document.title = title - lb_title.innerText = title; + document.title = title + lb_title.innerText = title; - while (lb_items.lastChild) { - lb_items.removeChild(lb_items.lastChild); - } + while (lb_items.lastChild) { + lb_items.removeChild(lb_items.lastChild); + } } function addRow(className, rank, racerName, lapTime) { - let row = document.createElement('div'); - row.classList.add(className); - row.classList.add(`lb-rank${rank}`); - if (rank > 0 && rank < 4) { - addText(row, ` ${rank}`); - } else { - addText(row, rank); - } - addText(row, racerName); - addText(row, lapTime); - lb_items.appendChild(row); + let row = document.createElement('div'); + row.classList.add(className); + row.classList.add(`lb-rank${rank}`); + if (rank > 0 && rank < 4) { + addText(row, ` ${rank}`); + } else { + addText(row, rank); + } + addText(row, racerName); + addText(row, lapTime); + lb_items.appendChild(row); } function addText(row, text) { - let item = document.createElement('div'); - item.innerHTML = `${text}`; - row.appendChild(item); + let item = document.createElement('div'); + item.innerHTML = `${text}`; + row.appendChild(item); } let socket = io(); socket.on('league', function (name) { - console.log(`socket league ${name}`); - reload(); + console.log(`socket league ${name}`); + reload(); }); $(function () { + reload(); + setInterval(function () { reload(); - setInterval(function () { - reload(); - }, 10000); - - setInterval(function () { - scroller--; - if (scroller == 0) { - scroll('up'); - } - if (scroller < -120) { - scroll('down'); - } - }, 1000); + }, 10000); + + setInterval(function () { + scroller--; + if (scroller == 0) { + scroll('up'); + } + if (scroller < -120) { + scroll('down'); + } + }, 1000); }); function scroll(dir) { - let scrollTop = 0; - let duration = 1000; - let max = 5; - - if (dir === 'up') { - scrollTop = 0; - duration = 1000; - scroller = 0; - } else if (dir === 'down') { - dir = items.length; - if (dir <= max) { - return; - } - if (dir > 100) { - dir = 100; - } - dir = dir - max; - scrollTop = $(`.lb-rank${dir}`).offset().top; - duration = dir * 600; - scroller = parseInt(duration / 1000); - } else { - if (dir <= max) { - return; - } - dir = dir - max; - scrollTop = $(`.lb-rank${dir}`).offset().top; - scroller = 20; + let scrollTop = 0; + let duration = 1000; + let max = 5; + + if (dir === 'up') { + scrollTop = 0; + duration = 1000; + scroller = 0; + } else if (dir === 'down') { + dir = items.length; + if (dir <= max) { + return; } - - $('html, body').stop().animate({ - scrollTop: scrollTop - }, duration); + if (dir > 100) { + dir = 100; + } + dir = dir - max; + scrollTop = $(`.lb-rank${dir}`).offset().top; + duration = dir * 600; + scroller = parseInt(duration / 1000); + } else { + if (dir <= max) { + return; + } + dir = dir - max; + scrollTop = $(`.lb-rank${dir}`).offset().top; + scroller = 20; + } + + $('html, body').stop().animate({ + scrollTop: scrollTop + }, duration); } function popup(title, rank, racer, time) { - let pop_title = document.querySelector('.pop-title'); - let pop_racer = document.querySelector('.pop-racer'); - let pop_time = document.querySelector('.pop-time'); - - pop_title.innerText = title; - pop_racer.innerText = racer; - pop_racer.classList.add(`pop-rank${rank}`); - pop_time.innerText = time; - - // scroll - scroll(rank); - - // logo - if (lb_anim) { - $('.pop-logo').fadeIn(); + let pop_title = document.querySelector('.pop-title'); + let pop_racer = document.querySelector('.pop-racer'); + let pop_time = document.querySelector('.pop-time'); + + pop_title.innerText = title; + pop_racer.innerText = racer; + pop_racer.classList.add(`pop-rank${rank}`); + pop_time.innerText = time; + + // scroll + scroll(rank); + + // logo + if (lb_anim) { + $('.pop-logo').fadeIn(); + $('.pop-logo .pop-container').animate({ + height: '100%' + }, 1200); + setTimeout(function () { + $('.pop-logo').fadeOut(); + setTimeout(function () { $('.pop-logo .pop-container').animate({ - height: '100%' - }, 1200); - setTimeout(function () { - $('.pop-logo').fadeOut(); - setTimeout(function () { - $('.pop-logo .pop-container').animate({ - height: '200px' - }, 100); - }, 1000); - }, 1000); - } + height: '200px' + }, 100); + }, 1000); + }, 1000); + } - confetti.start(5000); + confetti.start(5000); - // layer - setTimeout(function () { - $('.pop-layer').fadeIn(); + // layer + setTimeout(function () { + $('.pop-layer').fadeIn(); - setTimeout(function () { - $('.pop-layer').fadeOut(); + setTimeout(function () { + $('.pop-layer').fadeOut(); - $(`.lb-rank${rank}>div:nth-child(n+2) span`).fadeOut().fadeIn().fadeOut().fadeIn(); + $(`.lb-rank${rank}>div:nth-child(n+2) span`).fadeOut().fadeIn().fadeOut().fadeIn(); - pop_title.innerText = ''; - pop_racer.innerText = ''; - pop_racer.classList.remove(`pop-rank${rank}`); - pop_time.innerText = ''; - }, 7000); - }, 1000); + pop_title.innerText = ''; + pop_racer.innerText = ''; + pop_racer.classList.remove(`pop-rank${rank}`); + pop_time.innerText = ''; + }, 7000); + }, 1000); } diff --git a/public/pop.css b/public/pop.css index 9b3abbb..a7c8f5a 100644 --- a/public/pop.css +++ b/public/pop.css @@ -1,84 +1,84 @@ .pop-logo { - display: none; - height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - z-index: 100; + display: none; + height: 100%; + left: 0; + overflow: hidden; + position: fixed; + top: 0; + width: 100%; + z-index: 100; } .pop-logo .pop-container { - height: 200px; - left: 50%; - margin-top: 1em; - position: relative; - text-align: center; - transform: translateX(-50%); - width: 200%; + height: 200px; + left: 50%; + margin-top: 1em; + position: relative; + text-align: center; + transform: translateX(-50%); + width: 200%; } .pop-layer { - display: none; - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 100; + display: none; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 100; } .pop-layer .pop-bg { - background: #000; - filter: alpha(opacity=70); - height: 100%; - left: 0; - opacity: .7; - position: absolute; - top: 0; - width: 100%; + background: #000; + filter: alpha(opacity=70); + height: 100%; + left: 0; + opacity: .7; + position: absolute; + top: 0; + width: 100%; } .pop-layer .pop-container { - height: 100%; - left: 0; - position: relative; - text-align: center; - top: 0; - width: 100%; + height: 100%; + left: 0; + position: relative; + text-align: center; + top: 0; + width: 100%; } .pop-layer .pop-container .pop-title { - font-size: 5vw; - margin-top: 10%; - padding: 1%; + font-size: 5vw; + margin-top: 10%; + padding: 1%; } .pop-layer .pop-container .pop-racer { - font-size: 13vw; - font-weight: bold; - padding: 1%; + font-size: 13vw; + font-weight: bold; + padding: 1%; } .pop-layer .pop-container .pop-time { - font-size: 7vw; - padding: 1%; + font-size: 7vw; + padding: 1%; } .pop-layer .pop-container .pop-message { - font-size: 5vw; - margin-top: 10%; + font-size: 5vw; + margin-top: 10%; } .pop-rank1 { - color: #fbdf47; + color: #fbdf47; } .pop-rank2 { - color: #cacacd; + color: #cacacd; } .pop-rank3 { - color: #fac07b; + color: #fac07b; } diff --git a/public/submit.css b/public/submit.css index 6ce79b3..541bf3e 100644 --- a/public/submit.css +++ b/public/submit.css @@ -1,133 +1,133 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } html { - background: #111; - color: #eee; - font-family: Menlo, Noto Mono; + background: #111; + color: #eee; + font-family: Menlo, Noto Mono; } figure { - display: block; - margin-block-end: 1em; - margin-block-start: 1em; - margin-inline-end: 40px; - margin-inline-start: 40px; + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-inline-end: 40px; + margin-inline-start: 40px; } footer { - height: 100px; + height: 100px; } div { - display: block; + display: block; } a { - text-decoration: none; + text-decoration: none; } .lb-logo { - display: block; - height: 250px; - line-height: 0; - margin: 15px 0; - overflow: hidden; - text-align: center; + display: block; + height: 250px; + line-height: 0; + margin: 15px 0; + overflow: hidden; + text-align: center; } .lb-logo-front, .lb-logo-back { - height: 100%; + height: 100%; } .lb-logo-front img, .lb-logo-back img { - height: 100%; + height: 100%; } .lb-title { - height: 40px; - margin-bottom: 30px; - margin-top: 30px; - text-align: center; + height: 40px; + margin-bottom: 30px; + margin-top: 30px; + text-align: center; } .lb-submit { - margin: 0 auto; - max-width: 1024px; + margin: 0 auto; + max-width: 1024px; } .lb-submit .lb-row { - display: flex; - width: 100%; + display: flex; + width: 100%; } .lb-submit .lb-row>div { - font-size: 32px; - padding: 15px 30px; - text-align: center; + font-size: 32px; + padding: 15px 30px; + text-align: center; } .lb-submit .lb-row>div:nth-child(1) { - margin-top: 10px; - min-width: 100px; - width: 15%; + margin-top: 10px; + min-width: 100px; + width: 15%; } .lb-submit .lb-row>div:nth-child(2) { - margin-right: auto; - text-align: left; - width: 60%; + margin-right: auto; + text-align: left; + width: 60%; } .lb-submit .lb-row { - background: linear-gradient(90deg, #405666 0, #3d246b); - color: #fff; - margin-bottom: 5px; + background: linear-gradient(90deg, #405666 0, #3d246b); + color: #fff; + margin-bottom: 5px; } .lb-submit .lb-row input { - background-color: transparent; - border-radius: 2px; - border: 1px solid #aab7b8; - font-size: 32px; - height: 40px; - line-height: 20px; - padding: 4px 10px; - width: 100%; + background-color: transparent; + border-radius: 2px; + border: 1px solid #aab7b8; + font-size: 32px; + height: 40px; + line-height: 20px; + padding: 4px 10px; + width: 100%; } .lb-submit .lb-row input:focus { - border: 1px solid #00a1c9; - box-shadow: 0 0 0 1px #00a1c9; - outline: 0; + border: 1px solid #00a1c9; + box-shadow: 0 0 0 1px #00a1c9; + outline: 0; } .text_normal { - color: #fff; + color: #fff; } .text_red { - color: #e55; + color: #e55; } .lb-btn-submit { - background-color: #ec7211; - background-image: linear-gradient(180deg, #f67c1b 0, #e15500); - border-color: #e76d0c #e15500 #e15500; - border-radius: 3px; - border: 1px solid; - box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2); - color: #fff; - cursor: pointer; - display: inline-block; - font-size: 28px; - text-align: center; - vertical-align: middle; - width: 250px; - height: 40px; - padding-top: 10px; + background-color: #ec7211; + background-image: linear-gradient(180deg, #f67c1b 0, #e15500); + border-color: #e76d0c #e15500 #e15500; + border-radius: 3px; + border: 1px solid; + box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2); + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 28px; + text-align: center; + vertical-align: middle; + width: 250px; + height: 40px; + padding-top: 10px; } diff --git a/public/submit.js b/public/submit.js index eac1333..0bc6b14 100644 --- a/public/submit.js +++ b/public/submit.js @@ -11,34 +11,34 @@ let lb_time = document.querySelector('.lb-time'); let items = []; function reload() { - let url = '/times/' + league; - $.ajax({ - url: url, - type: 'get', - success: function (res, status) { - if (res) { - clear(res.logo, res.title); - } - }, - }); + let url = '/times/' + league; + $.ajax({ + url: url, + type: 'get', + success: function (res, status) { + if (res) { + clear(res.logo, res.title); + } + }, + }); } $(function () { - reload(); + reload(); - setInterval(function () { - flip(); - }, 5000); + setInterval(function () { + flip(); + }, 5000); }); function validateEmail(val) { - var re = /^(([^<>()[\]\\.,;:\s@\']+(\.[^<>()[\]\\.,;:\s@\']+)*)|(\'.+\'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - return re.test(val); + var re = /^(([^<>()[\]\\.,;:\s@\']+(\.[^<>()[\]\\.,;:\s@\']+)*)|(\'.+\'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(val); } function validateTime(val) { - var re = /^([0-9]{2}\:[0-9]{2}\.[0-9]{3})$/; - return re.test(val); + var re = /^([0-9]{2}\:[0-9]{2}\.[0-9]{3})$/; + return re.test(val); } let lb_email_valid = false; @@ -46,101 +46,101 @@ let lb_name_valid = false; let lb_time_valid = false; function clear(logo, title) { - if (logo && logo !== '') { - document.querySelector('.lb-logo-front').innerHTML = ``; - document.querySelector('.lb-logo-back').innerHTML = ``; - } + if (logo && logo !== '') { + document.querySelector('.lb-logo-front').innerHTML = ``; + document.querySelector('.lb-logo-back').innerHTML = ``; + } - document.title = title - lb_title.innerText = title; + document.title = title + lb_title.innerText = title; - lb_email.value = ''; - lb_name.value = ''; - lb_time.value = ''; + lb_email.value = ''; + lb_name.value = ''; + lb_time.value = ''; } function submit() { - if (!lb_email_valid || !lb_name_valid || !lb_time_valid) { - return; - } - - let url = '/times'; - let data = { - league: league, - email: lb_email.value, - racerName: lb_name.value, - lapTime: lb_time.value, - }; - - console.log('req', data); - - $.ajax({ - url: url, - type: 'post', - data: JSON.stringify(data), - contentType: 'application/json; charset=UTF-8', - success: function (res, status) { - console.log('res', res); - if (res) { - popup('Saved'); - - lb_email.value = ''; - lb_name.value = ''; - lb_time.value = ''; - - // reload(); - } - }, - dataType: 'json', - }); + if (!lb_email_valid || !lb_name_valid || !lb_time_valid) { + return; + } + + let url = '/times'; + let data = { + league: league, + email: lb_email.value, + racerName: lb_name.value, + lapTime: lb_time.value, + }; + + console.log('req', data); + + $.ajax({ + url: url, + type: 'post', + data: JSON.stringify(data), + contentType: 'application/json; charset=UTF-8', + success: function (res, status) { + console.log('res', res); + if (res) { + popup('Saved'); + + lb_email.value = ''; + lb_name.value = ''; + lb_time.value = ''; + + // reload(); + } + }, + dataType: 'json', + }); } function popup(message) { - document.querySelector('.pop-message').innerText = message; + document.querySelector('.pop-message').innerText = message; - $('.pop-layer').fadeIn(); + $('.pop-layer').fadeIn(); - setTimeout(function () { - $('.pop-layer').fadeOut(); - }, 3000); + setTimeout(function () { + $('.pop-layer').fadeOut(); + }, 3000); } function setColor(e, b) { - if (b) { - e.classList.add('text_normal'); - e.classList.remove('text_red'); - } else { - e.classList.remove('text_normal'); - e.classList.add('text_red'); - } + if (b) { + e.classList.add('text_normal'); + e.classList.remove('text_red'); + } else { + e.classList.remove('text_normal'); + e.classList.add('text_red'); + } } document.getElementById('lb-email').addEventListener('keyup', function (event) { - if (validateEmail(lb_email.value)) { - lb_email_valid = true; - } else { - lb_email_valid = false; - } - setColor(lb_email, lb_email_valid); + if (validateEmail(lb_email.value)) { + lb_email_valid = true; + } else { + lb_email_valid = false; + } + setColor(lb_email, lb_email_valid); }); document.getElementById('lb-name').addEventListener('keyup', function (event) { - if (lb_name.value !== '') { - lb_name_valid = true; - } else { - lb_name_valid = false; - } + if (lb_name.value !== '') { + lb_name_valid = true; + } else { + lb_name_valid = false; + } }); document.getElementById('lb-time').addEventListener('keyup', function (event) { - if (validateTime(lb_time.value)) { - lb_time_valid = true; - } else { - lb_time_valid = false; - } - setColor(lb_time, lb_time_valid); + if (validateTime(lb_time.value)) { + lb_time_valid = true; + } else { + lb_time_valid = false; + } + setColor(lb_time, lb_time_valid); }); document.getElementById('lb-btn-submit').addEventListener('click', function (event) { - submit(); + submit(); }); diff --git a/public/timer.css b/public/timer.css index 9d0097a..f9fe4fc 100644 --- a/public/timer.css +++ b/public/timer.css @@ -1,105 +1,109 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } html { - background: #111; - color: #eee; - font-family: Menlo, Noto Mono; + background: #111; + color: #eee; + font-family: Menlo, Noto Mono; } .controls { - position: fixed; - text-align: center; - top: 1em; - width: 85%; + position: fixed; + text-align: center; + top: 1em; + width: 85%; } .button { - font-size: 3vw; - margin: 0 0.5em; - text-decoration: none; + font-size: 3vw; + margin: 0 0.5em; + text-decoration: none; } .button:first-child { - margin-left: 0; + margin-left: 0; } .button:last-child { - margin-right: 0; + margin-right: 0; } .button:hover { - color: #eee; + color: #eee; } .btn_start { - color: #3b7; + color: #3b7; } .btn_pause { - color: #fa3; + color: #fa3; } .btn_passed { - color: #4af; + color: #4af; } .btn_reset { - color: #e43; + color: #e43; } .btn_clear { - color: #ddd; + color: #ccc; +} + +.btn_reject { + color: #e3e; } .btn_drop { - color: #93e; + color: #93e; } .limiter { - font-size: 6vw; - position: fixed; - text-align: center; - top: 15%; - width: 85%; + font-size: 6vw; + position: fixed; + text-align: center; + top: 15%; + width: 85%; } .limiter_normal { - color: #ddd; + color: #ddd; } .limiter_yellow { - color: #ea5; + color: #ea5; } .limiter_red { - color: #e55; + color: #e55; } .display { - font-size: 15vw; - position: fixed; - text-align: center; - top: 35%; - width: 85%; + font-size: 15vw; + position: fixed; + text-align: center; + top: 35%; + width: 85%; } .bestlap { - font-size: 5vw; - position: fixed; - text-align: center; - top: 75%; - width: 85%; + font-size: 5vw; + position: fixed; + text-align: center; + top: 75%; + width: 85%; } .results { - font-size: 2vw; - left: 85%; - list-style: none; - position: fixed; - text-align: center; - top: 2em; - width: 15%; + font-size: 2vw; + left: 85%; + list-style: none; + position: fixed; + text-align: center; + top: 2em; + width: 15%; } diff --git a/public/timer.js b/public/timer.js index 754308e..5d4352c 100644 --- a/public/timer.js +++ b/public/timer.js @@ -3,242 +3,242 @@ */ class Timer { - constructor(limiter, display, bestlap, results) { - this.limiter = limiter; - this.display = display; - this.bestlap = bestlap; - this.results = results; - this.clear(); + constructor(limiter, display, bestlap, results) { + this.limiter = limiter; + this.display = display; + this.bestlap = bestlap; + this.results = results; + this.clear(); + } + + start() { + if (!this.time) { + this.time = performance.now(); } - - start() { - if (!this.time) { - this.time = performance.now(); - } - if (!this.running) { - this.running = true; - requestAnimationFrame(this.step.bind(this)); - } + if (!this.running) { + this.running = true; + requestAnimationFrame(this.step.bind(this)); } + } - pause() { - this.time = null; - this.running = false; - } + pause() { + this.time = null; + this.running = false; + } - passed() { - if (!this.time) { - return; - } - if (this.times[0] > 0 || this.times[1] > 3) { - this.record(); - this.restart(); - } + passed() { + if (!this.time) { + return; } - - reset() { - this.times = [0, 0, 0]; - this.print(); - this.pause(); + if (this.times[0] > 0 || this.times[1] > 3) { + this.record(); + this.restart(); } + } - clear() { - if (this.time) { - return; - } - this.records = []; - this.sorted = []; - this.limit = [4, 0, 0]; - this.reset(); - this.bestlap.innerText = ''; - while (this.results.lastChild) { - this.results.removeChild(this.results.lastChild); - } - } + reset() { + this.times = [0, 0, 0]; + this.print(); + this.pause(); + } - press() { - var stamp = new Date().getTime(); - if (!this.pressed || (stamp - this.pressed) > 3000) { - this.passed(); - this.pressed = new Date().getTime(); - } + clear() { + if (this.time) { + return; } - - restart() { - this.reset(); - this.start(); + this.records = []; + this.sorted = []; + this.limit = [4, 0, 0]; + this.reset(); + this.bestlap.innerText = ''; + while (this.results.lastChild) { + this.results.removeChild(this.results.lastChild); } + } - step(timestamp) { - if (!this.running) { - return; - } - this.calculate(timestamp); - this.time = timestamp; - this.print(); - requestAnimationFrame(this.step.bind(this)); + press() { + var stamp = new Date().getTime(); + if (!this.pressed || (stamp - this.pressed) > 3000) { + this.passed(); + this.pressed = new Date().getTime(); } + } - calculate(timestamp) { - var diff = timestamp - this.time; - - // limit - this.limit[2] -= diff; - if (this.limit[2] < 0) { - this.limit[2] += 1000; - this.limit[1] -= 1; - } - if (this.limit[1] < 0) { - this.limit[1] += 60; - this.limit[0] -= 1; - } - if (this.limit[0] < 0) { - this.limit[2] = 0 - this.limit[1] = 0 - this.limit[0] = 0 - this.pause(); - return; - } - - // times - this.times[2] += diff; - if (this.times[2] >= 1000) { - this.times[2] -= 1000; - this.times[1] += 1; - } - if (this.times[1] >= 60) { - this.times[1] -= 60; - this.times[0] += 1; - } - if (this.times[0] >= 60) { - this.times[0] -= 60 - } - if (this.times[2] < 0) { - this.times[2] = 0; - } - } + restart() { + this.reset(); + this.start(); + } - print() { - this.limiter.innerText = this.format(this.limit); - this.display.innerText = this.format(this.times); - - if (this.limit[0] <= 0 && this.limit[1] <= 30) { - this.limiter.classList.add("limiter_red"); - this.limiter.classList.remove("limiter_yellow"); - this.limiter.classList.remove("limiter_normal"); - } else if (this.limit[0] <= 0 && this.limit[1] <= 60) { - this.limiter.classList.add("limiter_yellow"); - this.limiter.classList.remove("limiter_normal"); - this.limiter.classList.remove("limiter_red"); - } else { - this.limiter.classList.add("limiter_normal"); - this.limiter.classList.remove("limiter_yellow"); - this.limiter.classList.remove("limiter_red"); - } + step(timestamp) { + if (!this.running) { + return; + } + this.calculate(timestamp); + this.time = timestamp; + this.print(); + requestAnimationFrame(this.step.bind(this)); + } + + calculate(timestamp) { + var diff = timestamp - this.time; + + // limit + this.limit[2] -= diff; + if (this.limit[2] < 0) { + this.limit[2] += 1000; + this.limit[1] -= 1; + } + if (this.limit[1] < 0) { + this.limit[1] += 60; + this.limit[0] -= 1; + } + if (this.limit[0] < 0) { + this.limit[2] = 0 + this.limit[1] = 0 + this.limit[0] = 0 + this.pause(); + return; } - record() { - let li = document.createElement('li'); - li.innerText = this.format(this.times); - this.results.appendChild(li); + // times + this.times[2] += diff; + if (this.times[2] >= 1000) { + this.times[2] -= 1000; + this.times[1] += 1; + } + if (this.times[1] >= 60) { + this.times[1] -= 60; + this.times[0] += 1; + } + if (this.times[0] >= 60) { + this.times[0] -= 60 + } + if (this.times[2] < 0) { + this.times[2] = 0; + } + } + + print() { + this.limiter.innerText = this.format(this.limit); + this.display.innerText = this.format(this.times); + + if (this.limit[0] <= 0 && this.limit[1] <= 30) { + this.limiter.classList.add("limiter_red"); + this.limiter.classList.remove("limiter_yellow"); + this.limiter.classList.remove("limiter_normal"); + } else if (this.limit[0] <= 0 && this.limit[1] <= 60) { + this.limiter.classList.add("limiter_yellow"); + this.limiter.classList.remove("limiter_normal"); + this.limiter.classList.remove("limiter_red"); + } else { + this.limiter.classList.add("limiter_normal"); + this.limiter.classList.remove("limiter_yellow"); + this.limiter.classList.remove("limiter_red"); + } + } - console.log(`record ${this.format(this.times)}`); + record() { + let li = document.createElement('li'); + li.innerText = this.format(this.times); + this.results.appendChild(li); - this.records.push(this.times); - this.sorted = this.records.slice(); - this.sorted.sort(compare); + console.log(`record ${this.format(this.times)}`); - this.bestlap.innerText = this.format(this.sorted[0]); - } + this.records.push(this.times); + this.sorted = this.records.slice(); + this.sorted.sort(compare); - squeeze() { - if (this.records.length == 0) { - return; - } + this.bestlap.innerText = this.format(this.sorted[0]); + } - let latest = this.records[this.records.length - 1]; + reject() { + if (this.records.length == 0) { + return; + } - console.log(`squeeze ${this.format(latest)}`); + let latest = this.records[this.records.length - 1]; - this.pause(); + console.log(`reject ${this.format(latest)}`); - this.times[2] += latest[2]; - this.times[1] += latest[1]; - this.times[0] += latest[0]; - if (this.times[2] >= 1000) { - this.times[2] -= 1000; - this.times[1] += 1; - } - if (this.times[1] >= 60) { - this.times[1] -= 60; - this.times[0] += 1; - } - if (this.times[0] >= 60) { - this.times[0] -= 60 - } - if (this.times[2] < 0) { - this.times[2] = 0; - } + this.pause(); - this.records.splice(this.records.length - 1, 1); - this.sorted = this.records.slice(); - this.sorted.sort(compare); + this.times[2] += latest[2]; + this.times[1] += latest[1]; + this.times[0] += latest[0]; + if (this.times[2] >= 1000) { + this.times[2] -= 1000; + this.times[1] += 1; + } + if (this.times[1] >= 60) { + this.times[1] -= 60; + this.times[0] += 1; + } + if (this.times[0] >= 60) { + this.times[0] -= 60 + } + if (this.times[2] < 0) { + this.times[2] = 0; + } - this.bestlap.innerText = this.format(this.sorted[0]); + this.records.splice(this.records.length - 1, 1); + this.sorted = this.records.slice(); + this.sorted.sort(compare); - this.results.removeChild(this.results.lastChild); + this.bestlap.innerText = this.format(this.sorted[0]); - this.start(); - } + this.results.removeChild(this.results.lastChild); - drop() { - console.log(`running drop`); - if (this.records.length == 0) { - return; - } - console.log(`drop ${this.results.lastChild.innerText}`); - this.results.removeChild(this.results.lastChild); - // update bestlap - this.records.splice(this.records.length - 1, 1); - this.sorted = this.records.slice(); - this.sorted.sort(compare); - this.bestlap.innerText = this.format(this.sorted[0]); - } + this.start(); + } - format(times) { - return `${lpad(times[0], 2)}:${lpad(times[1], 2)}.${lpad(Math.floor(times[2]), 3)}`; + drop() { + console.log(`running drop`); + if (this.records.length == 0) { + return; } + console.log(`drop ${this.results.lastChild.innerText}`); + this.results.removeChild(this.results.lastChild); + // update bestlap + this.records.splice(this.records.length - 1, 1); + this.sorted = this.records.slice(); + this.sorted.sort(compare); + this.bestlap.innerText = this.format(this.sorted[0]); + } + + format(times) { + return `${lpad(times[0], 2)}:${lpad(times[1], 2)}.${lpad(Math.floor(times[2]), 3)}`; + } } function compare(a, b) { - if (a[0] < b[0]) { - return -1; - } else if (a[0] > b[0]) { - return 1; - } - if (a[1] < b[1]) { - return -1; - } else if (a[1] > b[1]) { - return 1; - } - if (a[2] < b[2]) { - return -1; - } else if (a[2] > b[2]) { - return 1; - } - return 0; + if (a[0] < b[0]) { + return -1; + } else if (a[0] > b[0]) { + return 1; + } + if (a[1] < b[1]) { + return -1; + } else if (a[1] > b[1]) { + return 1; + } + if (a[2] < b[2]) { + return -1; + } else if (a[2] > b[2]) { + return 1; + } + return 0; } function lpad(value, count) { - var result = '000' + value.toString(); - return result.substr(result.length - count); + var result = '000' + value.toString(); + return result.substr(result.length - count); } let timer = new Timer( - document.querySelector('.limiter'), - document.querySelector('.display'), - document.querySelector('.bestlap'), - document.querySelector('.results') + document.querySelector('.limiter'), + document.querySelector('.display'), + document.querySelector('.bestlap'), + document.querySelector('.results') ); // ** socket.io // @@ -246,65 +246,65 @@ let timer = new Timer( let socket = io(); socket.on('timer', function (name) { - console.log(`socket timer ${name}`); - exec(name); + console.log(`socket timer ${name}`); + exec(name); }); function send(name) { - socket.emit('timer', name); + socket.emit('timer', name); } // ** socket.io // function exec(name) { - switch (name) { - case 'start': - timer.start(); - break; - case 'pause': - timer.pause(); - break; - case 'passed': - timer.passed(); - break; - case 'press': - timer.press(); - break; - case 'reset': - timer.reset(); - break; - case 'clear': - timer.clear(); - break; - case 'squeeze': - timer.squeeze(); - break; - case 'drop': - timer.drop(); - break; - } + switch (name) { + case 'start': + timer.start(); + break; + case 'pause': + timer.pause(); + break; + case 'passed': + timer.passed(); + break; + case 'press': + timer.press(); + break; + case 'reset': + timer.reset(); + break; + case 'clear': + timer.clear(); + break; + case 'reject': + timer.reject(); + break; + case 'drop': + timer.drop(); + break; + } } let key_map = { - '81': 'start', // q - '87': 'pause', // w - '69': 'passed', // e - '82': 'reset', // r - '84': 'clear', // t - '89': 'squeeze', // y - '68': 'drop', // d + '81': 'start', // q + '87': 'pause', // w + '69': 'passed', // e + '82': 'reset', // r + '84': 'clear', // t + '89': 'reject', // y + '68': 'drop', // d }; document.addEventListener('keydown', function (event) { - console.log(`keydown ${event.keyCode} : ${key_map[event.keyCode]}`); + console.log(`keydown ${event.keyCode} : ${key_map[event.keyCode]}`); - send(key_map[event.keyCode]); + send(key_map[event.keyCode]); }); function btn_listener(event) { - let name = event.target.id.substring(4); + let name = event.target.id.substring(4); - exec(name); + exec(name); } document.getElementById('btn_start').addEventListener('click', btn_listener); @@ -312,4 +312,5 @@ document.getElementById('btn_pause').addEventListener('click', btn_listener); document.getElementById('btn_passed').addEventListener('click', btn_listener); document.getElementById('btn_reset').addEventListener('click', btn_listener); document.getElementById('btn_clear').addEventListener('click', btn_listener); +document.getElementById('btn_reject').addEventListener('click', btn_listener); document.getElementById('btn_drop').addEventListener('click', btn_listener); diff --git a/public/timer.mjs b/public/timer.mjs index a311d89..01ee410 100644 --- a/public/timer.mjs +++ b/public/timer.mjs @@ -3,228 +3,228 @@ */ class Timer { - constructor(limiter, display, bestlap, results) { - this.limiter = limiter; - this.display = display; - this.bestlap = bestlap; - this.results = results; - this.clear(); + constructor(limiter, display, bestlap, results) { + this.limiter = limiter; + this.display = display; + this.bestlap = bestlap; + this.results = results; + this.clear(); + } + + start() { + if (!this.time) { + this.time = performance.now(); } - - start() { - if (!this.time) { - this.time = performance.now(); - } - if (!this.running) { - this.running = true; - requestAnimationFrame(this.step.bind(this)); - } + if (!this.running) { + this.running = true; + requestAnimationFrame(this.step.bind(this)); } + } - pause() { - this.time = null; - this.running = false; - } + pause() { + this.time = null; + this.running = false; + } - passed() { - if (!this.time) { - return; - } - if (this.times[0] > 0 || this.times[1] > 3) { - this.record(); - this.restart(); - } + passed() { + if (!this.time) { + return; } - - reset() { - this.times = [0, 0, 0]; - this.print(); - this.pause(); + if (this.times[0] > 0 || this.times[1] > 3) { + this.record(); + this.restart(); } + } - clear() { - if (this.time) { - return; - } - this.records = []; - this.sorted = []; - this.limit = [4, 0, 0]; - this.reset(); - this.bestlap.innerText = ''; - while (this.results.lastChild) { - this.results.removeChild(this.results.lastChild); - } - } + reset() { + this.times = [0, 0, 0]; + this.print(); + this.pause(); + } - press() { - var stamp = new Date().getTime(); - if (!this.pressed || (stamp - this.pressed) > 3000) { - this.passed(); - this.pressed = new Date().getTime(); - } + clear() { + if (this.time) { + return; } - - restart() { - this.reset(); - this.start(); + this.records = []; + this.sorted = []; + this.limit = [4, 0, 0]; + this.reset(); + this.bestlap.innerText = ''; + while (this.results.lastChild) { + this.results.removeChild(this.results.lastChild); } + } - step(timestamp) { - if (!this.running) { - return; - } - this.calculate(timestamp); - this.time = timestamp; - this.print(); - requestAnimationFrame(this.step.bind(this)); + press() { + var stamp = new Date().getTime(); + if (!this.pressed || (stamp - this.pressed) > 3000) { + this.passed(); + this.pressed = new Date().getTime(); } + } + + restart() { + this.reset(); + this.start(); + } - calculate(timestamp) { - var diff = timestamp - this.time; - - // limit - this.limit[2] -= diff; - if (this.limit[2] < 0) { - this.limit[2] += 1000; - this.limit[1] -= 1; - } - if (this.limit[1] < 0) { - this.limit[1] += 60; - this.limit[0] -= 1; - } - if (this.limit[0] < 0) { - this.limit[2] = 0 - this.limit[1] = 0 - this.limit[0] = 0 - this.pause(); - return; - } - - // times - this.times[2] += diff; - if (this.times[2] >= 1000) { - this.times[2] -= 1000; - this.times[1] += 1; - } - if (this.times[1] >= 60) { - this.times[1] -= 60; - this.times[0] += 1; - } - if (this.times[0] >= 60) { - this.times[0] -= 60 - } - if (this.times[2] < 0) { - this.times[2] = 0; - } + step(timestamp) { + if (!this.running) { + return; + } + this.calculate(timestamp); + this.time = timestamp; + this.print(); + requestAnimationFrame(this.step.bind(this)); + } + + calculate(timestamp) { + var diff = timestamp - this.time; + + // limit + this.limit[2] -= diff; + if (this.limit[2] < 0) { + this.limit[2] += 1000; + this.limit[1] -= 1; + } + if (this.limit[1] < 0) { + this.limit[1] += 60; + this.limit[0] -= 1; + } + if (this.limit[0] < 0) { + this.limit[2] = 0 + this.limit[1] = 0 + this.limit[0] = 0 + this.pause(); + return; } - print() { - this.limiter.innerText = this.format(this.limit); - this.display.innerText = this.format(this.times); - - if (this.limit[0] <= 0 && this.limit[1] <= 30) { - this.limiter.classList.add("limiter_red"); - this.limiter.classList.remove("limiter_yellow"); - this.limiter.classList.remove("limiter_normal"); - } else if (this.limit[0] <= 0 && this.limit[1] <= 60) { - this.limiter.classList.add("limiter_yellow"); - this.limiter.classList.remove("limiter_normal"); - this.limiter.classList.remove("limiter_red"); - } else { - this.limiter.classList.add("limiter_normal"); - this.limiter.classList.remove("limiter_yellow"); - this.limiter.classList.remove("limiter_red"); - } + // times + this.times[2] += diff; + if (this.times[2] >= 1000) { + this.times[2] -= 1000; + this.times[1] += 1; + } + if (this.times[1] >= 60) { + this.times[1] -= 60; + this.times[0] += 1; + } + if (this.times[0] >= 60) { + this.times[0] -= 60 + } + if (this.times[2] < 0) { + this.times[2] = 0; + } + } + + print() { + this.limiter.innerText = this.format(this.limit); + this.display.innerText = this.format(this.times); + + if (this.limit[0] <= 0 && this.limit[1] <= 30) { + this.limiter.classList.add("limiter_red"); + this.limiter.classList.remove("limiter_yellow"); + this.limiter.classList.remove("limiter_normal"); + } else if (this.limit[0] <= 0 && this.limit[1] <= 60) { + this.limiter.classList.add("limiter_yellow"); + this.limiter.classList.remove("limiter_normal"); + this.limiter.classList.remove("limiter_red"); + } else { + this.limiter.classList.add("limiter_normal"); + this.limiter.classList.remove("limiter_yellow"); + this.limiter.classList.remove("limiter_red"); } + } - record() { - let li = document.createElement('li'); - li.innerText = this.format(this.times); - this.results.appendChild(li); + record() { + let li = document.createElement('li'); + li.innerText = this.format(this.times); + this.results.appendChild(li); - console.log(`record ${this.format(this.times)}`); + console.log(`record ${this.format(this.times)}`); - this.records.push(this.times); - this.sorted = this.records.slice(); - this.sorted.sort(compare); + this.records.push(this.times); + this.sorted = this.records.slice(); + this.sorted.sort(compare); - this.bestlap.innerText = this.format(this.sorted[0]); - } + this.bestlap.innerText = this.format(this.sorted[0]); + } - squeeze() { - if (this.records.length == 0) { - return; - } + squeeze() { + if (this.records.length == 0) { + return; + } - let latest = this.records[this.records.length - 1]; + let latest = this.records[this.records.length - 1]; - console.log(`squeeze ${this.format(latest)}`); + console.log(`squeeze ${this.format(latest)}`); - this.pause(); + this.pause(); - this.times[2] += latest[2]; - this.times[1] += latest[1]; - this.times[0] += latest[0]; - if (this.times[2] >= 1000) { - this.times[2] -= 1000; - this.times[1] += 1; - } - if (this.times[1] >= 60) { - this.times[1] -= 60; - this.times[0] += 1; - } - if (this.times[0] >= 60) { - this.times[0] -= 60 - } - if (this.times[2] < 0) { - this.times[2] = 0; - } + this.times[2] += latest[2]; + this.times[1] += latest[1]; + this.times[0] += latest[0]; + if (this.times[2] >= 1000) { + this.times[2] -= 1000; + this.times[1] += 1; + } + if (this.times[1] >= 60) { + this.times[1] -= 60; + this.times[0] += 1; + } + if (this.times[0] >= 60) { + this.times[0] -= 60 + } + if (this.times[2] < 0) { + this.times[2] = 0; + } - this.records.splice(this.records.length - 1, 1); - this.sorted = this.records.slice(); - this.sorted.sort(compare); + this.records.splice(this.records.length - 1, 1); + this.sorted = this.records.slice(); + this.sorted.sort(compare); - this.bestlap.innerText = this.format(this.sorted[0]); + this.bestlap.innerText = this.format(this.sorted[0]); - this.results.removeChild(this.results.lastChild); + this.results.removeChild(this.results.lastChild); - this.start(); - } + this.start(); + } - format(times) { - return `${lpad(times[0], 2)}:${lpad(times[1], 2)}.${lpad(Math.floor(times[2]), 3)}`; - } + format(times) { + return `${lpad(times[0], 2)}:${lpad(times[1], 2)}.${lpad(Math.floor(times[2]), 3)}`; + } } function compare(a, b) { - if (a[0] < b[0]) { - return -1; - } else if (a[0] > b[0]) { - return 1; - } - if (a[1] < b[1]) { - return -1; - } else if (a[1] > b[1]) { - return 1; - } - if (a[2] < b[2]) { - return -1; - } else if (a[2] > b[2]) { - return 1; - } - return 0; + if (a[0] < b[0]) { + return -1; + } else if (a[0] > b[0]) { + return 1; + } + if (a[1] < b[1]) { + return -1; + } else if (a[1] > b[1]) { + return 1; + } + if (a[2] < b[2]) { + return -1; + } else if (a[2] > b[2]) { + return 1; + } + return 0; } function lpad(value, count) { - var result = '000' + value.toString(); - return result.substr(result.length - count); + var result = '000' + value.toString(); + return result.substr(result.length - count); } let timer = new Timer( - document.querySelector('.limiter'), - document.querySelector('.display'), - document.querySelector('.bestlap'), - document.querySelector('.results') + document.querySelector('.limiter'), + document.querySelector('.display'), + document.querySelector('.bestlap'), + document.querySelector('.results') ); // ** WebSocket // @@ -239,76 +239,76 @@ ws.onmessage = message; ws.onerror = console.log; function open() { - console.log('ws open'); + console.log('ws open'); } function close() { - console.log('ws close'); + console.log('ws close'); } function message(e) { - let msg = JSON.parse(e.data); + let msg = JSON.parse(e.data); - console.log(`ws message : ${msg.text}`); + console.log(`ws message : ${msg.text}`); - exec(msg.text); + exec(msg.text); } function send(name) { - var msg = { - type: 'message', - text: name - }; - ws.send(JSON.stringify(msg)); + var msg = { + type: 'message', + text: name + }; + ws.send(JSON.stringify(msg)); } // WebSocket ** // function exec(name) { - switch (name) { - case 'start': - timer.start(); - break; - case 'pause': - timer.pause(); - break; - case 'passed': - timer.passed(); - break; - case 'press': - timer.press(); - break; - case 'reset': - timer.reset(); - break; - case 'clear': - timer.clear(); - break; - case 'squeeze': - timer.squeeze(); - break; - } + switch (name) { + case 'start': + timer.start(); + break; + case 'pause': + timer.pause(); + break; + case 'passed': + timer.passed(); + break; + case 'press': + timer.press(); + break; + case 'reset': + timer.reset(); + break; + case 'clear': + timer.clear(); + break; + case 'squeeze': + timer.squeeze(); + break; + } } let key_map = { - '81': 'start', // q - '87': 'pause', // w - '69': 'passed', // e - '82': 'reset', // r - '84': 'clear', // t - '89': 'squeeze', // y + '81': 'start', // q + '87': 'pause', // w + '69': 'passed', // e + '82': 'reset', // r + '84': 'clear', // t + '89': 'squeeze', // y }; document.addEventListener('keydown', function (event) { - console.log(`keydown ${event.keyCode} : ${key_map[event.keyCode]}`); + console.log(`keydown ${event.keyCode} : ${key_map[event.keyCode]}`); - send(key_map[event.keyCode]); + send(key_map[event.keyCode]); }); function btn_listener(event) { - let name = event.target.id.substring(4); + let name = event.target.id.substring(4); - exec(name); + exec(name); } document.getElementById('btn_start').addEventListener('click', btn_listener); diff --git a/run.sh b/run.sh index 630c5b3..84a0398 100755 --- a/run.sh +++ b/run.sh @@ -4,120 +4,120 @@ SHELL_DIR=$(dirname $0) CMD=${1:-status} -command -v tput > /dev/null || TPUT=false +command -v tput >/dev/null || TPUT=false _echo() { - if [ -z ${TPUT} ] && [ ! -z $2 ]; then - echo -e "$(tput setaf $2)$1$(tput sgr0)" - else - echo -e "$1" - fi + if [ -z ${TPUT} ] && [ ! -z $2 ]; then + echo -e "$(tput setaf $2)$1$(tput sgr0)" + else + echo -e "$1" + fi } _read() { - if [ -z ${TPUT} ]; then - read -p "$(tput setaf 6)$1$(tput sgr0)" ANSWER - else - read -p "$1" ANSWER - fi + if [ -z ${TPUT} ]; then + read -p "$(tput setaf 6)$1$(tput sgr0)" ANSWER + else + read -p "$1" ANSWER + fi } _result() { - _echo "# $@" 4 + _echo "# $@" 4 } _command() { - _echo "$ $@" 3 + _echo "$ $@" 3 } _success() { - _echo "+ $@" 2 - exit 0 + _echo "+ $@" 2 + exit 0 } _error() { - _echo "- $@" 1 - exit 1 + _echo "- $@" 1 + exit 1 } _get_pid() { - PID=$(ps -ef | grep node | grep " server[.]js" | head -1 | awk '{print $2}' | xargs) + PID=$(ps -ef | grep node | grep " server[.]js" | head -1 | awk '{print $2}' | xargs) } _stop() { - _get_pid + _get_pid - if [ "${PID}" != "" ]; then - _command "kill -9 ${PID}" - kill -9 ${PID} + if [ "${PID}" != "" ]; then + _command "kill -9 ${PID}" + kill -9 ${PID} - _result "deepracer-timer is killed: ${PID}" - fi + _result "deepracer-timer is killed: ${PID}" + fi } _status() { - _get_pid + _get_pid - if [ "${PID}" != "" ]; then - _result "deepracer-timer was started: ${PID}" - else - _result "deepracer-timer is stopped" - fi + if [ "${PID}" != "" ]; then + _result "deepracer-timer was started: ${PID}" + else + _result "deepracer-timer is stopped" + fi } _start() { - _get_pid + _get_pid - if [ "${PID}" != "" ]; then - _error "deepracer-timer has already started: ${PID}" - fi + if [ "${PID}" != "" ]; then + _error "deepracer-timer has already started: ${PID}" + fi - pushd ${SHELL_DIR} + pushd ${SHELL_DIR} - echo "# _start" > nohup.out - _command "nohup node server.js &" - nohup node server.js & + echo "# _start" >nohup.out + _command "nohup node server.js &" + nohup node server.js & - popd + popd - _get_pid + _get_pid - if [ "${PID}" != "" ]; then - _result "deepracer-timer was started: ${PID}" - fi + if [ "${PID}" != "" ]; then + _result "deepracer-timer was started: ${PID}" + fi } _init() { - pushd ${SHELL_DIR} - git pull - npm run build - popd + pushd ${SHELL_DIR} + git pull + npm run build + popd } _log() { - tail -n 500 -f ${SHELL_DIR}/nohup.out + tail -n 500 -f ${SHELL_DIR}/nohup.out } case ${CMD} in - init) - _stop - _init - _start - ;; - status) - _status - ;; - start) - _start - ;; - restart) - _stop - _start - ;; - stop) - _stop - ;; - log) - _log - ;; +init) + _stop + _init + _start + ;; +status) + _status + ;; +start) + _start + ;; +restart) + _stop + _start + ;; +stop) + _stop + ;; +log) + _log + ;; esac diff --git a/server.js b/server.js index 0fe543e..b6391e6 100644 --- a/server.js +++ b/server.js @@ -1,6 +1,6 @@ -const request = require('request'), - express = require('express'), - gpio = require('rpi-gpio'); +const request = require('request'); +const express = require('express'); +const gpio = require('rpi-gpio'); const app = express(); const http = require('http').Server(app); @@ -18,120 +18,120 @@ app.use(express.static('public')); app.set('view engine', 'ejs'); app.get('/', function (req, res) { - res.render('index.ejs', {}); + res.render('index.ejs', {}); }); app.get('/league/:league', function (req, res) { - const league = req.params.league; - res.render('league.ejs', { - league: league - }); + const league = req.params.league; + res.render('league.ejs', { + league: league + }); }); app.get('/submit/:league', function (req, res) { - const league = req.params.league; - res.render('submit.ejs', { - league: league, - }); + const league = req.params.league; + res.render('submit.ejs', { + league: league, + }); }); app.get('/times/:league', function (req, res) { - const league = req.params.league; - const options = { - uri: apiurl, - qs: { - league: league, - } - }; - request(options, function (err, response, body) { - if (response.statusCode < 200 || response.statusCode > 399) { - return res.status(response.statusCode).json({}); - } - return res.status(200).json(JSON.parse(body)); - }) + const league = req.params.league; + const options = { + uri: apiurl, + qs: { + league: league, + } + }; + request(options, function (err, response, body) { + if (response.statusCode < 200 || response.statusCode > 399) { + return res.status(response.statusCode).json({}); + } + return res.status(200).json(JSON.parse(body)); + }) }); app.post('/times', function (req, res) { - console.log('times req : ', req.body); - - let options = { - uri: apiurl, - method: 'POST', - body: req.body, - json: true, - }; - request.post(options, function (err, response, body) { - console.log('times res : ', body); - - io.sockets.emit('league', 'reload'); - if (response.statusCode < 200 || response.statusCode > 399) { - return res.status(response.statusCode).json({}); - } - return res.status(200).json({}); - }) + console.log('times req : ', req.body); + + let options = { + uri: apiurl, + method: 'POST', + body: req.body, + json: true, + }; + request.post(options, function (err, response, body) { + console.log('times res : ', body); + + io.sockets.emit('league', 'reload'); + if (response.statusCode < 200 || response.statusCode > 399) { + return res.status(response.statusCode).json({}); + } + return res.status(200).json({}); + }) }); app.get('/timer', function (req, res) { - res.render('timer.ejs', {}); + res.render('timer.ejs', {}); }); app.get('/timer/:name', function (req, res) { - const name = req.params.name; - io.sockets.emit('timer', `${name}`); - return res.status(200).json({ - result: true, - timer: name, - }); + const name = req.params.name; + io.sockets.emit('timer', `${name}`); + return res.status(200).json({ + result: true, + timer: name, + }); }); app.get('/reward', function (req, res) { - console.log('reward req : ', req.body); + console.log('reward req : ', req.body); - return res.status(200).json({ - result: true, - }); + return res.status(200).json({ + result: true, + }); }); // sockets io.on('connection', function (socket) { - console.log('connection : ', socket.id); - sockets[socket.id] = socket; - - socket.on('disconnect', function () { - console.log('disconnect : ', socket.id); - delete sockets[socket.id]; - - // no more sockets - if (Object.keys(sockets).length == 0) { - console.log('no more sockets.'); - } - }); - - socket.on('timer', function (name) { - console.log('timer : ', socket.id, name); - io.sockets.emit('timer', `${name}`); - }); - - socket.on('league', function (name) { - console.log('league : ', socket.id, name); - io.sockets.emit('league', `${name}`); - }); + console.log('connection : ', socket.id); + sockets[socket.id] = socket; + + socket.on('disconnect', function () { + console.log('disconnect : ', socket.id); + delete sockets[socket.id]; + + // no more sockets + if (Object.keys(sockets).length == 0) { + console.log('no more sockets.'); + } + }); + + socket.on('timer', function (name) { + console.log('timer : ', socket.id, name); + io.sockets.emit('timer', `${name}`); + }); + + socket.on('league', function (name) { + console.log('league : ', socket.id, name); + io.sockets.emit('league', `${name}`); + }); }); // http http.listen(port, function () { - console.log(`Listening on port ${port}!`); + console.log(`Listening on port ${port}!`); }); // gpio gpio.on('change', function (channel, value) { - console.log(`Channel ${channel} value is now ${value} \t- ${(Math.random() * 100000)}`); - switch (channel) { - case 11: - case 13: - io.sockets.emit('timer', 'press'); - break; - } + console.log(`Channel ${channel} value is now ${value} \t- ${(Math.random() * 100000)}`); + switch (channel) { + case 11: + case 13: + io.sockets.emit('timer', 'press'); + break; + } }); gpio.setup(11, gpio.DIR_IN, gpio.EDGE_BOTH); gpio.setup(13, gpio.DIR_IN, gpio.EDGE_BOTH); diff --git a/views/index.ejs b/views/index.ejs index 7b62033..48cd9e8 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -2,28 +2,25 @@ - - DeepRacer - - + + DeepRacer + + - @@ -31,9 +28,9 @@ diff --git a/views/league.ejs b/views/league.ejs index 5585df6..0796e79 100644 --- a/views/league.ejs +++ b/views/league.ejs @@ -2,46 +2,46 @@ - - DeepRacer Leaderboard - - - + + DeepRacer Leaderboard + + + - - -

- -
-
-
-
Rank
-
Name
-
Time
-
-
+ + +

+ +
+
+
+
Rank
+
Name
+
Time
+
+
-