source: components/blackjack/PlayButtons.jsx@ 87614a5

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

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