source: components/blackjack/PlayButtons.jsx@ 189cd8f

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

Roulette place a bet functionality

  • Property mode set to 100644
File size: 17.5 KB
Line 
1import React from 'react'
2
3import { GiTwoCoins, GiReturnArrow, GiCardDraw } from 'react-icons/gi'
4import { AiFillCheckCircle } from 'react-icons/ai'
5
6import { setBlackjackGame, setPlayer } from '../../redux/reducers/playerSlice';
7import { setBlackjack, setStyle } from '../../redux/reducers/styleSlice';
8
9import { useSelector, useDispatch } from 'react-redux'
10
11import axios from 'axios';
12
13const PlayButtons = () => {
14 const dispatch = useDispatch();
15
16 const playerState = useSelector(state => state.player);
17 const styleState = useSelector(state => state.style);
18
19 function chooseCoins(e) {
20 dispatch(setBlackjack({
21 ...styleState.blackjack,
22 inputControls: {
23 ...styleState.blackjack.inputControls,
24 initialBet: {
25 ...styleState.blackjack.inputControls.initialBet,
26 chosenCredits: parseInt(e.target.value),
27 }
28 }
29 }))
30 }
31
32 function chooseCoinsSideBet(e) {
33 dispatch(setBlackjack({
34 ...styleState.blackjack,
35 inputControls: {
36 ...styleState.blackjack.inputControls,
37 sideBet: {
38 ...styleState.blackjack.inputControls.sideBet,
39 chosenCredits: parseInt(e.target.value),
40 }
41 }
42 }));
43 }
44
45 function placeInitialBetClicked() {
46 axios.get(`/api/blackjack?action=make_initial_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&bet=${styleState.blackjack.inputControls.initialBet.chosenCredits}`).then(res => {
47 if (res.data?.success) {
48 dispatch(setBlackjackGame({
49 ...playerState.blackjackGame,
50 status: res.data?.status,
51 }))
52
53 dispatch(setPlayer({
54 ...playerState.player,
55 credits: res.data?.credits,
56 }))
57
58 dispatch(setBlackjack({
59 ...styleState.blackjack,
60 displays: {
61 ...styleState.blackjack.displays,
62 initialBet: false,
63 sideBet: true,
64 }
65 }))
66 }
67 });
68 }
69
70 function placeSideBetsClicked() {
71 dispatch(setBlackjack({
72 ...styleState.blackjack,
73 displays: {
74 ...styleState.blackjack.displays,
75 sideBetsModal: true,
76 sideBetsChooseCreditsModal: false,
77 },
78 inputControls: {
79 ...styleState.blackjack.inputControls,
80 sideBet: {
81 ...styleState.blackjack.inputControls.sideBet,
82 chosenCredits: parseInt(playerState.player.credits/2),
83 }
84 }
85 }))
86 }
87
88 function splitTexts(text) {
89 let chooseCreditsText = ''
90 let paysText = ''
91
92 let allowCopy = true;
93 let copyToPaysText = false;
94 for (let i = 0; i < text.length; i++) {
95 if (text[i] === '<') {
96 allowCopy = false;
97 }
98
99 if (allowCopy) {
100 if (text.length - 1 - i >= 4 && text.substring(i, i + 4) === 'Pays') {
101 copyToPaysText = true;
102 }
103
104 if (!copyToPaysText) {
105 chooseCreditsText += text[i];
106 }
107 else {
108 paysText += text[i];
109 }
110 }
111
112 if (text[i] === '>') {
113 allowCopy = true;
114 }
115 }
116
117 return {
118 chooseCreditsText,
119 paysText,
120 }
121 }
122
123 function selectedSideBet(e, sideBetName) {
124 const texts = splitTexts(e.target.innerHTML);
125
126 dispatch(setBlackjackGame({
127 ...playerState.blackjackGame,
128 sideBetName: sideBetName
129 }))
130
131 dispatch(setBlackjack({
132 ...styleState.blackjack,
133 displays: {
134 ...styleState.blackjack.displays,
135 sideBetsModal: false,
136 sideBetsChooseCreditsModal: true,
137 },
138 texts: {
139 ...styleState.blackjack.texts,
140 sideBetsChooseCreditsText: texts.chooseCreditsText,
141 sideBetsPaysText: texts.paysText,
142 }
143 }))
144 }
145
146 function placeSideBetClicked() {
147 axios.get(`/api/blackjack?action=make_side_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&bet=${styleState.blackjack.inputControls.sideBet.chosenCredits}&betName=${playerState.blackjackGame.sideBetName}`).then(res => {
148 if (res.data?.success) {
149 dispatch(setBlackjackGame({
150 ...playerState.blackjackGame,
151 status: res.data?.status,
152 }))
153
154 dispatch(setPlayer({
155 ...playerState.player,
156 credits: res.data?.credits,
157 }))
158
159 dispatch(setBlackjack({
160 ...styleState.blackjack,
161 displays: {
162 ...styleState.blackjack.displays,
163 sideBetsChooseCreditsModal: false,
164 sideBet: false,
165 hitStand: true,
166 }
167 }))
168
169 getCards();
170 }
171 });
172 }
173
174 function skipSideBetsClicked() {
175 axios.get(`/api/blackjack?action=make_side_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&bet=0&betName=none&skip=true`).then(res => {
176 if (res.data?.success) {
177 dispatch(setBlackjack({
178 ...styleState.blackjack,
179 displays: {
180 ...styleState.blackjack.displays,
181 sideBetsModal: false,
182 sideBetsChooseCreditsModal: false,
183 sideBet: false,
184 hitStand: true,
185 },
186 inputControls: {
187 ...styleState.blackjack.inputControls,
188 sideBet: {
189 ...styleState.blackjack.inputControls.sideBet,
190 chosenCredits: 0,
191 }
192 },
193 }))
194
195 getCards();
196 }
197 });
198 }
199
200 function getCards() {
201 axios.get(`/api/blackjack?action=get_initial_cards&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
202 if (res.data?.success) {
203 dispatch(setBlackjackGame({
204 ...playerState.blackjackGame,
205 status: res.data?.status,
206 playerCards: res.data?.playerCards,
207 dealerCards: res.data?.dealerCards,
208 }))
209
210 if (res.data?.sideBetOutcome !== '') {
211 if (res.data.sideBetOutcome === 'side_bet_won') {
212 dispatch(setBlackjackGame({
213 ...playerState.blackjackGame,
214 credits: res.data?.credits,
215 }))
216
217 dispatch(setStyle({
218 ...styleState.style,
219 alert: {
220 show: true,
221 title: 'You won the side bet!',
222 subtitle: `You won $${res.data?.sideBetEarnings}`,
223 button: {
224 text: 'Continue',
225 action: 'continue_from_side_bet',
226 }
227 }
228 }))
229 }
230 else if (res.data.sideBetOutcome === 'side_bet_lost') {
231 dispatch(setStyle({
232 ...styleState.style,
233 alert: {
234 show: true,
235 title: 'You lost the side bet!',
236 subtitle: `You lost $${-1*res.data?.sideBetEarnings}`,
237 button: {
238 text: 'Continue',
239 action: 'continue_from_side_bet',
240 }
241 }
242 }))
243 }
244 }
245 }
246 });
247 }
248
249 function hitClicked() {
250 axios.get(`/api/blackjack?action=hit_a_card&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
251 if (res.data?.success) {
252 dispatch(setBlackjackGame({
253 ...playerState.blackjackGame,
254 status: res.data?.status,
255 playerCards: res.data?.playerCards,
256 }))
257
258 if (res.data?.status === '_5_game_over') {
259 if (res.data?.outcome === 'player_busted') {
260 dispatch(setPlayer({
261 ...playerState.player,
262 credits: res.data?.credits,
263 }))
264
265 dispatch(setStyle({
266 ...styleState.style,
267 alert: {
268 show: true,
269 title: 'You busted!',
270 subtitle: `You lost $${-1*res.data?.earnings}`,
271 button: {
272 text: 'Play again',
273 action: 'play_again',
274 }
275 }
276 }))
277 }
278 }
279 }
280 });
281 }
282
283 function standClicked() {
284 axios.get(`/api/blackjack?action=stand&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
285 if (res.data?.success) {
286 dispatch(setBlackjackGame({
287 ...playerState.blackjackGame,
288 status: res.data?.status,
289 playerCards: res.data?.playerCards,
290 dealerCards: res.data?.dealerCards,
291 }))
292
293 if (res.data?.status.toString().substr(1, 1) === '5') { // game_over
294 dispatch(setPlayer({
295 ...playerState.player,
296 credits: res.data?.credits,
297 }))
298
299 if (res.data?.outcome === 'dealer_busted') {
300 dispatch(setStyle({
301 ...styleState.style,
302 alert: {
303 show: true,
304 title: 'Dealer busted!',
305 subtitle: `You won $${res.data?.earnings}`,
306 button: {
307 text: 'Play again',
308 action: 'play_again',
309 }
310 }
311 }))
312 }
313 else if (res.data?.outcome === 'player_won') {
314 dispatch(setStyle({
315 ...styleState.style,
316 alert: {
317 show: true,
318 title: 'You won!',
319 subtitle: `You won $${res.data?.earnings}`,
320 button: {
321 text: 'Play again',
322 action: 'play_again',
323 }
324 }
325 }))
326 }
327 else if (res.data?.outcome === 'player_lost') {
328 dispatch(setStyle({
329 ...styleState.style,
330 alert: {
331 show: true,
332 title: 'You lost!',
333 subtitle: `You lost $${-1*res.data?.earnings}`,
334 button: {
335 text: 'Play again',
336 action: 'play_again',
337 }
338 }
339 }))
340 }
341 else if (res.data?.outcome === 'draw') {
342 dispatch(setStyle({
343 ...styleState.style,
344 alert: {
345 show: true,
346 title: 'Draw!',
347 subtitle: `You got your $${res.data?.earnings} back`,
348 button: {
349 text: 'Play again',
350 action: 'play_again',
351 }
352 }
353 }))
354 }
355 }
356 }
357 });
358 }
359
360 return (
361 <div className="blackjackButtons">
362 <div className="blackjackInitialBet" style={{display: styleState.blackjack.displays.initialBet ? 'flex' : 'none'}}>
363 <div>
364 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.blackjack.inputControls.initialBet.chosenCredits} onChange={(e) => chooseCoins(e)} />
365 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
366 <span>${styleState.blackjack.inputControls.initialBet.chosenCredits}</span>
367 </div>
368 </div>
369 <button className="primaryButton" onClick={() => placeInitialBetClicked()}>Place Initial Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
370 </div>
371 <div className="blackjackSideBet" style={{display: styleState.blackjack.displays.sideBet ? 'flex' : 'none'}}>
372 <button className="primaryButton" onClick={() => placeSideBetsClicked()}>Place Side Bets <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
373 <button className="primaryButton" onClick={() => skipSideBetsClicked()}>Skip <GiReturnArrow style={{marginTop: '3px', marginBottom: '-3px', transform: 'rotateZ(-15deg)'}} /></button>
374 </div>
375 <div className="blackjackHitStand" style={{display: styleState.blackjack.displays.hitStand ? 'flex' : 'none'}}>
376 <button className="primaryButton" onClick={() => hitClicked()}>Hit <GiCardDraw style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
377 <button className="primaryButton" onClick={() => standClicked()}>Stand <AiFillCheckCircle style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
378 </div>
379
380 <div className="blackjackSideBetsModal" style={{display: styleState.blackjack.displays.sideBetsModal ? 'flex' : 'none'}}>
381 <div className="blackjackSideBetSelect">
382 <h1>Perfect Pairs</h1>
383 <div>
384 <p onClick={(e) => selectedSideBet(e, 'mixed_pair')}>Mixed pair (two of the same value but different suit and colour)<br/><span>Pays 5:1</span></p>
385 <p onClick={(e) => selectedSideBet(e, 'coloured_pair')}>Coloured pair (two of the same value and the same colour)<br/><span>Pays 12:1</span></p>
386 <p onClick={(e) => selectedSideBet(e, 'perfect_pair')}>Perfect pair (two of the same card)<br/><span>Pays 25:1</span></p>
387 </div>
388 </div>
389 <div className="blackjackSideBetSelect">
390 <h1>21+3</h1>
391 <div>
392 <p onClick={(e) => selectedSideBet(e, 'flush')}>Flush (all cards are suited)<br/><span>Pays 5:1</span></p>
393 <p onClick={(e) => selectedSideBet(e, 'straight')}>Straight (all cards consecutive)<br/><span>Pays 10:1</span></p>
394 <p onClick={(e) => selectedSideBet(e, 'three_of_a_kind')}>Three of a kind (not the same suit)<br/><span>Pays 30:1</span></p>
395 <p onClick={(e) => selectedSideBet(e, 'straight_flush')}>Straight flush (consecutive cards same suit)<br/><span>Pays 40:1</span></p>
396 <p onClick={(e) => selectedSideBet(e, 'suited_triple')}>Suited triple (three of the same card)<br/><span>Pays 100:1</span></p>
397 </div>
398 </div>
399 </div>
400
401 <div className="blackjackSideBetsChooseCreditsModal" style={{display: styleState.blackjack.displays.sideBetsChooseCreditsModal ? 'flex' : 'none'}}>
402 <p>{styleState.blackjack.texts.sideBetsChooseCreditsText}<br/><span>{styleState.blackjack.texts.sideBetsPaysText}</span></p>
403 <div>
404 <div>
405 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.blackjack.inputControls.sideBet.chosenCredits} onChange={(e) => chooseCoinsSideBet(e)} />
406 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
407 <span>${styleState.blackjack.inputControls.sideBet.chosenCredits}</span>
408 </div>
409 </div>
410 <button style={{marginTop: '40px'}} className="primaryButton" onClick={() => placeSideBetClicked()}>Place Side Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
411 </div>
412 </div>
413 </div>
414 )
415}
416
417export default PlayButtons
Note: See TracBrowser for help on using the repository browser.