Changeset 433e0c5 for components


Ignore:
Timestamp:
07/15/22 14:45:30 (2 years ago)
Author:
anastasovv <simon@…>
Branches:
main
Children:
55701f0
Parents:
1df3fde
Message:

Added complaints, managing credits, and lost connection screens

Location:
components
Files:
2 added
1 deleted
11 edited

Legend:

Unmodified
Added
Removed

  • components/Header.jsx

    r1df3fde r433e0c5  
    5454  }
    5555
     56  function complain() {
     57    dispatch(setStyle({
     58      ...styleState.style,
     59      displayComplainScreen: true,
     60    }))
     61  }
     62
    5663  function showStats() {
    5764    axios.get(`/api/postgre?action=get_stats&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
    … …  
    8794      ...styleState.style,
    8895      displayManageCreditsScreen: true,
     96      displayDepositModal: false,
     97      displayWithdrawModal: false,
    8998    }))
    9099  }
    … …  
    144153              <>
    145154                <li onClick={() => {manageCredits()}}>Manage Credits</li>
    146                 <li onClick={() => {showStats()}}>Stats</li>
     155                <li onClick={() => {showStats()}}>Statistics</li>
     156                <li onClick={() => {complain()}}>Complain</li>
    147157                <li onClick={() => {logout()}}>Logout</li>
    148158              </>

  • components/ManageCredits.jsx

    r1df3fde r433e0c5  
    1515    const dispatch = useDispatch();
    1616
    17     function close() {
     17    function close(action = '') {
    1818        dispatch(setStyle({
    1919            ...styleState.style,
    2020            displayManageCreditsScreen: false,
     21            displayDepositModal: false,
     22            displayWithdrawModal: false,
     23            depositModalInputs: {
     24                name: '',
     25                card: '',
     26                expire: '',
     27                ccv: '',
     28                amount: '',
     29            },
     30            displayWithdrawModal: false,
     31            withdrawModalInputs: {
     32                citibank: '',
     33                iban: '',
     34                bic: '',
     35                beneficiary: '',
     36                address: '',
     37                amount: '',
     38            },
     39            inlineAlertText: '',
     40            notification: action === 'deposit' ? {
     41                show: true,
     42                text: `Deposited $${styleState.style.depositModalInputs.amount} successfully`,
     43                status: 'success',
     44            } : action === 'withdraw' ? {
     45                show: true,
     46                text: `Withdrawed $${styleState.style.withdrawModalInputs.amount} successfully`,
     47                status: 'success',
     48            } : {
     49                show: false,
     50                text: '',
     51                status: ''
     52            },
     53        }))
     54    }
     55
     56   
     57    function openDepositModal() {
     58        dispatch(setStyle({
     59            ...styleState.style,
     60            displayDepositModal: true,
     61            displayWithdrawModal: false,
     62            inlineAlertText: '',
     63        }))
     64    }
     65
     66    function openWithdrawModal() {
     67        dispatch(setStyle({
     68            ...styleState.style,
     69            displayDepositModal: false,
     70            displayWithdrawModal: true,
     71            inlineAlertText: '',
    2172        }))
    2273    }
    2374
    2475    function buyCredits() {
    25         axios.get(`/api/postgre/?action=add_credits&session_id=${localStorage.CAESSINO_SESSION_ID}&credits=${500}&dont_update_stats=true`).then(res => {
    26             if (res.data?.success) {
    27                 dispatch(setPlayer({
    28                     ...playerState.player,
    29                     credits: res.data.credits,
    30                 }))
    31             }
    32         });
     76        axios.post(`/api/postgre`, {
     77            action: 'deposit',
     78            session_id: localStorage.CAESSINO_SESSION_ID,
     79            data: styleState.style.depositModalInputs
     80        })
     81            .then(res => {
     82                if (res.data?.success) {
     83                    dispatch(setPlayer({
     84                        ...playerState.player,
     85                        credits: res.data.credits,
     86                    }))
     87
     88                    close('deposit');
     89                }
     90                else {
     91                    dispatch(setStyle({
     92                        ...styleState.style,
     93                        displayManageCreditsScreen: true,
     94                        inlineAlertText: res.data?.message,
     95                    }));
     96                }
     97            })
     98    }
     99
     100    function sellCredits() {
     101        axios.post(`/api/postgre`, {
     102            action: 'withdraw',
     103            session_id: localStorage.CAESSINO_SESSION_ID,
     104            data: styleState.style.withdrawModalInputs
     105        })
     106            .then(res => {
     107                if (res.data?.success) {
     108                    dispatch(setPlayer({
     109                        ...playerState.player,
     110                        credits: res.data.credits,
     111                    }))
     112
     113                    close('withdraw');
     114                }
     115                else {
     116                    dispatch(setStyle({
     117                        ...styleState.style,
     118                        displayManageCreditsScreen: true,
     119                        inlineAlertText: res.data?.message,
     120                    }));
     121                }
     122            })
    33123    }
    34124
    … …  
    37127            <AiOutlineClose onClick={() => close()} style={{position: 'absolute', top: '20px', right: '20px'}}/>
    38128            <div>
    39                 <h1>Manage Credits:</h1>
    40                 <p>You currently have: ${playerState.player.credits}</p>
    41129                <div>
    42                     <button className="primaryButton" onClick={() => buyCredits()}>Buy Credits</button>
     130                    <h2>Manage (In-Game) Credits:</h2>
     131                    <p>You currently have: ${playerState.player.credits}</p>
     132                </div>
     133                <div className="main">
     134                    <div>
     135                        { styleState.style.displayDepositModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
     136                        { !styleState.style.displayDepositModal && <button className="primaryButton" onClick={() => openDepositModal()}>Deposit From Credit Card<br/><span>Buy (In-Game) Credits</span></button> }
     137                        { styleState.style.displayDepositModal && (
     138                            <div className="fs-inputs-container">
     139                                <div>
     140                                    <label>Name and Surname</label>
     141                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'name')}} value={styleState.style.depositModalInputs.name} placeholder="John Doe"/>
     142                                    <label>Card Number</label>
     143                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'card')}} value={styleState.style.depositModalInputs.card} placeholder="2333 9298 9821 1111"/>
     144                                    <label>Expire Date</label>
     145                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'expire')}} value={styleState.style.depositModalInputs.expire} placeholder="07/24"/>
     146                                    <label>CCV</label>
     147                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'ccv')}} value={styleState.style.depositModalInputs.ccv} placeholder="337"/>
     148                                    <label><span>Amount</span></label>
     149                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'amount')}} value={styleState.style.depositModalInputs.amount} placeholder="500"/>
     150                                    <button className="primaryButton" onClick={() => buyCredits()}>Deposit</button>
     151                                </div>
     152                            </div>
     153                        )}
     154                    </div>
     155                    <div>
     156                        { styleState.style.displayWithdrawModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
     157                        { !styleState.style.displayWithdrawModal && <button className="primaryButton" onClick={() => openWithdrawModal()}>Withdraw To Personal Account<br/><span>Sell (In-Game) Credits</span></button> }
     158                        { styleState.style.displayWithdrawModal && (
     159                            <div className="fs-inputs-container">
     160                                <div>
     161                                    <label>Bank name</label>
     162                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'citibank')}} value={styleState.style.withdrawModalInputs.citibank} placeholder="Swedbank"/>
     163                                    <label>IBAN</label>
     164                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'iban')}} value={styleState.style.withdrawModalInputs.iban} placeholder="SE45 5000 0000 0583 9825 7466"/>
     165                                    <label>BIC</label>
     166                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'bic')}} value={styleState.style.withdrawModalInputs.bic} placeholder="SWEDSESSXXX"/>
     167                                    <label>Beneficiary Name</label>
     168                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'beneficiary')}} value={styleState.style.withdrawModalInputs.beneficiary} placeholder="John Doe"/>
     169                                    <label>Bank Address</label>
     170                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'address')}} value={styleState.style.withdrawModalInputs.address} placeholder="Landsvägen 40, Sundbyberg"/>
     171                                    <label><span>Amount</span></label>
     172                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'amount')}} value={styleState.style.withdrawModalInputs.amount} placeholder="500"/>
     173                                    <button className="primaryButton" onClick={() => sellCredits()}>Withdraw</button>
     174                                </div>
     175                            </div>
     176                        )}
     177                    </div>
    43178                </div>
    44179            </div>
    45180        </div>
    46181    )
     182
     183    function onChangeDeposit(e, what) {
     184        dispatch(setStyle({
     185            ...styleState.style,
     186            depositModalInputs: {
     187                name: what === 'name' ? e.target.value : styleState.style.depositModalInputs.name,
     188                card: what === 'card' ? e.target.value : styleState.style.depositModalInputs.card,
     189                expire: what === 'expire' ? e.target.value : styleState.style.depositModalInputs.expire,
     190                ccv: what === 'ccv' ? e.target.value : styleState.style.depositModalInputs.ccv,
     191                amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
     192            }
     193        }))
     194    }
     195
     196    function onChangeWithdraw(e, what) {
     197        dispatch(setStyle({
     198            ...styleState.style,
     199            withdrawModalInputs: {
     200                citibank: what === 'citibank' ? e.target.value : styleState.style.depositModalInputs.citibank,
     201                iban: what === 'iban' ? e.target.value : styleState.style.depositModalInputs.iban,
     202                bic: what === 'bic' ? e.target.value : styleState.style.depositModalInputs.bic,
     203                beneficiary: what === 'beneficiary' ? e.target.value : styleState.style.depositModalInputs.beneficiary,
     204                address: what === 'address' ? e.target.value : styleState.style.depositModalInputs.address,
     205                amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
     206            }
     207        }))
     208    }
    47209}
    48210

  • components/blackjack/Blackjack.jsx

    r1df3fde r433e0c5  
    1010import Alert from '../Alert'
    1111import Notification from '../Notification'
     12import LostConnection from '../LostConnection'
    1213
    1314const Blackjack = () => {
    … …  
    3132
    3233      <Notification/>
     34
     35      <LostConnection/>
    3336    </div>
    3437  )

  • components/poker/Poker.jsx

    r1df3fde r433e0c5  
    88import Notification from '../Notification'
    99import PokerSections from './PokerSections'
     10import LostConnection from '../LostConnection'
    1011
    1112const Poker = () => {
    … …  
    2526
    2627      <Notification/>
     28
     29      <LostConnection/>
    2730    </div>
    2831  )

  • components/poker/PokerHeader.jsx

    r1df3fde r433e0c5  
    1010import { useDispatch, useSelector } from 'react-redux'
    1111
    12 import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
     12import { setPlayer, setPokerGame } from '../../redux/reducers/playerSlice'
    1313import { setStyle } from '../../redux/reducers/styleSlice'
    1414
    … …  
    3636                if (interval !== null) clearInterval(interval);
    3737
    38                 dispatch(setPlayer({
    39                     ...playerState.player,
    40                     displayName: res.data?.displayName,
    41                     session_id: res.data?.session_id,
    42                     credits: res.data?.credits,
    43                 }));
    44 
    45                 dispatch(setStyle({
    46                     ...styleState.style,
    47                     displayLoadingScreen: false,
    48                 }))
    49 
    5038                interval = setInterval(() => {
    5139                    axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
    … …  
    5644                                dispatch(setPlayer({
    5745                                    ...playerState.player,
     46                                    displayName: res.data?.displayName,
     47                                    session_id: res.data?.session_id,
    5848                                    credits: newRes.data?.pokerGame?.player?.credits,
    5949                                }))
    6050                            }
    6151                        }
     52
     53                        dispatch(setStyle({
     54                            ...styleState.style,
     55                            displayLoadingScreen: false,
     56                            notification: {
     57                                ...styleState.style.notification,
     58                                show: false,
     59                            },
     60                            lostConnectionInfo: {
     61                                show: false,
     62                                message: ''
     63                            }
     64                        }))
     65                    }).catch(error => {
     66                        dispatch(setStyle({
     67                            ...styleState.style,
     68                            displayLoadingScreen: false,
     69                            lostConnectionInfo: {
     70                                show: true,
     71                                message: 'Game will be played until the end upon server gets live. You cannot continue your game, but the money earned / lost will be updated.'
     72                            }
     73                        }))
    6274                    });
    63                 }, 2000);
     75                }, 1000);
    6476            }
    6577            else {

  • components/poker/PokerSections.jsx

    r1df3fde r433e0c5  
    11import React from 'react'
    22
    3 import Cards from './sections/Cards'
    43import CardsInTheMiddle from './sections/CardsInTheMiddle'
    54import Chairs from './sections/Chairs'
    … …  
    87import PickATable from './sections/PickATable'
    98
    10 import { useSelector, useDispatch } from 'react-redux'
     9import { useSelector } from 'react-redux'
    1110import Pot from './sections/Pot'
    1211import RaiseModal from './sections/RaiseModal'
    … …  
    2120
    2221          <Chairs/>
    23 
    24           <Cards/>
    2522
    2623          <CardsInTheMiddle/>

  • components/poker/sections/PickATable.jsx

    r1df3fde r433e0c5  
    66
    77import axios from 'axios';
    8 import { setPokerGame } from '../../../redux/reducers/playerSlice';
    98
    109const PickATable = () => {

  • components/roulette/BetModal.jsx

    r1df3fde r433e0c5  
    88
    99import axios from 'axios';
    10 import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
    1110
    1211const BetModal = () => {

  • components/roulette/Roulette.jsx

    r1df3fde r433e0c5  
    88import Notification from '../Notification'
    99import Sections from './Sections'
     10import LostConnection from '../LostConnection'
    1011
    1112const Roulette = () => {
    … …  
    2526
    2627      <Notification/>
     28
     29      <LostConnection/>
    2730    </div>
    2831  )

  • components/roulette/RouletteHeader.jsx

    r1df3fde r433e0c5  
    7979                                dispatch(setPlayer({
    8080                                    ...playerState.player,
     81                                    displayName: res.data?.displayName,
     82                                    session_id: res.data?.session_id,
    8183                                    credits: newRes.data?.rouletteGame?.player?.credits,
    8284                                }))
    8385                            }
    8486                        }
     87
     88                        if (newRes.data?.extraAction && newRes.data?.extraAction !== "spin_wheel") {
     89                            dispatch(setStyle({
     90                                ...styleState.style,
     91                                displayLoadingScreen: false,
     92                                notification: {
     93                                    ...styleState.style.notification,
     94                                    show: false,
     95                                },
     96                                lostConnectionInfo: {
     97                                    show: false,
     98                                    message: ''
     99                                }
     100                            }))
     101                        }
     102                    }).catch(error => {
     103                        dispatch(setStyle({
     104                            ...styleState.style,
     105                            displayLoadingScreen: false,
     106                            lostConnectionInfo: {
     107                                show: true,
     108                                message: 'Game will resume upon reconnection to the server.'
     109                            }
     110                        }))
    85111                    });
    86112                }, 1000);
    … …  
    97123                    showCoin: false,
    98124                }));
    99 
    100                 dispatch(setStyle({
    101                     ...styleState.style,
    102                     displayLoadingScreen: false,
    103                 }))
    104125            }
    105126            else {

  • components/roulette/Timer.jsx

    r1df3fde r433e0c5  
    11import React from 'react'
    22
    3 import { useEffect } from 'react';
    4 import { useDispatch, useSelector } from 'react-redux'
    5 import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
    6 
    7 import axios from 'axios';
    8 import { setRoulette, setStyle } from '../../redux/reducers/styleSlice';
     3import { useSelector } from 'react-redux'
    94
    105const Timer = () => {
    11     const dispatch = useDispatch();
    12 
    136    const playerState = useSelector(state => state.player);
    14     const styleState = useSelector(state => state.style);
    157
    168    function getTimer() {
Note: See TracChangeset for help on using the changeset viewer.