source: components/roulette/RouletteHeader.jsx@ 1df3fde

main
Last change on this file since 1df3fde was d0ef259, checked in by anastasovv <simon@…>, 2 years ago

Roulette rethought with 1 second update calls

  • Property mode set to 100644
File size: 5.0 KB
Line 
1import React from 'react'
2
3import Link from 'next/link'
4
5import { useRouter } from 'next/router'
6
7import { AiOutlineArrowLeft } from 'react-icons/ai'
8
9import { useEffect } from 'react'
10import { useDispatch, useSelector } from 'react-redux'
11
12import { setRouletteGame, setPlayer } from '../../redux/reducers/playerSlice'
13import { setRoulette, setStyle } from '../../redux/reducers/styleSlice'
14
15import axios from 'axios';
16
17const RouletteHeader = () => {
18 const dispatch = useDispatch();
19
20 const router = useRouter();
21
22 const playerState = useSelector(state => state.player);
23 const styleState = useSelector(state => state.style);
24
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
52 // display loading screen
53 dispatch(setStyle({
54 ...styleState.style,
55 displayLoadingScreen: true,
56 }));
57
58 let interval = null;
59
60 axios.get(`/api/roulette?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
61 if (res.data?.success) {
62 dispatch(setPlayer({
63 ...playerState.player,
64 displayName: res.data?.displayName,
65 session_id: res.data?.session_id,
66 credits: res.data?.credits,
67 }));
68
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);
87
88 dispatch(setRoulette({
89 ...styleState.roulette,
90 inputControls: {
91 ...styleState.roulette.inputControls,
92 bet: {
93 ...styleState.roulette.inputControls.bet,
94 chosenCredits: parseInt(res.data?.credits/2),
95 }
96 },
97 showCoin: false,
98 }));
99
100 dispatch(setStyle({
101 ...styleState.style,
102 displayLoadingScreen: false,
103 }))
104 }
105 else {
106 dispatch(setStyle({
107 ...styleState.style,
108 notification: {
109 show: true,
110 text: 'Please login in order to play roulette.',
111 status: 'error',
112 },
113 displayLoadingScreen: false,
114 }))
115
116 router.push('/');
117 }
118 });
119 }, []);
120
121 return (
122 <header className="header">
123 <Link href="/" passHref>
124 <h2>
125 <AiOutlineArrowLeft />
126 </h2>
127 </Link>
128 <nav>
129 <ul>
130 <li>Hi, {playerState?.player?.displayName}</li>
131 <li>Balance: ${playerState?.player?.credits}</li>
132 </ul>
133 </nav>
134 </header>
135 )
136}
137
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
141export default RouletteHeader
Note: See TracBrowser for help on using the repository browser.