kevinveenbirkenbach
/
roulette-wheel
mirror of https://github.com/kevinveenbirkenbach/roulette-wheel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

logic & audio

This commit is contained in:
p-wojt 2022-01-13 21:07:27 +01:00
parent 2f051384ad
commit 88b8f9e2ad
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -9,6 +9,10 @@
<link rel="stylesheet" href="app.css" />
</head>
<body>
<audio class="roulette-wheel-audio">
<source src="static/price-wheel.mp3" type="audio/mpeg">
Your browser does not support the audio element
</audio>
<div class="light-dark-mode">
<img class="moon-sun" src="static/moon.png" alt="mode" />
</div>
@ -30,10 +34,12 @@
<img class="moon-sun" src="static/sun.png" alt="mode" /> Made by made by
<a href="https://www.freepik.com" title="Freepik">Freepik</a> from
<a href="https://www.flaticon.com/" title="Flaticon"
>www.flaticon.com</a
>
>www.flaticon.com</a>
<a href="https://freesound.org/people/tony_bear/sounds/274007/">
Sound
</a>
</div>
<p>Icons</p>
<p>Icons & sound</p>
</footer>
</body>
</html>

4
src/app.ts
View File

@ -35,6 +35,8 @@ const canvasWrapper = document.getElementsByClassName(
"roulette-wheel"
)[0]! as HTMLDivElement;
const audio = new Audio("/static/roulette-wheel.mp3");
const ctx = canvasEl.getContext("2d")!;
canvasEl.width = canvasWrapper.offsetWidth;
@ -59,6 +61,7 @@ configure();
function configure() {
counterEl.textContent = `0/${MAXIMUM_SIZE}`;
audio.volume = 0.2;
LightDarkMode.currentMode = "dark";
IdPool.initializeIdsPool(MAXIMUM_SIZE);
@ -257,6 +260,7 @@ function startRoulette() {
if (winnerCleared) {
drawRouletteWheel(0);
} else {
audio.play();
addButtonEl.style.background = "#C0C0C0";
removeAllItemsButtonEl.style.background = "#C0C0C0";
guessItemIndex = Math.floor(Math.random() * items.length);

BIN
static/roulette-wheel.mp3 Normal file
View File

Binary file not shown.