source: components/roulette/RouletteHeader.jsx

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

Added authentication with google

  • Property mode set to 100644
File size: 6.3 KB
Line 
1/* eslint-disable @next/next/no-html-link-for-pages */
2import React from 'react'
3
4import Link from 'next/link'
5
6import { useRouter } from 'next/router'
7
8import { AiOutlineArrowLeft } from 'react-icons/ai'
9
10import { useEffect, useState } from 'react'
11import { useDispatch, useSelector } from 'react-redux'
12
13import { setRouletteGame, setPlayer } from '../../redux/reducers/playerSlice'
14import { setRoulette, setStyle } from '../../redux/reducers/styleSlice'
15
16import axios from 'axios';
17
18const RouletteHeader = () => {
19 const dispatch = useDispatch();
20
21 const router = useRouter();
22
23 const playerState = useSelector(state => state.player);
24 const styleState = useSelector(state => state.style);
25
26 useEffect(() => {
27 function spin_wheel(magicNumber, winningBets) {
28 document.getElementById('rouletteWheelImg').classList.add('spin');
29
30 setTimeout(() => {
31 document.getElementById('rouletteWheelImg').classList.remove('spin');
32
33 const extraSpin = ( 5 + numbersOfWheel.indexOf(playerState.rouletteGame.game?.magicNumber) * (360 / 37.0) ) + 'deg';
34 document.getElementById('rouletteWheelImg').style.transform = `translate(-50%, -50%) rotateZ(${extraSpin})`;
35
36 setTimeout(() => {
37 dispatch(setStyle({
38 ...styleState.style,
39 alert: {
40 show: true,
41 title: `Winning number: ${magicNumber}`,
42 subtitle: `Winning bets: [${winningBets.join(', ')}]`,
43 button: {
44 text: 'Continue',
45 action: '',
46 }
47 }
48 }))
49 }, 2000);
50 }, 4000);
51 }
52
53 // display loading screen
54 dispatch(setStyle({
55 ...styleState.style,
56 displayLoadingScreen: true,
57 }));
58
59 let interval = null;
60
61 axios.get(`/api/roulette?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
62 if (res.data?.success) {
63 dispatch(setPlayer({
64 ...playerState.player,
65 displayName: res.data?.displayName,
66 session_id: res.data?.session_id,
67 credits: res.data?.credits,
68 }));
69
70 interval = setInterval(() => {
71 axios.get(`/api/roulette?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
72 if (newRes.data?.success) {
73 dispatch(setRouletteGame(newRes.data?.rouletteGame));
74
75 if (newRes.data?.extraAction === "spin_wheel") {
76 spin_wheel(newRes.data.magicNumber ?? -1, newRes.data.winningBets ?? -1);
77 }
78
79 if (newRes.data?.rouletteGame?.player?.credits !== playerState.player.credits && newRes.data?.rouletteGame?.player?.credits >= 0) {
80 dispatch(setPlayer({
81 ...playerState.player,
82 displayName: res.data?.displayName,
83 session_id: res.data?.session_id,
84 credits: newRes.data?.rouletteGame?.player?.credits,
85 }))
86 }
87 }
88
89 if (newRes.data?.extraAction !== "spin_wheel" && newRes.data?.extraAction2 !== "keep_alert") {
90 dispatch(setStyle({
91 ...styleState.style,
92 displayLoadingScreen: false,
93 notification: {
94 ...styleState.style.notification,
95 show: false,
96 },
97 lostConnectionInfo: {
98 show: false,
99 message: ''
100 }
101 }))
102 }
103 }).catch(error => {
104 dispatch(setStyle({
105 ...styleState.style,
106 displayLoadingScreen: false,
107 lostConnectionInfo: {
108 show: true,
109 message: 'Game will resume upon reconnection to the server.'
110 }
111 }))
112 });
113 }, 1000);
114
115 dispatch(setRoulette({
116 ...styleState.roulette,
117 inputControls: {
118 ...styleState.roulette.inputControls,
119 bet: {
120 ...styleState.roulette.inputControls.bet,
121 chosenCredits: parseInt(res.data?.credits/2),
122 }
123 },
124 showCoin: false,
125 }));
126 }
127 else {
128 dispatch(setStyle({
129 ...styleState.style,
130 notification: {
131 show: true,
132 text: 'Please login in order to play roulette.',
133 status: 'error',
134 },
135 displayLoadingScreen: false,
136 }))
137
138 router.push('/');
139 }
140 });
141
142 return () => {
143 if (interval !== null) clearInterval(interval);
144 };
145 }, []);
146
147 return (
148 <header className="header">
149 <a href="/">
150 <h2>
151 <AiOutlineArrowLeft />
152 </h2>
153 </a>
154 <nav>
155 <ul>
156 <li>Hi, {playerState?.player?.displayName}</li>
157 <li>Balance: ${playerState?.player?.credits}</li>
158 </ul>
159 </nav>
160 </header>
161 )
162}
163
164// 10 starts from 5deg
165const 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];
166
167export default RouletteHeader
Note: See TracBrowser for help on using the repository browser.