Changeset ace7865 for components/roulette
- Timestamp:
- 06/25/22 11:30:19 (2 years ago)
- Branches:
- main
- Children:
- b13f93b
- Parents:
- 9bd09b0
- Location:
- components/roulette
- Files:
-
- 8 edited
Legend:
- Unmodified
- Added
- Removed
-
components/roulette/BetModal.jsx
r9bd09b0 race7865 52 52 betModal: false, 53 53 }, 54 coinPlaced: { 55 x: 0, 56 y: 0 57 } 54 showCoin: false, 58 55 })) 59 56 } … … 64 61 ...styleState.roulette.displays, 65 62 betModal: false, 66 } 63 }, 64 showCoin: true, 67 65 })); 68 66 } … … 70 68 71 69 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'}}> 73 71 <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> 74 72 <div> -
components/roulette/BetsImage.jsx
r9bd09b0 race7865 50 50 return ( 51 51 <> 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)}/> 53 53 </> 54 54 ) -
components/roulette/CoinOnTable.jsx
r9bd09b0 race7865 8 8 return ( 9 9 <> 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%)'}}/>} 11 11 </> 12 12 ) -
components/roulette/PlayersDisplay.jsx
r9bd09b0 race7865 5 5 const PlayersDisplay = () => { 6 6 const playerState = useSelector(state => state.player); 7 const styleState = useSelector(state => state.style); 7 8 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> 16 27 </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> 23 48 </div> 24 </div>25 )49 ) 50 } 26 51 } 27 52 -
components/roulette/Roulette.jsx
r9bd09b0 race7865 22 22 <Loading/> 23 23 24 <Alert />24 <Alert onTop="true"/> 25 25 26 26 <Notification/> -
components/roulette/RouletteHeader.jsx
r9bd09b0 race7865 49 49 chosenCredits: parseInt(res.data?.credits/2), 50 50 } 51 } 51 }, 52 showCoin: false, 52 53 })); 53 54 … … 56 57 displayLoadingScreen: false, 57 58 })) 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 }68 59 } 69 60 else { -
components/roulette/Sections.jsx
r9bd09b0 race7865 17 17 <CoinOnTable/> 18 18 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%)'}}/> 20 20 21 21 <PlayersDisplay/> -
components/roulette/Timer.jsx
r9bd09b0 race7865 3 3 import { useEffect } from 'react'; 4 4 import { useDispatch, useSelector } from 'react-redux' 5 import { set RouletteGame } from '../../redux/reducers/playerSlice';5 import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice'; 6 6 7 7 import axios from 'axios'; 8 import { setRoulette, setStyle } from '../../redux/reducers/styleSlice'; 8 9 9 10 const Timer = () => { … … 11 12 12 13 const playerState = useSelector(state => state.player); 14 const styleState = useSelector(state => state.style); 13 15 14 16 useEffect(() => { … … 19 21 })) 20 22 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 }); 23 79 } 24 80 }, 1000); … … 27 83 }, [dispatch, playerState.rouletteGame.timeToStart, playerState.rouletteGame]); 28 84 29 function updateTimer() {85 function getTimer() { 30 86 const timer = playerState.rouletteGame.timeToStart; 31 87 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); 33 89 34 90 return timeString; … … 37 93 return ( 38 94 <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>} 40 105 </div> 41 106 ) 42 107 } 43 108 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 44 112 export default Timer
Note:
See TracChangeset
for help on using the changeset viewer.