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