source: components/roulette/BetModal.jsx

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

Added complaints, managing credits, and lost connection screens

  • Property mode set to 100644
File size: 2.8 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';
10
11const BetModal = () => {
12 const dispatch = useDispatch();
13
14 const playerState = useSelector(state => state.player);
15 const styleState = useSelector(state => state.style);
16
17 function chooseBet(e) {
18 dispatch(setRoulette({
19 ...styleState.roulette,
20 inputControls: {
21 ...styleState.roulette.inputControls,
22 bet: {
23 ...styleState.roulette.inputControls.bet,
24 chosenCredits: parseInt(e.target.value),
25 }
26 }
27 }));
28 }
29
30 function placeBet() {
31 axios.get(`/api/roulette?action=place_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&betAmount=${styleState.roulette.inputControls.bet.chosenCredits}&whichBets=${styleState.roulette.whichBets.toString()}&coinPlacedX=${styleState.roulette.coinPlaced.x}&coinPlacedY=${styleState.roulette.coinPlaced.y}`);
32
33 closeModal();
34 }
35
36 function closeModal() {
37 dispatch(setRoulette({
38 ...styleState.roulette,
39 displays: {
40 ...styleState.roulette.displays,
41 betModal: false,
42 },
43 }));
44 }
45
46 return (
47 <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal && playerState.rouletteGame.game.timeToStart > 10 && playerState.rouletteGame.game.timeToStart <= playerState.rouletteGame.game.COUNTDOWN_FROM ? 'flex' : 'none'}}>
48 <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>
49 <div>
50 <div>
51 <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.roulette.inputControls.bet.chosenCredits} onChange={(e) => chooseBet(e)} />
52 <div style={{marginTop: '15px', marginBottom: '-30px'}}>
53 <span>${styleState.roulette.inputControls.bet.chosenCredits}</span>
54 </div>
55 </div>
56 <button style={{marginTop: '50px'}} className="primaryButton" onClick={() => placeBet()}>Place Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
57 <br/>
58 <button style={{position: 'absolute', bottom: '10%', left: '50%', transform: 'translateX(-50%)'}} className="tertiaryButton" onClick={() => closeModal()}>Cancel <AiOutlineClose style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
59 </div>
60 </div>
61 )
62}
63
64export default BetModal
Note: See TracBrowser for help on using the repository browser.