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;
}
@media screen and (max-width: 940px) {
@media screen and (max-width: 1280px) {
canvas {
margin-top: 5rem;
height: 20rem;

106
src/app.ts
View File

@ -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,6 +251,7 @@ let winner: string;
let endTime: number;
function startRoulette() {
if (items.length > 1) {
if (!animationId) {
const winnerCleared = clearWinner();
if (winnerCleared) {
@ -277,19 +267,11 @@ function startRoulette() {
360 * ROTATIONS +
(items.length - 1 - guessItemIndex) * segmentAngle +
Math.random() * segmentAngle;
endTime = (maxAngle / rotate_by) * (1000 / ANIMATION_FPS);
endTime = (maxAngle / rotate_by) * TIME_TO_REDRAW;
beginAnimateRoulette();
}
}
}
function clearWinner() {
if (winner) {
winner = "";
winnerEl.textContent = "";
return true;
}
return false;
}
function beginAnimateRoulette() {
@ -297,9 +279,9 @@ function beginAnimateRoulette() {
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;
}