source: components/roulette/BetsImage.jsx@ 9bd09b0

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

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