source: components/roulette/BetModal.jsx@ 95ce58b

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

Finished Roulette

  • Property mode set to 100644
File size: 3.4 KB
Line 
1import React from 'react'
2
3import { GiTwoCoins } from 'react-icons/gi'
4import { AiOutlineClose } from 'react-icons/ai'
5
6import { useSelector, useDispatch } from 'react-redux'
7import { setRoulette } from '../../redux/reducers/styleSlice';
8
9import axios from 'axios';
10import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
11
12const BetModal = () => {
13 const dispatch = useDispatch();
14
15 const playerState = useSelector(state => state.player);
16 const styleState = useSelector(state => state.style);
17
18 function chooseBet(e) {
19 dispatch(setRoulette({
20 ...styleState.roulette,
21 inputControls: {
22 ...styleState.roulette.inputControls,
23 bet: {
24 ...styleState.roulette.inputControls.bet,
25 chosenCredits: parseInt(e.target.value),
26 }
27 }
28 }));
29 }
30
31 function placeBet() {
32 axios.get(`/api/roulette?action=place_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&betAmount=${styleState.roulette.inputControls.bet.chosenCredits}&whichBets=${styleState.roulette.whichBets.toString()}`).then(res => {
33 if (res.data?.success) {
34 dispatch(setPlayer({
35 ...playerState.player,
36 credits: res.data?.credits,
37 }));
38
39 dispatch(setRouletteGame(res.data?.game));
40
41 closeModal(false);
42 }
43 });
44 }
45
46 function closeModal(removeCoin = true) {
47 if (removeCoin) {
48 dispatch(setRoulette({
49 ...styleState.roulette,
50 displays: {
51 ...styleState.roulette.displays,
52 betModal: false,
53 },
54 showCoin: false,
55 }))
56 }
57 else {
58 dispatch(setRoulette({
59 ...styleState.roulette,
60 displays: {
61 ...styleState.roulette.displays,
62 betModal: false,
63 },
64 showCoin: true,
65 }));
66 }
67 }
68
69 return (
70 <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal && playerState.rouletteGame.timeToStart > 10 ? 'flex' : 'none'}}>
71 <p>You have chosen to bet on: <span>{styleState.roulette.whichBets.map((bet, i) => `${bet} `)}</span><br/>Please select the amount you will bet</p>
72 <div>
73 <div>
74 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.roulette.inputControls.bet.chosenCredits} onChange={(e) => chooseBet(e)} />
75 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
76 <span>${styleState.roulette.inputControls.bet.chosenCredits}</span>
77 </div>
78 </div>
79 <button style={{marginTop: '50px'}} className="primaryButton" onClick={() => placeBet()}>Place Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
80 <br/>
81 <button style={{position: 'absolute', bottom: '10%', left: '50%', transform: 'translateX(-50%)'}} className="tertiaryButton" onClick={() => closeModal()}>Cancel <AiOutlineClose style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
82 </div>
83 </div>
84 )
85}
86
87export default BetModal
Note: See TracBrowser for help on using the repository browser.