Changeset d0ef259 for components
- Timestamp:
- 07/12/22 00:13:20 (2 years ago)
- Branches:
- main
- Children:
- e9f11ac
- Parents:
- 95ce58b
- Location:
- components/roulette
- Files:
-
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
components/roulette/Ball.jsx
r95ce58b rd0ef259 5 5 const Ball = () => { 6 6 const playerState = useSelector(state => state.player); 7 const styleState = useSelector(state => state.style);8 7 9 8 return ( 10 9 <> 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) && 12 11 <img id="rouletteBall" src="/images/roulette-ball.png" alt="Roulette ball"/> 13 12 } -
components/roulette/BetModal.jsx
r95ce58b rd0ef259 30 30 31 31 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}`); 38 33 39 dispatch(setRouletteGame(res.data?.game)); 40 41 closeModal(false); 42 } 43 }); 34 closeModal(); 44 35 } 45 36 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 })); 67 45 } 68 46 69 47 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'}}> 71 49 <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> 72 50 <div> -
components/roulette/BetsImage.jsx
r95ce58b rd0ef259 25 25 let clicked = getClickedArray(xOffset, singleX, yOffset, singleY); 26 26 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_")) { 30 29 openModal(clicked, e); 31 30 } -
components/roulette/CoinOnTable.jsx
r95ce58b rd0ef259 4 4 5 5 const CoinOnTable = () => { 6 const styleState = useSelector(state => state.style);6 const playerState = useSelector(state => state.player); 7 7 8 8 return ( 9 9 <> 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%)'}}/>} 11 11 </> 12 12 ) -
components/roulette/PlayersDisplay.jsx
r95ce58b rd0ef259 5 5 const PlayersDisplay = () => { 6 6 const playerState = useSelector(state => state.player); 7 const styleState = useSelector(state => state.style);8 7 9 8 // See results. 10 if (playerState.rouletteGame. timeToStart > styleState.roulette.COUNTDOWN_FROM) {9 if (playerState.rouletteGame.game.timeToStart > playerState.rouletteGame.game.COUNTDOWN_FROM) { 11 10 return ( 12 11 <div className="roulettePlayersContainer"> … … 14 13 <p>Winners:</p> 15 14 <hr/> 16 {playerState.rouletteGame?. players.map((player, i) => (15 {playerState.rouletteGame?.game.players.map((player, i) => ( 17 16 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 17 ))} … … 21 20 <p>Losers:</p> 22 21 <hr/> 23 {playerState.rouletteGame?. players.map((player, i) => (22 {playerState.rouletteGame?.game.players.map((player, i) => ( 24 23 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 24 ))} … … 35 34 <p>Online:</p> 36 35 <hr/> 37 {playerState.rouletteGame?. players.map((player, i) => (36 {playerState.rouletteGame?.game.players.map((player, i) => ( 38 37 player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span> 39 38 ))} … … 42 41 <p>Betted:</p> 43 42 <hr/> 44 {playerState.rouletteGame?. players.map((player, i) => (43 {playerState.rouletteGame?.game.players.map((player, i) => ( 45 44 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 45 ))} -
components/roulette/RouletteHeader.jsx
r95ce58b rd0ef259 24 24 25 25 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 26 52 // display loading screen 27 53 dispatch(setStyle({ … … 29 55 displayLoadingScreen: true, 30 56 })); 57 58 let interval = null; 31 59 32 60 axios.get(`/api/roulette?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => { … … 39 67 })); 40 68 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); 42 87 43 88 dispatch(setRoulette({ … … 91 136 } 92 137 138 // 10 starts from 5deg 139 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]; 140 93 141 export default RouletteHeader -
components/roulette/Timer.jsx
r95ce58b rd0ef259 14 14 const styleState = useSelector(state => state.style); 15 15 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; 22 18 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); 89 20 90 21 return timeString; … … 93 24 return ( 94 25 <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>} 96 27 97 28 <span>{getTimer()}</span> 98 29 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>} 100 31 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>} 102 33 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>} 105 36 </div> 106 37 ) 107 38 } 108 39 109 // 10 starts from 5deg110 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 112 40 export default Timer
Note:
See TracChangeset
for help on using the changeset viewer.