Changeset ace7865 for components


Ignore:
Timestamp:
06/25/22 11:30:19 (2 years ago)
Author:
anastasovv <simon@…>
Branches:
main
Children:
b13f93b
Parents:
9bd09b0
Message:

Finished Roulette

Location:
components
Files:
1 added
11 edited

Legend:

Unmodified
Added
Removed

  • components/Alert.jsx

    r9bd09b0 race7865  
    1010import { setBlackjackGame } from '../redux/reducers/playerSlice'
    1111
    12 const Alert = () => {
     12const Alert = ({ onTop = false }) => {
    1313    const playerState = useSelector(state => state.player)
    1414    const styleState = useSelector(state => state.style)
    … …  
    7575
    7676    return (
    77         <div className="alert" style={{display: display}}>
     77        <div className="alert" style={{display: display, top: `${onTop ? '35vh' : '50vh'}`}}>
    7878            <h1>{styleState.style.alert.title}</h1>
    7979            <h3>{styleState.style.alert.subtitle}</h3>

  • components/LoginScreen.jsx

    r9bd09b0 race7865  
    7777        axios.post(`/api/postgre`, {
    7878            action: 'login',
    79             username: 'drama',
    80             password: 'drama'
    81             // username: styleState.style.loginScreenInfo.username,
    82             // password: styleState.style.loginScreenInfo.password,
     79            // username: 'drama',
     80            // password: 'drama'
     81            username: styleState.style.loginScreenInfo.username,
     82            password: styleState.style.loginScreenInfo.password,
    8383        })
    8484            .then(res => {
    8585                if (res.data?.success) {
    8686                    localStorage.CAESSINO_SESSION_ID = res.data?.session?.id;
    87                     dispatch(setStyle({
    88                         ...styleState.style,
    89                         displayLoginScreen: false,
    90                     }));
    9187
    9288                    dispatch(setPlayer({
    … …  
    111107                            status: 'success',
    112108                        },
     109                        inlineAlertText: '',
    113110                    }));
    114111                }

  • components/poker/Poker.jsx

    r9bd09b0 race7865  
    77import Alert from '../Alert'
    88import Notification from '../Notification'
     9import PokerSections from './PokerSections'
    910
    1011const Poker = () => {
    … …  
    1415        <title>Caessino - Poker</title>
    1516      </Head>
     17
     18      <PokerSections/>
    1619
    1720      <PokerHeader/>

  • components/roulette/BetModal.jsx

    r9bd09b0 race7865  
    5252                  betModal: false,
    5353                },
    54                 coinPlaced: {
    55                   x: 0,
    56                   y: 0
    57                 }
     54                showCoin: false,
    5855              }))
    5956        }
    … …  
    6461                    ...styleState.roulette.displays,
    6562                    betModal: false,
    66                 }
     63                },
     64                showCoin: true,
    6765            }));
    6866        }
    … …  
    7068
    7169    return (
    72         <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal ? 'flex' : 'none'}}>
     70        <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal && playerState.rouletteGame.timeToStart > 10 ? 'flex' : 'none'}}>
    7371            <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>
    7472            <div>

  • components/roulette/BetsImage.jsx

    r9bd09b0 race7865  
    5050    return (
    5151        <>
    52             <img id="rouletteBetsImg" src="/images/roulette-bets.png" alt="Roulette bets" onClick={(e) => selectWhichBet(e)} style={{zIndex: 10}}/>
     52            <img id="rouletteBetsImg" src="/images/roulette-bets.png" alt="Roulette bets" onClick={(e) => selectWhichBet(e)}/>
    5353        </>
    5454    )

  • components/roulette/CoinOnTable.jsx

    r9bd09b0 race7865  
    88    return (
    99        <>
    10             {styleState.roulette.coinPlaced.x !== 0 && <img id="coinOnTable" src="/gold-coin.cur" alt="Gold coin" style={{zIndex: 20, position: 'absolute', left: `${styleState.roulette.coinPlaced.x}px`, top: `${styleState.roulette.coinPlaced.y}px`, transform: 'translate(-50%, -50%)'}}/>}
     10            {styleState.roulette.showCoin && <img id="coinOnTable" src="/gold-coin.cur" alt="Gold coin" style={{zIndex: 20, position: 'absolute', left: `${styleState.roulette.coinPlaced.x}px`, top: `${styleState.roulette.coinPlaced.y}px`, transform: 'translate(-50%, -50%)'}}/>}
    1111        </>
    1212    )

  • components/roulette/PlayersDisplay.jsx

    r9bd09b0 race7865  
    55const PlayersDisplay = () => {
    66    const playerState = useSelector(state => state.player);
     7    const styleState = useSelector(state => state.style);
    78
    8     return (
    9         <div className="roulettePlayersContainer">
    10             <div>
    11                 <p>Online:</p>
    12                 <hr/>
    13                 {playerState.rouletteGame?.players.map((player, i) => (
    14                     player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span>
    15                 ))}
     9    // See results.
     10    if (playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM) {
     11        return (
     12            <div className="roulettePlayersContainer">
     13                <div>
     14                    <p>Winners:</p>
     15                    <hr/>
     16                    {playerState.rouletteGame?.players.map((player, i) => (
     17                        player.betAmount > 0 && player.outcome === 'won' ? <p key={player + i}>{player.name} <span style={{color: '#ead24d'}}>[{player.whichBets.toString()}]</span></p> : <span key={player + i}></span>
     18                    ))}
     19                </div>
     20                <div>
     21                    <p>Losers:</p>
     22                    <hr/>
     23                    {playerState.rouletteGame?.players.map((player, i) => (
     24                        player.betAmount > 0 && player.outcome === 'lost' ? <p key={player + i}>{player.name} <span style={{color: '#ead24d'}}>[{player.whichBets.toString()}]</span></p> : <span key={player + i}></span>
     25                    ))}
     26                </div>
    1627            </div>
    17             <div>
    18                 <p>Betted:</p>
    19                 <hr/>
    20                 {playerState.rouletteGame?.players.map((player, i) => (
    21                     player.status.substr(1, 1) === '2' ? <p key={player + i}>{player.name} <span style={{color: '#ead24d'}}>[{player.whichBets.toString()}]</span> ${player.betAmount}</p> : <span key={player + i}></span>
    22                 ))}
     28        )
     29    }
     30    // See who betted.
     31    else {
     32        return (
     33            <div className="roulettePlayersContainer">
     34                <div>
     35                    <p>Online:</p>
     36                    <hr/>
     37                    {playerState.rouletteGame?.players.map((player, i) => (
     38                        player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span>
     39                    ))}
     40                </div>
     41                <div>
     42                    <p>Betted:</p>
     43                    <hr/>
     44                    {playerState.rouletteGame?.players.map((player, i) => (
     45                        player.status.substr(1, 1) === '2' ? <p key={player + i}>{player.name} <span style={{color: '#ead24d'}}>[{player.whichBets.toString()}]</span></p> : <span key={player + i}></span>
     46                    ))}
     47                </div>
    2348            </div>
    24         </div>
    25   )
     49        )
     50    }
    2651}
    2752

  • components/roulette/Roulette.jsx

    r9bd09b0 race7865  
    2222      <Loading/>
    2323
    24       <Alert/>
     24      <Alert onTop="true"/>
    2525
    2626      <Notification/>

  • components/roulette/RouletteHeader.jsx

    r9bd09b0 race7865  
    4949                            chosenCredits: parseInt(res.data?.credits/2),
    5050                        }
    51                     }
     51                    },
     52                    showCoin: false,
    5253                }));
    5354
    … …  
    5657                    displayLoadingScreen: false,
    5758                }))
    58 
    59 
    60                 if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 3) {
    61                 }
    62 
    63                 if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 2) {
    64                 }
    65 
    66                 if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 1) {
    67                 }
    6859            }
    6960            else {

  • components/roulette/Sections.jsx

    r9bd09b0 race7865  
    1717        <CoinOnTable/>
    1818
    19         <img id="rouletteWheelImg" src="/images/roulette-wheel.png" alt="Roulette wheel"/>
     19        <img id="rouletteWheelImg" src="/images/roulette-wheel.png" alt="Roulette wheel" style={{transform: 'translate(-50%, -50%)'}}/>
    2020
    2121        <PlayersDisplay/>

  • components/roulette/Timer.jsx

    r9bd09b0 race7865  
    33import { useEffect } from 'react';
    44import { useDispatch, useSelector } from 'react-redux'
    5 import { setRouletteGame } from '../../redux/reducers/playerSlice';
     5import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
    66
    77import axios from 'axios';
     8import { setRoulette, setStyle } from '../../redux/reducers/styleSlice';
    89
    910const Timer = () => {
    … …  
    1112
    1213    const playerState = useSelector(state => state.player);
     14    const styleState = useSelector(state => state.style);
    1315
    1416    useEffect(() => {
    … …  
    1921            }))
    2022
    21             if (playerState.rouletteGame.timeToStart == 0) {
    22                
     23            if (playerState.rouletteGame.timeToStart === 0) {
     24                axios.get(`/api/roulette?action=timer_done&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
     25                    if (res.data?.success) {
     26                        document.getElementById('rouletteWheelImg').classList.add('spin');
     27
     28                        setTimeout(() => {
     29                            document.getElementById('rouletteWheelImg').classList.remove('spin');
     30
     31                            const extraSpin = ( 5 + numbersOfWheel.indexOf(res.data?.magicNumber) * (360 / 37.0) ) + 'deg';
     32                            document.getElementById('rouletteWheelImg').style.transform = `translate(-50%, -50%) rotateZ(${extraSpin})`;
     33
     34                            setTimeout(() => {
     35                                dispatch(setStyle({
     36                                    ...styleState.style,
     37                                    alert: {
     38                                        show: true,
     39                                        title: `Winning number: ${res.data?.magicNumber}`,
     40                                        subtitle: `Winning bets: [${res.data?.winningBets.join(', ')}]`,
     41                                        button: {
     42                                            text: 'Continue',
     43                                            action: '',
     44                                        }
     45                                    }
     46                                }))
     47                               
     48                                dispatch(setPlayer({
     49                                    ...playerState.player,
     50                                    credits: res.data?.credits,
     51                                }))
     52
     53                                dispatch(setRouletteGame(res.data?.game));
     54                            }, 600);
     55                        }, 4000);
     56                    }
     57                });
     58            }
     59            else if (playerState.rouletteGame.timeToStart === 10) {
     60                dispatch(setRoulette({
     61                    ...styleState.roulette,
     62                    displays: {
     63                        ...styleState.roulette.displays,
     64                        betModal: false,
     65                    }
     66                }))
     67            }
     68            else if (playerState.rouletteGame.timeToStart === styleState.roulette.COUNTDOWN_FROM) {
     69                axios.get(`/api/roulette?action=reset_game&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
     70                    if (res.data?.success) {
     71                        dispatch(setRouletteGame(res.data?.game));
     72
     73                        dispatch(setRoulette({
     74                            ...styleState.roulette,
     75                            showCoin: false,
     76                        }))
     77                    }
     78                });
    2379            }
    2480        }, 1000);
    … …  
    2783    }, [dispatch, playerState.rouletteGame.timeToStart, playerState.rouletteGame]);
    2884
    29     function updateTimer() {
     85    function getTimer() {
    3086        const timer = playerState.rouletteGame.timeToStart;
    3187
    32         const timeString = (timer < 0 || timer > 90) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
     88        const timeString = (timer < 0 || timer > styleState.roulette.COUNTDOWN_FROM - 2) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
    3389
    3490        return timeString;
    … …  
    3793    return (
    3894        <div className="rouletteTimer">
    39             <span>{updateTimer()}</span>
     95            {playerState.rouletteGame.timeToStart > 0 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Wheel will spin in:</span>}
     96           
     97            <span>{getTimer()}</span>
     98
     99            {playerState.rouletteGame.timeToStart > 10 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Make your bets.</span>}
     100
     101            {playerState.rouletteGame.timeToStart <= 10 && <span style={{fontSize: '1rem'}}>Betting time is over.</span>}
     102
     103            {playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM && <span style={{fontSize: '1rem'}}>Time to see who won :)</span>}
     104            {playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM && <span style={{fontSize: '.7rem'}}>(And prepare, you can bet again soon.)</span>}
    40105        </div>
    41106    )
    42107}
    43108
     109// 10 starts from 5deg
     110const numbersOfWheel = [10, 23, 8, 30, 11, 36, 13, 27, 6, 34, 17, 25, 2, 21, 4, 19, 15, 32, 0, 26, 3, 35, 12, 28, 7, 29, 18, 22, 9, 31, 14, 20, 1, 33, 16, 24, 5];
     111
    44112export default Timer
Note: See TracChangeset for help on using the changeset viewer.