Changeset d0ef259 for components/roulette

Timestamp:

07/12/22 00:13:20 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

e9f11ac

Parents:

95ce58b

Message:

Roulette rethought with 1 second update calls

Location:

components/roulette

Files:

• Ball.jsx (modified) (1 diff)
• BetModal.jsx (modified) (1 diff)
• BetsImage.jsx (modified) (1 diff)
• CoinOnTable.jsx (modified) (1 diff)
• PlayersDisplay.jsx (modified) (5 diffs)
• RouletteHeader.jsx (modified) (4 diffs)
• Timer.jsx (modified) (2 diffs)

components/roulette/Ball.jsx

@@ -5 +5 @@
 const Ball = () => {
     const playerState = useSelector(state => state.player);
-    const styleState = useSelector(state => state.style);
 
     return (
         <>
-            { (playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM || playerState.rouletteGame.timeToStart <= 0) &&
+            { (playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM || playerState.rouletteGame.game.timeToStart <= 0) &&
                 <img id="rouletteBall" src="/images/roulette-ball.png" alt="Roulette ball"/>
             }

components/roulette/BetModal.jsx

@@ -30 +30 @@
 
     function placeBet() {
-        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 => {
-            if (res.data?.success) {
-                dispatch(setPlayer({
-                    ...playerState.player,
-                    credits: res.data?.credits,
-                }));
+        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}`);
 
-                dispatch(setRouletteGame(res.data?.game));
-
-                closeModal(false);
-            }
-        });
+        closeModal();
     }
 
-    function closeModal(removeCoin = true) {
-        if (removeCoin) {
-            dispatch(setRoulette({
-                ...styleState.roulette,
-                displays: {
-                  ...styleState.roulette.displays,
-                  betModal: false,
-                },
-                showCoin: false,
-              }))
-        }
-        else {
-            dispatch(setRoulette({
-                ...styleState.roulette,
-                displays: {
-                    ...styleState.roulette.displays,
-                    betModal: false,
-                },
-                showCoin: true,
-            }));
-        }
+    function closeModal() {
+        dispatch(setRoulette({
+            ...styleState.roulette,
+            displays: {
+                ...styleState.roulette.displays,
+                betModal: false,
+            },
+        }));
     }
 
     return (
-        <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal && playerState.rouletteGame.timeToStart > 10 ? 'flex' : 'none'}}>
+        <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'}}>
             <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>
             <div>

components/roulette/BetsImage.jsx

@@ -25 +25 @@
         let clicked = getClickedArray(xOffset, singleX, yOffset, singleY);
 
-        if (clicked.length > 0 && playerState.rouletteGame.status.substr(1, 1) === '1') {
-          const playerIdx = playerState.rouletteGame.players.map(e=>e.session_id).indexOf(localStorage.CAESSINO_SESSION_ID);
-          if (playerIdx !== -1 && playerState.rouletteGame.players[playerIdx].status.substr(1, 1) === '1') {
+        if (clicked.length > 0 && playerState.rouletteGame.game.status.includes("_1_")) {
+          if (playerState.rouletteGame.player.status.includes("_1_")) {
             openModal(clicked, e);
           }

components/roulette/CoinOnTable.jsx

@@ -4 +4 @@
 
 const CoinOnTable = () => {
-    const styleState = useSelector(state => state.style);
+    const playerState = useSelector(state => state.player);
 
     return (
         <>
-            {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%)'}}/>}
+            {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%)'}}/>}
         </>
     )

components/roulette/PlayersDisplay.jsx

@@ -5 +5 @@
 const PlayersDisplay = () => {
     const playerState = useSelector(state => state.player);
-    const styleState = useSelector(state => state.style);
 
     // See results.
-    if (playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM) {
+    if (playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM) {
         return (
             <div className="roulettePlayersContainer">
@@ -14 +13 @@
                     <p>Winners:</p>
                     <hr/>
-                    {playerState.rouletteGame?.players.map((player, i) => (
+                    {playerState.rouletteGame?.game.players.map((player, i) => (
                         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>
                     ))}
@@ -21 +20 @@
                     <p>Losers:</p>
                     <hr/>
-                    {playerState.rouletteGame?.players.map((player, i) => (
+                    {playerState.rouletteGame?.game.players.map((player, i) => (
                         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>
                     ))}
@@ -35 +34 @@
                     <p>Online:</p>
                     <hr/>
-                    {playerState.rouletteGame?.players.map((player, i) => (
+                    {playerState.rouletteGame?.game.players.map((player, i) => (
                         player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span>
                     ))}
@@ -42 +41 @@
                     <p>Betted:</p>
                     <hr/>
-                    {playerState.rouletteGame?.players.map((player, i) => (
+                    {playerState.rouletteGame?.game.players.map((player, i) => (
                         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>
                     ))}

components/roulette/RouletteHeader.jsx

@@ -24 +24 @@
 
     useEffect(() => {
+        function spin_wheel(magicNumber, winningBets) {
+            document.getElementById('rouletteWheelImg').classList.add('spin');
+    
+            setTimeout(() => {
+                document.getElementById('rouletteWheelImg').classList.remove('spin');
+    
+                const extraSpin = ( 5 + numbersOfWheel.indexOf(playerState.rouletteGame.game?.magicNumber) * (360 / 37.0) ) + 'deg';
+                document.getElementById('rouletteWheelImg').style.transform = `translate(-50%, -50%) rotateZ(${extraSpin})`;
+    
+                setTimeout(() => {
+                    dispatch(setStyle({
+                        ...styleState.style,
+                        alert: {
+                            show: true,
+                            title: `Winning number: ${magicNumber}`,
+                            subtitle: `Winning bets: [${winningBets.join(', ')}]`,
+                            button: {
+                                text: 'Continue',
+                                action: '',
+                            }
+                        }
+                    }))
+                }, 2000);
+            }, 4000);
+        }
+
         // display loading screen
         dispatch(setStyle({
@@ -29 +55 @@
             displayLoadingScreen: true,
         }));
+
+        let interval = null;
 
         axios.get(`/api/roulette?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
@@ -39 +67 @@
                 }));
 
-                dispatch(setRouletteGame(res.data?.game));
+                interval = setInterval(() => {
+                    axios.get(`/api/roulette?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
+                        if (newRes.data?.success) {
+                            dispatch(setRouletteGame(newRes.data?.rouletteGame));
+
+                            if (newRes.data?.extraAction === "spin_wheel") {
+                                spin_wheel(newRes.data.magicNumber ?? -1, newRes.data.winningBets ?? -1);
+                            }
+
+                            if (newRes.data?.rouletteGame?.player?.credits !== playerState.player.credits && newRes.data?.rouletteGame?.player?.credits > 0) {
+                                dispatch(setPlayer({
+                                    ...playerState.player,
+                                    credits: newRes.data?.rouletteGame?.player?.credits,
+                                }))
+                            }
+                        }
+                    });
+                }, 1000);
 
                 dispatch(setRoulette({
@@ -91 +136 @@
 }
 
+// 10 starts from 5deg
+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];
+
 export default RouletteHeader

components/roulette/Timer.jsx

@@ -14 +14 @@
     const styleState = useSelector(state => state.style);
 
-    useEffect(() => {
-        let interval = setInterval(() => {
-            dispatch(setRouletteGame({
-                ...playerState.rouletteGame,
-                timeToStart: playerState.rouletteGame.timeToStart - 1,
-            }))
+    function getTimer() {
+        const timer = playerState.rouletteGame.game.timeToStart;
 
-            if (playerState.rouletteGame.timeToStart === 0) {
-                axios.get(`/api/roulette?action=timer_done&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
-                    if (res.data?.success) {
-                        document.getElementById('rouletteWheelImg').classList.add('spin');
-
-                        setTimeout(() => {
-                            document.getElementById('rouletteWheelImg').classList.remove('spin');
-
-                            const extraSpin = ( 5 + numbersOfWheel.indexOf(res.data?.magicNumber) * (360 / 37.0) ) + 'deg';
-                            document.getElementById('rouletteWheelImg').style.transform = `translate(-50%, -50%) rotateZ(${extraSpin})`;
-
-                            setTimeout(() => {
-                                dispatch(setStyle({
-                                    ...styleState.style,
-                                    alert: {
-                                        show: true,
-                                        title: `Winning number: ${res.data?.magicNumber}`,
-                                        subtitle: `Winning bets: [${res.data?.winningBets.join(', ')}]`,
-                                        button: {
-                                            text: 'Continue',
-                                            action: '',
-                                        }
-                                    }
-                                }))
-                                
-                                dispatch(setPlayer({
-                                    ...playerState.player,
-                                    credits: res.data?.credits,
-                                }))
-
-                                dispatch(setRouletteGame(res.data?.game));
-                            }, 600);
-                        }, 4000);
-                    }
-                });
-            }
-            else if (playerState.rouletteGame.timeToStart === 10) {
-                dispatch(setRoulette({
-                    ...styleState.roulette,
-                    displays: {
-                        ...styleState.roulette.displays,
-                        betModal: false,
-                    }
-                }))
-            }
-            else if (playerState.rouletteGame.timeToStart === styleState.roulette.COUNTDOWN_FROM) {
-                axios.get(`/api/roulette?action=reset_game&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
-                    if (res.data?.success) {
-                        dispatch(setRouletteGame(res.data?.game));
-
-                        dispatch(setRoulette({
-                            ...styleState.roulette,
-                            showCoin: false,
-                        }))
-                    }
-                });
-            }
-        }, 1000);
-
-        return () => clearInterval(interval);
-    }, [dispatch, playerState.rouletteGame.timeToStart, playerState.rouletteGame]);
-
-    function getTimer() {
-        const timer = playerState.rouletteGame.timeToStart;
-
-        const timeString = (timer < 0 || timer > styleState.roulette.COUNTDOWN_FROM - 2) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
+        const timeString = (timer < 0 || timer > playerState.rouletteGame.game.COUNTDOWN_FROM - 2) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
 
         return timeString;
@@ -93 +24 @@
     return (
         <div className="rouletteTimer">
-            {playerState.rouletteGame.timeToStart > 0 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Wheel will spin in:</span>}
+            {playerState.rouletteGame.game.timeToStart > 0 && playerState.rouletteGame.game.timeToStart <= playerState.rouletteGame.game.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Wheel will spin in:</span>}
             
             <span>{getTimer()}</span>
 
-            {playerState.rouletteGame.timeToStart > 10 && playerState.rouletteGame.timeToStart <= styleState.roulette.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Make your bets.</span>}
+            {playerState.rouletteGame.game.timeToStart > 10 && playerState.rouletteGame.game.timeToStart <= playerState.rouletteGame.game.COUNTDOWN_FROM - 2 && <span style={{fontSize: '1rem'}}>Make your bets.</span>}
 
-            {playerState.rouletteGame.timeToStart <= 10 && <span style={{fontSize: '1rem'}}>Betting time is over.</span>}
+            {playerState.rouletteGame.game.timeToStart <= 10 && <span style={{fontSize: '1rem'}}>Betting time is over.</span>}
 
-            {playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM && <span style={{fontSize: '1rem'}}>Time to see who won :)</span>}
-            {playerState.rouletteGame.timeToStart > styleState.roulette.COUNTDOWN_FROM && <span style={{fontSize: '.7rem'}}>(And prepare, you can bet again soon.)</span>}
+            {playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM && <span style={{fontSize: '1rem'}}>Time to see who won :)</span>}
+            {playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM && <span style={{fontSize: '.7rem'}}>(And prepare, you can bet again soon.)</span>}
         </div>
     )
 }
 
-// 10 starts from 5deg
-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];
-
 export default Timer