-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
98 lines (88 loc) · 3.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Roulette</title>
</head>
<body>
<div style="display:flex;justify-content:center;align-items: center;">
<h2>You rolled on: </h2>
<div style="border: 2px solid; width: 200px; height: 30px; text-align: center;" id="result"></div>
</div>
<div style="display:flex;justify-content: space-evenly;align-items: center;">
<div>
<div id="roulette-standard"></div>
<button id="start-standard" style="margin:auto;display:block;">start</button>
</div>
<div>
<div id="roulette-image"></div>
<button id="start-image" style="margin:auto;display:block;">start</button>
</div>
<div>
<div id="roulette-doughnut"></div>
<button id="start-doughnut" style="margin:auto;display:block;">start</button>
</div>
</div>
<div style="display:flex;justify-content: space-evenly;align-items: center;">
</div>
<script type="module">
import Roulette from './src/index.ts';
const rouletteStandard = new Roulette({
container: 'roulette-standard',
sections: [1, 2, 3],
colors: ["#AAD7D9", "#FBF9F1", "#E5E1DA"],
});
const img = new Image()
img.src = 'https://images.vexels.com/media/users/3/151205/isolated/preview/8857efb275fbf2435db40a222d05b1e6-roulette-wheel-icon.png'
const rouletteImage = new Roulette({
container: 'roulette-image',
board: {
element: img,
padding: 10
},
sections: [0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26],
colors: ["#AAD7D9", "#FBF9F1", "#E5E1DA"],
});
const rouletteDoughnut = new Roulette({
container: 'roulette-doughnut',
sections: [{
value: 'grey car',
src: 'https://svgsilh.com/svg/1300458-9e9e9e.svg',
radius: 50
}, {
value: 'blue car',
src: 'https://svgsilh.com/svg/1300458-3f51b5.svg',
radius: 50
}, {
value: 'red car',
src: 'https://svgsilh.com/svg/1300458-f44336.svg',
radius: 50
}],
});
const resultElem = document.getElementById('result');
function onstart() { resultElem.innerHTML = ''; }
rouletteStandard.onstart = onstart;
rouletteImage.onstart = onstart;
rouletteDoughnut.onstart = onstart;
function onstop(result) { resultElem.innerHTML = result.value; }
rouletteStandard.onstop = onstop;
rouletteImage.onstop = onstop;
rouletteDoughnut.onstop = onstop;
document.getElementById('start-standard').addEventListener('click', () => {
rouletteStandard.roll();
});
document.getElementById('start-image').addEventListener('click', () => {
rouletteImage.roll();
});
document.getElementById('start-doughnut').addEventListener('click', () => {
rouletteDoughnut.roll();
});
const { promise, resolve, reject } = Promise.withResolvers()
rouletteImage.asyncRollByIndex(promise)
await new Promise(r => setTimeout(r, 10000));
console.log(rouletteImage.sections[3].value)
resolve(rouletteImage.sections[3].value)
</script>
</body>
</html>