Changeset b13f93b for components

Timestamp:

07/03/22 22:59:15 (2 years ago)

Author:

anastasovv <simon@…>

Branches:

main

Children:

3a783f2

Parents:

ace7865

Message:

Made poker tables system and round 1

Location:

components

Files:

• FreeflowCard.jsx (added)
• LoginScreen.jsx (modified) (1 diff)
• Notification.jsx (modified) (1 diff)
• poker/PokerHeader.jsx (modified) (1 diff)
• poker/PokerSections.jsx (modified) (1 diff)
• poker/sections/Cards.jsx (added)
• poker/sections/CardsInTheMiddle.jsx (added)
• poker/sections/Chairs.jsx (added)
• poker/sections/Messages.jsx (added)
• poker/sections/PickATable.jsx (added)
• poker/sections/PlayButtons.jsx (added)

components/LoginScreen.jsx

@@ -77 +77 @@
         axios.post(`/api/postgre`, {
             action: 'login',
-            // username: 'drama',
-            // password: 'drama'
             username: styleState.style.loginScreenInfo.username,
             password: styleState.style.loginScreenInfo.password,

components/Notification.jsx

@@ -24 +24 @@
     }
 
+    if (styleState.style.notification.show === true) {
+        setTimeout(() => {
+            close();
+        }, 3000);
+    }
+
     return (
         <div className="notification" style={{display: display, backgroundColor: bg}}>

components/poker/PokerHeader.jsx

@@ -3 +3 @@
 import Link from 'next/link'
 
+import { useRouter } from 'next/router'
+
 import { AiOutlineArrowLeft } from 'react-icons/ai'
 
+import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
+import { setStyle } from '../../redux/reducers/styleSlice'
+
+import axios from 'axios';
+
 const PokerHeader = () => {
+    const dispatch = useDispatch();
+
+    const router = useRouter();
+
     const playerState = useSelector(state => state.player);
     const styleState = useSelector(state => state.style);
+
+    useEffect(() => async function() {
+        // display loading screen
+        dispatch(setStyle({
+            ...styleState.style,
+            displayLoadingScreen: true,
+        }));
+
+        let interval = setInterval(() => {
+            axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+                if (res.data?.success) {
+                    dispatch(setPokerGame(res.data?.pokerGame))
+                }
+            });
+        }, 3000);
+
+        axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+            if (res.data?.success) {
+                dispatch(setPlayer({
+                    ...playerState.player,
+                    displayName: res.data?.displayName,
+                    session_id: res.data?.session_id,
+                    credits: res.data?.credits,
+                }));
+
+                dispatch(setStyle({
+                    ...styleState.style,
+                    displayLoadingScreen: false,
+                }))
+            }
+            else {
+                dispatch(setStyle({
+                    ...styleState.style,
+                    notification: {
+                        show: true,
+                        text: 'Please login in order to play poker.',
+                        status: 'error',
+                    },
+                    displayLoadingScreen: false,
+                }))
+
+                router.push('/');
+            }
+        });
+        
+        return () => clearInterval(interval);
+    }, [playerState.pokerGame.player.table])
 
     return (

components/poker/PokerSections.jsx

@@ -1 +1 @@
 import React from 'react'
 
+import Cards from './sections/Cards'
+import CardsInTheMiddle from './sections/CardsInTheMiddle'
+import Chairs from './sections/Chairs'
+import Messages from './sections/Messages'
+import PlayButtons from './sections/PlayButtons'
+import PickATable from './sections/PickATable'
+
+import { useSelector, useDispatch } from 'react-redux'
+
 const PokerSections = () => {
-  return (
-    <div>
-        
-    </div>
-  )
+  const playerState = useSelector(state => state.player);
+
+  if (playerState.pokerGame.player.table.length > 0) {
+    return (
+      <>
+          <Messages/>
+
+          <Chairs/>
+
+          <Cards/>
+
+          <CardsInTheMiddle/>
+
+          <PlayButtons/>
+      </>
+    )
+  }
+  else {
+    return (
+      <>
+        <PickATable/>
+      </>
+    )
+  }
 }