source: components/poker/PokerHeader.jsx@ e903234

main
Last change on this file since e903234 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: 4.7 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 { setPlayer, setPokerGame } from '../../redux/reducers/playerSlice'
13import { setStyle } from '../../redux/reducers/styleSlice'
14
15import axios from 'axios';
16
17const PokerHeader = () => {
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 // display loading screen
27 dispatch(setStyle({
28 ...styleState.style,
29 displayLoadingScreen: true,
30 }));
31
32 let interval = null;
33
34 axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
35 if (res.data?.success) {
36 dispatch(setPlayer({
37 ...playerState.player,
38 displayName: res.data?.displayName,
39 username: res.data?.username,
40 session_id: res.data?.session_id,
41 credits: res.data?.credits,
42 }))
43
44 if (interval !== null) clearInterval(interval);
45
46 interval = setInterval(() => {
47 axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
48 if (newRes.data?.success) {
49 dispatch(setPokerGame(newRes.data?.pokerGame))
50
51 if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits > 0) {
52 dispatch(setPlayer({
53 ...playerState.player,
54 displayName: res.data?.displayName,
55 session_id: res.data?.session_id,
56 credits: newRes.data?.pokerGame?.player?.credits,
57 }))
58 }
59 }
60
61 dispatch(setStyle({
62 ...styleState.style,
63 displayLoadingScreen: false,
64 notification: {
65 ...styleState.style.notification,
66 show: false,
67 },
68 lostConnectionInfo: {
69 show: false,
70 message: ''
71 }
72 }))
73 }).catch(error => {
74 dispatch(setStyle({
75 ...styleState.style,
76 displayLoadingScreen: false,
77 lostConnectionInfo: {
78 show: true,
79 message: 'Game will be played until the end upon server gets live. You cannot continue your game, but the money earned / lost will be updated.'
80 }
81 }))
82 });
83 }, 1000);
84 }
85 else {
86 dispatch(setStyle({
87 ...styleState.style,
88 notification: {
89 show: true,
90 text: 'Please login in order to play poker.',
91 status: 'error',
92 },
93 displayLoadingScreen: false,
94 }))
95
96 router.push('/');
97 }
98 });
99
100 return () => {
101 if (interval !== null) clearInterval(interval);
102 };
103 }, [])
104
105 function leaveTable() {
106 axios.get(`/api/poker?action=leave_table&session_id=${localStorage.CAESSINO_SESSION_ID}`);
107 }
108
109 return (
110 <header className="header">
111 <div style={{display: 'flex', alignItems: 'center'}}>
112 <Link href="/" passHref>
113 <h2>
114 <AiOutlineArrowLeft />
115 </h2>
116 </Link>
117 { playerState.pokerGame?.player?.table?.length > 0 && <button style={{marginBottom: '4px', marginLeft: '32px', fontSize: '16px'}} className="tertiaryButton" onClick={() => leaveTable()}>Leave Table</button> }
118 </div>
119 <nav>
120 <ul>
121 <li>Hi, {playerState?.player?.displayName}</li>
122 <li>Balance: ${playerState?.player?.credits}</li>
123 </ul>
124 </nav>
125 </header>
126 )
127}
128
129export default PokerHeader
Note: See TracBrowser for help on using the repository browser.