kevinveenbirkenbach/roulette-wheel
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/roulette-wheel.git synced 2024-11-24 03:01:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

responsive item's font & tidy

Browse Source
This commit is contained in:
p-wojt 2022-01-13 11:27:12 +01:00
parent 6811b6d771
commit 2f051384ad
2 changed files with 71 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.css
View File

@ -133,7 +133,7 @@ ul {
height: 28px; height: 28px;
} }
@media screen and (max-width: 940px) { @media screen and (max-width: 1280px) {
canvas { canvas {
margin-top: 5rem; margin-top: 5rem;
height: 20rem; height: 20rem;

140
src/app.ts
View File

@ -47,6 +47,7 @@ const WHEEL_OFFSET = 5;
const X_CENTER = canvasEl.width / 2; const X_CENTER = canvasEl.width / 2;
const Y_CENTER = canvasEl.height / 2; const Y_CENTER = canvasEl.height / 2;
const RADIUS = canvasEl.height / 2 - WHEEL_OFFSET; const RADIUS = canvasEl.height / 2 - WHEEL_OFFSET;
const TIME_TO_REDRAW = 1000 / ANIMATION_FPS;
const itemsList = new ItemList(MAXIMUM_SIZE); const itemsList = new ItemList(MAXIMUM_SIZE);
const items: MenuItem[] = []; const items: MenuItem[] = [];
@ -73,7 +74,6 @@ function configure() {
}); });
} }
function addRemoveItem() { function addRemoveItem() {
addButtonEl.addEventListener("click", () => { addButtonEl.addEventListener("click", () => {
if (!animationId) { 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() { function updateCounter() {
counterEl.textContent = `${itemsList.items.length}/${MAXIMUM_SIZE}`; counterEl.textContent = `${itemsList.items.length}/${MAXIMUM_SIZE}`;
animateCounter(); animateCounter();
@ -190,20 +168,29 @@ function animateCounter() {
); );
} }
function animateWinner() { function lightDarkMode() {
winnerEl.animate( lightDarkModeEl.addEventListener("click", () => {
{ modeEl.animate([{ transform: "rotate(360deg)" }], {
opacity: [0.5, 1], duration: 500,
easing: ["ease-in", "ease-out"], });
},
1000 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) { function drawRouletteWheel(angle: number) {
const segmentWidth = 360 / items.length; const segmentWidth = 360 / items.length;
let startAngle = angle; let endAngle = segmentWidth + angle;
let endAngle = segmentWidth + startAngle;
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath(); ctx.beginPath();
ctx.save(); ctx.save();
@ -215,19 +202,21 @@ function drawRouletteWheel(angle: number) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
ctx.restore(); 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(); ctx.stroke();
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
ctx.beginPath(); ctx.beginPath();
ctx.lineTo(X_CENTER, Y_CENTER); 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( ctx.arc(
X_CENTER, X_CENTER,
Y_CENTER, Y_CENTER,
RADIUS, RADIUS,
(startAngle * Math.PI) / 180, (angle * Math.PI) / 180,
(endAngle * Math.PI) / 180, (endAngle * Math.PI) / 180
false
); );
ctx.lineTo(X_CENTER, Y_CENTER); ctx.lineTo(X_CENTER, Y_CENTER);
ctx.fillStyle = itemsList.items[i].color; ctx.fillStyle = itemsList.items[i].color;
@ -236,11 +225,11 @@ function drawRouletteWheel(angle: number) {
ctx.fillStyle = "black"; ctx.fillStyle = "black";
const text = itemsList.items[i].name; const text = itemsList.items[i].name;
if (items.length > 1) { 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 xT = X_CENTER + (Math.cos(angleVal) * RADIUS) / 2;
const xY = Y_CENTER + (Math.sin(angleVal) * RADIUS) / 2; const xY = Y_CENTER + (Math.sin(angleVal) * RADIUS) / 2;
ctx.translate(xT, xY); 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); ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
} else { } else {
ctx.fillText(text, X_CENTER, Y_CENTER); ctx.fillText(text, X_CENTER, Y_CENTER);
@ -249,7 +238,7 @@ function drawRouletteWheel(angle: number) {
if (items.length !== 1) { if (items.length !== 1) {
ctx.stroke(); ctx.stroke();
} }
startAngle += segmentWidth; angle += segmentWidth;
endAngle += segmentWidth; endAngle += segmentWidth;
} }
} }
@ -262,44 +251,37 @@ let winner: string;
let endTime: number; let endTime: number;
function startRoulette() { function startRoulette() {
if (!animationId) { if (items.length > 1) {
const winnerCleared = clearWinner(); if (!animationId) {
if (winnerCleared) { const winnerCleared = clearWinner();
drawRouletteWheel(0); if (winnerCleared) {
} else { drawRouletteWheel(0);
addButtonEl.style.background = "#C0C0C0"; } else {
removeAllItemsButtonEl.style.background = "#C0C0C0"; addButtonEl.style.background = "#C0C0C0";
guessItemIndex = Math.floor(Math.random() * items.length); removeAllItemsButtonEl.style.background = "#C0C0C0";
winner = itemsList.items[guessItemIndex].name; guessItemIndex = Math.floor(Math.random() * items.length);
segmentAngle = 360 / items.length; winner = itemsList.items[guessItemIndex].name;
totalTime = 0; segmentAngle = 360 / items.length;
maxAngle = totalTime = 0;
360 * ROTATIONS + maxAngle =
(items.length - 1 - guessItemIndex) * segmentAngle + 360 * ROTATIONS +
Math.random() * segmentAngle; (items.length - 1 - guessItemIndex) * segmentAngle +
endTime = (maxAngle / rotate_by) * (1000 / ANIMATION_FPS); Math.random() * segmentAngle;
beginAnimateRoulette(); endTime = (maxAngle / rotate_by) * TIME_TO_REDRAW;
beginAnimateRoulette();
}
} }
} }
} }
function clearWinner() {
if (winner) {
winner = "";
winnerEl.textContent = "";
return true;
}
return false;
}
function beginAnimateRoulette() { function beginAnimateRoulette() {
const angle = easeOut(totalTime, 0, maxAngle, endTime); const angle = easeOut(totalTime, 0, maxAngle, endTime);
if (totalTime < endTime || maxAngle - angle > 0.1) { if (totalTime < endTime || maxAngle - angle > 0.1) {
setTimeout(() => { setTimeout(() => {
drawRouletteWheel(angle); drawRouletteWheel(angle);
totalTime += 1000 / ANIMATION_FPS; totalTime += TIME_TO_REDRAW;
animationId = window.requestAnimationFrame(beginAnimateRoulette); animationId = window.requestAnimationFrame(beginAnimateRoulette);
}, 1000 / ANIMATION_FPS); }, TIME_TO_REDRAW);
} else { } else {
window.cancelAnimationFrame(animationId!); window.cancelAnimationFrame(animationId!);
animationId = null; animationId = null;
@ -310,7 +292,6 @@ function beginAnimateRoulette() {
} }
} }
function easeOut( function easeOut(
time: number, time: number,
beginningVal: number, beginningVal: number,
@ -321,3 +302,22 @@ function easeOut(
? beginningVal + toChange ? beginningVal + toChange
: toChange * (-Math.pow(2, (-10 * time) / duration) + 1) + beginningVal; : 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;
}