diff --git a/app.css b/app.css index b1ed244..692a27e 100644 --- a/app.css +++ b/app.css @@ -133,7 +133,7 @@ ul { height: 28px; } -@media screen and (max-width: 940px) { +@media screen and (max-width: 1280px) { canvas { margin-top: 5rem; height: 20rem; diff --git a/src/app.ts b/src/app.ts index c199ceb..f944e9c 100644 --- a/src/app.ts +++ b/src/app.ts @@ -47,6 +47,7 @@ const WHEEL_OFFSET = 5; const X_CENTER = canvasEl.width / 2; const Y_CENTER = canvasEl.height / 2; const RADIUS = canvasEl.height / 2 - WHEEL_OFFSET; +const TIME_TO_REDRAW = 1000 / ANIMATION_FPS; const itemsList = new ItemList(MAXIMUM_SIZE); const items: MenuItem[] = []; @@ -73,7 +74,6 @@ function configure() { }); } - function addRemoveItem() { addButtonEl.addEventListener("click", () => { if (!animationId) { @@ -154,28 +154,6 @@ function removeAllItems() { }); } - -function lightDarkMode() { - lightDarkModeEl.addEventListener("click", () => { - modeEl.animate([{ transform: "rotate(360deg)" }], { - duration: 500, - }); - - if (LightDarkMode.currentMode == "dark") { - modeEl.src = "static/sun.png"; - bodyEl.style.backgroundColor = "#FAF9F6"; - bodyEl.style.color = "black"; - LightDarkMode.currentMode = "light"; - } else { - modeEl.src = "static/moon.png"; - bodyEl.style.backgroundColor = "#121212"; - bodyEl.style.color = "white"; - LightDarkMode.currentMode = "dark"; - } - }); -} - - function updateCounter() { counterEl.textContent = `${itemsList.items.length}/${MAXIMUM_SIZE}`; animateCounter(); @@ -190,20 +168,29 @@ function animateCounter() { ); } -function animateWinner() { - winnerEl.animate( - { - opacity: [0.5, 1], - easing: ["ease-in", "ease-out"], - }, - 1000 - ); +function lightDarkMode() { + lightDarkModeEl.addEventListener("click", () => { + modeEl.animate([{ transform: "rotate(360deg)" }], { + duration: 500, + }); + + if (LightDarkMode.currentMode === "dark") { + modeEl.src = "static/sun.png"; + bodyEl.style.backgroundColor = "#FAF9F6"; + bodyEl.style.color = "black"; + LightDarkMode.currentMode = "light"; + } else { + modeEl.src = "static/moon.png"; + bodyEl.style.backgroundColor = "#121212"; + bodyEl.style.color = "white"; + LightDarkMode.currentMode = "dark"; + } + }); } function drawRouletteWheel(angle: number) { const segmentWidth = 360 / items.length; - let startAngle = angle; - let endAngle = segmentWidth + startAngle; + let endAngle = segmentWidth + angle; ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); ctx.beginPath(); ctx.save(); @@ -215,19 +202,21 @@ function drawRouletteWheel(angle: number) { ctx.fill(); ctx.stroke(); ctx.restore(); - ctx.arc(X_CENTER, Y_CENTER, RADIUS, 0, Math.PI * 2, true); + ctx.arc(X_CENTER, Y_CENTER, RADIUS, 0, Math.PI * 2); ctx.stroke(); for (let i = 0; i < items.length; i++) { ctx.beginPath(); ctx.lineTo(X_CENTER, Y_CENTER); - ctx.font = "bold 24px verdana, sans-serif"; + console.log(outerHeight); + console.log(outerWidth); + if (outerWidth < 1280) ctx.font = "bold 10px verdana, sans-serif"; + else ctx.font = "bold 24px verdana, sans-serif"; ctx.arc( X_CENTER, Y_CENTER, RADIUS, - (startAngle * Math.PI) / 180, - (endAngle * Math.PI) / 180, - false + (angle * Math.PI) / 180, + (endAngle * Math.PI) / 180 ); ctx.lineTo(X_CENTER, Y_CENTER); ctx.fillStyle = itemsList.items[i].color; @@ -236,11 +225,11 @@ function drawRouletteWheel(angle: number) { ctx.fillStyle = "black"; const text = itemsList.items[i].name; if (items.length > 1) { - const angleVal = ((startAngle + segmentWidth / 2) * Math.PI) / 180; + const angleVal = ((angle + segmentWidth / 2) * Math.PI) / 180; const xT = X_CENTER + (Math.cos(angleVal) * RADIUS) / 2; const xY = Y_CENTER + (Math.sin(angleVal) * RADIUS) / 2; ctx.translate(xT, xY); - ctx.rotate(Math.PI / items.length + (Math.PI / 180) * startAngle); + ctx.rotate(Math.PI / items.length + (Math.PI / 180) * angle); ctx.fillText(text, -ctx.measureText(text).width / 2, 0); } else { ctx.fillText(text, X_CENTER, Y_CENTER); @@ -249,7 +238,7 @@ function drawRouletteWheel(angle: number) { if (items.length !== 1) { ctx.stroke(); } - startAngle += segmentWidth; + angle += segmentWidth; endAngle += segmentWidth; } } @@ -262,44 +251,37 @@ let winner: string; let endTime: number; function startRoulette() { - if (!animationId) { - const winnerCleared = clearWinner(); - if (winnerCleared) { - drawRouletteWheel(0); - } else { - addButtonEl.style.background = "#C0C0C0"; - removeAllItemsButtonEl.style.background = "#C0C0C0"; - guessItemIndex = Math.floor(Math.random() * items.length); - winner = itemsList.items[guessItemIndex].name; - segmentAngle = 360 / items.length; - totalTime = 0; - maxAngle = - 360 * ROTATIONS + - (items.length - 1 - guessItemIndex) * segmentAngle + - Math.random() * segmentAngle; - endTime = (maxAngle / rotate_by) * (1000 / ANIMATION_FPS); - beginAnimateRoulette(); + if (items.length > 1) { + if (!animationId) { + const winnerCleared = clearWinner(); + if (winnerCleared) { + drawRouletteWheel(0); + } else { + addButtonEl.style.background = "#C0C0C0"; + removeAllItemsButtonEl.style.background = "#C0C0C0"; + guessItemIndex = Math.floor(Math.random() * items.length); + winner = itemsList.items[guessItemIndex].name; + segmentAngle = 360 / items.length; + totalTime = 0; + maxAngle = + 360 * ROTATIONS + + (items.length - 1 - guessItemIndex) * segmentAngle + + Math.random() * segmentAngle; + endTime = (maxAngle / rotate_by) * TIME_TO_REDRAW; + beginAnimateRoulette(); + } } } } -function clearWinner() { - if (winner) { - winner = ""; - winnerEl.textContent = ""; - return true; - } - return false; -} - function beginAnimateRoulette() { const angle = easeOut(totalTime, 0, maxAngle, endTime); if (totalTime < endTime || maxAngle - angle > 0.1) { setTimeout(() => { drawRouletteWheel(angle); - totalTime += 1000 / ANIMATION_FPS; + totalTime += TIME_TO_REDRAW; animationId = window.requestAnimationFrame(beginAnimateRoulette); - }, 1000 / ANIMATION_FPS); + }, TIME_TO_REDRAW); } else { window.cancelAnimationFrame(animationId!); animationId = null; @@ -310,7 +292,6 @@ function beginAnimateRoulette() { } } - function easeOut( time: number, beginningVal: number, @@ -321,3 +302,22 @@ function easeOut( ? beginningVal + toChange : toChange * (-Math.pow(2, (-10 * time) / duration) + 1) + beginningVal; } + +function animateWinner() { + winnerEl.animate( + { + opacity: [0.5, 1], + easing: ["ease-in", "ease-out"], + }, + 1000 + ); +} + +function clearWinner() { + if (winner) { + winner = ""; + winnerEl.textContent = ""; + return true; + } + return false; +}