1 | import React from 'react'
|
---|
2 |
|
---|
3 | import Link from 'next/link'
|
---|
4 |
|
---|
5 | import { useRouter } from 'next/router'
|
---|
6 |
|
---|
7 | import { useState, useEffect } from 'react'
|
---|
8 | import { useDispatch, useSelector } from 'react-redux'
|
---|
9 |
|
---|
10 | import { setPlayer } from '../redux/reducers/playerSlice'
|
---|
11 | import { setStyle } from '../redux/reducers/styleSlice'
|
---|
12 |
|
---|
13 | import axios from 'axios';
|
---|
14 |
|
---|
15 | const Header = () => {
|
---|
16 | const dispatch = useDispatch();
|
---|
17 |
|
---|
18 | const playerState = useSelector(state => state.player);
|
---|
19 | const styleState = useSelector(state => state.style);
|
---|
20 |
|
---|
21 | function register() {
|
---|
22 | dispatch(setStyle({
|
---|
23 | ...styleState.style,
|
---|
24 | displayRegisterScreen: true,
|
---|
25 | }))
|
---|
26 | }
|
---|
27 |
|
---|
28 | function login() {
|
---|
29 | dispatch(setStyle({
|
---|
30 | ...styleState.style,
|
---|
31 | displayLoginScreen: true,
|
---|
32 | }))
|
---|
33 | }
|
---|
34 |
|
---|
35 | function logout() {
|
---|
36 | axios.get(`/api/postgre?action=logout&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
|
---|
37 | if (res.data?.success) {
|
---|
38 | localStorage.removeItem('CAESSINO_SESSION_ID');
|
---|
39 | dispatch(setPlayer({
|
---|
40 | displayName: '',
|
---|
41 | username: '',
|
---|
42 | session_id: '',
|
---|
43 | room_id: '',
|
---|
44 | credits: 0,
|
---|
45 | }))
|
---|
46 | }
|
---|
47 | })
|
---|
48 | }
|
---|
49 |
|
---|
50 | function showStats() {
|
---|
51 | axios.get(`/api/postgre?action=get_stats&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
|
---|
52 | if (res.data?.success) {
|
---|
53 | dispatch(setStyle({
|
---|
54 | ...styleState.style,
|
---|
55 | displayStatsScreen: true,
|
---|
56 | statsScreenInfo: {
|
---|
57 | money: {
|
---|
58 | ...styleState.style.statsScreenInfo.money,
|
---|
59 | earned: res.data.stats.money_earned,
|
---|
60 | },
|
---|
61 | blackjack: {
|
---|
62 | ...styleState.style.statsScreenInfo.blackjack,
|
---|
63 | wins: res.data.stats.blackjack_won_games,
|
---|
64 | },
|
---|
65 | roulette: {
|
---|
66 | ...styleState.style.statsScreenInfo.roulette,
|
---|
67 | wins: res.data.stats.roulette_won_games,
|
---|
68 | },
|
---|
69 | poker: {
|
---|
70 | ...styleState.style.statsScreenInfo.poker,
|
---|
71 | wins: res.data.stats.poker_won_games,
|
---|
72 | }
|
---|
73 | }
|
---|
74 | }))
|
---|
75 | }
|
---|
76 | })
|
---|
77 | }
|
---|
78 |
|
---|
79 | function manageCredits() {
|
---|
80 | dispatch(setStyle({
|
---|
81 | ...styleState.style,
|
---|
82 | displayManageCreditsScreen: true,
|
---|
83 | }))
|
---|
84 | }
|
---|
85 |
|
---|
86 | useEffect(() => {
|
---|
87 | if (playerState.player.displayName === '') {
|
---|
88 | dispatch(setStyle({
|
---|
89 | ...styleState.style,
|
---|
90 | displayLoadingScreen: true
|
---|
91 | }));
|
---|
92 |
|
---|
93 | let success = false;
|
---|
94 |
|
---|
95 | if (localStorage?.CAESSINO_SESSION_ID && localStorage.CAESSINO_SESSION_ID.length > 0) {
|
---|
96 | axios.get(`/api/postgre?action=check_if_logged_in&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
|
---|
97 | if (res.data?.success) {
|
---|
98 | success = true;
|
---|
99 |
|
---|
100 | dispatch(setPlayer({
|
---|
101 | ...playerState.player,
|
---|
102 | displayName: res.data?.displayName,
|
---|
103 | sesssion_id: res.data?.session_id,
|
---|
104 | credits: res.data?.credits,
|
---|
105 | }));
|
---|
106 | }
|
---|
107 | });
|
---|
108 | }
|
---|
109 |
|
---|
110 | if (!success) {
|
---|
111 | dispatch(setPlayer({
|
---|
112 | ...playerState.player,
|
---|
113 | displayName: 'Guest',
|
---|
114 | }))
|
---|
115 | dispatch(setStyle({
|
---|
116 | ...styleState.style,
|
---|
117 | displayLoadingScreen: false,
|
---|
118 | }))
|
---|
119 | }
|
---|
120 | }
|
---|
121 | }, [dispatch, playerState.player, styleState.style]);
|
---|
122 |
|
---|
123 | return (
|
---|
124 | <header className="header">
|
---|
125 | <Link href="/" passHref>
|
---|
126 | <div className="logo">
|
---|
127 |
|
---|
128 | </div>
|
---|
129 | </Link>
|
---|
130 | <nav>
|
---|
131 | <ul>
|
---|
132 | {playerState.player.displayName === '' || playerState.player.displayName === 'Guest' ? (
|
---|
133 | <>
|
---|
134 | <li onClick={() => {register()}}>Register</li>
|
---|
135 | <li onClick={() => {login()}}>Login</li>
|
---|
136 | </>
|
---|
137 | ) : (
|
---|
138 | <>
|
---|
139 | <li onClick={() => {manageCredits()}}>Manage Credits</li>
|
---|
140 | <li onClick={() => {showStats()}}>Stats</li>
|
---|
141 | <li onClick={() => {logout()}}>Logout</li>
|
---|
142 | </>
|
---|
143 | )}
|
---|
144 | </ul>
|
---|
145 | </nav>
|
---|
146 | </header>
|
---|
147 | )
|
---|
148 | }
|
---|
149 |
|
---|
150 | export default Header |
---|