source: components/roulette/BetsImage.jsx

main
Last change on this file was d0ef259, checked in by anastasovv <simon@…>, 2 years ago

Roulette rethought with 1 second update calls
  • Property mode set to 100644
File size: 14.2 KB
Line 
1import React from 'react'
2
3import { useDispatch, useSelector } from 'react-redux';
4import { setRoulette } from '../../redux/reducers/styleSlice';
5
6const BetsImage = () => {
7 const dispatch = useDispatch();
8
9 const playerState = useSelector(state => state.player);
10 const styleState = useSelector(state => state.style);
11
12 function selectWhichBet(e) {
13 const imgRect = document.getElementById('rouletteBetsImg').getBoundingClientRect();
14
15 const coinOffset = 16;
16
17 const xOffset = e.clientX - imgRect.x + coinOffset;
18 const yOffset = e.clientY - imgRect.y + coinOffset;
19
20 const MULTIPLIER = 4;
21
22 const singleX = imgRect.width / ( 14 * MULTIPLIER );
23 const singleY = imgRect.height / ( 4 * MULTIPLIER );
24
25 let clicked = getClickedArray(xOffset, singleX, yOffset, singleY);
26
27 if (clicked.length > 0 && playerState.rouletteGame.game.status.includes("_1_")) {
28 if (playerState.rouletteGame.player.status.includes("_1_")) {
29 openModal(clicked, e);
30 }
31 }
32 }
33
34 function openModal(clicked, e) {
35 dispatch(setRoulette({
36 ...styleState.roulette,
37 whichBets: clicked,
38 displays: {
39 ...styleState.roulette.displays,
40 betModal: true,
41 },
42 coinPlaced: {
43 x: e.clientX + 16,
44 y: e.clientY + 16
45 }
46 }))
47 }
48
49 return (
50 <>
51 <img id="rouletteBetsImg" src="/images/roulette-bets.png" alt="Roulette bets" onClick={(e) => selectWhichBet(e)}/>
52 </>
53 )
54}
55
56
57function getClickedArray(xOffset, singleX, yOffset, singleY) {
58 let clicked = [];
59
60 if (xOffset < 4 * singleX) {
61 if (yOffset < 3 * 4 * singleY) {
62 clicked = ['0']
63 }
64 }
65 else if (xOffset < 7 * singleX) {
66 if (yOffset < 3 * singleY) clicked = ['3']
67 else if (yOffset < 5 * singleY) clicked = ['3', '2']
68 else if (yOffset < 7 * singleY) clicked = ['2']
69 else if (yOffset < 8 * singleY) clicked = ['2', '1']
70 else if (yOffset < 11 * singleY) clicked = ['1']
71 else if (yOffset < 12 * singleY) ;
72 else if (yOffset < 14 * singleY) clicked = ['1-12']
73 else if (yOffset < 16 * singleY) clicked = ['1-18']
74 }
75 else if (xOffset < 9 * singleX) {
76 if (yOffset < 3 * singleY) clicked = ['3', '6']
77 else if (yOffset < 5 * singleY) clicked = ['3', '2', '6', '5']
78 else if (yOffset < 7 * singleY) clicked = ['2', '5']
79 else if (yOffset < 8 * singleY) clicked = ['2', '1', '5', '4']
80 else if (yOffset < 11 * singleY) clicked = ['1', '4']
81 else if (yOffset < 12 * singleY) ;
82 else if (yOffset < 14 * singleY) clicked = ['1-12']
83 else if (yOffset < 16 * singleY) clicked = ['1-18']
84 }
85 else if (xOffset < 11 * singleX) {
86 if (yOffset < 3 * singleY) clicked = ['6']
87 else if (yOffset < 5 * singleY) clicked = ['6', '5']
88 else if (yOffset < 7 * singleY) clicked = ['5']
89 else if (yOffset < 8 * singleY) clicked = ['5', '4']
90 else if (yOffset < 11 * singleY) clicked = ['4']
91 else if (yOffset < 12 * singleY) ;
92 else if (yOffset < 14 * singleY) clicked = ['1-12']
93 else if (yOffset < 16 * singleY) clicked = ['1-18']
94 }
95 else if (xOffset < 13 * singleX) {
96 if (yOffset < 3 * singleY) clicked = ['6', '9']
97 else if (yOffset < 5 * singleY) clicked = ['6', '5', '9', '8']
98 else if (yOffset < 7 * singleY) clicked = ['5', '8']
99 else if (yOffset < 8 * singleY) clicked = ['5', '4', '8', '7']
100 else if (yOffset < 11 * singleY) clicked = ['4', '7']
101 else if (yOffset < 12 * singleY) ;
102 else if (yOffset < 14 * singleY) clicked = ['1-12']
103 else if (yOffset < 16 * singleY) ;
104 }
105 else if (xOffset < 15 * singleX) {
106 if (yOffset < 3 * singleY) clicked = ['9']
107 else if (yOffset < 5 * singleY) clicked = ['9', '8']
108 else if (yOffset < 7 * singleY) clicked = ['8']
109 else if (yOffset < 8 * singleY) clicked = ['8', '7']
110 else if (yOffset < 11 * singleY) clicked = ['7']
111 else if (yOffset < 12 * singleY) ;
112 else if (yOffset < 14 * singleY) clicked = ['1-12']
113 else if (yOffset < 16 * singleY) clicked = ['Even']
114 }
115 else if (xOffset < 17 * singleX) {
116 if (yOffset < 3 * singleY) clicked = ['9', '12']
117 else if (yOffset < 5 * singleY) clicked = ['9', '8', '12', '11']
118 else if (yOffset < 7 * singleY) clicked = ['8', '11']
119 else if (yOffset < 8 * singleY) clicked = ['8', '7', '11', '10']
120 else if (yOffset < 11 * singleY) clicked = ['7', '10']
121 else if (yOffset < 12 * singleY) ;
122 else if (yOffset < 14 * singleY) clicked = ['1-12']
123 else if (yOffset < 16 * singleY) clicked = ['Even']
124 }
125 else if (xOffset < 19 * singleX) {
126 if (yOffset < 3 * singleY) clicked = ['12']
127 else if (yOffset < 5 * singleY) clicked = ['12', '11']
128 else if (yOffset < 7 * singleY) clicked = ['11']
129 else if (yOffset < 8 * singleY) clicked = ['11', '10']
130 else if (yOffset < 11 * singleY) clicked = ['10']
131 else if (yOffset < 12 * singleY) ;
132 else if (yOffset < 14 * singleY) clicked = ['1-12']
133 else if (yOffset < 16 * singleY) clicked = ['Even']
134 }
135 else if (xOffset < 21 * singleX) {
136 if (yOffset < 3 * singleY) clicked = ['12', '15']
137 else if (yOffset < 5 * singleY) clicked = ['12', '11', '15', '14']
138 else if (yOffset < 7 * singleY) clicked = ['11', '14']
139 else if (yOffset < 8 * singleY) clicked = ['11', '10', '14', '13']
140 else if (yOffset < 11 * singleY) clicked = ['10', '13']
141 else if (yOffset < 12 * singleY) ;
142 else if (yOffset < 14 * singleY) ;
143 else if (yOffset < 16 * singleY) ;
144 }
145 else if (xOffset < 23 * singleX) {
146 if (yOffset < 3 * singleY) clicked = ['15']
147 else if (yOffset < 5 * singleY) clicked = ['15', '14']
148 else if (yOffset < 7 * singleY) clicked = ['14']
149 else if (yOffset < 8 * singleY) clicked = ['14', '13']
150 else if (yOffset < 11 * singleY) clicked = ['13']
151 else if (yOffset < 12 * singleY) ;
152 else if (yOffset < 14 * singleY) clicked = ['13-24']
153 else if (yOffset < 16 * singleY) clicked = ['Red']
154 }
155 else if (xOffset < 25 * singleX) {
156 if (yOffset < 3 * singleY) clicked = ['15', '18']
157 else if (yOffset < 5 * singleY) clicked = ['15', '14', '18', '17']
158 else if (yOffset < 7 * singleY) clicked = ['14', '17']
159 else if (yOffset < 8 * singleY) clicked = ['14', '13', '17', '16']
160 else if (yOffset < 11 * singleY) clicked = ['13', '16']
161 else if (yOffset < 12 * singleY) ;
162 else if (yOffset < 14 * singleY) clicked = ['13-24']
163 else if (yOffset < 16 * singleY) clicked = ['Red']
164 }
165 else if (xOffset < 27 * singleX) {
166 if (yOffset < 3 * singleY) clicked = ['18']
167 else if (yOffset < 5 * singleY) clicked = ['18', '17']
168 else if (yOffset < 7 * singleY) clicked = ['17']
169 else if (yOffset < 8 * singleY) clicked = ['17', '16']
170 else if (yOffset < 11 * singleY) clicked = ['16']
171 else if (yOffset < 12 * singleY) ;
172 else if (yOffset < 14 * singleY) clicked = ['13-24']
173 else if (yOffset < 16 * singleY) clicked = ['Red']
174 }
175 else if (xOffset < 29 * singleX) {
176 if (yOffset < 3 * singleY) clicked = ['18', '21']
177 else if (yOffset < 5 * singleY) clicked = ['18', '17', '21', '20']
178 else if (yOffset < 7 * singleY) clicked = ['17', '20']
179 else if (yOffset < 8 * singleY) clicked = ['17', '16', '20', '19']
180 else if (yOffset < 11 * singleY) clicked = ['16', '19']
181 else if (yOffset < 12 * singleY) ;
182 else if (yOffset < 14 * singleY) clicked = ['13-24']
183 else if (yOffset < 16 * singleY) ;
184 }
185 else if (xOffset < 31 * singleX) {
186 if (yOffset < 3 * singleY) clicked = ['21']
187 else if (yOffset < 5 * singleY) clicked = ['21', '20']
188 else if (yOffset < 7 * singleY) clicked = ['20']
189 else if (yOffset < 8 * singleY) clicked = ['20', '19']
190 else if (yOffset < 11 * singleY) clicked = ['19']
191 else if (yOffset < 12 * singleY) ;
192 else if (yOffset < 14 * singleY) clicked = ['13-24']
193 else if (yOffset < 16 * singleY) clicked = ['Black']
194 }
195 else if (xOffset < 33 * singleX) {
196 if (yOffset < 3 * singleY) clicked = ['21', '24']
197 else if (yOffset < 5 * singleY) clicked = ['21', '20', '24', '23']
198 else if (yOffset < 7 * singleY) clicked = ['20', '23']
199 else if (yOffset < 8 * singleY) clicked = ['20', '19', '23', '22']
200 else if (yOffset < 11 * singleY) clicked = ['19', '22']
201 else if (yOffset < 12 * singleY) ;
202 else if (yOffset < 14 * singleY) clicked = ['13-24']
203 else if (yOffset < 16 * singleY) clicked = ['Black']
204 }
205 else if (xOffset < 35 * singleX) {
206 if (yOffset < 3 * singleY) clicked = ['24']
207 else if (yOffset < 5 * singleY) clicked = ['24', '23']
208 else if (yOffset < 7 * singleY) clicked = ['23']
209 else if (yOffset < 8 * singleY) clicked = ['23', '22']
210 else if (yOffset < 11 * singleY) clicked = ['22']
211 else if (yOffset < 12 * singleY) ;
212 else if (yOffset < 14 * singleY) clicked = ['13-24']
213 else if (yOffset < 16 * singleY) clicked = ['Black']
214 }
215 else if (xOffset < 37 * singleX) {
216 if (yOffset < 3 * singleY) clicked = ['24', '27']
217 else if (yOffset < 5 * singleY) clicked = ['24', '23', '27', '26']
218 else if (yOffset < 7 * singleY) clicked = ['23', '26']
219 else if (yOffset < 8 * singleY) clicked = ['23', '22', '26', '25']
220 else if (yOffset < 11 * singleY) clicked = ['22', '25']
221 else if (yOffset < 12 * singleY) ;
222 else if (yOffset < 14 * singleY) ;
223 else if (yOffset < 16 * singleY) ;
224 }
225 else if (xOffset < 39 * singleX) {
226 if (yOffset < 3 * singleY) clicked = ['27']
227 else if (yOffset < 5 * singleY) clicked = ['27', '26']
228 else if (yOffset < 7 * singleY) clicked = ['26']
229 else if (yOffset < 8 * singleY) clicked = ['26', '25']
230 else if (yOffset < 11 * singleY) clicked = ['25']
231 else if (yOffset < 12 * singleY) ;
232 else if (yOffset < 14 * singleY) clicked = ['25-36']
233 else if (yOffset < 16 * singleY) clicked = ['Odd']
234 }
235 else if (xOffset < 41 * singleX) {
236 if (yOffset < 3 * singleY) clicked = ['27', '30']
237 else if (yOffset < 5 * singleY) clicked = ['27', '26', '30', '29']
238 else if (yOffset < 7 * singleY) clicked = ['26', '29']
239 else if (yOffset < 8 * singleY) clicked = ['26', '25', '29', '28']
240 else if (yOffset < 11 * singleY) clicked = ['25', '28']
241 else if (yOffset < 12 * singleY) ;
242 else if (yOffset < 14 * singleY) clicked = ['25-36']
243 else if (yOffset < 16 * singleY) clicked = ['Odd']
244 }
245 else if (xOffset < 43 * singleX) {
246 if (yOffset < 3 * singleY) clicked = ['30']
247 else if (yOffset < 5 * singleY) clicked = ['30', '29']
248 else if (yOffset < 7 * singleY) clicked = ['29']
249 else if (yOffset < 8 * singleY) clicked = ['29', '28']
250 else if (yOffset < 11 * singleY) clicked = ['28']
251 else if (yOffset < 12 * singleY) ;
252 else if (yOffset < 14 * singleY) clicked = ['25-36']
253 else if (yOffset < 16 * singleY) clicked = ['Odd']
254 }
255 else if (xOffset < 45 * singleX) {
256 if (yOffset < 3 * singleY) clicked = ['30', '33']
257 else if (yOffset < 5 * singleY) clicked = ['30', '29', '33', '32']
258 else if (yOffset < 7 * singleY) clicked = ['29', '32']
259 else if (yOffset < 8 * singleY) clicked = ['29', '28', '32', '31']
260 else if (yOffset < 11 * singleY) clicked = ['28', '31']
261 else if (yOffset < 12 * singleY) ;
262 else if (yOffset < 14 * singleY) clicked = ['25-36']
263 else if (yOffset < 16 * singleY) ;
264 }
265 else if (xOffset < 47 * singleX) {
266 if (yOffset < 3 * singleY) clicked = ['33']
267 else if (yOffset < 5 * singleY) clicked = ['33', '32']
268 else if (yOffset < 7 * singleY) clicked = ['32']
269 else if (yOffset < 8 * singleY) clicked = ['32', '31']
270 else if (yOffset < 11 * singleY) clicked = ['31']
271 else if (yOffset < 12 * singleY) ;
272 else if (yOffset < 14 * singleY) clicked = ['25-36']
273 else if (yOffset < 16 * singleY) clicked = ['19-36']
274 }
275 else if (xOffset < 49 * singleX) {
276 if (yOffset < 3 * singleY) clicked = ['33', '36']
277 else if (yOffset < 5 * singleY) clicked = ['33', '32', '36', '35']
278 else if (yOffset < 7 * singleY) clicked = ['32', '35']
279 else if (yOffset < 8 * singleY) clicked = ['32', '31', '35', '34']
280 else if (yOffset < 11 * singleY) clicked = ['31', '34']
281 else if (yOffset < 12 * singleY) ;
282 else if (yOffset < 14 * singleY) clicked = ['25-36']
283 else if (yOffset < 16 * singleY) clicked = ['19-36']
284 }
285 else if (xOffset < 52 * singleX) {
286 if (yOffset < 3 * singleY) clicked = ['36']
287 else if (yOffset < 5 * singleY) clicked = ['36', '35']
288 else if (yOffset < 7 * singleY) clicked = ['35']
289 else if (yOffset < 8 * singleY) clicked = ['35', '34']
290 else if (yOffset < 11 * singleY) clicked = ['34']
291 else if (yOffset < 12 * singleY) ;
292 else if (yOffset < 14 * singleY) clicked = ['25-36']
293 else if (yOffset < 16 * singleY) clicked = ['19-36']
294 }
295 else {
296 if (yOffset < 3 * singleY) clicked = ['Remainder0']
297 else if (yOffset < 5 * singleY) ;
298 else if (yOffset < 7 * singleY) clicked = ['Remainder2']
299 else if (yOffset < 8 * singleY) ;
300 else if (yOffset < 11 * singleY) clicked = ['Remainder1']
301 else if (yOffset < 12 * singleY) ;
302 else if (yOffset < 14 * singleY) ;
303 else if (yOffset < 16 * singleY) ;
304 }
305
306 return clicked;
307 }
308
309export default BetsImage
Note: See TracBrowser for help on using the repository browser.