source: components/blackjack/PlayButtons.jsx@ ebf5e04

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

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