[22367db] | 1 | /* eslint-disable @next/next/no-html-link-for-pages */
|
---|
[9bd09b0] | 2 | import React from 'react'
|
---|
| 3 |
|
---|
| 4 | import Link from 'next/link'
|
---|
| 5 |
|
---|
[b13f93b] | 6 | import { useRouter } from 'next/router'
|
---|
| 7 |
|
---|
[9bd09b0] | 8 | import { AiOutlineArrowLeft } from 'react-icons/ai'
|
---|
| 9 |
|
---|
[b13f93b] | 10 | import { useEffect } from 'react'
|
---|
[9bd09b0] | 11 | import { useDispatch, useSelector } from 'react-redux'
|
---|
| 12 |
|
---|
[433e0c5] | 13 | import { setPlayer, setPokerGame } from '../../redux/reducers/playerSlice'
|
---|
[b13f93b] | 14 | import { setStyle } from '../../redux/reducers/styleSlice'
|
---|
| 15 |
|
---|
| 16 | import axios from 'axios';
|
---|
| 17 |
|
---|
[9bd09b0] | 18 | const PokerHeader = () => {
|
---|
[b13f93b] | 19 | const dispatch = useDispatch();
|
---|
| 20 |
|
---|
| 21 | const router = useRouter();
|
---|
| 22 |
|
---|
[9bd09b0] | 23 | const playerState = useSelector(state => state.player);
|
---|
| 24 | const styleState = useSelector(state => state.style);
|
---|
| 25 |
|
---|
[3a783f2] | 26 | useEffect(() => {
|
---|
[b13f93b] | 27 | // display loading screen
|
---|
| 28 | dispatch(setStyle({
|
---|
| 29 | ...styleState.style,
|
---|
| 30 | displayLoadingScreen: true,
|
---|
| 31 | }));
|
---|
| 32 |
|
---|
[189cd8f] | 33 | let interval = null;
|
---|
[b13f93b] | 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) {
|
---|
[e007fcd] | 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 |
|
---|
[189cd8f] | 45 | if (interval !== null) clearInterval(interval);
|
---|
| 46 |
|
---|
[3a783f2] | 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 |
|
---|
[22367db] | 52 | if (newRes.data?.pokerGame?.player?.credits !== playerState.player.credits && newRes.data?.pokerGame?.player?.credits >= 0) {
|
---|
[3a783f2] | 53 | dispatch(setPlayer({
|
---|
| 54 | ...playerState.player,
|
---|
[433e0c5] | 55 | displayName: res.data?.displayName,
|
---|
| 56 | session_id: res.data?.session_id,
|
---|
[3a783f2] | 57 | credits: newRes.data?.pokerGame?.player?.credits,
|
---|
| 58 | }))
|
---|
| 59 | }
|
---|
| 60 | }
|
---|
[433e0c5] | 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 | }))
|
---|
[3a783f2] | 83 | });
|
---|
[433e0c5] | 84 | }, 1000);
|
---|
[b13f93b] | 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 | });
|
---|
[55701f0] | 100 |
|
---|
| 101 | return () => {
|
---|
| 102 | if (interval !== null) clearInterval(interval);
|
---|
| 103 | };
|
---|
[3a783f2] | 104 | }, [])
|
---|
| 105 |
|
---|
| 106 | function leaveTable() {
|
---|
| 107 | axios.get(`/api/poker?action=leave_table&session_id=${localStorage.CAESSINO_SESSION_ID}`);
|
---|
| 108 | }
|
---|
[b13f93b] | 109 |
|
---|
[9bd09b0] | 110 | return (
|
---|
| 111 | <header className="header">
|
---|
[3a783f2] | 112 | <div style={{display: 'flex', alignItems: 'center'}}>
|
---|
[22367db] | 113 | <a href="/">
|
---|
[3a783f2] | 114 | <h2>
|
---|
| 115 | <AiOutlineArrowLeft />
|
---|
| 116 | </h2>
|
---|
[22367db] | 117 | </a>
|
---|
[189cd8f] | 118 | { playerState.pokerGame?.player?.table?.length > 0 && <button style={{marginBottom: '4px', marginLeft: '32px', fontSize: '16px'}} className="tertiaryButton" onClick={() => leaveTable()}>Leave Table</button> }
|
---|
[3a783f2] | 119 | </div>
|
---|
[9bd09b0] | 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 |
|
---|
| 130 | export default PokerHeader |
---|