source: components/roulette/RouletteHeader.jsx@ faff334

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

Now you need to activate your account via email & also added mail sending after server crash

  • Property mode set to 100644
File size: 6.3 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, useState } 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 displayName: res.data?.displayName,
82 session_id: res.data?.session_id,
83 credits: newRes.data?.rouletteGame?.player?.credits,
84 }))
85 }
86 }
87
88 if (newRes.data?.extraAction !== "spin_wheel" && newRes.data?.extraAction2 !== "keep_alert") {
89 dispatch(setStyle({
90 ...styleState.style,
91 displayLoadingScreen: false,
92 notification: {
93 ...styleState.style.notification,
94 show: false,
95 },
96 lostConnectionInfo: {
97 show: false,
98 message: ''
99 }
100 }))
101 }
102 }).catch(error => {
103 dispatch(setStyle({
104 ...styleState.style,
105 displayLoadingScreen: false,
106 lostConnectionInfo: {
107 show: true,
108 message: 'Game will resume upon reconnection to the server.'
109 }
110 }))
111 });
112 }, 1000);
113
114 dispatch(setRoulette({
115 ...styleState.roulette,
116 inputControls: {
117 ...styleState.roulette.inputControls,
118 bet: {
119 ...styleState.roulette.inputControls.bet,
120 chosenCredits: parseInt(res.data?.credits/2),
121 }
122 },
123 showCoin: false,
124 }));
125 }
126 else {
127 dispatch(setStyle({
128 ...styleState.style,
129 notification: {
130 show: true,
131 text: 'Please login in order to play roulette.',
132 status: 'error',
133 },
134 displayLoadingScreen: false,
135 }))
136
137 router.push('/');
138 }
139 });
140
141 return () => {
142 if (interval !== null) clearInterval(interval);
143 };
144 }, []);
145
146 return (
147 <header className="header">
148 <Link href="/" passHref>
149 <h2>
150 <AiOutlineArrowLeft />
151 </h2>
152 </Link>
153 <nav>
154 <ul>
155 <li>Hi, {playerState?.player?.displayName}</li>
156 <li>Balance: ${playerState?.player?.credits}</li>
157 </ul>
158 </nav>
159 </header>
160 )
161}
162
163// 10 starts from 5deg
164const 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];
165
166export default RouletteHeader
Note: See TracBrowser for help on using the repository browser.