Changeset d0ef259 for components


Ignore:
Timestamp:
07/12/22 00:13:20 (23 months ago)
Author:
anastasovv <simon@…>
Branches:
main
Children:
e9f11ac
Parents:
95ce58b
Message:

Roulette rethought with 1 second update calls

Location:
components/roulette
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • components/roulette/Ball.jsx

    r95ce58b rd0ef259  
    55const Ball = () => {
    66    const playerState = useSelector(state => state.player);
    7     const styleState = useSelector(state => state.style);
    87
    98    return (
    109        <>
    11             { (playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM || playerState.rouletteGame.timeToStart <= 0) &&
     10            { (playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM || playerState.rouletteGame.game.timeToStart <= 0) &&
    1211                <img id="rouletteBall" src="/images/roulette-ball.png" alt="Roulette ball"/>
    1312            }

  • components/roulette/BetModal.jsx

    r95ce58b rd0ef259  
    3030
    3131    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                 }));
     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()}&coinPlacedX=${styleState.roulette.coinPlaced.x}&coinPlacedY=${styleState.roulette.coinPlaced.y}`);
    3833
    39                 dispatch(setRouletteGame(res.data?.game));
    40 
    41                 closeModal(false);
    42             }
    43         });
     34        closeModal();
    4435    }
    4536
    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         }
     37    function closeModal() {
     38        dispatch(setRoulette({
     39            ...styleState.roulette,
     40            displays: {
     41                ...styleState.roulette.displays,
     42                betModal: false,
     43            },
     44        }));
    6745    }
    6846
    6947    return (
    70         <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal && playerState.rouletteGame.timeToStart > 10 ? 'flex' : 'none'}}>
     48        <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'}}>
    7149            <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>
    7250            <div>

  • components/roulette/BetsImage.jsx

    r95ce58b rd0ef259  
    2525        let clicked = getClickedArray(xOffset, singleX, yOffset, singleY);
    2626
    27         if (clicked.length > 0 && playerState.rouletteGame.status.substr(1, 1) === '1') {
    28           const playerIdx = playerState.rouletteGame.players.map(e=>e.session_id).indexOf(localStorage.CAESSINO_SESSION_ID);
    29           if (playerIdx !== -1 && playerState.rouletteGame.players[playerIdx].status.substr(1, 1) === '1') {
     27        if (clicked.length > 0 && playerState.rouletteGame.game.status.includes("_1_")) {
     28          if (playerState.rouletteGame.player.status.includes("_1_")) {
    3029            openModal(clicked, e);
    3130          }

  • components/roulette/CoinOnTable.jsx

    r95ce58b rd0ef259  
    44
    55const CoinOnTable = () => {
    6     const styleState = useSelector(state => state.style);
     6    const playerState = useSelector(state => state.player);
    77
    88    return (
    99        <>
    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%)'}}/>}
     10            {playerState.rouletteGame?.player.coinPlaced.x && playerState.rouletteGame.player.coinPlaced.x !== -1 && <img id="coinOnTable" src="/gold-coin.cur" alt="Gold coin" style={{zIndex: 20, position: 'absolute', left: `${playerState.rouletteGame.player.coinPlaced.x}px`, top: `${playerState.rouletteGame.player.coinPlaced.y}px`, transform: 'translate(-50%, -50%)'}}/>}
    1111        </>
    1212    )

  • components/roulette/PlayersDisplay.jsx

    r95ce58b rd0ef259  
    55const PlayersDisplay = () => {
    66    const playerState = useSelector(state => state.player);
    7     const styleState = useSelector(state => state.style);
    87
    98    // See results.
    10     if (playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM) {
     9    if (playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM) {
    1110        return (
    1211            <div className="roulettePlayersContainer">
    … …  
    1413                    <p>Winners:</p>
    1514                    <hr/>
    16                     {playerState.rouletteGame?.players.map((player, i) => (
     15                    {playerState.rouletteGame?.game.players.map((player, i) => (
    1716                        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>
    1817                    ))}
    … …  
    2120                    <p>Losers:</p>
    2221                    <hr/>
    23                     {playerState.rouletteGame?.players.map((player, i) => (
     22                    {playerState.rouletteGame?.game.players.map((player, i) => (
    2423                        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>
    2524                    ))}
    … …  
    3534                    <p>Online:</p>
    3635                    <hr/>
    37                     {playerState.rouletteGame?.players.map((player, i) => (
     36                    {playerState.rouletteGame?.game.players.map((player, i) => (
    3837                        player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span>
    3938                    ))}
    … …  
    4241                    <p>Betted:</p>
    4342                    <hr/>
    44                     {playerState.rouletteGame?.players.map((player, i) => (
     43                    {playerState.rouletteGame?.game.players.map((player, i) => (
    4544                        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>
    4645                    ))}

  • components/roulette/RouletteHeader.jsx

    r95ce58b rd0ef259  
    2424
    2525    useEffect(() => {
     26        function spin_wheel(magicNumber, winningBets) {
     27            document.getElementById('rouletteWheelImg').classList.add('spin');
     28   
     29            setTimeout(() => {
     30                document.getElementById('rouletteWheelImg').classList.remove('spin');
     31   
     32                const extraSpin = ( 5 + numbersOfWheel.indexOf(playerState.rouletteGame.game?.magicNumber) * (360 / 37.0) ) + 'deg';
     33                document.getElementById('rouletteWheelImg').style.transform = `translate(-50%, -50%) rotateZ(${extraSpin})`;
     34   
     35                setTimeout(() => {
     36                    dispatch(setStyle({
     37                        ...styleState.style,
     38                        alert: {
     39                            show: true,
     40                            title: `Winning number: ${magicNumber}`,
     41                            subtitle: `Winning bets: [${winningBets.join(', ')}]`,
     42                            button: {
     43                                text: 'Continue',
     44                                action: '',
     45                            }
     46                        }
     47                    }))
     48                }, 2000);
     49            }, 4000);
     50        }
     51
    2652        // display loading screen
    2753        dispatch(setStyle({
    … …  
    2955            displayLoadingScreen: true,
    3056        }));
     57
     58        let interval = null;
    3159
    3260        axios.get(`/api/roulette?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
    … …  
    3967                }));
    4068
    41                 dispatch(setRouletteGame(res.data?.game));
     69                interval = setInterval(() => {
     70                    axios.get(`/api/roulette?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
     71                        if (newRes.data?.success) {
     72                            dispatch(setRouletteGame(newRes.data?.rouletteGame));
     73
     74                            if (newRes.data?.extraAction === "spin_wheel") {
     75                                spin_wheel(newRes.data.magicNumber ?? -1, newRes.data.winningBets ?? -1);
     76                            }
     77
     78                            if (newRes.data?.rouletteGame?.player?.credits !== playerState.player.credits && newRes.data?.rouletteGame?.player?.credits > 0) {
     79                                dispatch(setPlayer({
     80                                    ...playerState.player,
     81                                    credits: newRes.data?.rouletteGame?.player?.credits,
     82                                }))
     83                            }
     84                        }
     85                    });
     86                }, 1000);
    4287
    4388                dispatch(setRoulette({
    … …  
    91136}
    92137
     138// 10 starts from 5deg
     139const 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];
     140
    93141export default RouletteHeader

  • components/roulette/Timer.jsx

    r95ce58b rd0ef259  
    1414    const styleState = useSelector(state => state.style);
    1515
    16     useEffect(() => {
    17         let interval = setInterval(() => {
    18             dispatch(setRouletteGame({
    19                 ...playerState.rouletteGame,
    20                 timeToStart: playerState.rouletteGame.timeToStart - 1,
    21             }))
     16    function getTimer() {
     17        const timer = playerState.rouletteGame.game.timeToStart;
    2218
    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                 });
    79             }
    80         }, 1000);
    81 
    82         return () => clearInterval(interval);
    83     }, [dispatch, playerState.rouletteGame.timeToStart, playerState.rouletteGame]);
    84 
    85     function getTimer() {
    86         const timer = playerState.rouletteGame.timeToStart;
    87 
    88         const timeString = (timer < 0 || timer > styleState.roulette.COUNTDOWN_FROM - 2) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
     19        const timeString = (timer < 0 || timer > playerState.rouletteGame.game.COUNTDOWN_FROM - 2) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
    8920
    9021        return timeString;
    … …  
    9324    return (
    9425        <div className="rouletteTimer">
    95             {playerState.rouletteGame.timeToStart > 0 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Wheel will spin in:</span>}
     26            {playerState.rouletteGame.game.timeToStart > 0 && playerState.rouletteGame.game.timeToStart <= playerState.rouletteGame.game.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Wheel will spin in:</span>}
    9627           
    9728            <span>{getTimer()}</span>
    9829
    99             {playerState.rouletteGame.timeToStart > 10 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Make your bets.</span>}
     30            {playerState.rouletteGame.game.timeToStart > 10 && playerState.rouletteGame.game.timeToStart <= playerState.rouletteGame.game.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Make your bets.</span>}
    10031
    101             {playerState.rouletteGame.timeToStart <= 10 && <span style={{fontSize: '1rem'}}>Betting time is over.</span>}
     32            {playerState.rouletteGame.game.timeToStart <= 10 && <span style={{fontSize: '1rem'}}>Betting time is over.</span>}
    10233
    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>}
     34            {playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM && <span style={{fontSize: '1rem'}}>Time to see who won :)</span>}
     35            {playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM && <span style={{fontSize: '.7rem'}}>(And prepare, you can bet again soon.)</span>}
    10536        </div>
    10637    )
    10738}
    10839
    109 // 10 starts from 5deg
    110 const 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 
    11240export default Timer
Note: See TracChangeset for help on using the changeset viewer.