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

logic & audio

Browse Source
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" /> <link rel="stylesheet" href="app.css" />
</head> </head>
<body> <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"> <div class="light-dark-mode">
<img class="moon-sun" src="static/moon.png" alt="mode" /> <img class="moon-sun" src="static/moon.png" alt="mode" />
</div> </div>
@ -30,10 +34,12 @@
<img class="moon-sun" src="static/sun.png" alt="mode" /> Made by made by <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.freepik.com" title="Freepik">Freepik</a> from
<a href="https://www.flaticon.com/" title="Flaticon" <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> </div>
<p>Icons</p> <p>Icons & sound</p>
</footer> </footer>
</body> </body>
</html> </html>

4
src/app.ts
View File

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

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

Binary file not shown.