1 | import React from 'react'
|
---|
2 |
|
---|
3 | import Link from 'next/link'
|
---|
4 |
|
---|
5 | import { useRouter } from 'next/router'
|
---|
6 |
|
---|
7 | import { AiOutlineArrowLeft } from 'react-icons/ai'
|
---|
8 |
|
---|
9 | import { useEffect } from 'react'
|
---|
10 | import { useDispatch, useSelector } from 'react-redux'
|
---|
11 |
|
---|
12 | import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
|
---|
13 | import { setStyle } from '../../redux/reducers/styleSlice'
|
---|
14 |
|
---|
15 | import axios from 'axios';
|
---|
16 |
|
---|
17 | const 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(() => async function() {
|
---|
26 | // display loading screen
|
---|
27 | dispatch(setStyle({
|
---|
28 | ...styleState.style,
|
---|
29 | displayLoadingScreen: true,
|
---|
30 | }));
|
---|
31 |
|
---|
32 | let interval = setInterval(() => {
|
---|
33 | axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
|
---|
34 | if (res.data?.success) {
|
---|
35 | dispatch(setPokerGame(res.data?.pokerGame))
|
---|
36 | }
|
---|
37 | });
|
---|
38 | }, 3000);
|
---|
39 |
|
---|
40 | axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
|
---|
41 | if (res.data?.success) {
|
---|
42 | dispatch(setPlayer({
|
---|
43 | ...playerState.player,
|
---|
44 | displayName: res.data?.displayName,
|
---|
45 | session_id: res.data?.session_id,
|
---|
46 | credits: res.data?.credits,
|
---|
47 | }));
|
---|
48 |
|
---|
49 | dispatch(setStyle({
|
---|
50 | ...styleState.style,
|
---|
51 | displayLoadingScreen: false,
|
---|
52 | }))
|
---|
53 | }
|
---|
54 | else {
|
---|
55 | dispatch(setStyle({
|
---|
56 | ...styleState.style,
|
---|
57 | notification: {
|
---|
58 | show: true,
|
---|
59 | text: 'Please login in order to play poker.',
|
---|
60 | status: 'error',
|
---|
61 | },
|
---|
62 | displayLoadingScreen: false,
|
---|
63 | }))
|
---|
64 |
|
---|
65 | router.push('/');
|
---|
66 | }
|
---|
67 | });
|
---|
68 |
|
---|
69 | return () => clearInterval(interval);
|
---|
70 | }, [playerState.pokerGame.player.table])
|
---|
71 |
|
---|
72 | return (
|
---|
73 | <header className="header">
|
---|
74 | <Link href="/" passHref>
|
---|
75 | <h2>
|
---|
76 | <AiOutlineArrowLeft />
|
---|
77 | </h2>
|
---|
78 | </Link>
|
---|
79 | <nav>
|
---|
80 | <ul>
|
---|
81 | <li>Hi, {playerState?.player?.displayName}</li>
|
---|
82 | <li>Balance: ${playerState?.player?.credits}</li>
|
---|
83 | </ul>
|
---|
84 | </nav>
|
---|
85 | </header>
|
---|
86 | )
|
---|
87 | }
|
---|
88 |
|
---|
89 | export default PokerHeader |
---|