source: components/blackjack/PlayButtons.jsx@ e007fcd

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

Added 1 second update_state calls in blackjack

  • Property mode set to 100644
File size: 11.0 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}`);
47 }
48
49 function placeSideBetsClicked() {
50 dispatch(setBlackjack({
51 ...styleState.blackjack,
52 displays: {
53 ...styleState.blackjack.displays,
54 sideBetsModal: true,
55 sideBetsChooseCreditsModal: false,
56 },
57 inputControls: {
58 ...styleState.blackjack.inputControls,
59 sideBet: {
60 ...styleState.blackjack.inputControls.sideBet,
61 chosenCredits: parseInt(playerState.player.credits/2),
62 }
63 }
64 }))
65 }
66
67 function splitTexts(text) {
68 let chooseCreditsText = ''
69 let paysText = ''
70
71 let allowCopy = true;
72 let copyToPaysText = false;
73 for (let i = 0; i < text.length; i++) {
74 if (text[i] === '<') {
75 allowCopy = false;
76 }
77
78 if (allowCopy) {
79 if (text.length - 1 - i >= 4 && text.substring(i, i + 4) === 'Pays') {
80 copyToPaysText = true;
81 }
82
83 if (!copyToPaysText) {
84 chooseCreditsText += text[i];
85 }
86 else {
87 paysText += text[i];
88 }
89 }
90
91 if (text[i] === '>') {
92 allowCopy = true;
93 }
94 }
95
96 return {
97 chooseCreditsText,
98 paysText,
99 }
100 }
101
102 function selectedSideBet(e, sideBetName) {
103 const texts = splitTexts(e.target.innerHTML);
104
105 dispatch(setBlackjack({
106 ...styleState.blackjack,
107 sideBetName: sideBetName,
108 displays: {
109 ...styleState.blackjack.displays,
110 sideBetsModal: false,
111 sideBetsChooseCreditsModal: true,
112 },
113 texts: {
114 ...styleState.blackjack.texts,
115 sideBetsChooseCreditsText: texts.chooseCreditsText,
116 sideBetsPaysText: texts.paysText,
117 }
118 }))
119 }
120
121 function placeSideBetClicked() {
122 axios.get(`/api/blackjack?action=make_side_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&bet=${styleState.blackjack.inputControls.sideBet.chosenCredits}&betName=${styleState.blackjack.sideBetName}`).then(res => {
123 if (res.data?.success) {
124 dispatch(setBlackjack({
125 ...styleState.blackjack,
126 displays: {
127 ...styleState.blackjack.displays,
128 sideBetsChooseCreditsModal: false,
129 }
130 }))
131
132 getCards();
133 }
134 });
135 }
136
137 function skipSideBetsClicked() {
138 axios.get(`/api/blackjack?action=make_side_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&bet=0&betName=none&skip=true`).then(res => {
139 if (res.data?.success) {
140 dispatch(setBlackjack({
141 ...styleState.blackjack,
142 displays: {
143 ...styleState.blackjack.displays,
144 sideBetsModal: false,
145 sideBetsChooseCreditsModal: false,
146 },
147 }))
148
149 getCards();
150 }
151 });
152 }
153
154 function getCards() {
155 axios.get(`/api/blackjack?action=get_initial_cards&session_id=${localStorage.CAESSINO_SESSION_ID}`);
156 }
157
158 function hitClicked() {
159 axios.get(`/api/blackjack?action=hit_a_card&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
160 if (res.data?.success) {
161 dispatch(setBlackjackGame({
162 ...playerState.blackjackGame,
163 status: res.data?.status,
164 playerCards: res.data?.playerCards,
165 }))
166
167 if (res.data?.status === '_5_game_over') {
168 if (res.data?.outcome === 'player_busted') {
169 dispatch(setPlayer({
170 ...playerState.player,
171 credits: res.data?.credits,
172 }))
173
174 dispatch(setStyle({
175 ...styleState.style,
176 alert: {
177 show: true,
178 title: 'You busted!',
179 subtitle: `You lost $${-1*res.data?.earnings}`,
180 button: {
181 text: 'Play again',
182 action: 'play_again',
183 }
184 }
185 }))
186 }
187 }
188 }
189 });
190 }
191
192 function standClicked() {
193 axios.get(`/api/blackjack?action=stand&session_id=${localStorage.CAESSINO_SESSION_ID}`);
194 }
195
196 return (
197 <div className="blackjackButtons">
198 <div className="blackjackInitialBet" style={{display: playerState.blackjackGame.status.includes('_1_') ? 'flex' : 'none'}}>
199 <div>
200 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.blackjack.inputControls.initialBet.chosenCredits} onChange={(e) => chooseCoins(e)} />
201 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
202 <span>${styleState.blackjack.inputControls.initialBet.chosenCredits}</span>
203 </div>
204 </div>
205 <button className="primaryButton" onClick={() => placeInitialBetClicked()}>Place Initial Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
206 </div>
207 <div className="blackjackSideBet" style={{display: playerState.blackjackGame.status.includes('_2_') ? 'flex' : 'none'}}>
208 <button className="primaryButton" onClick={() => placeSideBetsClicked()}>Place Side Bets <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
209 <button className="primaryButton" onClick={() => skipSideBetsClicked()}>Skip <GiReturnArrow style={{marginTop: '3px', marginBottom: '-3px', transform: 'rotateZ(-15deg)'}} /></button>
210 </div>
211 <div className="blackjackHitStand" style={{display: parseInt(playerState.blackjackGame.status.toString().substr(1, 1)) >= 3 ? 'flex' : 'none'}}>
212 <button className="primaryButton" onClick={() => hitClicked()}>Hit <GiCardDraw style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
213 <button className="primaryButton" onClick={() => standClicked()}>Stand <AiFillCheckCircle style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
214 </div>
215
216 <div className="blackjackSideBetsModal" style={{display: styleState.blackjack.displays.sideBetsModal ? 'flex' : 'none'}}>
217 <div className="blackjackSideBetSelect">
218 <h1>Perfect Pairs</h1>
219 <div>
220 <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>
221 <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>
222 <p onClick={(e) => selectedSideBet(e, 'perfect_pair')}>Perfect pair (two of the same card)<br/><span>Pays 25:1</span></p>
223 </div>
224 </div>
225 <div className="blackjackSideBetSelect">
226 <h1>21+3</h1>
227 <div>
228 <p onClick={(e) => selectedSideBet(e, 'flush')}>Flush (all cards are suited)<br/><span>Pays 5:1</span></p>
229 <p onClick={(e) => selectedSideBet(e, 'straight')}>Straight (all cards consecutive)<br/><span>Pays 10:1</span></p>
230 <p onClick={(e) => selectedSideBet(e, 'three_of_a_kind')}>Three of a kind (not the same suit)<br/><span>Pays 30:1</span></p>
231 <p onClick={(e) => selectedSideBet(e, 'straight_flush')}>Straight flush (consecutive cards same suit)<br/><span>Pays 40:1</span></p>
232 <p onClick={(e) => selectedSideBet(e, 'suited_triple')}>Suited triple (three of the same card)<br/><span>Pays 100:1</span></p>
233 </div>
234 </div>
235 </div>
236
237 <div className="blackjackSideBetsChooseCreditsModal" style={{display: styleState.blackjack.displays.sideBetsChooseCreditsModal ? 'flex' : 'none'}}>
238 <p>{styleState.blackjack.texts.sideBetsChooseCreditsText}<br/><span>{styleState.blackjack.texts.sideBetsPaysText}</span></p>
239 <div>
240 <div>
241 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.blackjack.inputControls.sideBet.chosenCredits} onChange={(e) => chooseCoinsSideBet(e)} />
242 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
243 <span>${styleState.blackjack.inputControls.sideBet.chosenCredits}</span>
244 </div>
245 </div>
246 <button style={{marginTop: '40px'}} className="primaryButton" onClick={() => placeSideBetClicked()}>Place Side Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
247 </div>
248 </div>
249 </div>
250 )
251}
252
253export default PlayButtons
Note: See TracBrowser for help on using the repository browser.