kevinveenbirkenbach/roulette-wheel
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/roulette-wheel.git synced 2024-12-17 21:22:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

readme & set width/height of canvas & code format

Browse Source
This commit is contained in:
p-wojt 2022-01-14 12:47:19 +01:00
parent c2b7924983
commit b95a140e6d
4 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,5 +1,5 @@
# roulette-wheel
[![Netlify Status](https://api.netlify.com/api/v1/badges/8b876465-5e6b-41fc-b7a4-2f17b245dda5/deploy-status)](https://app.netlify.com/sites/heuristic-jepsen-6c6fd2/deploys)
## Description
Application used for entertainment. It helps to decide if we are not determined what should we choose, do or eat etc.

1
app.css
View File

@ -9,7 +9,6 @@ button {
}
canvas {
height: 50rem;
cursor: pointer;
}

4
index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Roulette wheel</title>
<script type="module" src="scripts/bundle.js"></script>
<script type="module" src="dist/bundle.js"></script>
<link rel="stylesheet" href="app.css" />
</head>
<body>
@ -26,7 +26,7 @@
</div>
<div class="roulette-wheel">
<div class="winner"></div>
<canvas></canvas>
<canvas width="800px" height="750px"></canvas>
</div>
<footer>
<div hidden="true" class="icons-authors">

9
src/app.ts
View File

@ -31,17 +31,11 @@ const footerEl = document.querySelector("footer")!;
const authorsEl = document.getElementsByClassName(
"icons-authors"
)[0]! as HTMLDivElement;
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;
canvasEl.height = canvasWrapper.offsetHeight;
const MAXIMUM_SIZE = 16;
const ROTATIONS = 20;
const ANIMATION_FPS = 60;
@ -212,8 +206,7 @@ function drawRouletteWheel(angle: number) {
ctx.lineTo(X_CENTER, Y_CENTER);
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.font = "bold 24px verdana, sans-serif";
ctx.arc(
X_CENTER,
Y_CENTER,