From d0a1e2ccfcc1957139830929e85b8710ca59442a Mon Sep 17 00:00:00 2001 From: stefan-pribicevic Date: Sun, 26 Jul 2020 00:49:46 +0200 Subject: [PATCH 1/2] Remove unnecessary commented code. --- script.js | 130 ------------------------------------------------------ 1 file changed, 130 deletions(-) diff --git a/script.js b/script.js index 874437f..3452c61 100644 --- a/script.js +++ b/script.js @@ -124,136 +124,6 @@ if ('ontouchstart' in window) { }; } -// loopTapApp.setArc(); - -// let arc = []; -// let score = 0; - -// let state = 'init'; - -// const compose = (...fs) => x => fs.reduce((acc, f) => f(acc), x); - -// function polarToCartesian(centerX, centerY, radius, angleInDegrees) { -// const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0; -// return { -// x: centerX + radius * Math.cos(angleInRadians), -// y: centerY + radius * Math.sin(angleInRadians) -// }; -// } - -// function describeArc(x, y, radius, startAngle, endAngle) { -// const start = polarToCartesian(x, y, radius, endAngle); -// const end = polarToCartesian(x, y, radius, startAngle); -// const arcFlag = endAngle - startAngle <= 180 ? '0' : '1'; -// const d = ['M', start.x, start.y, 'A', radius, radius, 0, arcFlag, 0, end.x, end.y].join(' '); -// return d; -// } - -// function angle(cx, cy, ex, ey) { -// const dy = ey - cy; -// const dx = ex - cx; -// let theta = Math.atan2(dx, -dy); -// theta *= 180 / Math.PI; -// theta = theta < 0 ? theta + 360 : theta; -// return theta; -// } - -// function getBallAngle() { -// const bg = document.getElementById('bg').getBoundingClientRect(); -// const bgCenter = { x: bg.left + bg.width / 2, y: bg.top + bg.height / 2 }; -// const ball = document.getElementById('ball').getBoundingClientRect(); -// const ballCenter = { x: ball.left + ball.width / 2, y: ball.top + ball.height / 2 }; -// return angle(bgCenter.x, bgCenter.y, ballCenter.x, ballCenter.y); -// } - -// function setArc() { -// const random = (i, j) => Math.floor(Math.random() * (j - i)) + i; -// arc = []; -// arc.push(random(0, 300)); -// arc.push(random(arc[0] + 10, arc[0] + 110)); -// arc[1] = arc[1] > 360 ? 360 : arc[1]; -// document.getElementById('arc').setAttribute('d', describeArc(50, 50, 40, arc[0], arc[1])); -// document.getElementById('arc').style.stroke = colors[Math.floor(score / 10)]; -// } - -// function playBtn() { -// document.getElementById('play').style.display = state == 'started' ? 'none' : 'block'; -// } - -// function scoreField() { -// const scoreEle = document.getElementById('score'); - -// scoreEle.textContent = score; -// scoreEle.style.display = state == 'started' ? 'block' : 'none'; -// } - -// function animateBall() { -// const ballEle = document.getElementById('ball'); -// if (state == 'started') { -// ballEle.style.animationDuration = 2000 - score * 100 + 'ms'; -// } else { -// ballEle.style.animationPlayState = 'paused'; -// } -// } - -// function finalScore() { -// const finalScoreEle = document.getElementById('finalscore'); -// finalScoreEle.textContent = score; -// finalScoreEle.style.display = state == 'stopped' ? 'block' : 'none'; -// } - -// function best() { -// const bestEle = document.getElementById('best'); -// if (window.localStorage.best > 0) { -// bestEle.textContent = 'Best: ' + window.localStorage.best; -// bestEle.style.display = state == 'started' ? 'none' : 'block'; -// } -// } -// function hideTip() { -// document.getElementById('tip').style.display = 'none'; -// document.getElementById('about').style.display = 'none'; -// } - -// function startPlay() { -// state = 'started'; -// score = 0; -// compose(hideTip, setArc, playBtn, animateBall, scoreField, finalScore, best)(); -// document.getElementById('ball').style.animationPlayState = 'running'; - -// // Add the event listnerers for tap sensing -// if (is_touch_device()) { -// window.addEventListener('touchstart', tap); -// } else { -// window.addEventListener('mousedown', tap); -// window.onkeypress = e => { -// if (e.keyCode == 32) tap(e); -// }; -// } -// } -// function stopPlay() { -// state = 'stopped'; -// if (score > window.localStorage.best) window.localStorage.best = score; -// compose(playBtn, animateBall, scoreField, finalScore, best)(); -// } - -// function tap(e) { -// e.preventDefault(); -// e.stopPropagation(); -// const ballAngle = getBallAngle(); -// // adding a 5 for better accuracy as the arc stroke extends beyond the angle. -// if (ballAngle + 6 > arc[0] && ballAngle - 6 < arc[1]) { -// score++; -// compose(scoreField, animateBall, setArc)(); -// } else stopPlay(); -// } -// document.getElementById('play').addEventListener('click', startPlay); - -// // Set an initial arc just for aesthetics -// setArc(); - -// // set best localstorage if there is not localstorage variable -// if (!window.localStorage.best) window.localStorage.best = 0; - if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } From 40153660654ee724d601a95382e3795c1514351f Mon Sep 17 00:00:00 2001 From: stefan-pribicevic Date: Sun, 26 Jul 2020 00:51:27 +0200 Subject: [PATCH 2/2] Make best score work. --- index.html | 2 +- script.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7476ea2..b942faa 100755 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@ class="score" id="best" v-if="state === 'stopped'" - v-html="'Best: '+score" + v-html="`Best: ${window.localStorage.bestScore}`" > diff --git a/script.js b/script.js index 3452c61..54f2d13 100644 --- a/script.js +++ b/script.js @@ -94,7 +94,7 @@ const loopTapApp = new Vue({ stopPlay: function() { if (this.state === 'started') { this.state = 'stopped'; - if (this.score > window.localStorage.best) window.localStorage.best = this.score; + if (this.score > window.localStorage.getItem('bestScore')) window.localStorage.setItem('bestScore', this.score); } }, @@ -124,6 +124,8 @@ if ('ontouchstart' in window) { }; } +window.localStorage.setItem('bestScore', 0); + if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }