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

readme & set width/height of canvas & code format

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 # 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 ## Description
Application used for entertainment. It helps to decide if we are not determined what should we choose, do or eat etc. 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 { canvas {
height: 50rem;
cursor: pointer; cursor: pointer;
} }

4
index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Roulette wheel</title> <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" /> <link rel="stylesheet" href="app.css" />
</head> </head>
<body> <body>
@ -26,7 +26,7 @@
</div> </div>
<div class="roulette-wheel"> <div class="roulette-wheel">
<div class="winner"></div> <div class="winner"></div>
<canvas></canvas> <canvas width="800px" height="750px"></canvas>
</div> </div>
<footer> <footer>
<div hidden="true" class="icons-authors"> <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( const authorsEl = document.getElementsByClassName(
"icons-authors" "icons-authors"
)[0]! as HTMLDivElement; )[0]! as HTMLDivElement;
const canvasWrapper = document.getElementsByClassName(
"roulette-wheel"
)[0]! as HTMLDivElement;
const audio = new Audio("/static/roulette-wheel.mp3"); const audio = new Audio("/static/roulette-wheel.mp3");
const ctx = canvasEl.getContext("2d")!; const ctx = canvasEl.getContext("2d")!;
canvasEl.width = canvasWrapper.offsetWidth;
canvasEl.height = canvasWrapper.offsetHeight;
const MAXIMUM_SIZE = 16; const MAXIMUM_SIZE = 16;
const ROTATIONS = 20; const ROTATIONS = 20;
const ANIMATION_FPS = 60; const ANIMATION_FPS = 60;
@ -212,8 +206,7 @@ function drawRouletteWheel(angle: number) {
ctx.lineTo(X_CENTER, Y_CENTER); ctx.lineTo(X_CENTER, Y_CENTER);
console.log(outerHeight); console.log(outerHeight);
console.log(outerWidth); console.log(outerWidth);
if (outerWidth < 1280) ctx.font = "bold 10px verdana, sans-serif"; ctx.font = "bold 24px verdana, sans-serif";
else ctx.font = "bold 24px verdana, sans-serif";
ctx.arc( ctx.arc(
X_CENTER, X_CENTER,
Y_CENTER, Y_CENTER,